diff --git a/.vscode/settings.json b/.vscode/settings.json index aef8443..cbb7b3a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } \ No newline at end of file diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..6f6f9aa 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -8,94 +8,124 @@ // 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 = [ - ['','',''], - ['','',''], - ['','',''] + ["", "", ""], + ["", "", ""], + ["", "", ""], ]; -// 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) - checkForWin() + if (!document.getElementById(element.id).innerHTML) { + addMarker(element.id); + updateBoard(element.id); + checkForWin(); + + let cell = document.getElementById(element.id); + cell.innerHTML === "X" + ? (cell.style.color = "springgreen") + : (cell.style.color = "orange"); } -} +}; 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 changeMarker = () => { + currentMarker = currentMarker === "X" ? "O" : "X"; +}; // 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)) - - 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 -} + const row = parseInt(id.charAt(0)); + const column = parseInt(id.charAt(2)); + board[row][column] = currentMarker; +}; 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!`) + window.alert(`Player ${currentMarker} won!`); } else { // if no win, change the marker from X to O, or O to X for the next player. - changeMarker() + changeMarker(); } -} +}; 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 -} - -const changeMarker = () => { - // ternary operator: if it's an X make it an O, if O make it an X - currentMarker = currentMarker === "X" ? "O" : "X" -} + 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[1][1] == "X" && board[2][0] == "X") || + (board[2][0] == "O" && board[1][1] == "O" && board[2][0] == "O") + ) { + return true; + } else { + return false; + } +}; const resetBoard = () => { - // sanity check: this tells us the function is being called - console.log("the board was cleared!") - - // 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 { // 2. Count number of wins for each player and display them // 3. Reset the number of wins // 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..af25956 100644 --- a/index.html +++ b/index.html @@ -1,40 +1,52 @@ - + Tic Tac Toe - - + +
-

Welcome to Tic Tac Toe

+

Tic Tac Toe

Get ready to play!

- +
- - - + + + - - - + + + - - - + + +
diff --git a/main.js b/main.js index 2994e56..aad3c8d 100644 --- a/main.js +++ b/main.js @@ -1,102 +1,184 @@ -'use strict'; - +"use strict"; +// comment for first commit // brings in the assert module for unit testing -const assert = require('assert'); +const assert = require("assert"); // brings in the readline module to access the command line -const readline = require('readline'); +const readline = require("readline"); // use the readline module to print out to the command line const rl = readline.createInterface({ input: process.stdin, - output: process.stdout + output: process.stdout, }); -// creates and empty "board" for the user to see where marks can be placed. +// creates an 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 = [ - [' ', ' ', ' '], - [' ', ' ', ' '], - [' ', ' ', ' '] + [" ", " ", " "], + [" ", " ", " "], + [" ", " ", " "], ]; // assigns the first mark as 'X' // 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'); - console.log('0 ' + board[0].join(' | ')); - console.log(' ---------'); - console.log('1 ' + board[1].join(' | ')); - console.log(' ---------'); - console.log('2 ' + board[2].join(' | ')); -} +let playerTurn = "X"; -const horizontalWin = () => { - // Your code here to check for horizontal wins -} - -const verticalWin = () => { - // Your code here to check for vertical wins -} - -const diagonalWin = () => { - // Your code here to check for diagonal wins -} +const changeMarker = () => { + playerTurn === "X" ? (playerTurn = "O") : (playerTurn = "X"); + // 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!`); + 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; + + // changeMarker() + checkForWin(); +}; const getPrompt = () => { printBoard(); console.log("It's Player " + playerTurn + "'s turn."); - rl.question('row: ', (row) => { - rl.question('column: ', (column) => { + rl.question("row: ", (row) => { + rl.question("column: ", (column) => { ticTacToe(row, column); getPrompt(); }); }); -} +}; + +// is a function that print the current status of the board using the variable - board +const printBoard = () => { + console.log(" 0 1 2"); + console.log("0 " + board[0].join(" | ")); + console.log(" ---------"); + console.log("1 " + board[1].join(" | ")); + console.log(" ---------"); + console.log("2 " + board[2].join(" | ")); +}; +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 = () => { + 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 = () => { + 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[1][1] == "X" && board[2][0] == "X") || + (board[2][0] == "O" && board[1][1] == "O" && board[2][0] == "O") + ) { + return true; + } else { + return false; + } +}; // 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', () => { +if (typeof describe === "function") { + describe("#ticTacToe()", () => { + it("should place mark on the board", () => { ticTacToe(1, 1); - assert.deepEqual(board, [ [' ', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); + assert.deepEqual(board, [ + [" ", " ", " "], + [" ", "X", " "], + [" ", " ", " "], + ]); }); - it('should alternate between players', () => { + it("should alternate between players", () => { ticTacToe(0, 0); - assert.deepEqual(board, [ ['O', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); + assert.deepEqual(board, [ + ["O", " ", " "], + [" ", "X", " "], + [" ", " ", " "], + ]); }); - it('should check for vertical wins', () => { - board = [ [' ', 'X', ' '], [' ', 'X', ' '], [' ', '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'], [' ', ' ', ' '], [' ', ' ', ' '] ]; + it("should check for horizontal wins", () => { + board = [ + ["X", "X", "X"], + [" ", " ", " "], + [" ", " ", " "], + ]; assert.equal(horizontalWin(), true); }); - it('should check for diagonal wins', () => { - board = [ ['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X'] ]; + it("should check for diagonal wins", () => { + board = [ + ["X", " ", " "], + [" ", "X", " "], + [" ", " ", "X"], + ]; assert.equal(diagonalWin(), true); }); - it('should detect a win', () => { + it("should detect a win", () => { assert.equal(checkForWin(), true); }); }); } else { - getPrompt(); - } diff --git a/tictactoe.css b/tictactoe.css index 4526ff0..e1dd883 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -1,7 +1,69 @@ -td{ +/* td{ height:150px; width:150px; text-align: center; border: 5px solid black; font-size: 100px; +} */ +@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap"); + +body { + background-color: steelblue; + color: darkblue; + font-family: "Potta One", sans-serif; +} + +.jumbotron { + text-align: center; + background-color: orange; + /* margin: auto; */ + /* margin-left: 43%; */ +} + +td { + height: 150px; + width: 150px; + text-align: center; + border: 5px solid black; + font-size: 100px; + color: springgreen; +} + +table { + margin: auto; +} + +h1 { + font-size: 7rem; + margin: 0; +} + +h3 { + color: darkmagenta; + margin-top: 5px; + font-size: 3rem; +} + +button { + font-family: "Potta One", sans-serif; + font-size: 1.5rem; + font-weight: 600; + background-color: bisque; + color: steelblue; + border-radius: 0.75rem; + border: 5px solid red; + text-decoration: none; + outline: none; + transition-duration: 0.4s; +} + +button:hover { + background-color: thistle; + border: 5px solid darkmagenta; +} + +button:active { + background-color: springgreen; + box-shadow: 0 2px orange; + transform: translateY(2px); }