@wandelbots/wandelbots-js-react-components 2.36.0 → 2.37.0-pr.feature-states-for-cycle-timer.379.4ca80c1

package/src/components/CycleTimer/useAnimations.ts

@@ -0,0 +1,154 @@
+import { useCallback, useRef, useState } from "react"
+import type { AnimationState } from "./types"
+
+export const useAnimations = () => {
+  const [animationState, setAnimationState] = useState<AnimationState>({
+    showPauseAnimation: false,
+    showErrorAnimation: false,
+    showPulsatingText: false,
+    pulsatingFinished: false,
+    showLabels: true,
+    showMainText: true,
+  })
+
+  // Refs for managing timeouts and intervals
+  const pauseAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const errorAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const pulsatingIntervalRef = useRef<NodeJS.Timeout | null>(null)
+  const fadeTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const pulseCountRef = useRef<number>(0)
+
+  const triggerPauseAnimation = useCallback(() => {
+    setAnimationState((prev) => ({ ...prev, showPauseAnimation: true }))
+
+    if (pauseAnimationTimeoutRef.current) {
+      clearTimeout(pauseAnimationTimeoutRef.current)
+    }
+
+    pauseAnimationTimeoutRef.current = setTimeout(() => {
+      setAnimationState((prev) => ({ ...prev, showPauseAnimation: false }))
+    }, 800)
+  }, [])
+
+  const triggerErrorAnimation = useCallback(() => {
+    setAnimationState((prev) => ({ ...prev, showErrorAnimation: true }))
+
+    if (errorAnimationTimeoutRef.current) {
+      clearTimeout(errorAnimationTimeoutRef.current)
+    }
+
+    errorAnimationTimeoutRef.current = setTimeout(() => {
+      setAnimationState((prev) => ({ ...prev, showErrorAnimation: false }))
+    }, 600)
+  }, [])
+
+  const clearErrorAnimation = useCallback(() => {
+    setAnimationState((prev) => ({ ...prev, showErrorAnimation: false }))
+    if (errorAnimationTimeoutRef.current) {
+      clearTimeout(errorAnimationTimeoutRef.current)
+    }
+  }, [])
+
+  const startPulsatingAnimation = useCallback((onComplete?: () => void) => {
+    pulseCountRef.current = 0
+    setAnimationState((prev) => ({
+      ...prev,
+      showPulsatingText: true,
+      pulsatingFinished: false,
+    }))
+
+    pulsatingIntervalRef.current = setInterval(() => {
+      pulseCountRef.current += 1
+
+      if (pulseCountRef.current >= 8) {
+        // 4 complete cycles (on->off->on->off = 8 state changes)
+        if (pulsatingIntervalRef.current) {
+          clearInterval(pulsatingIntervalRef.current)
+          pulsatingIntervalRef.current = null
+        }
+        setAnimationState((prev) => ({
+          ...prev,
+          showPulsatingText: false,
+          pulsatingFinished: true,
+        }))
+        if (onComplete) {
+          onComplete()
+        }
+      } else {
+        setAnimationState((prev) => ({
+          ...prev,
+          showPulsatingText: !prev.showPulsatingText,
+        }))
+      }
+    }, 800)
+  }, [])
+
+  const stopPulsatingAnimation = useCallback(() => {
+    if (pulsatingIntervalRef.current) {
+      clearInterval(pulsatingIntervalRef.current)
+      pulsatingIntervalRef.current = null
+    }
+    setAnimationState((prev) => ({
+      ...prev,
+      showPulsatingText: false,
+      pulsatingFinished: false,
+    }))
+    pulseCountRef.current = 0
+  }, [])
+
+  const triggerFadeTransition = useCallback(() => {
+    setAnimationState((prev) => ({
+      ...prev,
+      showLabels: false,
+      showMainText: false,
+    }))
+
+    if (fadeTimeoutRef.current) {
+      clearTimeout(fadeTimeoutRef.current)
+    }
+
+    fadeTimeoutRef.current = setTimeout(() => {
+      setAnimationState((prev) => ({
+        ...prev,
+        showLabels: true,
+        showMainText: true,
+      }))
+    }, 200)
+  }, [])
+
+  const setInitialAnimationState = useCallback(() => {
+    setAnimationState((prev) => ({
+      ...prev,
+      showLabels: true,
+      showMainText: true,
+    }))
+  }, [])
+
+  // Cleanup function
+  const cleanup = useCallback(() => {
+    if (pauseAnimationTimeoutRef.current) {
+      clearTimeout(pauseAnimationTimeoutRef.current)
+    }
+    if (errorAnimationTimeoutRef.current) {
+      clearTimeout(errorAnimationTimeoutRef.current)
+    }
+    if (fadeTimeoutRef.current) {
+      clearTimeout(fadeTimeoutRef.current)
+    }
+    if (pulsatingIntervalRef.current) {
+      clearInterval(pulsatingIntervalRef.current)
+    }
+  }, [])
+
+  return {
+    animationState,
+    triggerPauseAnimation,
+    triggerErrorAnimation,
+    clearErrorAnimation,
+    startPulsatingAnimation,
+    stopPulsatingAnimation,
+    triggerFadeTransition,
+    setInitialAnimationState,
+    cleanup,
+  }
+}

