Add game logic

Author: KasenX

css/style.css

@@ -25,6 +25,7 @@ main {
 .square {
     width: auto;
     height: auto;
+    color: white;
     background-color: black;
 }
 

index.html

@@ -28,9 +28,9 @@
                 <div>Player 1 (x)</div>
                 <div>Tie</div>
                 <div>Player 2 (o)</div>
-                <div>4</div>
-                <div>1</div>
-                <div>0</div>
+                <div id="x-wins">0</div>
+                <div id="ties">0</div>
+                <div id="o-wins">0</div>
             </div>
         </main>
 

js/app.js

@@ -1,6 +1,3 @@
-import navigateTo from './navigation.js'; 
+import Game from './game.js';
 
-document.getElementById('gameBtn').addEventListener('click', () => navigateTo('game'));
-document.getElementById('leaderboardBtn').addEventListener('click', () => navigateTo('leaderboard'));
-
-navigateTo('home');
+const game = new Game();

js/game.js

@@ -0,0 +1,83 @@
+export default class Game {
+
+    #state;
+    #board;
+
+    #onTurn = 'X'; // Odd rounds => X starts, even rounds => O starts
+    #xWins = 0;
+    #oWins = 0;
+    #ties = 0;
+
+    constructor() {
+        this.#state = ['', '', '', '', '', '', '', '', ''];
+        this.#board = document.querySelectorAll('.square');
+
+        this.#board.forEach((square, index) => square.addEventListener('click', e => this.#handleClick(e, index)));
+    }
+
+    #handleClick(e, index) {
+        // Square already taken
+        if (this.#state[index] !== '') {
+            return;
+        }
+
+        this.#state[index] = this.#onTurn;
+        e.target.textContent = this.#onTurn;
+        this.#onTurn = this.#onTurn === 'X' ? 'O' : 'X';
+        
+        const winner = this.#checkWinner();
+
+        if (winner !== null) {
+            this.#endRound(winner);
+        }
+    }
+
+    #checkWinner() {
+        const winningCombos = [
+            [0, 1, 2], [3, 4, 5], [6, 7, 8],    // rows
+            [0, 3, 6], [1, 4, 7], [2, 5, 8],    // columns
+            [0, 4, 8], [2, 4, 6]                // diagonals
+        ];
+
+        for (const combo of winningCombos) {
+            const [a, b, c] = combo;
+
+            if (this.#state[a] && this.#state[a] === this.#state[b] && this.#state[a] === this.#state[c]) {
+                return this.#state[a];
+            }
+        }
+
+        // No empty squares without a winner => tie
+        if (!this.#state.includes('')) {
+            return 'T';
+        }
+
+        return null;
+    }
+
+    #endRound(winner) {
+        if (winner === 'T') {
+            this.#ties++;
+        } else if (winner === 'X') {
+            this.#xWins++;
+        } else if (winner === 'O') {
+            this.#oWins++;
+        }
+
+        this.#updateScore();
+        this.#resetBoard();
+    }
+
+    #updateScore() {
+        document.querySelector('#x-wins').textContent = this.#xWins;
+        document.querySelector('#o-wins').textContent = this.#oWins;
+        document.querySelector('#ties').textContent = this.#ties;
+    }
+
+    #resetBoard() {
+        // Even number of rounds => next round is odd => X starts (and vice versa)
+        this.#onTurn = (this.#ties + this.#xWins + this.#oWins) % 2 === 0 ? 'X' : 'O';
+        this.#state = ['', '', '', '', '', '', '', '', ''];
+        this.#board.forEach(square => square.textContent = '');
+    }
+}