Update game timer UI

[14ROVI]

Description:

• use hh:mm:ss for timer format or mm:ss if no hours are present
• refactor classes and code to be simpler
• move timer inline with the buttons so the whole ui is smaller for more game space
• update fast forward icon to better represent what it does
• move replay controls below game time ui

Before:

After:

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
• I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced

Please put your Discord username so you can be contacted if a bug or regression is found:

rovi.

[coderabbitai]

Walkthrough

This PR refactors the top-right in-game UI: it changes the sidebar and replay controls layout to stack vertically, replaces replay icon variants with a single fast-forward icon, adds a padded HH:MM:SS/MM:SS timer formatter with conditional red coloring when <60s, and adds a fastest speed button plus styling changes to the replay panel.

Changes

Cohort / File(s)	Summary
Timer Display & Sidebar Layout src/client/graphics/layers/GameRightSidebar.ts	Added secondsToHms formatter (HH:MM:SS or MM:SS with padding); applies red timer class when a max timer exists and remaining <60s; replaced multiple replay icons with FastForwardIconSolid; restructured top bar into separate in-game time, replay/settings controls, and exit area; wrapped controls in cursor-pointer wrappers and preserved existing event emissions.
Replay Speed Controls & Styling src/client/graphics/layers/ReplayPanel.ts	Updated container/padding/background/blur classes; increased button grid from 2 to 4 columns and added a fastest speed button; simplified active-state styling by using a backgroundColor variable in renderSpeedButton; standardized button classes for padding, borders, and hover.
Fixed Container Layout src/client/index.html	Changed fixed top-right container from horizontal wrap to vertical column (flex-col, items-end, gap-2); moved game-right-sidebar and replay-panel to be stacked children within the same fixed container.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Inspect secondsToHms padding and edge-case handling (0, negative, large values).
• Verify timer color condition (requires max timer) and CSS class application.
• Confirm replay speed buttons state logic and UI spacing after changing grid columns.
• Check top-right container layout responsiveness across sizes.

Possibly related PRs

• Add a Replay speed control feature #1106 — modifies ReplayPanel.ts to add/adjust replay speed controls and active-state styling.
• Remove border around in game time #2544 — touches GameRightSidebar.ts timer display and related styling.
• update ui #1368 — modifies GameRightSidebar.ts including timer handling and replay/settings UI changes.

Suggested labels

Feature - Frontend, UI/UX

Suggested reviewers

• evanpelle
• scottanderson

Poem

⏱️ A timer padded, neat and bright,
Turns crimson when the end’s in sight,
Fast-forward joins the button row,
Panels stacked where corners glow,
Small UI dances, quick delight. 🎮

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: updating the game timer UI with new formatting, layout, and icon improvements as described in the changeset.
Description check	✅ Passed	The description clearly relates to the changeset, detailing specific UI updates including timer format changes, layout refactoring, and icon updates, with supporting before/after screenshots.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f915933 and b4aea44.

📒 Files selected for processing (1)

• src/client/index.html (1 hunks)

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

• src/client/index.html

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/client/graphics/layers/GameRightSidebar.ts (2)

75-87: Consider extracting the pad helper to avoid recreation.

The timer formatting logic correctly produces HH:MM:SS or MM:SS based on duration, matching the PR objectives. However, the pad function is redefined on every call.

Extract it to a class-level private method or a module-level constant:

+  private pad = (n: number) => (n < 10 ? `0${n}` : n);
+
   private secondsToHms = (d: number): string => {
-    const pad = (n: number) => (n < 10 ? `0${n}` : n);
-
     const h = Math.floor(d / 3600);
     const m = Math.floor((d % 3600) / 60);
     const s = Math.floor((d % 3600) % 60);
 
     if (h !== 0) {
-      return `${pad(h)}:${pad(m)}:${pad(s)}`;
+      return `${this.pad(h)}:${this.pad(m)}:${this.pad(s)}`;
     } else {
-      return `${pad(m)}:${pad(s)}`;
+      return `${this.pad(m)}:${this.pad(s)}`;
     }
   };

---

122-126: Consider adding a non-color indicator for timer urgency.

The timer turns red when below 60 seconds, which is helpful for most users. However, colorblind users may not perceive this change. Consider adding an icon (e.g., warning symbol) or text prefix when the timer is critical.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7658c67 and f915933.