package/src/components/CycleTimer/useTimerLogic.ts

@@ -0,0 +1,377 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import { useInterpolation } from "../utils/interpolation"
+import type { TimerState } from "./types"
+import { calculateExactProgress } from "./utils"
+
+interface UseTimerLogicProps {
+  autoStart: boolean
+  onCycleEnd?: () => void
+  onMeasuringComplete?: () => void
+  hasError: boolean
+  onPauseAnimation: () => void
+  onErrorAnimation: () => void
+  onClearErrorAnimation: () => void
+  onStartPulsating: (onComplete?: () => void) => void
+}
+
+export const useTimerLogic = ({
+  autoStart,
+  onCycleEnd,
+  onMeasuringComplete,
+  hasError,
+  onPauseAnimation,
+  onErrorAnimation,
+  onClearErrorAnimation,
+  onStartPulsating,
+}: UseTimerLogicProps) => {
+  const [timerState, setTimerState] = useState<TimerState>({
+    currentState: "idle",
+    remainingTime: 0,
+    maxTime: null,
+    isRunning: false,
+    isPausedState: false,
+    currentProgress: 0,
+    wasRunningBeforeError: false,
+  })
+
+  // Timer-related refs
+  const animationRef = useRef<number | null>(null)
+  const startTimeRef = useRef<number | null>(null)
+  const pausedTimeRef = useRef<number>(0)
+
+  // Spring-based interpolator for smooth gauge progress animations
+  const [progressInterpolator] = useInterpolation([0], {
+    tension: 80,
+    friction: 18,
+    onChange: ([progress]) => {
+      setTimerState((prev) => ({ ...prev, currentProgress: progress }))
+    },
+  })
+
+  const setIdle = useCallback(() => {
+    setTimerState((prev) => ({
+      ...prev,
+      currentState: "idle",
+      maxTime: null,
+      remainingTime: 0,
+      isRunning: false,
+      isPausedState: false,
+    }))
+    pausedTimeRef.current = 0
+    startTimeRef.current = null
+    progressInterpolator.setTarget([0])
+  }, [progressInterpolator])
+
+  const startMeasuring = useCallback(
+    (elapsedSeconds: number = 0) => {
+      setTimerState((prev) => ({
+        ...prev,
+        currentState: "measuring",
+        maxTime: null,
+        remainingTime: elapsedSeconds,
+        isPausedState: false,
+      }))
+      pausedTimeRef.current = 0
+
+      const initialProgress = ((elapsedSeconds / 60) % 1) * 100
+      progressInterpolator.setTarget([initialProgress])
+
+      if (autoStart) {
+        startTimeRef.current = Date.now() - elapsedSeconds * 1000
+        setTimerState((prev) => ({ ...prev, isRunning: true }))
+      } else {
+        startTimeRef.current = null
+      }
+    },
+    [autoStart, progressInterpolator],
+  )
+
+  const startCountUp = useCallback(
+    (elapsedSeconds: number = 0) => {
+      setTimerState((prev) => ({
+        ...prev,
+        currentState: "countup",
+        maxTime: null,
+        remainingTime: elapsedSeconds,
+        isPausedState: false,
+      }))
+      pausedTimeRef.current = 0
+
+      const initialProgress = ((elapsedSeconds / 60) % 1) * 100
+      progressInterpolator.setTarget([initialProgress])
+
+      if (autoStart) {
+        startTimeRef.current = Date.now() - elapsedSeconds * 1000
+        setTimerState((prev) => ({ ...prev, isRunning: true }))
+      } else {
+        startTimeRef.current = null
+      }
+    },
+    [autoStart, progressInterpolator],
+  )
+
+  const startNewCycle = useCallback(
+    (maxTimeSeconds?: number, elapsedSeconds: number = 0) => {
+      // Stop any running timer first to prevent conflicts
+      setTimerState((prev) => ({ ...prev, isRunning: false }))
+      startTimeRef.current = null
+
+      const newState = maxTimeSeconds !== undefined ? "countdown" : "countup"
+      setTimerState((prev) => ({
+        ...prev,
+        currentState: newState,
+        maxTime: maxTimeSeconds ?? null,
+        isPausedState: false,
+      }))
+      pausedTimeRef.current = 0
+
+      if (maxTimeSeconds !== undefined) {
+        // Count-down mode
+        const remainingSeconds = Math.max(0, maxTimeSeconds - elapsedSeconds)
+        setTimerState((prev) => ({ ...prev, remainingTime: remainingSeconds }))
+
+        const initialProgress =
+          elapsedSeconds > 0 ? (elapsedSeconds / maxTimeSeconds) * 100 : 0
+
+        progressInterpolator.setTarget([initialProgress])
+        progressInterpolator.update(1)
+
+        if (remainingSeconds === 0) {
+          setTimerState((prev) => ({ ...prev, isRunning: false }))
+          startTimeRef.current = null
+          if (onCycleEnd) {
+            setTimeout(() => onCycleEnd(), 0)
+          }
+        } else if (autoStart) {
+          setTimeout(() => {
+            startTimeRef.current = Date.now() - elapsedSeconds * 1000
+            setTimerState((prev) => ({ ...prev, isRunning: true }))
+          }, 0)
+        } else {
+          startTimeRef.current = null
+        }
+      } else {
+        // Count-up mode
+        setTimerState((prev) => ({ ...prev, remainingTime: elapsedSeconds }))
+
+        const initialProgress = ((elapsedSeconds / 60) % 1) * 100
+        progressInterpolator.setTarget([initialProgress])
+        progressInterpolator.update(1)
+
+        if (autoStart) {
+          setTimeout(() => {
+            startTimeRef.current = Date.now() - elapsedSeconds * 1000
+            setTimerState((prev) => ({ ...prev, isRunning: true }))
+          }, 0)
+        } else {
+          startTimeRef.current = null
+        }
+      }
+    },
+    [autoStart, onCycleEnd, progressInterpolator],
+  )
+
+  const completeMeasuring = useCallback(() => {
+    if (timerState.currentState === "measuring") {
+      setTimerState((prev) => ({
+        ...prev,
+        isRunning: false,
+        currentState: "measured",
+      }))
+      startTimeRef.current = null
+
+      onStartPulsating(() => {
+        if (onMeasuringComplete) {
+          onMeasuringComplete()
+        }
+      })
+    }
+  }, [timerState.currentState, onStartPulsating, onMeasuringComplete])
+
+  const pause = useCallback(() => {
+    if (startTimeRef.current && timerState.isRunning) {
+      const now = Date.now()
+      const additionalElapsed = now - startTimeRef.current
+      pausedTimeRef.current += additionalElapsed
+
+      const totalElapsed = pausedTimeRef.current / 1000
+      const exactProgress = calculateExactProgress(
+        timerState.currentState,
+        totalElapsed,
+        timerState.maxTime,
+      )
+      progressInterpolator.setTarget([exactProgress])
+    }
+
+    setTimerState((prev) => ({
+      ...prev,
+      isRunning: false,
+      isPausedState: true,
+    }))
+    onPauseAnimation()
+  }, [
+    timerState.isRunning,
+    timerState.currentState,
+    timerState.maxTime,
+    progressInterpolator,
+    onPauseAnimation,
+  ])
+
+  const resume = useCallback(() => {
+    if (
+      timerState.isPausedState &&
+      (timerState.remainingTime > 0 || timerState.currentState !== "countdown")
+    ) {
+      startTimeRef.current = Date.now()
+      setTimerState((prev) => ({
+        ...prev,
+        isRunning: true,
+        isPausedState: false,
+      }))
+    }
+  }, [
+    timerState.isPausedState,
+    timerState.remainingTime,
+    timerState.currentState,
+  ])
+
+  const isPaused = useCallback(() => {
+    return timerState.isPausedState
+  }, [timerState.isPausedState])
+
+  // Handle error state changes
+  useEffect(() => {
+    if (hasError) {
+      if (timerState.isRunning && !timerState.isPausedState) {
+        setTimerState((prev) => ({ ...prev, wasRunningBeforeError: true }))
+        pause()
+      }
+      onErrorAnimation()
+    } else {
+      if (timerState.wasRunningBeforeError && timerState.isPausedState) {
+        setTimerState((prev) => ({ ...prev, wasRunningBeforeError: false }))
+        resume()
+      }
+      onClearErrorAnimation()
+    }
+  }, [
+    hasError,
+    timerState.isRunning,
+    timerState.isPausedState,
+    timerState.wasRunningBeforeError,
+    pause,
+    resume,
+    onErrorAnimation,
+    onClearErrorAnimation,
+  ])
+
+  // Main timer loop
+  useEffect(() => {
+    if (timerState.isRunning) {
+      const updateTimer = () => {
+        if (startTimeRef.current) {
+          const now = Date.now()
+          const elapsed =
+            (now - startTimeRef.current + pausedTimeRef.current) / 1000
+
+          if (
+            timerState.currentState === "countdown" &&
+            timerState.maxTime !== null
+          ) {
+            const remaining = Math.max(0, timerState.maxTime - elapsed)
+            setTimerState((prev) => ({
+              ...prev,
+              remainingTime: Math.ceil(remaining),
+            }))
+
+            const progress = Math.min(100, (elapsed / timerState.maxTime) * 100)
+            progressInterpolator.setTarget([progress])
+
+            if (remaining <= 0) {
+              setTimerState((prev) => ({
+                ...prev,
+                isRunning: false,
+                remainingTime: 0,
+              }))
+              startTimeRef.current = null
+              progressInterpolator.setTarget([100])
+              if (onCycleEnd) {
+                setTimeout(() => onCycleEnd(), 0)
+              }
+              return
+            }
+          } else if (timerState.currentState === "measuring") {
+            setTimerState((prev) => ({
+              ...prev,
+              remainingTime: Math.floor(elapsed),
+            }))
+            const progress = ((elapsed / 60) % 1) * 100
+            progressInterpolator.setTarget([progress])
+          } else if (timerState.currentState === "countup") {
+            setTimerState((prev) => ({
+              ...prev,
+              remainingTime: Math.floor(elapsed),
+            }))
+            const progress = ((elapsed / 60) % 1) * 100
+            progressInterpolator.setTarget([progress])
+          }
+
+          if (timerState.isRunning) {
+            animationRef.current = requestAnimationFrame(updateTimer)
+          }
+        }
+      }
+
+      animationRef.current = requestAnimationFrame(updateTimer)
+    } else {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+        animationRef.current = null
+      }
+    }
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+    }
+  }, [
+    timerState.isRunning,
+    onCycleEnd,
+    timerState.currentState,
+    timerState.maxTime,
+    progressInterpolator,
+  ])
+
+  // Interpolation animation loop
+  useEffect(() => {
+    let interpolationAnimationId: number | null = null
+
+    const animateInterpolation = () => {
+      progressInterpolator.update(1 / 60)
+      interpolationAnimationId = requestAnimationFrame(animateInterpolation)
+    }
+
+    interpolationAnimationId = requestAnimationFrame(animateInterpolation)
+
+    return () => {
+      if (interpolationAnimationId) {
+        cancelAnimationFrame(interpolationAnimationId)
+      }
+    }
+  }, [progressInterpolator])
+
+  return {
+    timerState,
+    controls: {
+      startNewCycle,
+      startMeasuring,
+      startCountUp,
+      setIdle,
+      completeMeasuring,
+      pause,
+      resume,
+      isPaused,
+    },
+  }
+}

