vibefast-cli 1.2.1 → 1.3.1

package/recipes/screen-kits-fitness/apps/native/src/features/screen-kits/fitness/hooks/use-timer.ts

@@ -0,0 +1,307 @@
+import { setAudioModeAsync, useAudioPlayer } from 'expo-audio';
+import * as Haptics from 'expo-haptics';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  Easing,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+import {
+  FITNESS_COLORS,
+  PHASE_COLORS,
+  SAMPLE_EXERCISES,
+  type TimerPhase,
+} from '../constants';
+import type { TimerSettings } from '../components/timer-settings-modal';
+
+export function useTimer(initialSettings: TimerSettings, CIRCLE_SIZE: number) {
+  // Timer state
+  const [settings, setSettings] = useState<TimerSettings>(initialSettings);
+  const [phase, setPhase] = useState<TimerPhase>('idle');
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [timeLeft, setTimeLeft] = useState(settings.workDuration);
+  const [currentRound, setCurrentRound] = useState(1);
+  const [currentExerciseIndex, setCurrentExerciseIndex] = useState(0);
+  const [showCelebration, setShowCelebration] = useState(false);
+
+  const soundCue = useAudioPlayer(require('@assets/sounds/timer-beep.wav'), {
+    updateInterval: 1000,
+    keepAudioSessionActive: true,
+  });
+
+  // Animation values
+  const progress = useSharedValue(1);
+  const scale = useSharedValue(1);
+  const ringColor = useSharedValue(FITNESS_COLORS.primary);
+  const countdownScale = useSharedValue(1);
+
+  const R = (CIRCLE_SIZE - 20) / 2;
+  const circumference = 2 * Math.PI * R;
+
+  // Get total duration for current phase
+  const getPhaseDuration = useCallback(
+    (p: TimerPhase) => {
+      if (p === 'getReady') return 3;
+      if (p === 'work') return settings.workDuration;
+      if (p === 'rest') return settings.restDuration;
+      return settings.workDuration;
+    },
+    [settings.workDuration, settings.restDuration],
+  );
+
+  useEffect(() => {
+    if (!settings.soundEnabled) return;
+    setAudioModeAsync({ playsInSilentMode: true }).catch(() => undefined);
+  }, [settings.soundEnabled]);
+
+  useEffect(() => {
+    soundCue.volume = 0.6;
+  }, [soundCue]);
+
+  const playSoundCue = useCallback(() => {
+    if (!settings.soundEnabled || !soundCue.isLoaded) return;
+    void soundCue
+      .seekTo(0)
+      .then(() => soundCue.play())
+      .catch(() => undefined);
+  }, [settings.soundEnabled, soundCue]);
+
+  const triggerHaptic = useCallback(
+    (type: 'light' | 'medium' | 'heavy' | 'success' | 'warning') => {
+      if (!settings.hapticEnabled) return;
+      switch (type) {
+        case 'light':
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+          break;
+        case 'medium':
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+          break;
+        case 'heavy':
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+          break;
+        case 'success':
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+          break;
+        case 'warning':
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+          break;
+      }
+    },
+    [settings.hapticEnabled],
+  );
+
+  const transitionToPhase = useCallback(
+    (newPhase: TimerPhase) => {
+      setPhase(newPhase);
+      const duration = getPhaseDuration(newPhase);
+      setTimeLeft(duration);
+      progress.value = 1;
+      ringColor.value = withTiming(PHASE_COLORS[newPhase], { duration: 300 });
+
+      if (
+        newPhase === 'work' ||
+        newPhase === 'rest' ||
+        newPhase === 'complete'
+      ) {
+        playSoundCue();
+      }
+
+      if (newPhase === 'work') triggerHaptic('heavy');
+      else if (newPhase === 'rest') triggerHaptic('medium');
+      else if (newPhase === 'getReady') triggerHaptic('light');
+      else if (newPhase === 'complete') triggerHaptic('success');
+    },
+    [getPhaseDuration, playSoundCue, progress, ringColor, triggerHaptic],
+  );
+
+  const startWorkout = useCallback(() => {
+    setIsPlaying(true);
+    transitionToPhase('getReady');
+  }, [transitionToPhase]);
+
+  const toggleTimer = useCallback(() => {
+    if (phase === 'idle' || phase === 'complete') {
+      startWorkout();
+    } else {
+      setIsPlaying((prev) => !prev);
+      triggerHaptic('light');
+    }
+  }, [phase, startWorkout, triggerHaptic]);
+
+  const skipForward = useCallback(() => {
+    if (phase === 'getReady') {
+      transitionToPhase('work');
+    } else if (phase === 'work') {
+      if (settings.mode === 'countdown') {
+        transitionToPhase('complete');
+        setIsPlaying(false);
+        setShowCelebration(true);
+      } else if (settings.restDuration > 0) {
+        transitionToPhase('rest');
+      } else {
+        if (currentRound < settings.rounds) {
+          setCurrentRound((prev) => prev + 1);
+          setCurrentExerciseIndex((prev) =>
+            Math.min(prev + 1, SAMPLE_EXERCISES.length - 1),
+          );
+          transitionToPhase('work');
+        } else {
+          transitionToPhase('complete');
+          setIsPlaying(false);
+          setShowCelebration(true);
+        }
+      }
+    } else if (phase === 'rest') {
+      if (currentRound < settings.rounds) {
+        setCurrentRound((prev) => prev + 1);
+        setCurrentExerciseIndex((prev) =>
+          Math.min(prev + 1, SAMPLE_EXERCISES.length - 1),
+        );
+        transitionToPhase('work');
+      } else {
+        transitionToPhase('complete');
+        setIsPlaying(false);
+        setShowCelebration(true);
+      }
+    }
+    triggerHaptic('light');
+  }, [phase, settings, currentRound, transitionToPhase, triggerHaptic]);
+
+  const skipBackward = useCallback(() => {
+    const duration = getPhaseDuration(phase);
+    setTimeLeft(duration);
+    progress.value = 1;
+    triggerHaptic('light');
+  }, [phase, getPhaseDuration, progress, triggerHaptic]);
+
+  const resetWorkout = useCallback(
+    (nextSettings?: TimerSettings) => {
+      const workDuration = nextSettings?.workDuration ?? settings.workDuration;
+      setIsPlaying(false);
+      setPhase('idle');
+      setCurrentRound(1);
+      setCurrentExerciseIndex(0);
+      setTimeLeft(workDuration);
+      progress.value = 1;
+      setShowCelebration(false);
+      triggerHaptic('medium');
+    },
+    [settings.workDuration, progress, triggerHaptic],
+  );
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (isPlaying && timeLeft > 0 && phase !== 'idle' && phase !== 'complete') {
+      interval = setInterval(() => {
+        setTimeLeft((prev) => {
+          const newTime = prev - 1;
+          if (newTime <= 3 && newTime > 0) {
+            triggerHaptic('light');
+            playSoundCue();
+            countdownScale.value = withSequence(
+              withSpring(1.15, { damping: 8 }),
+              withSpring(1, { damping: 10 }),
+            );
+          }
+          return newTime;
+        });
+      }, 1000);
+    } else if (timeLeft === 0 && isPlaying) {
+      skipForward();
+    }
+    return () => clearInterval(interval);
+  }, [
+    isPlaying,
+    timeLeft,
+    phase,
+    skipForward,
+    triggerHaptic,
+    playSoundCue,
+    countdownScale,
+  ]);
+
+  useEffect(() => {
+    if (phase === 'idle' || phase === 'complete') return;
+    const duration = getPhaseDuration(phase);
+    progress.value = withTiming(timeLeft / duration, {
+      duration: 1000,
+      easing: Easing.linear,
+    });
+  }, [timeLeft, phase, getPhaseDuration, progress]);
+
+  useEffect(() => {
+    if (isPlaying && phase === 'work') {
+      scale.value = withRepeat(
+        withSequence(
+          withTiming(1.02, { duration: 500 }),
+          withTiming(1, { duration: 500 }),
+        ),
+        -1,
+        true,
+      );
+    } else {
+      scale.value = withSpring(1);
+    }
+  }, [isPlaying, phase, scale]);
+
+  const animatedCircleProps = useAnimatedProps(() => ({
+    strokeDashoffset: circumference * (1 - progress.value),
+    stroke: ringColor.value,
+  }));
+
+  const animatedContainerStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const countdownStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: countdownScale.value }],
+  }));
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const handleSettingsSave = useCallback(
+    (newSettings: TimerSettings) => {
+      setSettings(newSettings);
+      resetWorkout(newSettings);
+    },
+    [resetWorkout],
+  );
+
+  const handleCelebrationDismiss = useCallback(() => {
+    setShowCelebration(false);
+    resetWorkout();
+  }, [resetWorkout]);
+
+  return {
+    settings,
+    setSettings,
+    phase,
+    isPlaying,
+    timeLeft,
+    currentRound,
+    currentExerciseIndex,
+    showCelebration,
+    circumference,
+    R,
+    animatedCircleProps,
+    animatedContainerStyle,
+    countdownStyle,
+    formatTime,
+    toggleTimer,
+    skipForward,
+    skipBackward,
+    resetWorkout,
+    handleSettingsSave,
+    handleCelebrationDismiss,
+  };
+}

