Merge pull request #26 from mrhat05/feature/add-timer-component

Builded timer component with pause, reset, and start

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

index.html

@@ -53,15 +53,25 @@ <h1>Welcome to the Dragon Fruit Delight Word Scramble Game!</h1>
 
     <h2 id="level-text">Level 1: Fruits</h2>
 
-    <!-- Display Scrambled Word -->
-    <p id="scrambled-word"></p>
-
-    <!-- Textarea for User Input -->
-    <textarea id="user-input" rows="4" cols="50" placeholder="Type your answer here..."></textarea>
-
-    <button onclick="checkAnswer()">Check Answer</button>
-    <p id="result"></p>
+    <div class="timer-container">
+      <div class="timer">01:00</div>
+    </div>
+    <div class="time_btns">
+    <button id="pause-button">Pause</button>
+    <button onclick="resetTimer()" id="reset-button">Reset</button>
+    </div>
 
+    <div class="main-game-content">
+      <!-- Display Scrambled Word -->
+      <p class="scrambled-word"></p>
+
+      <!-- Textarea for User Input -->
+      <textarea id="user-input" rows="4" cols="50" placeholder="Type your answer here..."></textarea>
+
+      <button onclick="checkAnswer()" class="checkans_btn">Check Answer</button>
+      <button onclick="startTheGame()" class="startBtn">Start</button>
+    <p class="result_c" id="result"></p>
+    </div>
     <p><strong>How to Play:</strong></p>
     <ol>
         <li>A scrambled word will appear on the screen.</li>
@@ -85,5 +95,6 @@ <h2>Contact</h2>
   </div>
 
   <script src="script.js"></script>
+
 </body>
 </html>

script.js

