Verify results page SSR implementation

[goofmint]

• Result page title now includes UI language, code language, and score
• Game play page title includes UI language and code language
• Game play page title dynamically updates with remaining seconds every second

Summary by CodeRabbit

• New Features
  • Dynamic page titles during gameplay now include the active code language and remaining seconds.
  • Result page titles display the achieved score and code language, or "Result Not Found" when score data is unavailable.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Added page-title logic to two routes: a server-side meta export for result.$id that builds a score-aware title, and a meta export plus a client-side useEffect in the play route that updates the document title with remaining seconds and the mapped code language.

Changes

Cohort / File(s)	Change Summary
Route meta + title updates app/routes/$lang.$codeLanguage.play.tsx, app/routes/result.$id.tsx	Added export function meta({ data }: Route.MetaArgs) to both routes. Introduced getCodeLanguageDisplay(codeLanguage) helper in each file to map identifiers to display names. Play route: added a useEffect that updates document.title with remaining seconds and language while the game is active. Result route: meta builds title using mapped language and score (or a "Result Not Found" fallback).

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant PlayRoute as Play Component
  participant Loader as Route Loader (data)

  Browser->>PlayRoute: render component with loader data (codeLanguage, gameState)
  PlayRoute->>PlayRoute: map language -> display name (getCodeLanguageDisplay)
  alt game is active
    PlayRoute->>PlayRoute: start interval / timer
    PlayRoute->>Browser: update document.title ("<Language> - <seconds>s | Bug Sniper")
  else game ended
    PlayRoute->>Browser: set final title ("<Language> — Finished | Bug Sniper")
  end

Loading

sequenceDiagram
  participant Server
  participant Browser
  participant ResultRoute as result.$id.meta

  Browser->>Server: request /result/:id
  Server->>ResultRoute: call meta({ data })
  ResultRoute->>ResultRoute: map language -> display name (getCodeLanguageDisplay)
  alt data & data.score present
    ResultRoute->>Server: return meta.title = "<Language> <score>pt | Bug Sniper"
  else
    ResultRoute->>Server: return meta.title = "Result Not Found | Bug Sniper"
  end
  Server->>Browser: send HTML with meta title

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Review focus: correctness of language mapping, meta return shape, and ensuring the play route's useEffect cleans up intervals and only runs while active.
• Files to check carefully:
  • app/routes/$lang.$codeLanguage.play.tsx (useEffect lifecycle/cleanup)
  • app/routes/result.$id.tsx (meta return structure and fallback behavior)

Possibly related PRs

• feat: Implement game logic with random problem selection #5 — Introduced the Play route and loader/component structure that these meta/title changes extend.

Poem

🐰 I hopped through code to tweak the name,
Seconds and scores now share the fame.
Languages shine in titles bright,
Hooray—titles hopping just right! 🎉

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title mentions 'SSR implementation' but the changes only add meta functions for page titles; no SSR setup or implementation changes are present.	Revise the title to accurately reflect the actual changes, such as 'Add dynamic page titles to result and play routes' or 'Implement dynamic page meta functions for result and play routes'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
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 52ca921 and 225addd.

📒 Files selected for processing (2)

• app/routes/$lang.$codeLanguage.play.tsx (2 hunks)
• app/routes/result.$id.tsx (1 hunks)

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

app/routes/result.$id.tsx (1)

24-40: Extract the capitalization logic into a shared utility function.

The capitalization pattern (charAt(0).toUpperCase() + slice(1)) is duplicated across three locations:

• app/routes/result.$id.tsx line 33
• app/routes/$lang.$codeLanguage.play.tsx lines 35 and 169

This is a straightforward refactoring opportunity. No null safety concerns exist—both score.code_language and score.score are properly typed as non-nullable in the ScoreRecord type definition.

Create a shared utility:

// In a shared utilities file
export function capitalizeFirst(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

Then update both files to use it.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e479312 and 52ca921.

📒 Files selected for processing (2)

• app/routes/$lang.$codeLanguage.play.tsx (2 hunks)
• app/routes/result.$id.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

app/routes/result.$id.tsx (1)

app/routes/$lang.$codeLanguage.play.tsx (1)

• meta (29-42)

app/routes/$lang.$codeLanguage.play.tsx (2)

app/routes/result.$id.tsx (1)

• meta (27-40)

app/routes/$lang.tsx (1)

• meta (10-22)

🔇 Additional comments (2)

app/routes/$lang.$codeLanguage.play.tsx (2)

26-42: LGTM! Meta function provides appropriate SSR title.

The meta function correctly handles missing data and provides a meaningful default title. The format aligns well with the PR objectives to include code language in the page title.

Note: The capitalization logic duplication was already addressed in the comment for app/routes/result.$id.tsx.

---

166-172: LGTM! Dynamic title update enhances user experience.

The useEffect correctly updates the page title with the remaining seconds during gameplay, which is helpful for users who switch tabs. The SSR safety check (typeof document !== 'undefined') is appropriate for React Router's SSR capabilities.

Minor note: When the game ends, the title remains at its last state (e.g., "(0s) Javascript | Bug Sniper") until navigation occurs. This is acceptable since the navigation to the result page happens automatically via the useEffect at line 243.