feat(matchmaking): show queue size and reconnect on silent disconnects

[evanpelle]

Summary

Client side of the matchmaking queue-size broadcast (server side ships with infra #478).

• Queue size in the UI — handle the new queue-size message and show "Players in queue: N" above the spinner while searching. It's rendered as a pool size (not a position or ETA), only appears once the first broadcast arrives, and unknown message types are still ignored so future protocol additions stay safe.
• Liveness watchdog — the lobby writes to every queued socket every ~3s, so 15s of total silence means the connection died without a close frame (locked phone, dropped wifi). Left alone, that leaves a ghost in the queue the server can't distinguish from a live player, and matches start short-handed (the "2v2 with 3 players" bug). The server-side races were fixed in Fix Issues with Esperanto Translation #476; this half-open case can only be detected client-side.

Watchdog details

• Armed only after the join frame is sent (before that the server legitimately sends nothing); reset by every incoming message of any kind.
• On fire: detach the dead socket's handlers before closing it — a half-open socket can take minutes to emit its close event, and letting it fire later would trigger a duplicate reconnect — then reconnect immediately. No backoff on this path (the link was healthy moments ago); if the reconnect itself fails, the new socket's close event lands in the existing backoff path.
• Cleared at the top of onclose, on match-assignment, at the start of connect(), and on modal close. Rejoining is always safe: one account holds one queue slot, newest connection wins.
• The stale count is reset on every disconnect so it never flashes after a reconnect.

Test plan

• ESLint, Prettier, tsc --noEmit all pass
• Manual: queue up, toggle wifi off ~20s → client logs the watchdog warning, reconnects, and rejoins the queue
• Manual: queue with two accounts → count shows and updates every ~3s

🤖 Generated with Claude Code

[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: 0cbfb486-a249-4fce-af89-6428ae7fcc76

📥 Commits

Reviewing files that changed from the base of the PR and between 40506bf and a6e58af.

📒 Files selected for processing (2)

• resources/lang/en.json
• src/client/Matchmaking.ts

---

Walkthrough

The matchmaking modal now displays the current queue size, handles queue-size WebSocket messages, and uses a 15-second watchdog to reconnect when server messages stop arriving. Queue and watchdog state are reset during connection, modal opening, socket closing, and modal shutdown.

Changes

Matchmaking queue flow

Layer / File(s)	Summary
Queue size display resources/lang/en.json, src/client/Matchmaking.ts	Adds localized queue-size text, tracks an optional queue size, and displays it while waiting for a game.
Socket messages and watchdog src/client/Matchmaking.ts	Processes queue and match messages, resets the watchdog on server activity, reconnects after 15 seconds of silence, and clears lifecycle state during shutdown.iz

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

Possibly related PRs

• openfrontio/OpenFrontIO#4595: Modifies the same matchmaking WebSocket lifecycle and close-handling paths.
• openfrontio/OpenFrontIO#4596: Modifies the same matchmaking modal and WebSocket code paths.

Sequence Diagram(s)

sequenceDiagram
  participant MatchmakingModal
  participant WebSocket
  participant MatchmakingServer
  MatchmakingModal->>WebSocket: Connect
  WebSocket->>MatchmakingServer: Open socket
  MatchmakingServer-->>WebSocket: Send queue-size
  WebSocket-->>MatchmakingModal: Update queue size
  MatchmakingServer-->>WebSocket: Send match-assignment
  WebSocket-->>MatchmakingModal: Set game assignment
  MatchmakingModal->>WebSocket: Reconnect after 15 seconds of silence

Loading

Suggested labels: UI/UX

Suggested reviewers: celant, ryanbarlow97

Poem

Queue numbers glow in line,
Messages keep the socket fine.
If silence holds for fifteen ticks,
A fresh connection does the trick.
Games arrive—let play begin!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: queue size display and reconnecting on silent disconnects.
Description check	✅ Passed	The description is directly related to the matchmaking queue-size UI and watchdog reconnect changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🔧 Fix failing CI

• Fix failing CI in branch feat/matchmaking-queue-size

---

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.}