✨ Pause timer on click

Author: aceol

css/style.css

@@ -62,11 +62,14 @@ body {
   color: white;
   text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
   z-index: 10;
-  user-select: none;
-  pointer-events: none;
+
+  &.pause {
+    animation: blink 5s infinite;
+  }
 }
 
-#startMessage {
+
+.action-button {
   position: fixed;
   bottom: 10%;
   left: 50%;
@@ -75,6 +78,10 @@ body {
   animation: pulse 1.2s infinite alternate;
   transition: opacity 0.6s ease;
   user-select: none;
+
+  &.hide{
+    display: none;
+  }
 }
 
 #settingsForm {
@@ -170,14 +177,13 @@ body {
   opacity: 0.75;
 }
 
-#toggleSettings {
+#showSettings {
   position: absolute;
   bottom: 0;
   right: 0;
   z-index: 20;
 }
 
-
 /* Animation de pulsation */
 @keyframes pulse {
   0% {transform: translate(-50%, -50%) scale(1);}
@@ -187,7 +193,7 @@ body {
 /* Animation de clignotement */
 @keyframes blink {
   0%, 50%, 100% { opacity: 1;}
-  25%, 75% { opacity: 0;}
+  25%, 75% { opacity: 0.1;}
 }
 
 .blinking {
@@ -214,4 +220,5 @@ body {
   font-weight: bold;
   text-align: center;
   padding: 0.2em;
+  background: none; 
 }

index.html

@@ -78,10 +78,10 @@ <h3>Settings</h3>
   </dialog>
 
 
-  <div id="startMessage"><button id="startAnimation" class="btn">START</button></div>
+  <button id="start-pause" class="btn action-button"></button>
   <div id="timer">00:00</div>
   <div id="expandingDiv"></div>
-  <div id="toggleSettings"><button id="showSettings" class="btn">⚙️</button></div>
+  <button id="showSettings" class="btn">⚙️</button>
   <div id="credits">made with ❤️ by Zenika</div>
 
   <script src="./js/utils.mjs" type="module"></script>

js/app.mjs

@@ -3,17 +3,20 @@ import { updateTimer } from "./utils.mjs";
 
 // Lecture du paramètre "duration" dans l'URL (en secondes)
 const params = new URLSearchParams(globalThis.location.search);
-const div = document.getElementById('expandingDiv');
+const background = document.getElementById('expandingDiv');
 const timer = document.getElementById('timer');
-const startMessage = document.getElementById('startMessage');
+const startBtn = document.getElementById('start-pause');
 const settingsForm = document.getElementById("settingsForm");
 const settingsModal = document.getElementById("settingsModal");
-const closeSettings = document.getElementById("closeSettings");
+const closeSettingsBtn = document.getElementById("closeSettings");
 const resetBtn = document.getElementById("resetBtn");
 const submitBtn = document.getElementById("submitBtn");
 const showSettingsBtn = document.getElementById("showSettings");
-const startAnimationBtn = document.getElementById("startAnimation");
 const totalHeight = window.innerHeight;
+let elapsed = 0;
+let pause = true;
+const pauseChar = '⏸️';
+const playChar = '▶️'; 
 
 const defaultSettings = {
   "durationInSeconds": 600,
@@ -136,25 +139,53 @@ function getClassByProgress(p) {
   return 'ending';
 }
 
-function startAnimation() {
-  requestWakeLock();
-  startMessage.style.opacity = 0;
-  setTimeout(() => startMessage.style.display = 'none', 600);
+function switchPause() {
+  pause = !pause;
+  if (pause) {
+    displayStart();
+    pause = true
+    timer.classList.add("blinking");
+    timer.classList.add("pause");
+    timer.setAttribute('title', "Click to continue");
+  } else {
+    startAnimation(performance.now() - elapsed)
+    timer.classList.remove("blinking");
+    timer.classList.remove("pause");
+    timer.title = "Click to pause";
+  }
+}
 
-  const startTime = performance.now();
+function displayPause() {
+  startBtn.innerHTML = pauseChar;
+  startBtn.title = 'pause';
+}
+
+function displayStart() {
+  startBtn.innerHTML = playChar;
+  startBtn.title = 'start';
+}
 
-  function animate(time) {
-    const elapsed = time - startTime;
-    const progress = Math.min(elapsed / (settings.durationInSeconds * 1000), 1); // 0 → 1
-    const currentHeight = Math.floor(totalHeight * progress);
+function updateBackground(progress) {
+  const currentHeight = Math.floor(totalHeight * progress);
+  background.style.height = `${currentHeight}px`;
+  background.classList = getClassByProgress(progress);
+}
 
-    const remaining = settings.durationInSeconds - (elapsed / 1000);
+function startAnimation(startTime = performance.now()) {
+  requestWakeLock();
+  displayPause();
+
+  function animate(time, durationInSeconds = settings.durationInSeconds) {
+    elapsed = time - startTime;
+    const progress = Math.min(elapsed / (durationInSeconds * 1000), 1); // 0 → 1
+    const remaining = durationInSeconds - (elapsed / 1000);
     timer.textContent = updateTimer(remaining);
 
-    div.style.height = `${currentHeight}px`;
-    div.classList = getClassByProgress(progress);
+    updateBackground(progress)
 
-    if (progress < 1) {
+    if (pause) {
+      return;
+    } else if (progress < 1) {
       requestAnimationFrame(animate);
     } else {
       timer.textContent = "00:00";
@@ -214,14 +245,13 @@ export function init() {
     }
   });
 
-  settingsForm.addEventListener('submit', submitSettings);
-  closeSettings.addEventListener('click', closeSettings);
+
+  showSettingsBtn.addEventListener('click', showSettings);
+  closeSettingsBtn.addEventListener('click', hideSettings);
   resetBtn.addEventListener('click', resetDefaultSettings);
   submitBtn.addEventListener('click', submitSettings);
-  startAnimationBtn.addEventListener('click', startAnimation);
-  showSettingsBtn.addEventListener('click', showSettings);
-
-
+  startBtn.addEventListener('click', switchPause);
+  displayStart();
 
   applySettings();
 }