Skip to content

Issue #3930 add a dynamic html title#3980

Open
patricksimonian wants to merge 6 commits into
openfrontio:mainfrom
patricksimonian:feature/dynamic-html-title
Open

Issue #3930 add a dynamic html title#3980
patricksimonian wants to merge 6 commits into
openfrontio:mainfrom
patricksimonian:feature/dynamic-html-title

Conversation

@patricksimonian
Copy link
Copy Markdown

@patricksimonian patricksimonian commented May 21, 2026

Resolves #3930

Description:

This PR introduces a dynamic title helper that is used to communicate different game states between looking for a game, and playing a game.

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:

No discord please create an issue and assign to me or reach me on linkedin

Title States

Base
image
In Lobby Countdown
image
After Countdown
image
In Game
image

@CLAassistant
Copy link
Copy Markdown

CLAassistant commented May 21, 2026

CLA assistant check
All committers have signed the CLA.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 21, 2026

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 67c071cd-5f3b-4f54-986a-41ee73e77d03

📥 Commits

Reviewing files that changed from the base of the PR and between cfe082c and 75bfbe8.

📒 Files selected for processing (1)
  • resources/lang/en.json

Walkthrough

Adds localized strings, a small exported setTitle utility with a unit test, and Main client wiring to show a localized "starting in {time}" countdown (updated each second using server time) and switch to "game in progress" on start or join/leave events.

Changes

Dynamic Page Title with Lobby Countdown

Layer / File(s) Summary
Title utility and test
src/client/PageTitleManager.ts, tests/client/PageTitleManager.test.ts
New setTitle function sets document.title directly; Vitest test validates the update.
Localization strings for title states
resources/lang/en.json, resources/lang/es.json
Add main.title_starting (with {time} placeholder for countdown) and main.title_game_in_progress in English and Spanish.
Main client event integration and title wiring
src/client/Main.ts
Imports LobbyInfoEvent, setTitle, and time/translation helpers; adds a LobbyInfoEvent listener that computes server-time offset, runs a 1s countdown updating the localized starting title via renderDuration/translateText, switches to localized in-progress title when started, and updates/resets title on join/leave.

Sequence Diagram

sequenceDiagram
  participant EventBus as LobbyInfoEvent
  participant MainClient
  participant TimeUtils as TimeUtilities
  participant Translator as translateText
  participant TitleMgr as setTitle
  participant Browser

  EventBus->>MainClient: LobbyInfoEvent (lobby.startsAt, serverTime)
  MainClient->>TimeUtils: calculateServerTimeOffset(serverTime)
  TimeUtils-->>MainClient: offsetMs
  MainClient->>TimeUtils: getSecondsUntilServerTimestamp(startsAt, offsetMs)
  TimeUtils-->>MainClient: secondsRemaining
  loop every 1 second while secondsRemaining > 0
    MainClient->>TimeUtils: renderDuration(secondsRemaining)
    TimeUtils-->>MainClient: renderedTime
    MainClient->>Translator: translateText("main.title_starting", { time: renderedTime })
    Translator-->>MainClient: localizedTitle
    MainClient->>TitleMgr: setTitle(localizedTitle)
    TitleMgr->>Browser: document.title = localizedTitle
    MainClient->>TimeUtils: getSecondsUntilServerTimestamp(...)
  end
  MainClient->>Translator: translateText("main.title_game_in_progress")
  Translator-->>MainClient: localizedInProgress
  MainClient->>TitleMgr: setTitle(localizedInProgress)
  TitleMgr->>Browser: document.title = localizedInProgress
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

⏱️ A tab that hums with seconds terse,
"Starting in {time}" counts the universe,
Each tick translates, the title sings,
Then flips to "game in progress" — action brings,
A tiny change to catch the terse.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The PR title 'Issue #3930 add a dynamic html title' clearly summarizes the main change—adding dynamic HTML title functionality to communicate game states.
Description check ✅ Passed The description clearly relates to the changeset by explaining the purpose of dynamic titles, covering different game states, and demonstrating the feature with screenshots.
Linked Issues check ✅ Passed The PR meets all requirements from issue #3930: adds dynamic title for lobby state, implements countdown timer during startup, and shows 'Game in Progress' state with proper translations in en.json and es.json.
Out of Scope Changes check ✅ Passed All changes directly support the dynamic title feature: new translations, title manager utility, event handler integration, and related tests. No unrelated changes detected.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/Main.ts`:
- Around line 863-893: The onLobbyInfo handler starts a new updateTitle loop
each event causing stacked setTimeouts; fix by tracking and clearing a single
timer ID (e.g., this.lobbyTitleTimer) before starting updateTitle, store the
timeout id returned from setTimeout into that field, and call
clearTimeout(this.lobbyTitleTimer) when a new LobbyInfoEvent arrives or when the
lobbyHandle changes (and also clear it when countdown finishes) so only one
countdown loop runs; update references in onLobbyInfo, updateTitle, and where
this.lobbyHandle/newLobbyHandle are used to manage the single timer lifecycle.
🪄 Autofix (Beta)

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

Run ID: bd9ce43a-3944-4fd2-a57f-b2cd429e1523

📥 Commits

Reviewing files that changed from the base of the PR and between 40c23ed and f40305f.

📒 Files selected for processing (5)
  • resources/lang/en.json
  • resources/lang/es.json
  • src/client/Main.ts
  • src/client/PageTitleManager.ts
  • tests/client/PageTitleManager.test.ts

Comment thread src/client/Main.ts
@github-project-automation github-project-automation Bot moved this from Triage to Development in OpenFront Release Management May 21, 2026
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/Main.ts`:
- Around line 889-892: The Prettier failure is caused by a missing statement
terminator after the setTitle call in the countdown title block; update the code
in the block that calls setTitle(translateText("main.title_starting", { time:
renderDuration(seconds) })) to add the missing semicolon, leaving the rest
(assignment to lobbyTitleTimer and setTimeout(updateTitle, 1000)) unchanged so
functions/identifiers setTitle, translateText, renderDuration, lobbyTitleTimer
and updateTitle remain intact.
🪄 Autofix (Beta)

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

Run ID: f141cf78-5ca1-4ef1-8dd1-404a8e24d0bf

📥 Commits

Reviewing files that changed from the base of the PR and between f40305f and 3538dd1.

📒 Files selected for processing (1)
  • src/client/Main.ts

Comment thread src/client/Main.ts Outdated
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
coderabbitai[bot]
coderabbitai Bot previously approved these changes May 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Development

Development

Successfully merging this pull request may close these issues.

Dynamic html Title for game state for distracted players like me

2 participants