Merge pull request #165 from aditya-bhaumik/pause

[Feature] : Add Pause/Start Button Functionality
sk66641 · Jun 6, 2024 · 2027b91 · 2027b91
2 parents 0b41a03 + e2c527d
commit 2027b91
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 44 deletions.
diff --git a/index.html b/index.html
@@ -172,6 +172,7 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 39px;
     </footer>
 
     <div id="timerDisplay" aria-label="Timer Display" style="display: none"></div>
+    <button id="pauseStartBtn" style="display: none;" aria-label="Pause/Start">Pause</button>
     <audio id="disco" src="assets/audios/disco.mp3"></audio>
     <audio id="fairies" src="assets/audios/fairies.mp3"></audio>
     <audio id="funky" src="assets/audios/funkydisco.mp3"></audio>
@@ -354,4 +355,4 @@ <h1>Linear Mode</h1>
     <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/script.js b/script.js
@@ -4,32 +4,59 @@ document.addEventListener('DOMContentLoaded', () => {
     const timerDisplay = document.getElementById('timerDisplay');
     const randomizeButton = document.getElementById('randomize');
     const musicSelect = document.getElementById('musicSelect');
+
+    // Create and append the pause/start button
+    const pauseStartButton = document.createElement('button');
+    pauseStartButton.id = 'pauseStartBtn';
+    pauseStartButton.style.display = 'none';
+    pauseStartButton.textContent = 'Pause';
+    pauseStartButton.ariaLabel = 'Pause/Start';
+    document.body.appendChild(pauseStartButton);
+
     let timerInterval;
     let musicAudio;
+    let isPaused = false;
+    let countdownValue;
+    let lightInterval;
 
     submitButton.addEventListener('click', () => {
         alert("Double click on the screen to reload!");
-        run()
+        pauseStartButton.style.display = 'block'; // Show the pause button
+        console.log("Submit button clicked");
+        run();
     });
+
     resetButton.addEventListener('click', () => {
         window.location.reload();
         clearInterval(timerInterval);
+        pauseStartButton.style.display = 'none'; // Hide the pause button
     });
 
+    pauseStartButton.addEventListener('click', () => {
+        if (isPaused) {
+            resumeSimulation();
+        } else {
+            pauseSimulation();
+        }
+    });
+
+
     function startCountdown(duration) {
-        let timer = duration;
+        countdownValue = duration;
         timerDisplay.style.display = 'block';
 
         timerInterval = setInterval(() => {
-            let minutes = Math.floor(timer / 60);
-            let seconds = Math.floor(timer % 60);
+            if (!isPaused) {
+                let minutes = Math.floor(countdownValue / 60);
+                let seconds = Math.floor(countdownValue % 60);
 
-            timerDisplay.textContent = `${pad(minutes)}:${pad(seconds)}`;
+                timerDisplay.textContent = `${pad(minutes)}:${pad(seconds)}`;
 
-            if (--timer < 0) {
-                clearInterval(timerInterval);
-                stopSimulation();
-                timerDisplay.style.display = 'none';
+                if (--countdownValue < 0) {
+                    clearInterval(timerInterval);
+                    stopSimulation();
+                    timerDisplay.style.display = 'none';
+                }
             }
         }, 1000);
     }
@@ -39,20 +66,20 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function stopSimulation() {
-        // const messageDiv = document.getElementById('message');
-        // messageDiv.style.display = 'block';
-        const replayModelEl = document.getElementById('replayModel')
-        replayModelEl.style.display = 'block'
+        const replayModelEl = document.getElementById('replayModel');
+        replayModelEl.style.display = 'block';
     }
+
     document.getElementById('replayModelBtn').addEventListener('click', function () {
-        const replayModelEl = document.getElementById('replayModel')
-        replayModelEl.style.display = 'none'
-        run()
-    })
+        const replayModelEl = document.getElementById('replayModel');
+        replayModelEl.style.display = 'none';
+        run();
+    });
+
     document.getElementById('exitBtn').addEventListener('click', function () {
-        window.location.reload()
-        run()
-    })
+        window.location.reload();
+        run();
+    });
 
     function run() {
         let countdownValue = document.getElementById('countdown').value;
@@ -83,6 +110,7 @@ document.addEventListener('DOMContentLoaded', () => {
             musicAudio = audio;
 
             document.getElementById('musicDropdown').style.display = 'block';
+            pauseStartButton.style.display = 'block'; // Show the pause/start button
         } else {
             document.getElementById("error").style.color = "red";
             if (Number(n) < 0 || !Number.isInteger(Number(n)) || n === "") {
@@ -132,7 +160,6 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         }
 
-
         function numberColorsBetween(color1, color2, num) {
             let colors = `${getRandomColorBetween(color1, color2)}`;
             while (num > 1) {
@@ -164,24 +191,30 @@ document.addEventListener('DOMContentLoaded', () => {
 
         if (view === "custom") {
             applyRandomGradientPattern();
-            setInterval(() => {
-                applyRandomGradientPattern();
+            lightInterval = setInterval(() => {
+                if (!isPaused) {
+                    applyRandomGradientPattern();
+                }
             }, set_time);
         } else if (n == 1) {
             document.body.style.backgroundColor = getRandomColorBetween(rgbColor1, rgbColor2);
-            setInterval(() => {
-                document.body.style.backgroundColor = getRandomColorBetween(rgbColor1, rgbColor2);
+            lightInterval = setInterval(() => {
+                if (!isPaused) {
+                    document.body.style.backgroundColor = getRandomColorBetween(rgbColor1, rgbColor2);
+                }
             }, set_time);
         } else {
             let gradientType = view === "conic" ? "conic-gradient" : view === "linear" ? "linear-gradient" : "radial-gradient";
             document.body.style.background = `${gradientType}(${numberColorsBetween(rgbColor1, rgbColor2, n - 1)}, ${getRandomColorBetween(rgbColor1, rgbColor2)})`;
-            setInterval(() => {
-                document.body.style.background = `${gradientType}(${numberColorsBetween(rgbColor1, rgbColor2, n - 1)}, ${getRandomColorBetween(rgbColor1, rgbColor2)})`;
+            lightInterval = setInterval(() => {
+                if (!isPaused) {
+                    document.body.style.background = `${gradientType}(${numberColorsBetween(rgbColor1, rgbColor2, n - 1)}, ${getRandomColorBetween(rgbColor1, rgbColor2)})`;
+                }
             }, set_time);
         }
     }
 
-    randomizeButton.addEventListener('click', () => {
+  randomizeButton.addEventListener('click', () => {
         const colorInput = document.getElementById('color');
         const randomNumColors = Math.floor(Math.random() * 10) + 1;
         colorInput.value = randomNumColors;
@@ -224,28 +257,53 @@ document.addEventListener('DOMContentLoaded', () => {
         // Update music dropdown
         musicSelect.value = soundSelect.value;
     });
+    let musicMuted = false; // Variable to track whether music is muted
 
-    musicSelect.addEventListener('change', () => {
+    function pauseSimulation() {
+        clearInterval(timerInterval);
+        clearInterval(lightInterval);
         if (musicAudio) {
+            musicMuted = musicAudio.muted; // Remember the mute state
             musicAudio.pause();
         }
-        const selectedMusic = musicSelect.value;
-        if (selectedMusic) {
-            musicAudio = new Audio(selectedMusic);
-            musicAudio.loop = true;
-            musicAudio.play();
+        pauseStartButton.textContent = 'Start';
+        isPaused = true;
+    }
+
+    function resumeSimulation() {
+        startCountdown(countdownValue);
+        if (musicAudio) {
+            if (!musicMuted) {
+                musicAudio.play();
+            }
         }
-    });
+        startSimulation(
+            document.getElementById("color").value,
+            document.getElementById("time").value,
+            document.getElementById("unit").value,
+            document.getElementById("view").value,
+            document.getElementById('color1').value,
+            document.getElementById('color2').value
+        );
+        pauseStartButton.textContent = 'Pause';
+        isPaused = false;
+    }
+
 
     function hexToRgb(hex) {
-        let bigint = parseInt(hex.slice(1), 16);
-        let r = (bigint >> 16) & 255;
-        let g = (bigint >> 8) & 255;
-        let b = bigint & 255;
-        return { r, g, b };
+        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+        hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+            return r + r + g + g + b + b;
+        });
+
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
     }
 });
-
 document.addEventListener('DOMContentLoaded', () => {
     const fullscreenBtn = document.getElementById('fullscreenBtn');
 
@@ -445,4 +503,6 @@ document.addEventListener("DOMContentLoaded", function() {
     setTimeout(() => {
         document.querySelector(".navMain").style.visibility = "visible";
     }, 4000);
-  })
+  })
+
+
diff --git a/style.css b/style.css
@@ -1034,6 +1034,27 @@ nav ul li a:hover {
   opacity: 1;
 
 }
+
+#pauseStartBtn {
+  position: fixed;
+  top: 150px;
+  right: 20px;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  border: none;
+  background: linear-gradient(#1845ad, #23a2f6);
+  color: white;
+  border-radius: 5px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  opacity: .4;
+  transition: 500ms;
+}
+
+#pauseStartBtn:hover {
+  background: linear-gradient(to right, #ff512f, #f09819);
+}
+
 .navHeader {
   margin-top: 100px;
   width: 100vw;
@@ -1084,4 +1105,5 @@ nav ul li a:hover {
   .navMain li a{
     display: none;
   }
-}
+}
+