fix private game join link

[evanpelle]

Description:

Main.ts wasn't handling the join properly.

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:

evan

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

The join hash parsing in Client.handleHash changed to require “#join=” and extracts the lobbyId via substring, removing reliance on URLSearchParams for the join case. Other hash routes (#purchase-completed, #token-login) and control flow remain the same. No exported/public APIs changed.

Changes

Cohort / File(s)	Summary
Hash parsing update src/client/Main.ts	Updated handleHash to detect joins with #join=<id>, extract lobbyId via substring(6), and validate with ID.safeParse(...). Removed use of URLSearchParams for join handling; other hash branches unchanged.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Browser
  participant Client as Client.Main.handleHash
  participant Modal as JoinPrivateLobbyModal

  User->>Browser: Open link with hash "#join=<id>"
  Browser->>Client: onhashchange / initial load
  Client->>Client: Parse hash (startsWith "#join=")
  Client->>Client: lobbyId = decodedHash.substring(6)
  alt Valid lobbyId
    Client->>Modal: Open join modal with lobbyId
  else Invalid lobbyId
    Client->>Client: Ignore / no-op
  end
  note over Client,Modal: Other hashes (#purchase-completed, #token-login) unchanged

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Fix invite link in Join Lobby #1695 — Also changes how “#join=” is parsed to extract the lobby ID, aligning with this PR’s join handling.
• Fix inconsistent host lobby join URL #1634 — Adjusts how join links are generated (format with “#join=”), which this PR now consumes.
• Hash-based routing #1198 — Introduced hash-based routing and handleHash; this PR refines the join branch within it.

Suggested labels

Bug Fix, Feature - Frontend

Suggested reviewers

• scottanderson

Poem

A hash at the gate, a lobby to find,
“#join=” now speaks its mind.
No params to chase, no query to bind,
Substring six, clean and kind.
Click—modal opens; the stars aligned. ✨

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/client/Main.ts (1)

479-485: Extend legacy parsing and add tests

• In JoinPrivateLobbyModal.ts’s extractLobbyIdFromUrl, handle #join?lobby=<id> and strip any trailing query before validation.
• Add unit tests for all three cases in Main.ts and JoinPrivateLobbyModal.ts:
  • #join=<id>
  • #join=<id>?foo=bar
  • #join?lobby=<id>

🧹 Nitpick comments (1)

src/client/Main.ts (1)

479-481: Avoid magic number; use the prefix length

Use a named prefix to make the intent clear and prevent off-by-one if the prefix changes.

-      const lobbyId = decodedHash.substring(6); // Remove "#join="
+      const JOIN_PREFIX = "#join=" as const;
+      const lobbyId = decodedHash.slice(JOIN_PREFIX.length);

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between acd65e3 and f330a18.

📒 Files selected for processing (1)

• src/client/Main.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

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

Learnt from: VariableVince
PR: openfrontio/OpenFrontIO#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/Main.ts