diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..23124b4 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 = [ ['','',''], ['','',''], @@ -17,8 +19,7 @@ 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){ addMarker(element.id) updateBoard(element.id) @@ -28,19 +29,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: - - // = 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. + document.getElementById(id).innerHTML = currentMarker; + +} + +const toggleCurrentPlayer = () =>{ + document.getElementById("player" + currentMarker).classList.toggle("yourTurn"); } -// 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)) @@ -50,44 +46,112 @@ const updateBoard = (id) => { 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 + 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... +// **BONUS** you could make the dismissal of this alert window reset the board... window.alert(`Player ${currentMarker} won!`) + 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. + // 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" + 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!") + 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") - + board = [ + ['','',''], + ['','',''], + ['','',''] + ]; // loops over the HTML Collections and clears out the Xs and Os for (i=0; i { // **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 +// 5. Add players names and display who wins, i.e. "Congrats Emily, you won with 0s!" + diff --git a/index.html b/index.html index 10a15d1..e486f64 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,27 @@

Welcome 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..2979c3f 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 black 3px; +} \ No newline at end of file