diff --git a/Tic_Tac_Toe/index.html b/Tic_Tac_Toe/index.html
index ecf8559..779b68b 100644
--- a/Tic_Tac_Toe/index.html
+++ b/Tic_Tac_Toe/index.html
@@ -42,11 +42,6 @@
Tic Tac Toe
Tic Tac Toe
-
@@ -61,16 +56,16 @@
Tic Tac Toe
@@ -80,7 +75,7 @@
-
+
diff --git a/Tic_Tac_Toe/main.js b/Tic_Tac_Toe/main.js
index 6855c66..3a1d6ee 100644
--- a/Tic_Tac_Toe/main.js
+++ b/Tic_Tac_Toe/main.js
@@ -1,4 +1,5 @@
"use strict";
+const endGameModal = document.getElementById("winner-modal");
const players = (mark, name) => {
const getMark = () => mark
@@ -106,6 +107,8 @@ const gameController = (() => {
const restartGame = () => {
gameBoard.restartGameBoard();
+ activeButton = 9;
+
gameBoardButton.forEach((button) => {
button.innerHTML = ''
button.disabled = false;
@@ -113,15 +116,7 @@ const gameController = (() => {
}
const closeGame = () => {
- const modal = document.getElementById("winner-modal");
-
- restartGame();
- changeToStartScene();
- initSelectedGameOptions();
- player1 = null
- player2 = null
- opponent = null
- modal.classList.add('hidden');
+ location.reload();
}
const changeToGameScene = () => {
@@ -129,11 +124,6 @@ const gameController = (() => {
setupScene.classList.add("display-none");
}
- const changeToStartScene = () => {
- gameScene.classList.add("display-none");
- setupScene.classList.remove("display-none");
- }
-
//Buttons
playerMarkChoiceButton.forEach(button => {
button.addEventListener('click', playerMarkChoice);
@@ -144,13 +134,14 @@ const gameController = (() => {
})
startGameButton.addEventListener('click', startGame);
- restartButton.addEventListener('click', restartGame);
closeGameButton.forEach((button) => {
button.addEventListener('click', closeGame);
})
return {
playerMarkChoice,
+ startGame,
+ restartGame,
}
})();
@@ -166,6 +157,7 @@ const gameFlow = (player1, player2, opponent) => {
}
}
+let activeButton = 9;
const gameEngine = (player1, player2, currentPlayer) => {
const board = document.querySelectorAll(".board");
@@ -173,6 +165,11 @@ const gameEngine = (player1, player2, currentPlayer) => {
const index = Number(this.dataset.value);
if (gameBoard.getBoardPosition(index) === '') {
+ activeButton -= 1;
+ if (activeButton === 0) {
+ displayWinner('draw')
+ }
+
gameBoard.setBoardMark(currentPlayer.getMark(), index);
this.innerHTML = currentPlayer.getMark();
this.disabled = true;
@@ -204,7 +201,9 @@ const gameEngine = (player1, player2, currentPlayer) => {
if (valA === valB && valA === valC) {
displayWinner(currentPlayer);
+
board.forEach(btn => btn.disabled = true);
+ currentPlayer = null;
return true;
}
}
@@ -218,9 +217,41 @@ const gameEngine = (player1, player2, currentPlayer) => {
}
const displayWinner = (winner) => {
- const modal = document.getElementById("winner-modal");
const text = document.getElementById("winner-text");
+ const againButton = document.getElementById("game-again");
+
+ if (winner === 'draw') {
+ text.textContent = `DRAW!!`;
+ } else text.textContent = `${winner.getName()} (${winner.getMark()}) wins!`;
+
+ againButton.onclick = () => nextGame(winner);
+
+ endGameModal.classList.remove("hidden");
+};
+
+let player1Score = 0;
+let player2Score = 0;
+let drawScore = 0;
+
+const nextGame = (winner) => {
+ const player1GameScore = document.querySelector('.result-player p#value-o');
+ const player2GameScore = document.querySelector(".result-player p#value-x");
+ const drawGameScore = document.querySelector(".result-draw p#value-d");
+
+ if (winner === 'draw') {
+ drawScore++;
+ drawGameScore.textContent = drawScore.toString();
+ } else if (winner.getName() === 'Player1') {
+ player1Score++;
+ player1GameScore.textContent = player1Score.toString();
+ } else {
+ player2Score++;
+ player2GameScore.textContent = player2Score.toString();
+ }
+
+ gameController.restartGame();
+ gameController.startGame();
- text.textContent = `${winner.getName()} (${winner.getMark()}) wins!`;
- modal.classList.remove("hidden");
+ activeButton = 9;
+ endGameModal.classList.add("hidden");
};
\ No newline at end of file
diff --git a/Tic_Tac_Toe/style/style.css b/Tic_Tac_Toe/style/style.css
index 56f6ecf..c59f719 100644
--- a/Tic_Tac_Toe/style/style.css
+++ b/Tic_Tac_Toe/style/style.css
@@ -159,8 +159,14 @@ body {
}
.game-options-header {
- justify-content: space-between;
+ justify-content: center;
align-items: center;
+ position: relative;
+}
+
+.button-option {
+ position: absolute; /* position relative to the parent */
+ left: 0;
}
.button-option {
@@ -283,9 +289,11 @@ button:disabled:active {
gap: 16px;
}
+
#winner-text {
font-size: 48px;
}
+
.modal-actions {
display: flex;
gap: 16px;
@@ -309,6 +317,7 @@ button:disabled:active {
color: var(--color-white);
font-size: 24px;
}
+
.board:disabled {
scale: none;
}
\ No newline at end of file