⛔ Files ignored due to path filters (1)

• resources/images/FastForwardIconSolidWhite.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• src/client/graphics/layers/GameRightSidebar.ts (3 hunks)
• src/client/graphics/layers/ReplayPanel.ts (2 hunks)
• src/client/index.html (1 hunks)

🧰 Additional context used

🧠 Learnings (3)

📚 Learning: 2025-06-09T02:20:43.637Z

Learnt from: VariableVince
Repo: openfrontio/OpenFrontIO PR: 1110
File: src/client/Main.ts:293-295
Timestamp: 2025-06-09T02:20:43.637Z
Learning: In src/client/Main.ts, during game start in the handleJoinLobby callback, UI elements are hidden using direct DOM manipulation with classList.add("hidden") for consistency. This includes modals, buttons, and error divs. The codebase follows this pattern rather than using component APIs for hiding elements during game transitions.

Applied to files:

• src/client/graphics/layers/ReplayPanel.ts
• src/client/graphics/layers/GameRightSidebar.ts
• src/client/index.html

📚 Learning: 2025-10-18T11:00:57.142Z

Learnt from: NewYearNewPhil
Repo: openfrontio/OpenFrontIO PR: 2230
File: src/client/graphics/GameRenderer.ts:269-277
Timestamp: 2025-10-18T11:00:57.142Z
Learning: In src/client/graphics/GameRenderer.ts, the GameRecapCapture implementation does not use setCaptureRenderEnabled on layers. Instead, it uses RecapCaptureSurface.capture() to render capture layers (TerrainLayer, TerritoryLayer, RailroadLayer, StructureIconsLayer, UnitLayer) directly to an off-screen canvas without requiring layer-level capture mode methods.

Applied to files:

• src/client/graphics/layers/ReplayPanel.ts
• src/client/graphics/layers/GameRightSidebar.ts

📚 Learning: 2025-08-12T00:31:50.144Z

Learnt from: scottanderson
Repo: openfrontio/OpenFrontIO PR: 1752
File: src/core/game/Game.ts:750-752
Timestamp: 2025-08-12T00:31:50.144Z
Learning: In the OpenFrontIO codebase, changes to the PlayerInteraction interface (like adding canDonateGold and canDonateTroops flags) do not require corresponding updates to src/core/Schemas.ts or server serialization code.

Applied to files:

• src/client/graphics/layers/GameRightSidebar.ts

🧬 Code graph analysis (1)

src/client/graphics/layers/ReplayPanel.ts (2)

src/client/LangSelector.ts (1)

• translateText (258-278)

src/core/configuration/PastelTheme.ts (1)

• backgroundColor (180-182)

🔇 Additional comments (7)

src/client/graphics/layers/ReplayPanel.ts (3)

69-76: LGTM on styling updates.

The container and label styling changes improve visual consistency and spacing.

---

77-85: Clean grid expansion to support 4 speed options.

The layout change from 2 to 4 columns accommodates the new fastest speed button effectively.

---

91-101: Good refactor for active state styling.

Extracting the backgroundColor variable improves readability. The approach is clean and works well for the current use case.

src/client/index.html (1)

401-406: Nice layout consolidation for the top-right UI.

The vertical stacking of game-right-sidebar and replay-panel within a single fixed container achieves the PR objective of making the UI more compact and providing more game space.

src/client/graphics/layers/GameRightSidebar.ts (3)

4-4: LGTM on the new icon import.

The FastForwardIconSolid import aligns with the PR objective to update the fast-forward icon representation.

---

128-149: Clean layout reorganization with clear separation.

The refactored layout with separate sections for time, controls, settings, and exit is easy to understand and maintain. The inline comments are helpful.

---

152-173: LGTM on replay controls update.

The replay button now uses the new FastForwardIconSolid icon, and the button wrappers are consistent with proper cursor styling and event handling.

[evanpelle]

Do you know where this icon came from or what license it's under? we may need to add attribution in the CREDITS.md

[14ROVI]

I made it from my own hand. How do I give open front ownership of this asset?

[evanpelle]

Great! the asset will be licensed as CC-SA

[evanpelle]

Thanks!

[evanpelle]

can you run npm run format to fix the prettier failure