feat: allow reset with new game

ravipanchani-tomtom · Oct 13, 2024 · db26905 · db26905
1 parent fedf943
commit db26905
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -7,16 +7,17 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <div id="game">
-        <div id="board">
-            <!-- Board cells will be dynamically generated -->
-        </div>
-        <div id="status"></div>
-        <button id="startGame">Start Game</button>
-        <input type="text" id="connectionId" placeholder="Enter Connection ID">
-        <button id="joinGame">Join Game</button>
+<div id="game">
+    <div id="board">
+        <!-- Board cells will be dynamically generated -->
     </div>
-    <script src="peerjs.min.js"></script>
-    <script src="popup.js"></script>
+    <div id="status"></div>
+    <button id="startGame">Start Game</button>
+    <input type="text" id="connectionId" placeholder="Enter Connection ID">
+    <button id="joinGame">Join Game</button>
+    <button id="resetGame">Reset Game</button> <!-- New Reset Game button -->
+</div>
+<script src="peerjs.min.js"></script>
+<script src="popup.js"></script>
 </body>
 </html>
diff --git a/popup.js b/popup.js
@@ -9,6 +9,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const statusElement = document.getElementById('status');
     const startGameButton = document.getElementById('startGame');
     const joinGameButton = document.getElementById('joinGame');
+    const resetGameButton = document.getElementById('resetGame');
     const connectionIdInput = document.getElementById('connectionId');
 
     function initializeBoard() {
@@ -56,6 +57,17 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    function resetGame() {
+        board = Array(9).fill(null);
+        currentPlayer = 'X';
+        isMyTurn = currentPlayer === 'X'; // Set the initial turn
+        updateBoard();
+        statusElement.textContent = `Player ${currentPlayer}'s turn`;
+        if (conn) {
+            conn.send({ board, currentPlayer, reset: true });
+        }
+    }
+
     startGameButton.addEventListener('click', () => {
         const id = peer.id;
         statusElement.textContent = `Your ID: ${id}`;
@@ -71,25 +83,43 @@ document.addEventListener('DOMContentLoaded', () => {
             isMyTurn = false;
             currentPlayer = 'O';
             conn.on('data', (data) => {
-                board = data.board;
-                currentPlayer = data.currentPlayer === 'X' ? 'O' : 'X';
-                updateBoard();
-                checkGameStatus();
-                isMyTurn = true;
+                if (data.reset) {
+                    board = data.board;
+                    currentPlayer = data.currentPlayer;
+                    updateBoard();
+                    statusElement.textContent = `Player ${currentPlayer}'s turn`;
+                    isMyTurn = currentPlayer === 'O';
+                } else {
+                    board = data.board;
+                    currentPlayer = data.currentPlayer === 'X' ? 'O' : 'X';
+                    updateBoard();
+                    checkGameStatus();
+                    isMyTurn = true;
+                }
             });
         });
     });
 
     peer.on('connection', (connection) => {
         conn = connection;
         conn.on('data', (data) => {
-            board = data.board;
-            currentPlayer = data.currentPlayer === 'X' ? 'O' : 'X';
-            updateBoard();
-            checkGameStatus();
-            isMyTurn = true;
+            if (data.reset) {
+                board = data.board;
+                currentPlayer = data.currentPlayer;
+                updateBoard();
+                statusElement.textContent = `Player ${currentPlayer}'s turn`;
+                isMyTurn = currentPlayer === 'O';
+            } else {
+                board = data.board;
+                currentPlayer = data.currentPlayer === 'X' ? 'O' : 'X';
+                updateBoard();
+                checkGameStatus();
+                isMyTurn = true;
+            }
         });
     });
 
+    resetGameButton.addEventListener('click', resetGame);
+
     initializeBoard();
 });