Frontend: countdown timer component #48

New issue

Open

opened 2026-04-19 07:23:41 +00:00 by forgejo-lila · 0 comments

forgejo-lila commented

2026-04-19 07:23:41 +00:00

Owner

Context

Multiplayer questions have a server-enforced time limit. Players need visual feedback.

Files to create

apps/web/src/components/multiplayer/CountdownTimer.tsx

Behavior

Receives totalSeconds and start time.
Visual countdown (number + progress bar/circle).
Updates smoothly (requestAnimationFrame or every second).
Visual urgency when low (color change, last 5s: red, pulsing).
Calls onTimeout when zero.

Acceptance criteria

Visually prominent during gameplay
Smooth animation
Color change when time low
Stays synchronized with server (within ~1s tolerance)
Works on mobile

Notes

Server is authoritative on timing — client timer is purely visual. Styling: Tailwind CSS.

## Context Multiplayer questions have a server-enforced time limit. Players need visual feedback. ## Files to create - `apps/web/src/components/multiplayer/CountdownTimer.tsx` ## Behavior - Receives totalSeconds and start time. - Visual countdown (number + progress bar/circle). - Updates smoothly (requestAnimationFrame or every second). - Visual urgency when low (color change, last 5s: red, pulsing). - Calls `onTimeout` when zero. ## Acceptance criteria - Visually prominent during gameplay - Smooth animation - Color change when time low - Stays synchronized with server (within ~1s tolerance) - Works on mobile ## Notes Server is authoritative on timing — client timer is purely visual. Styling: Tailwind CSS.