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)} +

+
+
+ +
+ + +
+
+ ); +}; diff --git a/src/components/TournamentView.tsx b/src/components/TournamentView.tsx index 25c4405..dfa5b1d 100644 --- a/src/components/TournamentView.tsx +++ b/src/components/TournamentView.tsx @@ -4,6 +4,7 @@ import { Trophy, Star, Clock, Play, CheckCircle, AlertCircle } from 'lucide-reac import { Button } from '@/components/ui/button'; import { MatchScoreInput } from '@/components/MatchScoreInput'; import { ScoreboardModal } from '@/components/ScoreboardModal'; +import { RoundTimer } from '@/components/RoundTimer'; const WaitingTeam = ({ team }: { team: Team }) => (
@@ -160,6 +161,8 @@ export const TournamentView = () => { {currentRound && ( <> + +

Runde {currentRound.roundNumber}