Tic tac toe gui

dom-tictactoe.js

@@ -7,8 +7,10 @@
 // 3. Look for the @TODO, to fix
 // next to each @TODO you will find tasks that need to be finished
 // 4. GET THIS GAME WORKING!!
+let winCntX = 0;    
+let winCntO = 0;
+let currentMarker = 'X';
 
-let currentMarker = 'X'
 let board = [
   ['','',''],
   ['','',''],
@@ -17,8 +19,7 @@ let board = [
 
 // is called when a square is clicked. "this" = element here
 const handleClick = (element) => {
-  // check to see if the square clicked has anything in it, if not continue
-  // this prevents an X being changed to an O
+
   if(!document.getElementById(element.id).innerHTML){
     addMarker(element.id)
     updateBoard(element.id)
@@ -28,19 +29,14 @@ const handleClick = (element) => {
 
 const addMarker = (id) => {
   console.log(`We'll place a mark on square: ${id}`)
-  // @TODO, Mix & Match. 
-  // You will need the following pieces:
-
-  // = currentMarker
-  // .getElementById(id)
-  // document
-  // .innerHTML 
-
-  // Arrange the above pieces into one a single line of code
-  // to add an X or O to the board to the DOM so it can be scene on the screen.
+  document.getElementById(id).innerHTML = currentMarker;
+
+}
+
+const toggleCurrentPlayer = () =>{
+  document.getElementById("player" + currentMarker).classList.toggle("yourTurn");
 }
 
-// passes the element's id attribute from HTML to be used
 const updateBoard = (id) => {
   // parses the id string into a number then captures the first and last part the newly create number as row & column
   const row = parseInt(id.charAt(0))
@@ -50,44 +46,112 @@ const updateBoard = (id) => {
   console.log(board)
 
   // @TODO, Your code here: use the above information to change the board variable(array of arrays)
-  // HINT: in your browser open up the dev tools -> console
+  board[row][column] = currentMarker;
+
 }
 
 const checkForWin = () => {
   // calls each checkForWin possibility and if any are true gives a page alert,
   if(horizontalWin() || verticalWin() || diagonalWin()) {
-    // **BONUS** you could make the dismissal of this alert window reset the board...
+// **BONUS** you could make the dismissal of this alert window reset the board...
     window.alert(`Player ${currentMarker} won!`)
+    resetBoard()
+
+    //Update Score and innerHTML values
+    if(currentMarker == 'X'){
+
+      winCntX++;
+      document.getElementById('scoreX').innerHTML = winCntX;
+
+    }
+    //Update Score and innerHTML values
+    if(currentMarker == 'O'){
+
+      winCntO++;
+      document.getElementById('scoreO').innerHTML = winCntO;
+
+
+    }
   } else {
-    // if no win, change the marker from X to O, or O to X for the next player.
+  // if no win, change the marker from X to O, or O to X for the next player.
+
     changeMarker()
+
+  // window.alert(`Player ${currentMarker} Turn!`)
   }
 }
 
 const horizontalWin = () => {
   // @TODO, Your code here: to check for horizontal wins
+  let HM = currentMarker 
+  for (let i = 0; i < board.length; i++){
+    let j = 0;
+    if (board[i][j] == HM && board[i][j+1] == HM && board[i][j+2] == HM){
+      console.log(board[i][j])
+      return true;
+    }
+  }
 }
 
+
 const verticalWin = () => {
   // @TODO, Your code here: to check for vertical wins
+  let VM = currentMarker 
+  for (let j = 0; j < board.length; j++){
+    let i = 0;
+    if (board[i][j] == VM && board[i+1][j] == VM && board[i+2][j] == VM){
+      console.log(board[i][j])
+      return true;
+    }
+  }
 }
 
 const diagonalWin = () => {
   // @TODO, Your code here: to check for diagonal wins
+  let XM = currentMarker;
+  let i = 0;
+  let j = 0;
+
+  if (board[i][j] == XM && board[i+1][j+1] == XM && board[i+2][j+2] == XM){
+    console.log(board[i][j])
+    return true;
+  } else if (board[i][j+2] == XM && board[i+1][j+1] == XM && board[i+2][j] == XM){
+    console.log(board[i][j])
+    return true;
+  }
 }
 
+
 const changeMarker = () => {
   // ternary operator: if it's an X make it an O, if O make it an X
-  currentMarker = currentMarker === "X" ? "O" : "X"
+  toggleCurrentPlayer();
+  currentMarker = currentMarker === "X" ? "O" : "X";
+  toggleCurrentPlayer();
 }
 
+const resetScore = () =>{
+    // Clearing ScoreBoard
+    winCntX = 0;    
+    winCntO = 0;
+    document.getElementById('scoreX').innerHTML = winCntX
+    document.getElementById('scoreO').innerHTML = winCntO
+    document.getElementById("playerO").classList.remove("yourTurn");
+    document.getElementById("playerX").classList.remove("yourTurn");
+}
+
+
 const resetBoard = () => {
   // sanity check: this tells us the function is being called
   console.log("the board was cleared!")
+  toggleCurrentPlayer();
 
   // collects all of the "td"s into an HTML Collection: https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp  
   const squares = document.getElementsByTagName("TD")
-
+  board = [
+    ['','',''],
+    ['','',''],
+    ['','','']
+  ];
   // loops over the HTML Collections and clears out the Xs and Os
   for (i=0; i<squares.length; i++) {
     console.log(squares[i])
@@ -100,7 +164,8 @@ const resetBoard = () => {
 // **BONUSES**
 
 // 1. Display the current player's turn
-// 2. Count number of wins for each player and display them
-// 3. Reset the number of wins
+// 2. Count number of wins for each player and display them <- DONE
+// 3. Reset the number of wins <- DONE
 // 4. Clear the board on alert window dismissal
-// 5. Add players names and display who wins, i.e. "Congrats Emily, you won with 0s!"
+// 5. Add players names and display who wins, i.e. "Congrats Emily, you won with 0s!"
+

index.html

@@ -16,6 +16,27 @@ <h1>Welcome to Tic Tac Toe</h1>
         <p>Get ready to play!</p>
         <!-- uses the built-in onclick attribute to call the resetBoard function -->
         <button onclick="resetBoard()" type="button" class="btn btn-primary btn-lg" name="button">Restart</button>
+
+        <button onclick="resetScore()" type="button" class="btn btn-primary btn-lg" name="button">Reset Score</button>
+
+          <div class="scoreBrd">
+            <div id="playerX">
+              <ul>
+                <li id="xName">Player X</li>
+                <li id="scoreX">Score</li>
+              </ul> 
+            </div>
+            <div id="playerO">
+              <ul>
+                <li id="oName">Player O</li>
+                <li id="scoreO">Score</li>
+              </ul>
+
+            </div>
+            </div>
+          </div>
+        </div>
+
       </div>
 
       <table align="center">

main.js

@@ -34,23 +34,66 @@ const printBoard = () => {
 
 const horizontalWin = () => {
   // Your code here to check for horizontal wins
+  let HM = playerTurn;
+  for (let i = 0; i < board.length; i++){
+    let j = 0;
+    if (board[i][j] == HM && board[i][j+1] == HM && board[i][j+2] == HM){
+      return true;
+    }
+  }
 }
 
 const verticalWin = () => {
   // Your code here to check for vertical wins
+  let VM = playerTurn;
+  for (let j = 0; j < board.length; j++){
+    let i = 0;
+    if (board[i][j] == VM && board[i+1][j] == VM && board[i+2][j] == VM){
+      return true;
+    }
+  }
 }
 
 const diagonalWin = () => {
   // Your code here to check for diagonal wins
+  let XM = playerTurn;
+  let i = 0;
+  let j = 0;
+
+  if (board[i][j] == XM && board[i+1][j+1] == XM && board[i+2][j+2] == XM){
+    console.log(board[i][j])
+    return true;
+  } else if (board[i][j+2] == XM && board[i+1][j+1] == XM && board[i+2][j] == XM){
+    console.log(board[i][j])
+    return true;
+  }
 }
 
+
 const checkForWin = () => {
   // Your code here call each of the check for types of wins
+  if(horizontalWin() || verticalWin() || diagonalWin()) {
+    return true;
+  } else {
+    return false;
+  }
 }
 
 const ticTacToe = (row, column) => {
   // Your code here to place a marker on the board
+
+  board[row][column] = playerTurn;
+
   // then check for a win
+  checkForWin()
+
+  // Change player
+  changePlayer()
+}
+
+// If X make it O
+const changePlayer = () =>{
+  playerTurn = playerTurn === "X" ? "O" : "X";
 }
 
 const getPrompt = () => {
@@ -73,11 +116,11 @@ if (typeof describe === 'function') {
   describe('#ticTacToe()', () => {
     it('should place mark on the board', () => {
       ticTacToe(1, 1);
-      assert.deepEqual(board, [ [' ', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]);
+      assert.deepStrictEqual(board, [ [' ',' ',' '], [' ','X',' '], [' ',' ',' '] ]);
     });
     it('should alternate between players', () => {
       ticTacToe(0, 0);
-      assert.deepEqual(board, [ ['O', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]);
+      assert.deepStrictEqual(board, [ ['O',' ',' '], [' ','X',' '], [' ',' ',' '] ]);
     });
     it('should check for vertical wins', () => {
       board = [ [' ', 'X', ' '], [' ', 'X', ' '], [' ', 'X', ' '] ];
@@ -99,4 +142,4 @@ if (typeof describe === 'function') {
 
   getPrompt();
 
-}
+}

tictactoe.css

@@ -5,3 +5,34 @@ td{
   border: 5px solid black;
   font-size: 100px;
 }
+
+ul{
+  list-style: none;
+}
+
+
+.scoreBrd{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  width: 80%;
+  height: 150px;
+  margin: auto;
+  font-size: 2.0rem;
+}
+
+#playerX{
+  background-color: cyan;
+  width: 25%;
+  height: auto;
+}
+
+#playerO{
+  background-color: cadetblue;
+  width: 25%; 
+  height: auto;
+}
+
+.yourTurn{
+  border: solid black 3px;
+}