From 63e8c2f79a45f37f500a4d352ce1053c0f3a7faa Mon Sep 17 00:00:00 2001 From: priscillamartinez Date: Wed, 9 Dec 2020 20:12:01 -0600 Subject: [PATCH 1/4] updates to js file --- index.html | 4 +- main.js | 137 +++++++++++++++++++++++++++++++++++---------------- package.json | 2 +- 3 files changed, 97 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index 10a15d1..5b33835 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - +
@@ -17,7 +17,7 @@

Welcome to Tic Tac Toe

- + diff --git a/main.js b/main.js index 96293a9..27fb30d 100644 --- a/main.js +++ b/main.js @@ -21,6 +21,15 @@ let board = [ // assigns the first mark as 'X' // using let because the variable is expected to change from 'X' to 'O' and back let playerTurn = 'X'; +let turn = 0; + +const changeMarker = () => { + if (playerTurn === "X") { + playerTurn = "O" + } else { + playerTurn = "X" + } +} // is a function that print the current status of the board using the variable - board const printBoard = () => { @@ -34,74 +43,116 @@ 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; + } } 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 -} - -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[0][2] == "X" && board[1][1] == "X" && board[2][1] == "X") + || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")) { + return true; + } else { + return false; + } } const ticTacToe = (row, column) => { // Your code here to place a marker on the board - // then check for a win -} + board[row][column] = playerTurn + changeMarker() + if (turn >= 4) { + checkForWin() + } else { + turn++; + } +} +// then check for a win +const checkForWin = () => { + if (horizontalWin() || verticalWin() || diagonalWin()) { + console.log(`Player ${playerTurn} won!`) + return true + } else { + ticTacToe() + } +} const getPrompt = () => { printBoard(); console.log("It's Player " + playerTurn + "'s turn."); rl.question('row: ', (row) => { - rl.question('column: ', (column) => { + rl.question('column: ', (column) => { ticTacToe(row, column); getPrompt(); - }); + }); }); } -// Unit Tests -// You use them run the command: npm test main.js -// to close them ctrl + C -if (typeof describe === 'function') { + // Unit Tests + // You use them run the command: npm test main.js + // to close them ctrl + C + if (typeof describe === 'function') { - describe('#ticTacToe()', () => { - 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', ' '], [' ', ' ', ' '] ]); - }); - it('should check for vertical wins', () => { - board = [ [' ', 'X', ' '], [' ', 'X', ' '], [' ', 'X', ' '] ]; - assert.equal(verticalWin(), true); - }); - it('should check for horizontal wins', () => { - board = [ ['X', 'X', 'X'], [' ', ' ', ' '], [' ', ' ', ' '] ]; - assert.equal(horizontalWin(), true); - }); - it('should check for diagonal wins', () => { - board = [ ['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X'] ]; - assert.equal(diagonalWin(), true); + describe('#ticTacToe()', () => { + 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', ' '], [' ', ' ', ' '] ]); + }); + it('should check for vertical wins', () => { + board = [ [' ', 'X', ' '], [' ', 'X', ' '], [' ', 'X', ' '] ]; + assert.equal(verticalWin(), true); + }); + it('should check for horizontal wins', () => { + board = [ ['X', 'X', 'X'], [' ', ' ', ' '], [' ', ' ', ' '] ]; + assert.equal(horizontalWin(), true); + }); + it('should check for diagonal wins', () => { + board = [ ['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X'] ]; + assert.equal(diagonalWin(), 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); + }); }); - 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 { - getPrompt(); - } diff --git a/package.json b/package.json index 33a09c4..de96446 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "eslint": "^3.19.0", "functional-javascript-workshop": "^1.0.6", "htmllint-cli": "github:kevincolten/htmllint-cli", - "http-server": "^0.11.1", + "http-server": "^0.12.3", "javascripting": "^2.6.1", "jsdom": "^11.6.2", "mocha": "^5.0.0", From b2df01fdbe201c8134158a230be52261ee509893 Mon Sep 17 00:00:00 2001 From: priscillamartinez Date: Wed, 9 Dec 2020 20:12:58 -0600 Subject: [PATCH 2/4] update --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 5b33835..721d711 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +
From 18eefc5de9177fb7d7e6bed05ce5330ff6f9ca1b Mon Sep 17 00:00:00 2001 From: priscillamartinez Date: Wed, 9 Dec 2020 20:17:31 -0600 Subject: [PATCH 3/4] updates --- dom-tictactoe.js | 60 +++++++++++++++++++++++++++++++++++++++--------- index.html | 2 +- 2 files changed, 50 insertions(+), 12 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..787aa98 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,12 +30,12 @@ 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 - + // 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. } @@ -44,7 +44,7 @@ const addMarker = (id) => { 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(`you clicked the sq at ${row} and ${column}`) console.log(board) @@ -55,7 +55,7 @@ const updateBoard = (id) => { const checkForWin = () => { // calls each checkForWin possibility and if any are true gives a page alert, - if(horizontalWin() || verticalWin() || diagonalWin()) { + if (horizontalWin() || verticalWin() || diagonalWin()) { // **BONUS** you could make the dismissal of this alert window reset the board... window.alert(`Player ${currentMarker} won!`) } else { @@ -66,14 +66,47 @@ 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][1] == "X") + || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")){ + return true + } else { + return false + } } const changeMarker = () => { @@ -87,14 +120,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; iWelcome to Tic Tac Toe
- +

From a14649b6c56d5095bf1e7c1469fc5d48da3177d3 Mon Sep 17 00:00:00 2001 From: priscillamartinez Date: Wed, 9 Dec 2020 20:29:33 -0600 Subject: [PATCH 4/4] updates --- dom-tictactoe.js | 4 ++-- index.html | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index 787aa98..bed578a 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -30,12 +30,12 @@ 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. } diff --git a/index.html b/index.html index f8ca751..911cf41 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ -