Merge pull request #6 from dev-kas/fix/draw-bug

Fix draw detection and enhance game over UI experience
Nishanthnaa52 · Dec 30, 2024 · cf9450d · cf9450d
2 parents 6049eeb + eba8fc9
commit cf9450d
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 28 deletions.
diff --git a/app.js b/app.js
@@ -26,12 +26,14 @@ function addGo (e) {
     goDisay.classList.add(start);
     e.target.append(goDisay);
     start = start === 'circle' ? 'cross' : 'circle';
-    gameInfo.innerHTML = `it is now <span style="color: ${start === 'cross' ? 'rgb(242, 63, 67)' : 'rgb(35, 165, 90)'}">${start}</span>'s turn`;
+    gameInfo.innerHTML = `It is now <span style="color: ${start === 'cross' ? 'rgb(242, 63, 67)' : 'rgb(35, 165, 90)'}">${start}</span>'s turn`;
     e.target.removeEventListener("click", addGo);
 
     checkScore();
 }
 
+let gameOver = false;
+
 function checkScore() {
     const allBox = document.querySelectorAll('.box')
     const winningCombos = [
@@ -40,28 +42,53 @@ function checkScore() {
         [0,4,8],[2,4,6]
     ]
 
-    winningCombos.forEach(array => {
-        const circleWins = array.every(cell => allBox[cell].firstChild?.classList.contains('circle'))
-        if (circleWins) {
-            gameInfo.innerHTML = "<span style='color: rgb(35, 165, 90)'>Circle</span> Wins!";
-            allBox.forEach(box => box.replaceWith(box.cloneNode(true)));
-            document.location.hash = "#gameOver";
-        }
-    })
+    if (!gameOver) {
+        winningCombos.forEach(array => {
+            const circleWins = array.every(cell => allBox[cell].firstChild?.classList.contains('circle'))
+            if (circleWins) {
+                gameInfo.innerHTML = "<span style='color: rgb(35, 165, 90)'>Circle</span> Wins!";
+                allBox.forEach(box => box.replaceWith(box.cloneNode(true)));
+                document.querySelector('#gameOver').classList.remove('smoothHide');
+                gameOver = true;
+            }
+        });
+    }
+
+    if (!gameOver) {
+        winningCombos.forEach(array => {
+            const crossWins = array.every(cell => allBox[cell].firstChild?.classList.contains('cross'))
+            if (crossWins) {
+                gameInfo.innerHTML = "<span style='color: rgb(242, 63, 67)'>Cross</span> Wins!";
+                allBox.forEach(box => box.replaceWith(box.cloneNode(true)));
+                document.querySelector('#gameOver').classList.remove('smoothHide');
+                gameOver = true;
+            }
+        });
+    }
 
-    winningCombos.forEach(array => {
-        const crossWins = array.every(cell => allBox[cell].firstChild?.classList.contains('cross'))
-        if (crossWins) {
-            gameInfo.innerHTML = "<span style='color: rgb(242, 63, 67)'>Cross</span> Wins!";
+    if (!gameOver) {
+        const isDraw = [...allBox].every(box => box.firstChild);
+        if (isDraw) {
+            gameInfo.innerHTML = "<span style='color: rgb(226 219 85);'>Draw</span>!";
             allBox.forEach(box => box.replaceWith(box.cloneNode(true)));
-            document.location.hash = "#gameOver";
-        }
-    })
+            document.querySelector('#gameOver').classList.remove('smoothHide');
+            gameOver = true;
+        };
+    }
+}
 
-    const isDraw = [...allBox].every(box => box.firstChild);
-    if (isDraw) {
-        gameInfo.innerHTML = "<span style='color: rgb(226 219 85);'>Draw</span>!";
-        allBox.forEach(box => box.replaceWith(box.cloneNode(true)));
-        document.location.hash = "#gameOver";
+function restartGame() {
+    for (let i = 0; i < gameBoxs.length; i++) {
+        gameBoxs[i] = "";
     }
+    gameOver = false;
+    start = "circle";
+    gameBoard.innerHTML = "";
+    gameInfo.innerHTML = '<span style="color: rgb(35, 165, 90)">Circle</span> plays first';
+    gameBox();
+    setTimeout(() => {
+        document.querySelector('#gameOver').classList.add('smoothHide');
+    }, 300)
 }
+
+document.querySelector('#restartGame').addEventListener('click', restartGame);
diff --git a/index.css b/index.css
@@ -71,14 +71,11 @@ body {
 }
 
 #gameOver {
-    display: none;
-    opacity: 0;
     transition: opacity 0.2s ease-in-out;
 }
 
-#gameOver:target {
-    display: block;
-    opacity: 1;
+.smoothHide {
+    opacity: 0;
 }
 
 .reset:active span,

diff --git a/index.html b/index.html
@@ -12,8 +12,9 @@ <h1 class="title-text">Tic Tac Toe</h1>
         <div class="gameboard"></div>
         <p class="info"></p>
 
-        <div id="gameOver">
-            <button class="reset" onclick="setTimeout(() => {document.location.hash = ''; location.reload();}, 300)"><span style="font-family: fontawesome;"></span></button>
+        <div id="gameOver" class="smoothHide">
+            <!-- Things to show when the game is over goes here... -->
+            <button id="restartGame" class="reset"><span style="font-family: fontawesome;"></span></button>
         </div>
 
         <script src="./app.js"></script>