Win game logic done

index.html

@@ -35,21 +35,21 @@
         <button id="start">Start</button>
     </div>
 
-    <div class="emoji-picker-container hidden">
+    <div class="emoji-picker-container hidden" tabindex="-1">
-        <emoji-picker class="animate__animated animate__fadeInUp"></emoji-picker>
+        <emoji-picker class="animate__animated animate__fadeInUp" tabindex="-1"></emoji-picker>
-        <div class="emoji-picker-background"></div>
+        <div class="emoji-picker-background" tabindex="-1"></div>
     </div> 
 
-    <div class="game hidden animate__animated">
+    <div class="game hidden animate__animated" tabindex="-1">
-        <div class="box" id="box-1"></div>
+        <div class="box" id="box-1" tabindex="-1"></div>
-        <div class="box" id="box-2"></div>
+        <div class="box" id="box-2" tabindex="-1"></div>
-        <div class="box" id="box-3"></div>
+        <div class="box" id="box-3" tabindex="-1"></div>
-        <div class="box" id="box-4"></div>
+        <div class="box" id="box-4" tabindex="-1"></div>
-        <div class="box" id="box-5"></div>
+        <div class="box" id="box-5" tabindex="-1"></div>
-        <div class="box" id="box-6"></div>
+        <div class="box" id="box-6" tabindex="-1"></div>
-        <div class="box" id="box-7"></div>
+        <div class="box" id="box-7" tabindex="-1"></div>
-        <div class="box" id="box-8"></div>
+        <div class="box" id="box-8" tabindex="-1"></div>
-        <div class="box" id="box-9"></div>
+        <div class="box" id="box-9" tabindex="-1"></div>
     </div>
 </body>
 </html>

script/game-functions/accessToCombinations.js

@@ -0,0 +1,60 @@
+export default function accessToCombinations() {
+    
+    function Combination(indexes) {
+
+        indexes = indexes.map(index => `box-${index}`);
+
+        return indexes
+    }
+
+    function HorizontalCombination(startIndex) {
+
+        const x = startIndex
+
+        const indexes = [x, x + 1, x + 2]
+
+        return Combination(indexes)
+    }
+
+    function VerticalCombination(startIndex) {
+
+        const x = startIndex
+        
+        const indexes = [x, x + 3, x + 6]
+
+        return Combination(indexes)
+    }
+
+    function DiagonalCombination(startIndex) {
+
+        const x = startIndex
+
+        let indexes
+
+        if (x === 1) {
+
+           indexes = [x, 5, 9] 
+        }
+
+        if (x === 3) {
+
+           indexes = [x, 5, 7]
+        }
+
+        return Combination(indexes)
+    }
+
+    const combinations = [
+
+        HorizontalCombination(1),
+        HorizontalCombination(4),
+        HorizontalCombination(7),
+        VerticalCombination(1),
+        VerticalCombination(2),
+        VerticalCombination(3),
+        DiagonalCombination(1),
+        DiagonalCombination(3)
+    ]
+
+    return combinations
+}

script/game-functions/checkInputs.js

@@ -44,4 +44,6 @@ export default function checkInputs() {
 
         return true
     }
+
+    return [inputsPlayer1, inputsPlayer2]
 }

script/game-functions/checkVictory.js

@@ -0,0 +1,13 @@
+export default function checkVictory(combinations, boxes) {
+
+    combinations.forEach(combination => {
+
+        const boxesSorted = boxes.sort()
+            
+        if (boxesSorted[0] === combination[0], boxesSorted[1] === combination[1], boxesSorted[2] === combination[2]) {
+
+            alert('Win')
+        }
+    });
+    
+}

script/game-functions/gameLogic.js

@@ -0,0 +1,52 @@
+import accessToCombinations from "./accessToCombinations.js"
+import checkVictory from "./checkVictory.js"
+
+export default function gameLogic(checkInputsResult) {
+
+    function Player(position) {
+
+        this.name = checkInputsResult[position][0].value
+        this.symbol = checkInputsResult[position][1].value
+        this.markedBoxes = []
+    }
+
+    const player1 = new Player(0)
+    const player2 = new Player(1)
+    const players = [player1, player2]
+
+    const combinations = accessToCombinations()
+
+    let actualPlayer = players[0]
+    let boxesMarked = []
+    
+    const boxes = [...document.getElementsByClassName('box')]
+
+    boxes.forEach(box => {
+
+        box.addEventListener('click', () => {
+
+            if (boxesMarked.includes(box.id)) {
+
+                return
+            }
+
+            box.innerText = actualPlayer.symbol
+            boxesMarked.push(box.id)
+
+            actualPlayer.markedBoxes.push(box.id)
+
+            checkVictory(combinations, actualPlayer.markedBoxes)
+
+            if (players.indexOf(actualPlayer) === 0) {
+
+                actualPlayer = players[1]
+            
+            } else {
+
+                actualPlayer = players[0]
+
+            } 
+
+        })
+    })
+}

script/index.js

@@ -6,6 +6,7 @@ import checkInputs from './game-functions/checkInputs.js'
 import disableEnterInputs from './emoji-picker-functions/disableEnterInputs.js'
 import hidePlayerSelection from './game-functions/hidePlayerSelection.js'
 import showTicTacToe from './game-functions/showTicTacToe.js'
+import gameLogic from './game-functions/gameLogic.js'
 
 function main(game) {
 
@@ -20,13 +21,19 @@ function main(game) {
 
 function game() {
 
-    if(checkInputs()) {
+    const checkInputsResult = checkInputs()
+    
+    console.log(checkInputsResult)
+    
+    if(checkInputsResult && typeof(checkInputsResult) === 'boolean') {
 
         return
     }
     
     hidePlayerSelection()
     showTicTacToe()
+
+    gameLogic(checkInputsResult)
 }
 
 window.onload = () => main(game)