package/recipes/screen-kits-fitness/apps/native/src/features/screen-kits/fitness/index.ts

@@ -0,0 +1 @@
+export { default as FitnessDashboard } from './screens/workout-dashboard';

package/recipes/screen-kits-fitness/apps/native/src/features/screen-kits/fitness/screens/timer-screen.tsx

@@ -0,0 +1,278 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Stack, useRouter } from 'expo-router';
+import React, { useRef } from 'react';
+import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
+import Animated, {
+  FadeIn,
+  FadeInDown,
+  FadeInUp,
+} from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+
+import {
+  FITNESS_COLORS,
+  PHASE_COLORS,
+  PHASE_LABELS,
+  SAMPLE_EXERCISES,
+} from '../constants';
+import {
+  TimerSettingsModal,
+  type TimerSettingsModalRef,
+} from '../components/timer-settings-modal';
+import { useTimer } from '../hooks/use-timer';
+import {
+  CompletionCelebration,
+  ExerciseQueue,
+  ModeSelector,
+  TimerDisplay,
+  TimerControls,
+} from '../components/timer-components';
+
+const { width } = Dimensions.get('window');
+const CIRCLE_SIZE = width * 0.66;
+
+export default function TimerScreen() {
+  const router = useRouter();
+  const settingsModalRef = useRef<TimerSettingsModalRef>(null);
+
+  const {
+    settings,
+    phase,
+    isPlaying,
+    timeLeft,
+    currentRound,
+    currentExerciseIndex,
+    showCelebration,
+    R,
+    circumference,
+    animatedCircleProps,
+    animatedContainerStyle,
+    countdownStyle,
+    formatTime,
+    toggleTimer,
+    skipForward,
+    skipBackward,
+    resetWorkout,
+    handleSettingsSave,
+    handleCelebrationDismiss,
+  } = useTimer(
+    {
+      mode: 'interval',
+      workDuration: 45,
+      restDuration: 15,
+      rounds: 4,
+      soundEnabled: true,
+      hapticEnabled: true,
+    },
+    CIRCLE_SIZE,
+  );
+
+  const currentExercise = SAMPLE_EXERCISES[currentExerciseIndex];
+  const activeColor = PHASE_COLORS[phase] || FITNESS_COLORS.primary;
+
+  return (
+    <View style={styles.container}>
+      <Stack.Screen options={{ headerShown: false }} />
+
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity
+          onPress={() => router.back()}
+          style={styles.headerIconButton}
+        >
+          <Ionicons name="chevron-back" size={24} color="white" />
+        </TouchableOpacity>
+
+        <ModeSelector
+          currentMode={settings.mode}
+          onPress={() => settingsModalRef.current?.open(settings)}
+        />
+
+        <TouchableOpacity
+          onPress={() => settingsModalRef.current?.open(settings)}
+          style={styles.headerIconButton}
+        >
+          <Ionicons name="settings-outline" size={20} color="white" />
+        </TouchableOpacity>
+      </View>
+
+      {/* Round indicator */}
+      {settings.mode !== 'countdown' && (
+        <Animated.View
+          entering={FadeInDown.delay(100)}
+          style={styles.roundIndicator}
+        >
+          <Text style={styles.roundText}>
+            Round {currentRound} of {settings.rounds}
+          </Text>
+        </Animated.View>
+      )}
+
+      {/* Main Timer Display */}
+      <TimerDisplay
+        CIRCLE_SIZE={CIRCLE_SIZE}
+        R={R}
+        circumference={circumference}
+        animatedContainerStyle={animatedContainerStyle}
+        animatedCircleProps={animatedCircleProps}
+        countdownStyle={countdownStyle}
+        timeLeft={timeLeft}
+        formatTime={formatTime}
+        activeColor={activeColor}
+        phaseLabel={PHASE_LABELS[phase]}
+      />
+
+      {/* Current Exercise Info */}
+      <Animated.View entering={FadeInUp.delay(200)} style={styles.exerciseInfo}>
+        <View style={styles.exerciseHeader}>
+          <View
+            style={[
+              styles.exerciseIcon,
+              { backgroundColor: `${activeColor}20` },
+            ]}
+          >
+            <Ionicons
+              name={currentExercise.icon}
+              size={24}
+              color={activeColor}
+            />
+          </View>
+          <Text style={styles.exerciseName}>{currentExercise.name}</Text>
+        </View>
+        <Text style={styles.exerciseTip}>{currentExercise.tip}</Text>
+      </Animated.View>
+
+      {/* Exercise Queue */}
+      <ExerciseQueue
+        exercises={SAMPLE_EXERCISES}
+        currentIndex={currentExerciseIndex}
+      />
+
+      {/* Controls */}
+      <TimerControls
+        isPlaying={isPlaying}
+        activeColor={activeColor}
+        onToggle={toggleTimer}
+        onSkipForward={skipForward}
+        onSkipBackward={skipBackward}
+      />
+
+      {/* Reset button when paused */}
+      {!isPlaying && phase !== 'idle' && phase !== 'complete' && (
+        <Animated.View entering={FadeIn} style={styles.resetContainer}>
+          <TouchableOpacity
+            onPress={() => resetWorkout()}
+            style={styles.resetButton}
+          >
+            <Ionicons name="stop" size={18} color={FITNESS_COLORS.danger} />
+            <Text style={styles.resetText}>Reset</Text>
+          </TouchableOpacity>
+        </Animated.View>
+      )}
+
+      {/* Completion Celebration */}
+      {showCelebration && (
+        <CompletionCelebration onDismiss={handleCelebrationDismiss} />
+      )}
+
+      {/* Settings Modal */}
+      <TimerSettingsModal ref={settingsModalRef} onSave={handleSettingsSave} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: FITNESS_COLORS.background,
+    paddingHorizontal: 24,
+    paddingTop: 56,
+    paddingBottom: 16,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  iconButtonWrapper: {
+    width: 44,
+    height: 44,
+  },
+  headerIconButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: FITNESS_COLORS.card,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#27272a',
+  },
+  roundIndicator: {
+    alignItems: 'center',
+    marginTop: 12,
+    marginBottom: 6,
+  },
+  roundText: {
+    color: FITNESS_COLORS.textMuted,
+    fontWeight: '700',
+    fontSize: 12,
+    letterSpacing: 2,
+    textTransform: 'uppercase',
+  },
+  exerciseInfo: {
+    alignItems: 'center',
+    marginTop: 16,
+    marginBottom: 24,
+  },
+  exerciseHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginBottom: 8,
+  },
+  exerciseIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  exerciseName: {
+    color: FITNESS_COLORS.text,
+    fontSize: 20,
+    fontWeight: '800',
+  },
+  exerciseTip: {
+    color: FITNESS_COLORS.textMuted,
+    fontSize: 14,
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+  resetContainer: {
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  resetButtonWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  resetButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 20,
+    backgroundColor: `${FITNESS_COLORS.danger}15`,
+    borderWidth: 1,
+    borderColor: `${FITNESS_COLORS.danger}30`,
+  },
+  resetText: {
+    color: FITNESS_COLORS.danger,
+    fontWeight: '600',
+    fontSize: 14,
+  },
+});