diff --git a/src/components/RoundTimer.tsx b/src/components/RoundTimer.tsx index a9c567b..727d2ac 100644 --- a/src/components/RoundTimer.tsx +++ b/src/components/RoundTimer.tsx @@ -1,93 +1,158 @@ import { useState, useEffect } from 'react'; import { Timer, Play, Pause, RotateCcw } from 'lucide-react'; import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; 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); + const [totalSeconds, setTotalSeconds] = useState(300); // 5 Min default + const [remainingSeconds, setRemainingSeconds] = useState(300); + const [isRunning, setIsRunning] = useState(false); + const [isEditing, setIsEditing] = useState(false); + const [editMinutes, setEditMinutes] = useState('5'); + const [editSeconds, setEditSeconds] = useState('0'); useEffect(() => { - // Reset timer wenn neue Runde startet - setSeconds(0); - setIsRunning(true); - setIsPaused(false); - }, [roundNumber]); + // Reset when round changes + setRemainingSeconds(totalSeconds); + setIsRunning(false); + }, [roundNumber, totalSeconds]); useEffect(() => { let interval: NodeJS.Timeout | null = null; - if (isRunning && !isPaused) { + if (isRunning && remainingSeconds > 0) { interval = setInterval(() => { - setSeconds((prev) => prev + 1); + setRemainingSeconds((prev) => { + if (prev <= 1) { + setIsRunning(false); + return 0; + } + return prev - 1; + }); }, 1000); } return () => { if (interval) clearInterval(interval); }; - }, [isRunning, isPaused]); + }, [isRunning, remainingSeconds]); const togglePause = () => { - setIsPaused((prev) => !prev); + setIsRunning((prev) => !prev); }; const reset = () => { - setSeconds(0); - setIsPaused(false); + setRemainingSeconds(totalSeconds); + setIsRunning(false); }; - const formatTime = (totalSeconds: number): string => { - const hours = Math.floor(totalSeconds / 3600); - const minutes = Math.floor((totalSeconds % 3600) / 60); + const handleTimeEdit = () => { + const newMinutes = Math.max(0, Math.min(99, parseInt(editMinutes) || 0)); + const newSeconds = Math.max(0, Math.min(59, parseInt(editSeconds) || 0)); + + const newTotal = newMinutes * 60 + newSeconds; + setTotalSeconds(newTotal); + setRemainingSeconds(newTotal); + setIsRunning(false); + setIsEditing(false); + }; + + const startEditing = () => { + const mins = Math.floor(totalSeconds / 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')}`; + setEditMinutes(mins.toString()); + setEditSeconds(secs.toString()); + setIsEditing(true); }; + const formatTime = (secs: number): string => { + const minutes = Math.floor(secs / 60); + const seconds = secs % 60; + return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; + }; + + const isTimeExpired = remainingSeconds === 0; + return ( -
-
-
- -
-
-

Rundenzeit

-

- {formatTime(seconds)} -

-
+
+
+
-
+ {isEditing ? ( +
+ setEditMinutes(e.target.value)} + className="w-12 h-8 text-center rounded-lg" + placeholder="0" + /> + : + setEditSeconds(e.target.value)} + className="w-12 h-8 text-center rounded-lg" + placeholder="0" + /> + +
+ ) : ( +
+

Rundenzeit

+

+ {formatTime(remainingSeconds)} +

+
+ )} + +
-
- - {!currentRound ? ( - - ) : ( - - )} +
+ {currentRound && } +
+ + {!currentRound ? ( + + ) : ( + + )} +
@@ -161,8 +164,6 @@ export const TournamentView = () => { {currentRound && ( <> - -

Runde {currentRound.roundNumber} – diff --git a/vite.config.ts b/vite.config.ts index 5f50858..bd81c33 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,7 +6,7 @@ import path from "path"; export default defineConfig(() => ({ server: { host: "::", - port: 8080, + port: 5173, hmr: { overlay: false, },