@@ -88,10 +88,15 @@ const levels = [
 
 let currentLevelIndex = 0;
 let currentWordIndex = 0;
+let countdown;
+let timeLeft=60;
+let isPaused = false;
+let gameStarted = false;    
+
 
 function displayScrambledWord() {
   const level = levels[currentLevelIndex];
-  const scrambledWordElement = document.getElementById("scrambled-word");
+  const scrambledWordElement = document.querySelector(".scrambled-word");
   const levelTextElement = document.getElementById("level-text");
   const inputBoxElement = document.getElementById("user-input");
 
@@ -100,38 +105,112 @@ function displayScrambledWord() {
   inputBoxElement.style.borderColor = level.color;
 }
 
+
+function startTimer() {
+  clearInterval(countdown);
+  timeLeft = 60;
+  updateTimerDisplay();
+
+  countdown = setInterval(() => {
+    if(!isPaused){
+    const minutes = Math.floor(timeLeft / 60);
+    const seconds = timeLeft % 60;
+
+    const timerDisplay = document.getElementsByClassName("timer")[0];
+    timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+    timeLeft--;
+
+    if (timeLeft <= 30) {
+      timerDisplay.classList.add("low-time");
+    } else {
+      timerDisplay.classList.remove("low-time");
+    }
+
+    if (timeLeft <= 10) {
+      timerDisplay.classList.add("low-low-time");
+    } else {
+      timerDisplay.classList.remove("low-low-time");
+    }
+
+    if (timeLeft < 0) {
+      clearInterval(countdown);
+      document.querySelector(".scrambled-word").textContent = "";
+      document.getElementById("result").textContent = "Game Over! Time's up.";
+    }
+  }
+  }, 1000);
+}
+
+function updateTimerDisplay() {
+  const minutes = Math.floor(timeLeft / 60);
+  const seconds = timeLeft % 60;
+  const timerDisplay = document.getElementsByClassName("timer")[0];
+  timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
+
+document.getElementById("pause-button").addEventListener("click", () => {
+  isPaused = !isPaused; 
+  const pauseButton = document.getElementById("pause-button");
+
+  if (isPaused) {
+    pauseButton.textContent = "Resume";
+  } else {
+    pauseButton.textContent = "Pause";
+  }
+});
+
+
 function checkAnswer() {
+  if (!gameStarted) return;
+
   const userAnswer = document.getElementById("user-input").value.trim().toLowerCase();
   const correctAnswer = levels[currentLevelIndex].words[currentWordIndex].original.toLowerCase();
 
   if (userAnswer === correctAnswer) {
-    currentWordIndex++;
+    currentWordIndex++; // Move to the next word
+
     if (currentWordIndex >= levels[currentLevelIndex].words.length) {
-      currentWordIndex = 0;
-      currentLevelIndex++;
+      // Completed all words in the current level
+      currentWordIndex = 0; // Reset word index for the next level
+      currentLevelIndex++; // Move to the next level
+
       if (currentLevelIndex >= levels.length) {
-        currentLevelIndex = 0;
+        // All levels completed
+        document.getElementById("result").textContent = "You passed all levels!";
+        clearInterval(countdown); // Stop the timer
+        document.querySelector(".scrambled-word").textContent = ""; // Clear scrambled word
+      } else {
+        // Moved to the next level successfully
+        let time = document.getElementsByClassName("timer")[0].textContent;
+        let timeTaken = 60 - parseInt(time.slice(3));
+        document.getElementById("result").textContent = `Victory! You moved to the next level. (Time Taken is ${timeTaken} seconds)`;
+        startTimer(); // Restart timer for the new level
       }
+    } else {
+      // Move to the next word in the current level
+      document.getElementById("result").textContent = "Correct! Next word.";
     }
-    displayScrambledWord();
-    document.getElementById("result").textContent = "Correct! This is the next word.";
+
+    displayScrambledWord(); // Display the next word or new level's first word
+    document.getElementById("user-input").value = ""; // Clear input for the next answer
   } else {
     document.getElementById("result").textContent = "Incorrect! Try again.";
   }
-
-  document.getElementById("user-input").value = "";
 }
 
+
 // Event listener for level selection
 document.getElementById("level-select").addEventListener("change", function () {
   currentLevelIndex = parseInt(this.value);
+  if(gameStarted)startTimer()
   currentWordIndex = 0; // Reset word index
   displayScrambledWord();
 });
 
 // Night mode toggle functionality
 document.getElementById("night-mode-toggle").addEventListener("change", function () {
   document.body.classList.toggle("night-mode");
+  document.querySelector('.result_c').style.color="white"
 });
 
 // Video play/pause functionality
@@ -160,3 +239,29 @@ module.exports = {
   displayScrambledWord,
   checkAnswer
 };
+
+
+
+
+function startTheGame() {
+  document.querySelector(".startBtn").style.display = "none";
+  document.querySelector(".checkans_btn").style.display = "block"; 
+  gameStarted = true;
+  currentLevelIndex = 0;
+  currentWordIndex = 0;
+  document.querySelector(".scrambled-word").style.display="block";
+  document.getElementById("result").textContent = "";
+  displayScrambledWord();
+  startTimer();
+}
+
+function resetTimer(){
+  isPaused=true;
+  const pauseButton = document.getElementById("pause-button");
+  pauseButton.textContent = "Resume";
+  startTimer()
+}
+
+document.querySelector(".startBtn").addEventListener("click", startTheGame);
+
+

style.css

@@ -17,7 +17,8 @@ p {
 }
 
 /* Scrambled word display */
-#scrambled-word {
+.scrambled-word {
+  display: none;
   font-size: 24px;
   font-weight: bold;
   color: #bb2d7d;
@@ -240,6 +241,8 @@ li {
   background-color: #0d6fb1;
 }
 
+
+
 /* Night mode styles */
 body.night-mode {
   background-color: #333;
@@ -251,6 +254,7 @@ body.night-mode button {
   color: #f4f4f4;
 }
 
+
 body.night-mode #scrambled-word {
   color: #ffcc00;
 }
@@ -295,3 +299,47 @@ nav ul li a:hover {
 }
 
 
+.timer-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 10px;
+  /* padding: 20px; */
+}
+.time_btns{
+  margin: 20px;
+}
+.timer {
+  font-size: 80px;
+  font-weight: bold;
+  color: #2D87BB;
+  transition: color 0.5s ease;
+}
+.checkans_btn{
+  display: none;
+}
+@keyframes blink {
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+}
+
+
+.low-time {
+  color: #2D87BB;
+  animation: blink 1s infinite;
+}
+
+.low-low-time {
+  color: #ff0000;
+  animation: blink 1s infinite;
+}
+
+
+.main-game-content{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+}