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