From 0c36df88f7839155e24c4c7bd7efa8cd62005876 Mon Sep 17 00:00:00 2001
From: Mohamed Amine <ma.abahmane@gmail.com>
Date: Thu, 14 Mar 2024 05:54:55 +0000
Subject: [PATCH] Refactor game logic and timer

---
 script.js | 59 ++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/script.js b/script.js
index bde064d..9507e8e 100644
--- a/script.js
+++ b/script.js
@@ -4,6 +4,10 @@ let board = document.querySelector(".outer");
 let table = document.querySelector(".table");
 
 
+let Game0N = false
+let TIME = 5 * 60
+let onTable = 0
+
 //pre-loader
 window.addEventListener("load", () => {
     const preloader = document.querySelector(".preloader");
@@ -12,15 +16,14 @@ window.addEventListener("load", () => {
     }, 2000)
 });
 
-let onTable = 0
 
 //this function triggers when you click play
 function StartGame() {
-    if (parseInt(points.innerHTML) <= 0) {
+    if (parseInt(points.innerHTML) <= 0) { // if no spades left
         score.innerHTML = 'No spades left '
         board.style.display = "flex";
         clearInterval(idItr);
-    } else if (onTable == 0) {
+    } else if (onTable == 0) { // if no spades on table
         // blinking border
         table.style.border = '5px dashed red'
 
@@ -36,25 +39,26 @@ function StartGame() {
             table.style.border = '5px dashed transparent'
         }, 1500)
     } else {
+        Game0N = true
         Showball();
         // setTimeout(Showball,);
         setTimeout(shuffling, 7000);
     }
 }
 
+
 //this function lifts the thimbles
 function thimbleup(x) {
     x.classList.add("thimbleup");
 }
-
 //this function puts the thimble down
 function thimbledown(x) {
     x.classList.remove("thimbleup");
 }
-
-//this function selects one thimble at random and positions the ball under it and lifts it at the beginning
-let timeLeft = 1 * 60; // 5 minutes in seconds
+//this function selects one thimble at random and positions the ball
+// under it and lifts it at the beginning
 let idItr
+let timeLeft = TIME ; // 5 minutes in seconds
 function Showball() {
     document.getElementById("Playbutton").style.pointerEvents = "none";
     let rand = getRandNum();
@@ -79,22 +83,25 @@ function Showball() {
     // Start Timer
     if (countdownEl.innerHTML == '05:00') {
         idItr = setInterval(() => {
-
             if (timeLeft <= 0) {
-                clearInterval(idItr);
-                board.style.display = "flex";
-                score.innerHTML = 'Time\'s up!  You Won ' + points.innerHTML + ' '
+                if (!Game0N) {
+                    setTimeout(() => {
+                        clearInterval(idItr);
+                        board.style.display = "flex";
+                        score.innerHTML = 'Time\'s up!  You Won ' + points.innerHTML + ' '
+                        clearInterval(idItr);
+                    }, 2000)
+                }
+            } else {
+                let minutes = Math.floor(timeLeft / 60);
+                let seconds = timeLeft % 60;
+
+                minutes = minutes < 10 ? '0' + minutes : minutes;
+                seconds = seconds < 10 ? '0' + seconds : seconds;
+
+                countdownEl.innerHTML = `${minutes}:${seconds}`;
+                timeLeft--;
             }
-
-            let minutes = Math.floor(timeLeft / 60);
-            let seconds = timeLeft % 60;
-
-            minutes = minutes < 10 ? '0' + minutes : minutes;
-            seconds = seconds < 10 ? '0' + seconds : seconds;
-
-            countdownEl.innerHTML = `${minutes}:${seconds}`;
-            timeLeft--;
-
         }, 1000);
     }
 }
@@ -234,13 +241,14 @@ function selectthimble(x) {
             }, 2500); //bring the winning thimble down after 2.5secs
             document.getElementById("Playbutton").style.pointerEvents = "all"; //make the play button clickable again
         }
+        Game0N = false
     }, 2000);
 }
 
 
 function setCup(id) {
     let elements = document.querySelectorAll(".sewing_thimble");
-    for (element of elements) {
+    for (let element of elements) {
         element.style.background = `url("Img/c${id}.png") no-repeat fixed center`;
         element.style.backgroundSize = `contain`;
     }
@@ -270,4 +278,11 @@ function init() {
     points.innerHTML = 200;
     board.style.display = "none";
     countdownEl.innerHTML = '05:00'
+    // Clear all intervals and timeouts
+    InID = setInterval(() => {}, 10)
+    TiID = setTimeout(() => {}, 10)
+    while (InID--) clearInterval(InID)
+    while (TiID--) clearTimeout(TiID)
+    timeLeft = TIME
+
 }
\ No newline at end of file