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;
+}