diff --git a/06week/ticTacToe/index.html b/06week/ticTacToe/index.html index c621fcacc..b74375ada 100644 --- a/06week/ticTacToe/index.html +++ b/06week/ticTacToe/index.html @@ -23,6 +23,6 @@
- + diff --git a/06week/ticTacToe/script.js b/06week/ticTacToe/script.js index 9a6b571df..a87037321 100644 --- a/06week/ticTacToe/script.js +++ b/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); diff --git a/06week/ticTacToe/style.css b/06week/ticTacToe/style.css index d550b6372..291ccba45 100644 --- a/06week/ticTacToe/style.css +++ b/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; }