Tic Tac Toe and the DOM

06week/ticTacToe/index.html

@@ -23,6 +23,6 @@
   </div>
   <div id="announce-winner"></div>
   <button id="clear">Clear Board</button>
-  <script type="text/javascript" src="./script.js"></script>
+  <script type="text/javascript" src="script.js"></script>
 </body>
 </html>

06week/ticTacToe/script.js

@@ -1,5 +1,76 @@
 'use strict';
+/***************  WHITE BOARD NOTES  ***************************
+define player turns: X, O
+On Click of a square... addEventListener, onclick
+  place playerTurn token into square.  append on the div data-cell
+  if (!checkForWin) then
+    if (!checkForTie) then
+      toggle playerTurn
+    else
+      message: There is a tie, you idiots;
+    end if
+  else
+    message: Congrats player???, you won!
+  end if
 
+  On Click of clear board button
+    remove tokens off of board
+    initialize any variables
+    set player to X
+
+***************************************************************/
+
+// let mySquares = [];
 document.addEventListener('DOMContentLoaded', () => {
-  // Your code here
-});
+
+  const wins = [
+    [0,1,2], [3,4,5], [6,7,8],  // horizontal wins
+    [0,3,6], [1,4,7], [2,5,8],  // vertical wins
+    [0,4,8], [2,4,6]            // diagonal wins
+  ];
+  let playerTurn = 'X';
+  let turnCount = 0;
+
+  let mySquares = document.querySelectorAll("[data-cell]");
+
+  // document.querySelector("[data-cell='0']").addEventListener("click", (square) => {
+  mySquares.forEach(aSquare => {
+    aSquare.addEventListener("click", square => {
+      // display the current click count inside the clicked div
+      if (!square.target.textContent) {
+        document.getElementById('announce-winner').textContent = null;
+        square.target.textContent = playerTurn;
+        turnCount++
+        if (checkForWin()) {  //checkForWin returns TRUE if someone won.  It returns FALSE if no win yet.
+          document.getElementById('announce-winner').textContent = `Congratulations ${playerTurn}.  You won!  Start a new game by pressing Clear Board below.`;
+        } else if (turnCount == 9) {  // If there have been 9 turns but no winner.  It is a tie.
+          document.getElementById('announce-winner').textContent = `We have a tie folks.  Start a new game by pressing 'Clear Board' below.`;
+        } else {  // Ok, toggle token to the opposite player.
+          playerTurn = playerTurn === 'X'? 'O' : 'X';
+        }
+      } else {  // Ah, the user tried to click on an occupied square.
+        document.getElementById('announce-winner').textContent = 'Try again please.  That square is taken.';
+      }
+    });
+  });
+
+  // This code handles actions when player presses "Clear Board" button.
+  // We pretty much just initialize everything.
+  document.getElementById('clear').addEventListener("click", (event)=> {
+    playerTurn = 'X';
+    turnCount = 0
+    mySquares.forEach(aSquare => {
+      aSquare.textContent = null;
+    })
+    document.getElementById('announce-winner').textContent = null;
+  })
+
+
+  function checkForWin() {
+    // wins array stores all the win combinations.  wincombo array is one of the wins.
+    // wins.some ... at least one of these win combos needs to be true.
+    // wincombo.every ... for a win, all the squares in the particular wincombo must equal the players token (X or O)
+    return wins.some(winCombo => winCombo.every(index => mySquares[index].textContent === playerTurn));
+  }
+
+}, false);

06week/ticTacToe/style.css

@@ -1,3 +1,7 @@
+body {
+  font-family: Arial;
+}
+
 div[data-cell] {
   width: 100px;
   height: 100px;
@@ -14,5 +18,5 @@ div[data-cell] {
 
 #announce-winner {
   clear: both;
-  font-size: 50px;
+  font-size: 30px;
 }