From ef48e4c8201523c828452ad618fb1755e7b5c52f Mon Sep 17 00:00:00 2001 From: destinyfsetzer <54375774+destinyfsetzer@users.noreply.github.com> Date: Thu, 16 Jul 2020 11:57:25 -0500 Subject: [PATCH 1/5] start here --- main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/main.js b/main.js index 2994e56..954f98f 100644 --- a/main.js +++ b/main.js @@ -10,6 +10,8 @@ const rl = readline.createInterface({ output: process.stdout }); +//START HERE// + // creates and empty "board" for the user to see where marks can be placed. // using let because the variable is expected to change with more 'X's and 'O's to add let board = [ From 06f7f82775fa2c968d79310ec88c3573907b7b97 Mon Sep 17 00:00:00 2001 From: destinyfsetzer <54375774+destinyfsetzer@users.noreply.github.com> Date: Thu, 16 Jul 2020 16:27:45 -0500 Subject: [PATCH 2/5] 5/6 --- main.js | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 72 insertions(+), 4 deletions(-) diff --git a/main.js b/main.js index 954f98f..0aba75b 100644 --- a/main.js +++ b/main.js @@ -24,6 +24,7 @@ let board = [ // using let because the variable is expected to change from 'X' to 'O' and back let playerTurn = 'X'; + // is a function that print the current status of the board using the variable - board const printBoard = () => { console.log(' 0 1 2'); @@ -36,25 +37,92 @@ const printBoard = () => { const horizontalWin = () => { // 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 + } + // it('should check for horizontal wins', () => { + // board = [ ['X', 'X', 'X'], [' ', ' ', ' '], [' ', ' ', ' '] ]; + // assert.equal(horizontalWin(), true); + // }); } 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 + } + // it('should check for vertical wins', () => { + // board = [ [' ', 'X', ' '], [' ', 'X', ' '], [' ', 'X', ' '] ]; + // assert.equal(verticalWin(), true); + // }); } const diagonalWin = () => { // Your code here to check for diagonal wins -} - -const checkForWin = () => { - // Your code here call each of the check for types of 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[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 + } + // it('should check for diagonal wins', () => { + // board = [ ['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X'] ]; + // assert.equal(diagonalWin(), true); + // }); } const ticTacToe = (row, column) => { // Your code here to place a marker on the board // then check for a win + board[row][column] = playerTurn + + changeMarker() + + // it('should place mark on the board', () => { + // ticTacToe(1, 1); + // assert.deepEqual(board, [ [' ', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); + // }); + // it('should alternate between players', () => { + // ticTacToe(0, 0); + // assert.deepEqual(board, [ ['O', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); + // }); } +const changeMarker = () => { + if(playerTurn === "X"){ + playerTurn = "O" + } else { + playerTurn = "X" + } +} + +const checkForWin = () => { + // Your code here call each of the check for types of wins + if(horizontalWin() || verticalWin() || diagonalWin()) { + console.log(`Player ${playerTurn} won!`) + } else { + changeMarker() + } + } + + // it('should detect a win', () => { + // assert.equal(checkForWin(), true); + // }); + const getPrompt = () => { printBoard(); console.log("It's Player " + playerTurn + "'s turn."); From b14f066da5540d33b900cb5f5f8c54cae1c812d3 Mon Sep 17 00:00:00 2001 From: destinyfsetzer <54375774+destinyfsetzer@users.noreply.github.com> Date: Thu, 16 Jul 2020 17:09:43 -0500 Subject: [PATCH 3/5] tic tac fml --- main.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/main.js b/main.js index 0aba75b..b46c6ed 100644 --- a/main.js +++ b/main.js @@ -90,16 +90,8 @@ const ticTacToe = (row, column) => { // then check for a win board[row][column] = playerTurn - changeMarker() + checkForWin() - // it('should place mark on the board', () => { - // ticTacToe(1, 1); - // assert.deepEqual(board, [ [' ', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); - // }); - // it('should alternate between players', () => { - // ticTacToe(0, 0); - // assert.deepEqual(board, [ ['O', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); - // }); } const changeMarker = () => { @@ -114,6 +106,7 @@ 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() } From 310f0df98ad28b8d217275ff544c31480e8a4b75 Mon Sep 17 00:00:00 2001 From: destinyfsetzer <54375774+destinyfsetzer@users.noreply.github.com> Date: Fri, 17 Jul 2020 13:47:32 -0500 Subject: [PATCH 4/5] added markers to board --- dom-tictactoe.js | 44 +++++++++++++++++++++++++++++++++++--------- index.html | 5 +++-- 2 files changed, 38 insertions(+), 11 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..47f8ab6 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -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: - + document.getElementById(id).innerHTML = currentMarker // = currentMarker // .getElementById(id) // document @@ -65,16 +65,42 @@ const checkForWin = () => { } const horizontalWin = () => { - // @TODO, Your code here: to check for horizontal wins -} - -const verticalWin = () => { - // @TODO, Your code here: to check for vertical wins + // 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 diagonalWin = () => { - // @TODO, Your code here: to check for diagonal wins -} + 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[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 changeMarker = () => { // ternary operator: if it's an X make it an O, if O make it an X diff --git a/index.html b/index.html index 10a15d1..8538886 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,7 @@ - - +
@@ -38,5 +37,7 @@

Welcome to Tic Tac Toe

+ + From 82b285e594ff2b7e1d4d31dfcf30ce5b7d46216f Mon Sep 17 00:00:00 2001 From: destinyfsetzer <54375774+destinyfsetzer@users.noreply.github.com> Date: Sat, 18 Jul 2020 17:53:06 -0500 Subject: [PATCH 5/5] made it look better --- dom-tictactoe.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index 47f8ab6..c800416 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -35,7 +35,7 @@ const addMarker = (id) => { // .getElementById(id) // document // .innerHTML - + // 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. } @@ -45,11 +45,12 @@ 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)) - 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) + board[row][column] = currentMarker + // HINT: in your browser open up the dev tools -> console } @@ -61,7 +62,7 @@ const checkForWin = () => { } else { // if no win, change the marker from X to O, or O to X for the next player. changeMarker() - } + } } const horizontalWin = () => { @@ -121,6 +122,12 @@ const resetBoard = () => { } // @TODO, Your code here: make sure to reset the array of arrays to empty for a new game + board = [ + ["", "", ""], + ["", "", ""], + ["", "", ""] +] + } // **BONUSES**