From be413abd734cb59d1a3ae03086c66b8d32686999 Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Wed, 16 Aug 2017 20:15:15 -0500 Subject: [PATCH 1/2] more TTT whiteboarding. Initial code. --- 06week/ticTacToe/script.js | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/06week/ticTacToe/script.js b/06week/ticTacToe/script.js index 9a6b571df..03688c3da 100644 --- a/06week/ticTacToe/script.js +++ b/06week/ticTacToe/script.js @@ -1,5 +1,26 @@ 'use strict'; document.addEventListener('DOMContentLoaded', () => { - // Your code here +/*************** 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 + +***************************************************************/ }); + +playerTurn = playerTurn === 'X'? 'O' : 'X' From 45563226731826783a088c8f1e31a95e27b753fc Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Sat, 19 Aug 2017 11:31:46 -0500 Subject: [PATCH 2/2] Tic Tac Toe and the DOM pretty much complete --- 06week/ticTacToe/index.html | 2 +- 06week/ticTacToe/script.js | 58 ++++++++++++++++++++++++++++++++++--- 06week/ticTacToe/style.css | 6 +++- 3 files changed, 60 insertions(+), 6 deletions(-) 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 03688c3da..a87037321 100644 --- a/06week/ticTacToe/script.js +++ b/06week/ticTacToe/script.js @@ -1,6 +1,4 @@ 'use strict'; - -document.addEventListener('DOMContentLoaded', () => { /*************** WHITE BOARD NOTES *************************** define player turns: X, O On Click of a square... addEventListener, onclick @@ -21,6 +19,58 @@ On Click of a square... addEventListener, onclick set player to X ***************************************************************/ -}); -playerTurn = playerTurn === 'X'? 'O' : 'X' +// let mySquares = []; +document.addEventListener('DOMContentLoaded', () => { + + 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; }