Files
two-keys/client/src/components/Timer.tsx
T
joshuaandClaude Opus 5.5 0de6617c82 V1.0.0
Two Keys: co-op mystery games for couples. Eight games on four engines (story, defuse, sync, labyrinth), two-device and couch play, mobile-first UI.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 22:36:12 +02:00

25 lines
989 B
TypeScript

import { formatClock, type RoomState } from '@two-keys/shared';
import { useNow } from '../lib/hooks';
/** Elapsed time plus penalties. Runs locally between server updates. */
export function Timer({ timer, receivedAt }: { timer: RoomState['timer']; receivedAt: number }) {
const now = useNow(1000);
if (timer.startedAt === null) return null;
const serverNow = timer.serverNow + (now - receivedAt);
const elapsed = ((timer.finishedAt ?? serverNow) - timer.startedAt) / 1000;
return (
<div
className="flex items-baseline gap-1.5 font-mono tabular-nums"
role="timer"
aria-label={`Time ${formatClock(elapsed + timer.penaltySeconds)}`}
>
<span className="text-base font-bold">{formatClock(elapsed + timer.penaltySeconds)}</span>
{timer.penaltySeconds > 0 && (
<span className="text-[11px] text-red-300" title="Penalty time from hints and traps">
+{formatClock(timer.penaltySeconds)}
</span>
)}
</div>
);
}