Merge pull request #135 from tharinduj31/dev-branch

Reset Board button doesn't reset the table everytime (wierd and glitchy). #45

CONTRIBUTING.md

@@ -0,0 +1,70 @@
+# Introduction
+## Project Name : Tic-Tac-Toe
+
+## Introduction
+
+Tic-Tac-Toe, a classic game of strategy and wit, pits two players against each other or against Computer in a battle for victory. With a simple grid and Xs and Os as markers, players strive to align three of their symbols in a row, testing their tactical skills and foresight.
+
+## Issue #45- [Reset Board button doesn't reset the table everytime (wierd and glitchy)](https://github.com/yelynn1/tictactoe/issues/45)
+
+## Fork Repo Link - https://github.com/tharinduj31/tictactoe/tree/dev-branch
+
+## Pull Request - https://github.com/yelynn1/tictactoe/pull/135
+
+When pressing the Reset Board button for the first time, it resets the game, and the AI plays first. Pressing it again allows you to play first, and pressing it a third time chooses a random player. Essentially, the button isn't functioning as intended; it should only reset the board.
+
+To fix this bug, two separate buttons needs to be added. One button selects whether X or O plays first. For example, pressing the button for X resets the game, and X (the AI) places its symbol first. The same applies to the button for O.
+
+### Detailed discussion of issue examined
+
+* Button Implementation: Two buttons ("Play O first" and "Play X first") are added to HTML.
+* Functionality: JavaScript functions handle button clicks, reset board, and randomize the starting player.
+* Code Clarity: The code is structured and clear, improving maintainability and readability.
+
+## Code
+
+HTML Buttons:
+
+Two HTML buttons are defined with IDs 'selectXButton' and 'selectOButton'. These buttons allow the user to choose to play as either X or O.
+
+```
+<button id="selectXButton" onclick="selectFirstPlayer('X')">Play O first</button>
+<button id="selectOButton" onclick="selectFirstPlayer('O')">Play X first</button>
+ ```
+
+JavaScript Functions:
+
+selectFirstPlayer Function:
+
+```
+const selectFirstPlayer = (symbol) => {
+    reset_board(symbol);
+}
+```
+
+ This function is triggered when one of the buttons ("Play as X" or "Play as O") is clicked. It takes a symbol ('X' or 'O') as a parameter and initiates the game by resetting the board with the selected first player.
+
+ reset_board1 Function:
+
+``` 
+const reset_board1 = (firstPlayer) => {
+    // Resetting game board and related elements
+    // Clearing previous game state
+    // Setting up the game for a new match
+}
+```
+This function determines the starting player based on the user's choice and initiates the game.
+
+Steps:
+
+* Check if Game Board is Empty: Ensures that the game board is empty before determining the starting player.
+* Handling First Player Preference: If firstPlayer parameter is provided (either 'X' or 'O'), the function sets the starting player accordingly.
+* Initiating the Game: Calls functions such as showPlayer or addComputerMove to start the game with the chosen starting player.
+
+## Code review and Outcomes:
+
+To be done. 
+
+## Reflection
+
+By implementing separate buttons for selecting the starting player and modifying the code to handle the user's choice, I have effectively addressed the issue of inconsistent behavior in the game's starting player selection. The code now allows users to explicitly choose whether they want to play as X or O, ensuring clarity and consistency in the game initialization process. This modification enhances the user experience and eliminates the need for unnecessary randomization. 

app.js

@@ -360,6 +360,49 @@ const reset_board = () => {
         mute_sound_btn.parentNode.removeChild(mute_sound_btn); //delete the button when reseting the board
 }
 
+/Reset board according to player choice/ 
+
+const selectFirstPlayer = (symbol) => {
+    reset_board1(symbol);
+}
+
+const reset_board1 = (firstPlayer) => {
+    const winner_statement = document.getElementById("winner");
+    play_board = ["", "", "", "", "", "", "", "", ""];
+    board_full = false;
+    winner_statement.classList.remove("playerWin");
+    winner_statement.classList.remove("computerWin");
+    winner_statement.classList.remove("draw");
+    winner_statement.innerText = "";
+    document.querySelector("#ai_level").disabled = false;
+    render_board();
+    setStartingPlayer(firstPlayer);
+
+    var mute_sound_btn = document.getElementsByClassName("btn-sound")[0];
+    if (mute_sound_btn != undefined)
+        mute_sound_btn.parentNode.removeChild(mute_sound_btn); //delete the button when resetting the board
+}
+
+const setStartingPlayer = (firstPlayer) => {
+    if (play_board.every(item => item === "")) {
+        if (firstPlayer === 'X') {
+            if (gameMode == 1) {
+                showPlayer(1, 1); // Assuming showPlayer function takes parameters for player and symbol
+            } else {
+                showPlayer(2, 1); // Assuming showPlayer function takes parameters for player and symbol
+            }
+            console.log("PLAYER STARTS");
+        } else if (firstPlayer === 'O') {
+            if (gameMode == 1) {
+                addComputerMove(ai_level);
+            } else {
+                showPlayer(2, 2); // Assuming showPlayer function takes parameters for player and symbol
+            }
+            console.log("COMPUTER STARTS");
+        }
+    }
+}
+
 render_board();
 configure_ai();
 randomizeStart();

index.html

@@ -180,8 +180,11 @@ <h2 id = "move">PLAYER MOVE!</h2>
         <option value="hard">Hard</option>
       </select>
       <div class="div-end-of-game">
-        <button onclick="reset_board()">RESET BOARD</button>
+        <!-- <button onclick="reset_board()">RESET BOARD</button> -->
         <button onclick="undoLastMove()">Undo Move</button>
+        <button id="selectXButton" onclick="selectFirstPlayer('X')">Play O first</button>
+        <button id="selectOButton" onclick="selectFirstPlayer('O')">Play X first</button>
+
       </div>
       <h2 id="winner"></h2>
     </div>