From 98cb979905db197b5591670baaf100fb4ae1454b Mon Sep 17 00:00:00 2001 From: TEldridge Date: Fri, 24 Jul 2020 18:03:31 -0500 Subject: [PATCH] completed Guis --- dom-tictactoe.js | 48 ++++++++++++++++++++- index.html | 4 +- main.js | 109 +++++++++++++++++++++++++++++++++++++++++++++-- tictactoe.css | 4 ++ 4 files changed, 158 insertions(+), 7 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..ae94f27 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -26,6 +26,10 @@ const handleClick = (element) => { } } +const showCurrentTurn = () => { + document.getElementById("turn").innerHTML=('It is ${currentMarker} turn') +} + const addMarker = (id) => { console.log(`We'll place a mark on square: ${id}`) // @TODO, Mix & Match. @@ -35,7 +39,7 @@ 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. } @@ -51,13 +55,15 @@ const updateBoard = (id) => { // @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 + board[row][column] = currentMarker } 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!`) + window.alert(`Player ${currentMarker} won!`); + window.addEventListener("close", resetBoard()); } else { // if no win, change the marker from X to O, or O to X for the next player. changeMarker() @@ -65,14 +71,47 @@ const checkForWin = () => { } const horizontalWin = () => { + 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 + } // @TODO, Your code here: to check for horizontal wins } const verticalWin = () => { + 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 +} // @TODO, Your code here: to check for vertical wins } const diagonalWin = () => { + 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 + } // @TODO, Your code here: to check for diagonal wins } @@ -95,6 +134,11 @@ 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..5ec3114 100644 --- a/index.html +++ b/index.html @@ -14,10 +14,12 @@

Welcome to Tic Tac Toe

Get ready to play!

+ +
- +

diff --git a/main.js b/main.js index 2994e56..1cfcd35 100644 --- a/main.js +++ b/main.js @@ -9,6 +9,7 @@ const rl = readline.createInterface({ input: process.stdin, 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 @@ -21,6 +22,16 @@ 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 = () => { @@ -33,26 +44,111 @@ const printBoard = () => { } const horizontalWin = () => { + 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" && boar0d[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); + // }); // Your code here to check for horizontal wins } const verticalWin = () => { + 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); + // }); // Your code here to check for vertical wins } const diagonalWin = () => { + 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 + } + // it('should check for diagonal wins', () => { + // board = [ ['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X'] ]; + // assert.equal(diagonalWin(), true); + // }); // Your code here to check for diagonal wins } -const checkForWin = () => { - // Your code here call each of the check for types of wins -} + const ticTacToe = (row, column) => { // Your code here to place a marker on the board + board[row][column] = playerTurn + + changeMarker() + if (turn >=4){ + checkForWin() + } else { + turn++; + } + +} + // 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 checkForWin = () => { + if(horizontalWin() || verticalWin() || diagonalWin()){ + console.log(`Player ${playerTurn} won!`) + return true + } else { + ticTacToe() + } + + + + // then check for a win + + + + + + // it('should detect a win', () => { + // assert.equal(checkForWin(), true); + // }); + // Your code here call each of the check for types of wins } + const getPrompt = () => { printBoard(); console.log("It's Player " + playerTurn + "'s turn."); @@ -92,6 +188,11 @@ if (typeof describe === 'function') { 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); }); }); @@ -99,4 +200,4 @@ if (typeof describe === 'function') { getPrompt(); -} +} \ No newline at end of file diff --git a/tictactoe.css b/tictactoe.css index 4526ff0..1c7028b 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -5,3 +5,7 @@ td{ border: 5px solid black; font-size: 100px; } + +.turn { + height: 60px; +}