From 82b5057494be1f07de2cb4fec6bf68de62c60914 Mon Sep 17 00:00:00 2001 From: ArielHolman Date: Thu, 16 Jul 2020 12:12:40 -0500 Subject: [PATCH 1/5] creating pull request --- main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.js b/main.js index 2994e56..2d5a211 100644 --- a/main.js +++ b/main.js @@ -33,7 +33,7 @@ const printBoard = () => { } const horizontalWin = () => { - // Your code here to check for horizontal wins + // Your code here to check for horizontal wins- START CODING LADY!!!! } const verticalWin = () => { From 640cd951afac4a6266722ca97390ab1a22ef4749 Mon Sep 17 00:00:00 2001 From: ArielHolman Date: Thu, 16 Jul 2020 21:56:33 -0500 Subject: [PATCH 2/5] reassurance push --- main.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 50 insertions(+), 6 deletions(-) diff --git a/main.js b/main.js index 2d5a211..cad4f92 100644 --- a/main.js +++ b/main.js @@ -33,24 +33,60 @@ const printBoard = () => { } const horizontalWin = () => { - // Your code here to check for horizontal wins- START CODING LADY!!!! + 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(`Player ${playerTurn} won!`) + return true + } else { + changeMarker() + } } const ticTacToe = (row, column) => { - // Your code here to place a marker on the board - // then check for a win + board[row][column] = playerTurn + + checkForWin() +} + +const changeMarker = () => { + if(playerTurn === "X"){ + playerTurn = "O" + } else { + playerTurn = "X" + } } const getPrompt = () => { @@ -94,6 +130,14 @@ if (typeof describe === 'function') { it('should detect a win', () => { assert.equal(checkForWin(), 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); + }); }); } else { From 2e3784744d3a110a448a009f147c161c2bab4f8c Mon Sep 17 00:00:00 2001 From: ArielHolman Date: Sun, 19 Jul 2020 00:22:23 -0500 Subject: [PATCH 3/5] updated dom JS --- dom-tictactoe.js | 40 ++++++++++++++++++++++++++++++++++++---- index.html | 2 +- main.js | 9 --------- 3 files changed, 37 insertions(+), 14 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..64927b8 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -8,7 +8,7 @@ // next to each @TODO you will find tasks that need to be finished // 4. GET THIS GAME WORKING!! -let currentMarker = 'X' +let currentMarker = "X" let board = [ ['','',''], ['','',''], @@ -35,9 +35,11 @@ const addMarker = (id) => { // .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. + checkForWin() } // passes the element's id attribute from HTML to be used @@ -46,8 +48,11 @@ const updateBoard = (id) => { const row = parseInt(id.charAt(0)) const column = parseInt(id.charAt(2)) - console.log(`you clicked the sq at ${row} and ${column}`) - console.log(board) + board[row][column] = currentMarker + + checkForWin() + // console.log(`you clicked the sq at ${row} and ${column}`) + // console.log(board) // @TODO, Your code here: use the above information to change the board variable(array of arrays) // HINT: in your browser open up the dev tools -> console @@ -66,19 +71,45 @@ const checkForWin = () => { 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 = () => { // ternary operator: if it's an X make it an O, if O make it an X currentMarker = currentMarker === "X" ? "O" : "X" + } const resetBoard = () => { @@ -95,6 +126,7 @@ const resetBoard = () => { } // @TODO, Your code here: make sure to reset the array of arrays to empty for a new game + board = [["", "", ""],["", "", ""],["", "", ""]] } // **BONUSES** diff --git a/index.html b/index.html index 10a15d1..1ae0952 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ -
@@ -38,5 +37,6 @@

Welcome to Tic Tac Toe

+ diff --git a/main.js b/main.js index cad4f92..3b961af 100644 --- a/main.js +++ b/main.js @@ -100,7 +100,6 @@ const getPrompt = () => { }); } - // Unit Tests // You use them run the command: npm test main.js // to close them ctrl + C @@ -130,14 +129,6 @@ if (typeof describe === 'function') { it('should detect a win', () => { assert.equal(checkForWin(), 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); - }); }); } else { From acc49ecd98264a3a41e2637cf1273b8dbd7a727d Mon Sep 17 00:00:00 2001 From: ArielHolman Date: Sun, 19 Jul 2020 01:54:52 -0500 Subject: [PATCH 4/5] finished TTT Dom updatesS --- dom-tictactoe.js | 93 ++++++++++++++++++++++++++---------------------- 1 file changed, 51 insertions(+), 42 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index 64927b8..473cc06 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -10,16 +10,16 @@ let currentMarker = "X" 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 - if(!document.getElementById(element.id).innerHTML){ + if (!document.getElementById(element.id).innerHTML) { addMarker(element.id) updateBoard(element.id) checkForWin() @@ -30,7 +30,7 @@ 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 @@ -39,20 +39,19 @@ const addMarker = (id) => { // 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. - checkForWin() } // passes the element's id attribute from HTML to be used 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)) - + const column = parseInt(id.charAt(2)) + console.log("handleclick", currentMarker) board[row][column] = currentMarker - - checkForWin() - // console.log(`you clicked the sq at ${row} and ${column}`) - // console.log(board) + + + console.log(`you clicked the sq at ${row} and ${column}`) + console.log(board) // @TODO, Your code here: use the above information to change the board variable(array of arrays) // HINT: in your browser open up the dev tools -> console @@ -60,9 +59,15 @@ const updateBoard = (id) => { 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!`) + + if (horizontalWin() || verticalWin() || diagonalWin()) { + + // **BONUS** you could make the dismissal of this alert window reset the board.. + setTimeout( + function () { + window.alert(`Player ${currentMarker} won!`); + }, 10) + // console.log ("after alert", currentMarker) } else { // if no win, change the marker from X to O, or O to X for the next player. changeMarker() @@ -71,45 +76,45 @@ const checkForWin = () => { 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")){ + 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 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 - } + } 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")){ + 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 - } + } 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")){ + 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 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 - } + } else { + return false + } } const changeMarker = () => { // ternary operator: if it's an X make it an O, if O make it an X currentMarker = currentMarker === "X" ? "O" : "X" - + } const resetBoard = () => { @@ -118,15 +123,19 @@ 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 Date: Mon, 20 Jul 2020 19:21:49 -0500 Subject: [PATCH 5/5] updated dom JS --- dom-tictactoe.js | 1 - 1 file changed, 1 deletion(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index 473cc06..ac514ac 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -37,7 +37,6 @@ const addMarker = (id) => { // .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. }