diff --git a/src/components/RoundTimer.tsx b/src/components/RoundTimer.tsx new file mode 100644 index 0000000..a9c567b --- /dev/null +++ b/src/components/RoundTimer.tsx @@ -0,0 +1,99 @@ +import { useState, useEffect } from 'react'; +import { Timer, Play, Pause, RotateCcw } from 'lucide-react'; +import { Button } from '@/components/ui/button'; + +interface RoundTimerProps { + roundNumber: number; +} + +export const RoundTimer = ({ roundNumber }: RoundTimerProps) => { + const [seconds, setSeconds] = useState(0); + const [isRunning, setIsRunning] = useState(true); // Auto-start beim Laden + const [isPaused, setIsPaused] = useState(false); + + useEffect(() => { + // Reset timer wenn neue Runde startet + setSeconds(0); + setIsRunning(true); + setIsPaused(false); + }, [roundNumber]); + + useEffect(() => { + let interval: NodeJS.Timeout | null = null; + + if (isRunning && !isPaused) { + interval = setInterval(() => { + setSeconds((prev) => prev + 1); + }, 1000); + } + + return () => { + if (interval) clearInterval(interval); + }; + }, [isRunning, isPaused]); + + const togglePause = () => { + setIsPaused((prev) => !prev); + }; + + const reset = () => { + setSeconds(0); + setIsPaused(false); + }; + + const formatTime = (totalSeconds: number): string => { + const hours = Math.floor(totalSeconds / 3600); + const minutes = Math.floor((totalSeconds % 3600) / 60); + const secs = totalSeconds % 60; + + if (hours > 0) { + return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; + } + return `${minutes}:${secs.toString().padStart(2, '0')}`; + }; + + return ( +
Rundenzeit
++ {formatTime(seconds)} +
+Runde {currentRound.roundNumber} –