Merge pull request #41 from Bruno-366/copilot/fix-40

Add LiSS workout duration timer functionality with integrated countdown display and enhanced control buttons

Author: Bruno-366

src/App.svelte

@@ -97,6 +97,14 @@
         workoutType: null,
         phase: 'initial',
         startTime: 0
+      },
+      lissTimer: {
+        isActive: false,
+        isPaused: false,
+        timeLeft: 0,
+        totalTime: 0,
+        startTime: 0,
+        pausedTime: 0
       }
     }))
   }

src/components/CardioWorkouts.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
   import type { Workout, CardioWorkout } from '../types'
+  import { Play, Pause, Square } from 'lucide-svelte'
+  import { showRestCompleteNotification } from '../utils'
+  import { uiStore } from '../stores'
 
   interface CardioWorkoutsProps {
     workout: Workout
@@ -28,6 +31,140 @@
     const type = cardioWorkout().type
     return CARDIO_WORKOUT_CONFIGS[type as keyof typeof CARDIO_WORKOUT_CONFIGS]
   })
+
+  // LiSS Timer functionality
+  const lissTimer = $derived($uiStore.lissTimer)
+  
+  // Update store function
+  const updateLissTimer = (updates: Partial<typeof lissTimer>) => {
+    uiStore.update(state => ({
+      ...state,
+      lissTimer: { ...state.lissTimer, ...updates }
+    }))
+  }
+
+  // Start LiSS timer function
+  const startLissTimer = () => {
+    const duration = cardioWorkout().duration as number
+    const durationInSeconds = duration * 60
+    const now = Date.now()
+    
+    if (lissTimer.isPaused) {
+      // Resume from pause
+      updateLissTimer({
+        isActive: true,
+        isPaused: false,
+        startTime: now - (lissTimer.totalTime - lissTimer.timeLeft) * 1000
+      })
+    } else {
+      // Start fresh
+      updateLissTimer({
+        isActive: true,
+        isPaused: false,
+        timeLeft: durationInSeconds,
+        totalTime: durationInSeconds,
+        startTime: now,
+        pausedTime: 0
+      })
+    }
+  }
+
+  // Pause LiSS timer function
+  const pauseLissTimer = () => {
+    updateLissTimer({
+      isActive: false,
+      isPaused: true,
+      pausedTime: Date.now()
+    })
+  }
+
+  // Stop LiSS timer function
+  const stopLissTimer = () => {
+    updateLissTimer({
+      isActive: false,
+      isPaused: false,
+      timeLeft: 0,
+      totalTime: 0,
+      startTime: 0,
+      pausedTime: 0
+    })
+  }
+
+  // Timer interval effect - timestamp-based to prevent background throttling
+  $effect(() => {
+    let interval: number | undefined
+    
+    if (lissTimer.isActive && lissTimer.timeLeft > 0) {
+      interval = setInterval(() => {
+        const now = Date.now()
+        const elapsedSeconds = Math.floor((now - lissTimer.startTime) / 1000)
+        const newTimeLeft = Math.max(0, lissTimer.totalTime - elapsedSeconds)
+        
+        updateLissTimer({ timeLeft: newTimeLeft })
+      }, 100) // Check more frequently for smoother updates
+    }
+
+    return () => {
+      if (interval) clearInterval(interval)
+    }
+  })
+
+  // Separate effect to handle notification when timer reaches 0
+  $effect(() => {
+    if (lissTimer.isActive && lissTimer.timeLeft === 0) {
+      showRestCompleteNotification()
+      // Auto-pause when complete
+      updateLissTimer({ isActive: false, isPaused: false })
+    }
+  })
+
+  // Derived timer display values
+  const displayDuration = $derived(() => {
+    if (workout.type === 'liss' && typeof cardioWorkout().duration === 'number') {
+      if (lissTimer.isActive || lissTimer.isPaused || lissTimer.timeLeft > 0) {
+        // Show countdown timer
+        const minutes = Math.floor(lissTimer.timeLeft / 60)
+        const seconds = lissTimer.timeLeft % 60
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`
+      } else {
+        // Show initial duration
+        return cardioWorkout().duration
+      }
+    }
+    return cardioWorkout().duration
+  })
+
+  const showTimerControls = $derived(() => {
+    return workout.type === 'liss' && typeof cardioWorkout().duration === 'number'
+  })
+
+  // Derived button states for conditional styling
+  const buttonStates = $derived(() => {
+    const isStartDisabled = lissTimer.isActive
+    const isPauseDisabled = !lissTimer.isActive
+    const isStopDisabled = !lissTimer.isActive && !lissTimer.isPaused
+    
+    return {
+      start: {
+        disabled: isStartDisabled,
+        class: isStartDisabled 
+          ? 'flex-1 bg-green-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
+          : 'flex-1 bg-green-500 hover:bg-green-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
+      },
+      pause: {
+        disabled: isPauseDisabled,
+        class: isPauseDisabled
+          ? 'flex-1 bg-yellow-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
+          : 'flex-1 bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
+      },
+      stop: {
+        disabled: isStopDisabled,
+        class: isStopDisabled
+          ? 'flex-1 bg-red-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
+          : 'flex-1 bg-red-500 hover:bg-red-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
+      }
+    }
+  })
 </script>
 
 {#if workout.type === 'liss' || workout.type === 'hiit'}
@@ -37,12 +174,43 @@
         {cardioWorkout().activity}
       </h3>
       {#if cardioWorkout().duration}
-        <div class="text-4xl font-bold">{cardioWorkout().duration}</div>
+        <div class="text-4xl font-bold">{displayDuration()}</div>
         {#if typeof cardioWorkout().duration === 'number'}
           <div class="text-sm opacity-90 mt-1">minutes</div>
         {/if}
       {/if}
     </div>
+    
+    {#if showTimerControls()}
+      <!-- Timer control buttons -->
+      <div class="flex gap-2 mt-4">
+        <button 
+          onclick={buttonStates().start.disabled ? undefined : startLissTimer} 
+          disabled={buttonStates().start.disabled}
+          class={buttonStates().start.class}
+        >
+          <Play class="w-5 h-5" stroke="none" fill="currentColor" />
+          Start
+        </button>
+        <button 
+          onclick={buttonStates().pause.disabled ? undefined : pauseLissTimer} 
+          disabled={buttonStates().pause.disabled}
+          class={buttonStates().pause.class}
+        >
+          <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
+          Pause
+        </button>
+        <button 
+          onclick={buttonStates().stop.disabled ? undefined : stopLissTimer} 
+          disabled={buttonStates().stop.disabled}
+          class={buttonStates().stop.class}
+        >
+          <Square class="w-5 h-5" stroke="none" fill="currentColor" />
+          Stop
+        </button>
+      </div>
+    {/if}
+    
     <button 
       onclick={onCompleteWorkout} 
       class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-3 rounded-lg transition-colors mt-4"

src/components/ResetProgress.svelte

@@ -35,6 +35,14 @@
           workoutType: null,
           phase: 'initial',
           startTime: 0
+        },
+        lissTimer: {
+          isActive: false,
+          isPaused: false,
+          timeLeft: 0,
+          totalTime: 0,
+          startTime: 0,
+          pausedTime: 0
         }
       })
       

src/stores.ts

@@ -14,6 +14,14 @@ interface UIState {
     phase: 'initial' | 'extended'
     startTime: number
   }
+  lissTimer: {
+    isActive: boolean
+    isPaused: boolean
+    timeLeft: number
+    totalTime: number
+    startTime: number
+    pausedTime: number
+  }
 }
 
 interface WorkoutState {
@@ -167,6 +175,14 @@ const defaultUIState: UIState = {
     workoutType: null,
     phase: 'initial',
     startTime: 0
+  },
+  lissTimer: {
+    isActive: false,
+    isPaused: false,
+    timeLeft: 0,
+    totalTime: 0,
+    startTime: 0,
+    pausedTime: 0
   }
 }
 

src/types.ts

@@ -67,6 +67,14 @@ export interface AppState {
     phase: 'initial' | 'extended';
     startTime: number;
   };
+  lissTimer: {
+    isActive: boolean;
+    isPaused: boolean;
+    timeLeft: number;
+    totalTime: number;
+    startTime: number;
+    pausedTime: number;
+  };
 }
 
 export interface WarmupSet {