From fb01e4157dea2317b83f214418476db0dd341f31 Mon Sep 17 00:00:00 2001 From: Daryl McAvoy Date: Fri, 17 Jan 2020 15:53:54 -0600 Subject: [PATCH 1/4] Completed unit testin completed some bonus options --- dom-tictactoe.js | 91 +++++++++++++++++++++++++++++++++++++++++------- index.html | 19 ++++++++++ main.js | 49 ++++++++++++++++++++++++-- tictactoe.css | 31 +++++++++++++++++ 4 files changed, 174 insertions(+), 16 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..324499c 100644 --- a/dom-tictactoe.js +++ b/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 = [ ['','',''], ['','',''], @@ -19,6 +21,8 @@ let board = [ 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 + document.getElementById("player" + currentMarker).classList.toggle("yourTurn"); + if( ) if(!document.getElementById(element.id).innerHTML){ addMarker(element.id) updateBoard(element.id) @@ -30,12 +34,9 @@ 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 - + + document.getElementById(id).innerHTML = currentMarker; + // 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. } @@ -50,44 +51,108 @@ const updateBoard = (id) => { console.log(board) // @TODO, Your code here: use the above information to change the board variable(array of arrays) + board[row][column] = currentMarker; // HINT: in your browser open up the dev tools -> console } 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!`) - } else { - // if no win, change the marker from X to O, or O to X for the next player. - changeMarker() + 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. + + 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" + + currentMarker = currentMarker === "X" ? "O" : "X"; + } const resetBoard = () => { // sanity check: this tells us the function is being called console.log("the board was cleared!") + // 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"); + + // 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; iWelcome to Tic Tac Toe

Get ready to play!

+ +
+
+
    +
  • Player X
    • +
  • Score
    • +
+
+
+
    +
  • Player O
    • +
  • Score
    • +
+ +
+
+ + + diff --git a/main.js b/main.js index 2994e56..51a2d71 100644 --- a/main.js +++ b/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(); -} +} \ No newline at end of file diff --git a/tictactoe.css b/tictactoe.css index 4526ff0..5814623 100644 --- a/tictactoe.css +++ b/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 rgb(211, 26, 26) 10px; +} \ No newline at end of file From 971ac471b752687731ac6d1e5c59f1652ec8efe0 Mon Sep 17 00:00:00 2001 From: dmcavoy631 Date: Wed, 22 Jan 2020 20:25:05 -0600 Subject: [PATCH 2/4] Update dom-tictactoe.js --- dom-tictactoe.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index 324499c..c02fe5c 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -22,7 +22,7 @@ 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 document.getElementById("player" + currentMarker).classList.toggle("yourTurn"); - if( ) + if(!document.getElementById(element.id).innerHTML){ addMarker(element.id) updateBoard(element.id) @@ -168,4 +168,4 @@ const resetBoard = () => { // 2. Count number of wins for each player and display them // 3. Reset the number of wins // 4. Clear the board on alert window dismissal -// 5. Add players names and display who wins, i.e. "Congrats Emily, you won with 0s!" \ No newline at end of file +// 5. Add players names and display who wins, i.e. "Congrats Emily, you won with 0s!" From 3f3619865d8a0a06b4598021e04282673fa5e6b3 Mon Sep 17 00:00:00 2001 From: Daryl McAvoy Date: Thu, 23 Jan 2020 16:16:55 -0600 Subject: [PATCH 3/4] FixedBorderToggle --- dom-tictactoe.js | 56 +++++++++++++++++++++++------------------------- index.html | 2 ++ tictactoe.css | 2 +- 3 files changed, 30 insertions(+), 30 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index 324499c..b14e78b 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -19,10 +19,6 @@ 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 - document.getElementById("player" + currentMarker).classList.toggle("yourTurn"); - if( ) if(!document.getElementById(element.id).innerHTML){ addMarker(element.id) updateBoard(element.id) @@ -32,16 +28,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: - document.getElementById(id).innerHTML = currentMarker; - // 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. } -// passes the element's id attribute from HTML to be used +const toggleCurrentPlayer = () =>{ + document.getElementById("player" + currentMarker).classList.toggle("yourTurn"); +} + 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)) @@ -52,7 +46,7 @@ const updateBoard = (id) => { // @TODO, Your code here: use the above information to change the board variable(array of arrays) board[row][column] = currentMarker; - // HINT: in your browser open up the dev tools -> console + } const checkForWin = () => { @@ -67,22 +61,23 @@ const checkForWin = () => { winCntX++; document.getElementById('scoreX').innerHTML = winCntX; + } //Update Score and innerHTML values if(currentMarker == 'O'){ winCntO++; document.getElementById('scoreO').innerHTML = winCntO; + - } - -} else { + } + } else { // if no win, change the marker from X to O, or O to X for the next player. changeMarker() - // window.alert(`Player ${currentMarker} Turn!`) -} + // window.alert(`Player ${currentMarker} Turn!`) + } } const horizontalWin = () => { @@ -128,23 +123,26 @@ const diagonalWin = () => { const changeMarker = () => { // ternary operator: if it's an X make it an O, if O make it an 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!") - - // 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"); - + 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") @@ -165,7 +163,7 @@ 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!" \ No newline at end of file diff --git a/index.html b/index.html index 852627a..e486f64 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,8 @@

Welcome to Tic Tac Toe

Get ready to play!

+ +
diff --git a/tictactoe.css b/tictactoe.css index 5814623..2979c3f 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -34,5 +34,5 @@ ul{ } .yourTurn{ - border: solid rgb(211, 26, 26) 10px; + border: solid black 3px; } \ No newline at end of file From 4048e4cfcad41983bb9885c796b4d4fc1dcb23ed Mon Sep 17 00:00:00 2001 From: Daryl McAvoy Date: Thu, 23 Jan 2020 16:20:23 -0600 Subject: [PATCH 4/4] FixedBorderToggleagain --- dom-tictactoe.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b14e78b..825e413 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -166,4 +166,6 @@ const resetBoard = () => { // 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!" \ No newline at end of file +// 5. Add players names and display who wins, i.e. "Congrats Emily, you won with 0s!" + +//update to push again \ No newline at end of file