Fix Timer Display - Add Local Countdown

Canadian Elite Volleyball Academy — Development Update • April 10, 2026

--- title: Fix timer display - add local countdown ---

Fix Timer Display - Add Local Countdown

What & Why

The TimerControlPanel component relies entirely on WebSocket messages to update the displayed time. The server only broadcasts timer state on manual actions (start, extend, end, reset) — there is no periodic broadcast. This means after pressing "Start" on a 14-minute timer, the display shows "14:00" and stays frozen until the next server event. Coordinators and referees cannot see the time counting down, which is confusing during live games.

Done looks like

• When the timer status is "RUNNING", the display counts down every second (14:00 → 13:59 → 13:58...)
• When a WebSocket update arrives, it corrects any local drift by replacing the local state with the server value
• When the timer reaches 0:00, it shows the ENDED state
• No regressions to timer control actions (start, extend, end, reset)
• Timer still syncs correctly when multiple coordinators/referees are watching

Relevant files

• (lines 82-146 for WebSocket, lines 226-255 for display, line ~147 for new effect placement)
• (broadcastTimerState — read-only reference)
• (timer control endpoint ~line 4116 — read-only reference)

Technical notes

• TimerState type:
• Server sends with instead of ; conversion happens via
• The dependency should use a stable reference — depend on and whether remainingSeconds has hit 0, NOT on remainingSeconds itself (which would reset the interval every second)

Canadian Elite Volleyball Academy
elitevolleyball.training