package/src/components/CycleTimer/utils.ts

@@ -0,0 +1,53 @@
+/**
+ * Formats time in seconds to MM:SS format
+ */
+export const formatTime = (seconds: number): string => {
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = seconds % 60
+  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
+}
+
+/**
+ * Calculates progress percentage for different timer states
+ */
+export const calculateProgress = (
+  currentState: string,
+  remainingTime: number,
+  maxTime: number | null,
+): number => {
+  if (currentState === "idle") {
+    return 0
+  }
+
+  if (currentState === "countdown" && maxTime !== null) {
+    // Count-down mode: progress based on elapsed time
+    const elapsed = maxTime - remainingTime
+    return Math.min(100, (elapsed / maxTime) * 100)
+  }
+
+  if (currentState === "measuring" || currentState === "countup") {
+    // Count-up modes: progress based on minute steps (0-100% per minute)
+    return ((remainingTime / 60) % 1) * 100
+  }
+
+  return 0
+}
+
+/**
+ * Calculates exact progress position based on elapsed time
+ */
+export const calculateExactProgress = (
+  currentState: string,
+  totalElapsed: number,
+  maxTime: number | null,
+): number => {
+  if (currentState === "countdown" && maxTime !== null) {
+    return Math.min(100, (totalElapsed / maxTime) * 100)
+  }
+
+  if (currentState === "measuring" || currentState === "countup") {
+    return ((totalElapsed / 60) % 1) * 100
+  }
+
+  return 0
+}