- make transition smoother

Author: TobiasMue91

playground/pushup_timer.html

@@ -93,7 +93,7 @@
         .progress-fill {
             height: 100%;
             background: white;
-            transition: width 0.1s linear;
+            transition: none;
         }
 
         .controls {
@@ -154,8 +154,8 @@
 <script>
     let currentPushup = 0;
     let currentPhase = 'ready'; // ready, countdown, down, hold, up
-    let timeLeft = 0;
-    let totalTime = 0;
+    let phaseStartTime = 0;
+    let phaseDuration = 0;
     let intervalId = null;
     let isRunning = false;
 
@@ -167,8 +167,13 @@
     };
 
     function updateDisplay() {
+        const now = Date.now();
+        const elapsed = (now - phaseStartTime) / 1000;
+        const timeLeft = Math.max(0, phaseDuration - elapsed);
+        const displayTime = Math.ceil(timeLeft);
+
         document.getElementById('currentPushup').textContent = currentPushup;
-        document.getElementById('timer').textContent = timeLeft;
+        document.getElementById('timer').textContent = displayTime;
 
         const phaseElement = document.getElementById('phase');
         const progressFill = document.getElementById('progressFill');
@@ -183,18 +188,23 @@
             progressFill.style.width = '100%';
             document.getElementById('completed').style.display = 'block';
         } else if (currentPhase === 'countdown') {
-            phaseElement.textContent = `GET READY - ${timeLeft}`;
+            phaseElement.textContent = `GET READY - ${displayTime}`;
             phaseElement.className = 'phase countdown';
-            const progress = ((totalTime - timeLeft) / totalTime) * 100;
+            const progress = Math.min(100, (elapsed / phaseDuration) * 100);
             progressFill.style.width = `${progress}%`;
         } else {
             const phase = phases[currentPhase];
             phaseElement.textContent = phase.text;
             phaseElement.className = `phase ${phase.class}`;
 
-            const progress = ((totalTime - timeLeft) / totalTime) * 100;
+            const progress = Math.min(100, (elapsed / phaseDuration) * 100);
             progressFill.style.width = `${progress}%`;
         }
+
+        // Check if phase should end
+        if (elapsed >= phaseDuration && currentPhase !== 'ready' && currentPhase !== 'completed') {
+            nextPhase();
+        }
     }
 
     function nextPhase() {
@@ -220,26 +230,17 @@
             }
         }
 
-        timeLeft = phases[currentPhase].duration;
-        totalTime = timeLeft;
-        updateDisplay();
-    }
-
-    function tick() {
-        timeLeft--;
+        phaseDuration = phases[currentPhase].duration;
+        phaseStartTime = Date.now();
         updateDisplay();
-
-        if (timeLeft <= 0) {
-            nextPhase();
-        }
     }
 
     function startWorkout() {
         if (!isRunning) {
             if (currentPhase === 'ready') {
                 nextPhase();
             }
-            intervalId = setInterval(tick, 1000);
+            intervalId = setInterval(updateDisplay, 50); // Update every 50ms for smooth animation
             isRunning = true;
         }
     }
@@ -256,8 +257,8 @@
         isRunning = false;
         currentPushup = 0;
         currentPhase = 'ready';
-        timeLeft = 0;
-        totalTime = 0;
+        phaseStartTime = 0;
+        phaseDuration = 0;
         document.getElementById('completed').style.display = 'none';
         updateDisplay();
     }