initial commit

dom-tictactoe.js

@@ -7,7 +7,7 @@
 // 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 turn = 0;
 let currentMarker = 'X'
 let board = [
   ['','',''],
@@ -22,15 +22,15 @@ const handleClick = (element) => {
   if(!document.getElementById(element.id).innerHTML){
     addMarker(element.id)
     updateBoard(element.id)
-    checkForWin()
+    changeMarker()
   }
 }
 
 const addMarker = (id) => {
   console.log(`We'll place a mark on square: ${id}`)
   // @TODO, Mix & Match. 
   // You will need the following pieces:
-
+  document.getElementById(id).innerHTML = currentMarker
   // = currentMarker
   // .getElementById(id)
   // document
@@ -45,6 +45,12 @@ 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))
   const column = parseInt(id.charAt(2)) 
+  board[row][column] = currentMarker
+  addMarker(id)
+  turn++;
+  if (turn >= 5) {
+    checkForWin()
+  }
 
   console.log(`you clicked the sq at ${row} and ${column}`)
   console.log(board)
@@ -57,23 +63,45 @@ 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...
-    window.alert(`Player ${currentMarker} won!`)
-  } else {
-    // if no win, change the marker from X to O, or O to X for the next player.
-    changeMarker()
+    window.alert(`Player ${currentMarker} won! `)
   }
 }
 
 const horizontalWin = () => {
   // @TODO, Your code here: to check for horizontal wins
+  if ((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") || (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O")) {
+    return true
+  } else if ((board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")) {
+    return true
+  } else if ((board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) { 
+    return true
+  } else {
+    return false
+  }
 }
 
 const verticalWin = () => {
   // @TODO, Your code here: to check for vertical wins
+  if((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")) {
+    return true
+  } else if ((board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")) {
+    return true
+  } else if ((board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")) {
+    return true
+  } else {
+    return false
+  }
 }
 
 const diagonalWin = () => {
   // @TODO, Your code here: to check for diagonal wins
+  if ((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")) {
+    return true
+  } else if ((board[0][2] == "X" && board[1][1] == "X" && board[2][0] == "X") || (board[0][2] == "O" && board[1][1] == "O" && board[2][0] == "O")){
+    return true
+  } else {
+    return false
+  } 
 }
 
 const changeMarker = () => {
@@ -88,10 +116,12 @@ const resetBoard = () => {
   // collects all of the "td"s into an HTML Collection: https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp  
   const squares = document.getElementsByTagName("TD")
 
+
   // loops over the HTML Collections and clears out the Xs and Os
   for (i=0; i<squares.length; i++) {
     console.log(squares[i])
     squares[i].innerHTML = null
+
   }
 
   // @TODO, Your code here: make sure to reset the array of arrays to empty for a new game

index.html

@@ -18,23 +18,23 @@ <h1>Welcome to Tic Tac Toe</h1>
         <button onclick="resetBoard()" type="button" class="btn btn-primary btn-lg" name="button">Restart</button>
       </div>
 
-      <table align="center">
+      <table aligntext="center">
         <tr>
           <!-- Each table-data (td) has an id that matches it's position in the array or arrays [0][1] -->
-          <td id='0-0' onclick="handleClick(this)" ></td>
-          <td id='0-1' onclick="handleClick(this)" ></td>
-          <td id='0-2' onclick="handleClick(this)" ></td>
+          <td id='0-0' onclick="handleClick(this)"></td>
+          <td id='0-1' onclick="handleClick(this)"></td>
+          <td id='0-2' onclick="handleClick(this)"></td>
         </tr>
         <tr>
           <!-- onclick calls a function called handleClick and passes itself to it("this") -->
-          <td id='1-0' onclick="handleClick(this)" ></td>
-          <td id='1-1' onclick="handleClick(this)" ></td>
-          <td id='1-2' onclick="handleClick(this)" ></td>
+          <td id='1-0' onclick="handleClick(this)"></td>
+          <td id='1-1' onclick="handleClick(this)"></td>
+          <td id='1-2' onclick="handleClick(this)"></td>
         </tr>
         <tr>
-          <td id='2-0' onclick="handleClick(this)" ></td>
-          <td id='2-1' onclick="handleClick(this)" ></td>
-          <td id='2-2' onclick="handleClick(this)" ></td>
+          <td id='2-0' onclick="handleClick(this)"></td>
+          <td id='2-1' onclick="handleClick(this)"></td>
+          <td id='2-2' onclick="handleClick(this)"></td>
         </tr>
       </table>
     </div>

main.js

@@ -1,9 +1,10 @@
 'use strict';
 
-// brings in the assert module for unit testing
-const assert = require('assert');
-// brings in the readline module to access the command line
+// brings in the assert module for unit testing 
+const assert = require('assert'); 
+// brings in the readline module to access the command line 
 const readline = require('readline');
+const { get } = require('http');
 // use the readline module to print out to the command line
 const rl = readline.createInterface({
   input: process.stdin,
@@ -18,9 +19,14 @@ let board = [
   [' ', ' ', ' ']
 ];
 
+
 // assigns the first mark as 'X'
 // using let because the variable is expected to change from 'X' to 'O' and back
+let winnerMarker = 'O'; 
 let playerTurn = 'X';
+let turn = 0;
+
+
 
 // is a function that print the current status of the board using the variable - board
 const printBoard = () => {
@@ -32,25 +38,65 @@ const printBoard = () => {
   console.log('2 ' + board[2].join(' | '));
 }
 
+
+const changeMarker = () => {
+  playerTurn = playerTurn === "X" ? "O" : "X"
+  winnerMarker = winnerMarker === "O" ? "X" : "O"
+}
+
+
+
 const horizontalWin = () => {
-  // Your code here to check for horizontal wins
+  if ((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") || (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O")) {
+    return true
+  } else if ((board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")) {
+    return true
+  } else if ((board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) { 
+    return true
+  } else {
+    return false
+  }
 }
 
 const verticalWin = () => {
-  // Your code here to check for vertical wins
+  if((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")) {
+    return true
+  } else if ((board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")) {
+    return true
+  } else if ((board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")) {
+    return true
+  } else {
+    return false
+  }
 }
 
 const diagonalWin = () => {
-  // Your code here to check for diagonal wins
+  if ((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")) {
+    return true
+  } else if ((board[0][2] == "X" && board[1][1] == "X" && board[2][0] == "X") || (board[0][2] == "O" && board[1][1] == "O" && board[2][0] == "O")){
+    return true
+  } else {
+    return false
+  } 
 }
 
 const checkForWin = () => {
-  // Your code here call each of the check for types of wins
+  if(horizontalWin() || verticalWin() || diagonalWin()) {
+    console.log("************ " + winnerMarker +  " Wins! *************")
+    return true
+  }
+
 }
 
 const ticTacToe = (row, column) => {
   // Your code here to place a marker on the board
   // then check for a win
+  board[row][column] = playerTurn
+  changeMarker()
+  turn++
+  if (turn >= 5) {
+    checkForWin()
+  }
 }
 
 const getPrompt = () => {
@@ -92,6 +138,11 @@ if (typeof describe === 'function') {
       assert.equal(diagonalWin(), true);
     });
     it('should detect a win', () => {
+      ticTacToe(0, 0)
+      ticTacToe(0, 1)
+      ticTacToe(1, 1)
+      ticTacToe(0, 2)
+      ticTacToe(2, 2)
       assert.equal(checkForWin(), true);
     });
   });