[V0_FILE]typescriptreact:file="TilePattern.tsx" isEdit="true" isMerged="true" export default function TilePattern() { return ( ) } [V0_FILE]typescriptreact:file="Timer.tsx" isEdit="true" isMerged="true" interface TimerProps { time: number isActive: boolean onClick: () => void disabled?: boolean } export default function Timer({ time, isActive, onClick, disabled = false }: TimerProps) { const minutes = Math.floor(time / 60) const seconds = Math.floor(time % 60) const milliseconds = Math.floor((time % 1) * 100) return (

{minutes.toString().padStart(2, "0")}:{seconds.toString().padStart(2, "0")}. {milliseconds.toString().padStart(2, "0")}

) } [V0_FILE]typescriptreact:file="ControlPanel.tsx" isEdit="true" isQuickEdit="true" import { Play, Pause, RotateCcw } from "lucide-react" import type React from "react" interface ControlPanelProps { gameStatus: "running" | "paused" | "stopped" onStart: () => void onPause: () => void onReset: () => void timeInput: number setTimeInput: (time: number) => void onSetTime: () => void playerCount: number onPlayerCountChange: (e: React.ChangeEvent) => void } export default function ControlPanel({ gameStatus, onStart, onPause, onReset, timeInput, setTimeInput, onSetTime, playerCount, onPlayerCountChange, }: ControlPanelProps) { return (

{gameStatus === "running" ? ( ) : ( )}

setTimeInput(Number(e.target.value))} min="1" max="120" className="w-16 px-2 py-1 border border-gray-300 rounded-md text-center" /> minutes

Players:

) } [V0_FILE]typescriptreact:file="chess-clock.tsx" isEdit="true" isQuickEdit="true" "use client" import { useReducer, useEffect, useState, useCallback } from "react" import Timer from "./Timer" import ControlPanel from "./ControlPanel" type Player = 1 | 2 | 3 | 4 type GameStatus = "idle" | "running" | "paused" interface State { timers: { [key in Player]: number } activePlayer: Player | null gameStatus: GameStatus initialTime: number playerCount: number } type Action = | { type: "START" } | { type: "PAUSE" } | { type: "RESET" } | { type: "TICK" } | { type: "SWITCH_PLAYER"; payload: Player } | { type: "SET_TIME"; payload: number } | { type: "TOGGLE_GAME_PAUSE" } | { type: "ADVANCE_PLAYER" } | { type: "SET_PLAYER_COUNT"; payload: number } const initialState: State = { timers: { 1: 90, 2: 90, 3: 90, 4: 90 }, // 1.5 minutes per player activePlayer: null, gameStatus: "idle", initialTime: 90, playerCount: 4, } function reducer(state: State, action: Action): State { switch (action.type) { case "START": return { ...state, gameStatus: "running", activePlayer: state.activePlayer || 1 } case "PAUSE": return { ...state, gameStatus: "paused", activePlayer: null } case "RESET": return { ...initialState, initialTime: state.initialTime, timers: { 1: state.initialTime, 2: state.initialTime, 3: state.initialTime, 4: state.initialTime }, playerCount: state.playerCount, } case "TICK": if (state.gameStatus !== "running" || !state.activePlayer) return state const newTimers = { ...state.timers } newTimers[state.activePlayer] -= 0.01 // Decrease by 10 milliseconds return { ...state, timers: newTimers } case "SWITCH_PLAYER": return { ...state, activePlayer: action.payload } case "SET_TIME": return { ...initialState, initialTime: action.payload, timers: { 1: action.payload, 2: action.payload, 3: action.payload, 4: action.payload }, playerCount: state.playerCount, } case "TOGGLE_GAME_PAUSE": return { ...state, gameStatus: state.gameStatus === "running" ? "paused" : "running", activePlayer: state.gameStatus === "paused" ? state.activePlayer || 1 : null, } case "ADVANCE_PLAYER": if (state.gameStatus !== "running" || !state.activePlayer) return state const nextPlayer = ((state.activePlayer % state.playerCount) + 1) as Player return { ...state, activePlayer: nextPlayer } case "SET_PLAYER_COUNT": return { ...state, playerCount: action.payload, activePlayer: null, gameStatus: "idle" } default: return state } } export default function ChessClock() { const [state, dispatch] = useReducer(reducer, initialState) const [timeInput, setTimeInput] = useState(state.initialTime / 60) useEffect(() => { let interval: NodeJS.Timeout if (state.gameStatus === "running") { interval = setInterval(() => dispatch({ type: "TICK" }), 10) // Update every 10 milliseconds } return () => clearInterval(interval) }, [state.gameStatus]) const handlePlayerClick = (player: Player) => { if (state.gameStatus === "running" && player <= state.playerCount) { dispatch({ type: "SWITCH_PLAYER", payload: player }) } } const handleSetTime = () => { const newTime = Math.max(1, Math.min(120, timeInput)) * 60 dispatch({ type: "SET_TIME", payload: newTime }) } const handleKeyPress = useCallback( (event: KeyboardEvent) => { if (event.code === "Space" && state.gameStatus === "running") { event.preventDefault() dispatch({ type: "ADVANCE_PLAYER" }) } }, [state.gameStatus], ) useEffect(() => { window.addEventListener("keydown", handleKeyPress) return () => { window.removeEventListener("keydown", handleKeyPress) } }, [handleKeyPress]) const handlePlayerCountChange = (e: React.ChangeEvent) => { dispatch({ type: "SET_PLAYER_COUNT", payload: Number.parseInt(e.target.value) }) } return (

{/* Semi-transparent white overlay */}

handlePlayerClick(1)} />

handlePlayerClick(2)} disabled={state.playerCount < 2} />

handlePlayerClick(4)} disabled={state.playerCount < 4} />

handlePlayerClick(3)} disabled={state.playerCount < 3} />

dispatch({ type: "START" })} onPause={() => dispatch({ type: "PAUSE" })} onReset={() => dispatch({ type: "RESET" })} timeInput={timeInput} setTimeInput={setTimeInput} onSetTime={handleSetTime} playerCount={state.playerCount} onPlayerCountChange={handlePlayerCountChange} />

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This