Merge pull request #301 from thevijayshankersharma/game-flow-fix

Reset modal state when starting a new game
Sulagna-Dutta-Roy · May 19, 2024 · 872a0e6 · 872a0e6
2 parents 2caa284 + cd1de5c
commit 872a0e6
Showing 1 changed file with 44 additions and 47 deletions.
diff --git a/Word Scramble Game/scripts/script.js b/Word Scramble Game/scripts/script.js
@@ -1,13 +1,13 @@
 const wordText = document.querySelector(".word"),
-hintText = document.querySelector(".hint span"),
-timeText = document.querySelector(".time b"),
-inputField = document.querySelector("input"),
-refreshBtn = document.querySelector(".refresh-word"),
-checkBtn = document.querySelector(".check-word");
-contentBox = document.querySelector(".container .content");
-startArea = document.querySelector(".startArea");
-scoreArea = document.querySelector(".score");
-modalContent = document.querySelector(".modal-content");
+    hintText = document.querySelector(".hint span"),
+    timeText = document.querySelector(".time b"),
+    inputField = document.querySelector("input"),
+    refreshBtn = document.querySelector(".refresh-word"),
+    checkBtn = document.querySelector(".check-word"),
+    contentBox = document.querySelector(".container .content"),
+    startArea = document.querySelector(".startArea"),
+    scoreArea = document.querySelector(".score"),
+    modalContent = document.querySelector(".modal-content");
 
 // Get the modal
 var modal = document.getElementById("myModal");
@@ -19,14 +19,12 @@ var span = document.getElementsByClassName("close")[0];
 var modalText = document.getElementById("modalText");
 
 let correctWord, timer;
-let score = 0; 
-
-
+let score = 0;
 
 const initTimer = maxTime => {
     clearInterval(timer);
     timer = setInterval(() => {
-        if(maxTime > 0) {
+        if (maxTime > 0) {
             maxTime--;
             return timeText.innerText = maxTime;
         }
@@ -40,9 +38,18 @@ const initTimer = maxTime => {
 const start = () => {
     contentBox.style.display = "block";
     startArea.style.display = "none";
-initGame(); 
+    resetModal();
+    score = 0; // Reset score to 0 when starting a new game
+    scoreArea.innerText = score; // Update score display
+    initGame();
 }
 
+const resetModal = () => {
+    modal.style.display = "none";
+    modalContent.classList.remove("modal-correct");
+    modalContent.classList.remove("modal-wrong");
+    modalText.innerHTML = ""; // Clear modal text
+}
 
 const endGame = () => {
     clearInterval(timer);
@@ -54,9 +61,7 @@ const endGame = () => {
     modalText.innerHTML = `
     <center><br>Time off! <b>${correctWord.toUpperCase()}</b> was the correct word.
     <br>You Lost The Game ! :(</center><br>
-    </center>
     `;
-
 }
 
 const winGame = () => {
@@ -65,11 +70,14 @@ const winGame = () => {
     startArea.style.display = "block";
     modal.style.display = "block";
     modalContent.classList.add("modal-correct");
-    modalText.innerHTML = `<br><center>Congrats You WIN THE GAME !!!!!!`;
-
+    modalText.innerHTML = `<br><center>Congrats You WIN THE GAME !!!!!!</center>`;
 }
 
 const initGame = () => {
+    if (score > 9) {
+        winGame();
+        return; // Exit initGame if the player has won
+    }
     initTimer(30);
     let randomObj = words[Math.floor(Math.random() * words.length)];
     let wordArray = randomObj.word.split("");
@@ -80,64 +88,53 @@ const initGame = () => {
 
     wordText.innerText = wordArray.join("");
     hintText.innerText = randomObj.hint;
-    correctWord = randomObj.word.toLowerCase();;
+    correctWord = randomObj.word.toLowerCase();
     inputField.value = "";
     inputField.setAttribute("maxlength", correctWord.length);
     scoreArea.innerHTML = score;
-
-    if(score > 9)
-    {
-        winGame();
-    }
-
 }
 
-
-
 const checkWord = () => {
     let userWord = inputField.value.toLowerCase();
 
-    if(!userWord) { 
+    if (!userWord) {
         modal.style.display = "block";
         modalContent.classList.remove("modal-wrong");
         modalContent.classList.remove("modal-correct");
         return modalText.innerHTML = `<br>Please enter the word to check!`;
     }
 
-    if(userWord !== correctWord) { 
-        if(score >= 1) {
-            score = score - 1; 
+    if (userWord !== correctWord) {
+        if (score >= 1) {
+            score = score - 1;
             scoreArea.innerHTML = score;
         }
         modal.style.display = "block";
         modalContent.classList.add("modal-wrong");
         return modalText.innerHTML = `<br>Oops! <b>${userWord}</b> is not a correct word`;
+    } else {
+        modal.style.display = "block";
+        modalContent.classList.remove("modal-wrong");
+        modalContent.classList.add("modal-correct");
+        modalText.innerHTML = `<br>Congrats! <b>${correctWord.toUpperCase()}</b> is the correct word`;
+        score++;
     }
-    else
-    {
-    modal.style.display = "block";
-    modalContent.classList.remove("modal-wrong");
-    modalContent.classList.add("modal-correct");
-    modalText.innerHTML = `<br>Congrats! <b>${correctWord.toUpperCase()}</b> is the correct word`;
-    score++;
-    }
-
+
     initGame();
 }
 
 refreshBtn.addEventListener("click", initGame);
 checkBtn.addEventListener("click", checkWord);
 
-
 // When the user clicks on <span> (x), close the modal
 span.onclick = function() {
     modal.style.display = "none";
-  }
-  
-  // When the user clicks anywhere outside of the modal, close it
-  window.onclick = function(event) {
+}
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
     if (event.target == modal) {
-      modal.style.display = "none";
+        modal.style.display = "none";
     }
-  }
+}