Make the end timer warnings more visible

[Kronbii]

Add approved & assigned issue number here:

Resolves #4290

Description:

Timed games previously only changed the small top-right timer to red during the final minute. That is easy to miss while the player is focused on the map, especially during the part of a match where attention is most contested.

This PR adds the progressive warning requested in #4290. At 1:00, the existing red timer is joined by a translated center-screen alert for four seconds. At 0:30, the timer itself alternates between red and white. At 0:10, the entire top-right control bar alternates between its normal dark background and red.

What's here

• src/client/hud/layers/GameRightSidebar.ts — threshold detection, the one-shot center warning, timer/sidebar animations, terminal-state cleanup, and reduced-motion behavior.
• resources/lang/en.json — the new game_timer.one_minute_remaining string. No other language files; those are managed through Crowdin.
• tests/GameRightSidebar.test.ts — focused coverage for the 60-, 30-, and 10-second thresholds, alert dismissal, lifecycle cleanup, spawn countdowns, and untimed games.

Why the warning escalates

The three stages deliberately increase the amount of screen space involved as time becomes more urgent:

• 1:00: a brief centered alert makes the transition into the final minute difficult to miss without permanently obscuring the map.
• 0:30: only the timer flashes, keeping the warning visible but localized.
• 0:10: the full top-right element flashes because the countdown is now immediately terminal.

The one-minute alert is shown once per initialized game and can finish through either its CSS animation or its four-second timeout. It is cleared when the game ends, the timer reaches zero, or the sidebar disconnects, so stale warning state cannot survive a terminal transition or reconnect.

Scope, accessibility, and localization

These effects apply only to an active configured game-end countdown. The spawn countdown and the elapsed clock in untimed games keep their existing appearance. Warning styles also stop after a winner is declared or the timer reaches zero.

The center message uses translateText("game_timer.one_minute_remaining"), role="alert", and aria-live="assertive". Under prefers-reduced-motion: reduce, the repeating animations are replaced with static high-contrast states rather than flashing.

Screenshots:

1:00 — centered one-minute warning

0:30 and 0:10 — timer and full-sidebar warning animation

Screencast.from.2026-08-05.00-04-41.webm

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory

Verification

• npx vitest run tests/GameRightSidebar.test.ts — focused timer-warning tests passing.
• npm test — complete client/core and server suites passing.
• npm run lint — Oxlint and ESLint clean.
• npx tsc --noEmit — TypeScript clean.
• Prettier and git diff --check clean.
• EnJsonSorted and TranslationSystem checks green.

Known and deliberate

• The center alert lasts four seconds and is not repeated later in the same game; the 30- and 10-second stages provide the continued escalation.
• Reduced-motion users receive static warning colors, preserving urgency without motion.
• No warning behavior is added to spawn countdowns or untimed games.

Note on the PR gate

The linked issue is approved and assigned. The separate Has Milestone check is expected to remain red until an OpenFront reviewer assigns the PR's milestone; contributors do not have permission to do that themselves.

Discord: Kronbii

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 05c4edef-bd56-464a-bc36-0c90db1aedd8

📥 Commits

Reviewing files that changed from the base of the PR and between 9e41951 and d8dd5f4.

📒 Files selected for processing (1)

• resources/lang/en.json

🚧 Files skipped from review as they are similar to previous changes (1)

• resources/lang/en.json

---

Walkthrough

The game sidebar warns during the final minute, flashes the timer during the final 30 seconds, and flashes the sidebar during the final 10 seconds. The warning supports dismissal, reduced motion, accessibility, localization, and tests.

Changes

End-game timer warning

Layer / File(s)	Summary
Timer warning state and lifecycle src/client/hud/layers/GameRightSidebar.ts	The sidebar detects active end timers at 60 seconds or less, shows the warning once, dismisses it after four seconds, and clears pending state on initialization, winner declaration, disconnection, or timer expiration.
Countdown rendering and validation src/client/hud/layers/GameRightSidebar.ts, resources/lang/en.json, tests/GameRightSidebar.test.ts	The timer and sidebar flash at the 30-second and 10-second thresholds. Rendering includes reduced-motion styles and an accessible localized alert. Tests cover warning display, dismissal, thresholds, spawn countdowns, and untimed games.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant GameTimer
  participant GameRightSidebar
  participant WarningOverlay
  GameTimer->>GameRightSidebar: timer update
  GameRightSidebar->>WarningOverlay: show warning at 60 seconds
  GameRightSidebar->>WarningOverlay: dismiss after 4 seconds
  GameRightSidebar->>WarningOverlay: apply timer flashing at 30 seconds
  GameRightSidebar->>WarningOverlay: apply sidebar flashing at 10 seconds

Loading

Possibly related PRs

• openfrontio/OpenFrontIO#4198: Both changes modify GameRightSidebar.ts timer and spawn-phase handling.
• openfrontio/OpenFrontIO#4469: Both changes add HUD warning overlays in GameRightSidebar.ts.

Suggested labels: Feature, UI/UX

Suggested reviewers: evanpelle

Poem

At sixty, the warning appears.
At thirty, the timer flashes.
At ten, the sidebar flashes.
Reduced motion keeps the display still.
Clear signals mark the final seconds.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the primary change: improving visibility for end timer warnings.
Description check	✅ Passed	The description directly explains the timer warning changes, scope, accessibility, localization, tests, and verification.
Linked Issues check	✅ Passed	The implementation meets issue #4290 by adding the one-minute alert, 30-second timer flashing, and 10-second sidebar flashing.
Out of Scope Changes check	✅ Passed	The translation, sidebar logic, accessibility behavior, cleanup, and tests are all related to the linked issue objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/client/hud/layers/GameRightSidebar.ts`:
- Around line 139-142: Update GameRightSidebar cleanup at
src/client/hud/layers/GameRightSidebar.ts lines 139-142 to call
dismissOneMinuteWarning(), ensuring disconnection clears both the timeout and
visible warning state. At lines 185-189, when timer reaches zero, call
dismissOneMinuteWarning() instead of maybeShowOneMinuteWarning(). Add regression
tests covering disconnect/reconnect during an active warning and reaching zero
before winner handling.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 8d93312e-4aa4-4f46-8cd0-dfa53928cf55

📥 Commits

Reviewing files that changed from the base of the PR and between ad02955 and 3350cb6.

📒 Files selected for processing (3)

• resources/lang/en.json
• src/client/hud/layers/GameRightSidebar.ts
• tests/GameRightSidebar.test.ts