From 3a5fba2e12695a96e4c9baf14f6a80d037085f0b Mon Sep 17 00:00:00 2001 From: Evan Date: Mon, 13 Jul 2026 15:22:52 -0700 Subject: [PATCH] Add 2v2 ranked matchmaking (#4596) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description: Implements 2v2 ranked matchmaking end-to-end against the matchmaking API's 2v2 queues (API PR #419): core team pinning, the server's second checkin loop and game creation, and the client UI. ## Core — deterministic team pinning The matcher's assignment specifies exactly who plays with whom (`teams: [[a,d],[b,c]]`), but team assignment previously only did clan/friend balancing and could scramble the ELO-balanced split. - `PlayerSchema`/`PlayerInfo` gain an optional **`teamIndex`** — a server-stamped index into the game's team list, part of `GameStartInfo` so it's identical on every client (same category as `clanTag`/`friends`, which already feed deterministic team assignment). - `assignTeams` honors pins **unconditionally** — before clan/friend grouping and past `maxTeamSize` (the matcher's balancing is authoritative) — and seeds the counts that balancing of any unpinned players sees. Pinned players still participate in the friend graph, so an unpinned friend is pulled toward a pinned player's team. - publicIds never enter core: the game server resolves publicId → teamIndex per client at game start. ## Server - **One checkin long-poll per mode.** Both loops send `mode` explicitly (the API deployed ahead of the client, so no omit-for-back-compat needed). - **`get2v2Config()`**: Team mode, `playerTeams: 2`, `maxPlayers: 4`, always-compact map, donations enabled (matching public team games), `rankedType: "2v2"` (the API's 2v2 ingestion has shipped; `RankedType` gains `TwoVTwo`). - **The assignment payload is now used** (it was previously discarded): `players` → `allowedPublicIds` so only the matched accounts can take the slots (also hardens 1v1), and `teams` → `teamIndex` stamps at game start. A malformed assignment logs a warning and falls back to creating the game without pins rather than stranding matched players. - The 3-clients-per-IP cap on public games applies to matchmade games too (an allowlist doesn't stop one person multi-tabbing multiple accounts). It is now skipped in dev, where local testing (multi-tab, the 4-player e2e) is inherently same-IP — matching the existing dev/prod gating of Turnstile and the duplicate-account kick. ## Client - Ranked modal's 2v2 card is enabled; it passes the mode through `open-matchmaking` (dispatchers without a detail — homepage button, requeue URL — still mean 1v1). - Matchmaking modal joins with `&mode=1v1`/`&mode=2v2`, shows a 2v2 title (`matchmaking_modal.title_2v2` in en.json), and shows the real 2v2 ELO from the new `leaderboard.twoVtwo` field in `/users/@me` (the ranked modal's 2v2 card does too). - WinModal shows requeue for any ranked game and carries the mode back into the right queue (`/?requeue=2v2`). - 2v2 ranked stats surface in the player stats tree (labeled via `player_stats_tree.ranked_2v2`). ## Harnesses (`tests/matchmaking/`) - Contained: the fake server captures the `mode` query param; asserts each queue sends its mode explicitly. **10/10.** - E2E: `MM_MODE=2v2` runs four real browser players through the real local worker's 2v2 queue and rides the flow into the started game. Asserts same gameId for all four, the 2v2 config, allowlist admission, and a **deterministic 2 vs 2 in-game split read from each client's GameView** (the software-WebGL gate is spoofed in test pages only). **8/8.** 1v1 e2e still **6/6.** ## Verification - `npm test`: 2,053 tests pass, including 7 new (6 `assignTeams` pinning unit tests + a full-game pinned-split test through `setup()`). - `npx tsc --noEmit`, ESLint clean. - Live e2e against a local `wrangler dev` API worker: 1v1 (6/6) and 2v2 (8/8) as above. 🤖 Generated with [Claude Code](https://claude.com/claude-code) ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory (UI changes — the ranked modal's 1v1/2v2 cards — were verified with before/after screenshots in the live app during development.) --------- Co-authored-by: Claude Fable 5 --- docs/API.md | 2 +- resources/lang/en.json | 2 + src/client/Main.ts | 30 ++- src/client/Matchmaking.ts | 19 +- src/client/components/RankedModal.ts | 35 ++- .../baseComponents/stats/PlayerStatsTree.ts | 2 + src/client/hud/layers/WinModal.ts | 10 +- src/core/ApiSchemas.ts | 5 + src/core/GameRunner.ts | 1 + src/core/Schemas.ts | 4 + src/core/game/Game.ts | 4 + src/core/game/TeamAssignment.ts | 17 +- src/server/GameManager.ts | 2 + src/server/GameServer.ts | 21 ++ src/server/MapPlaylist.ts | 31 +++ src/server/Worker.ts | 38 +++- tests/Team.test.ts | 30 +++ tests/TeamAssignment.test.ts | 109 +++++++++ tests/matchmaking/README.md | 12 +- tests/matchmaking/contained.mjs | 10 +- tests/matchmaking/e2e.mjs | 210 ++++++++++++++++-- tests/matchmaking/fakeServer.mjs | 19 +- 22 files changed, 550 insertions(+), 63 deletions(-) diff --git a/docs/API.md b/docs/API.md index d37707957..1497312de 100644 --- a/docs/API.md +++ b/docs/API.md @@ -25,7 +25,7 @@ GET https://api.openfront.io/public/games - `end` (required): ISO 8601 timestamp - `type` (optional): Game type, must be one of `[Private, Public, Singleplayer]` - `mode` (optional): Game mode, must be one of `[Free For All, Team]` -- `rankedType` (optional): Ranked type, must be one of `[unranked, 1v1]` +- `rankedType` (optional): Ranked type, must be one of `[unranked, 1v1, 2v2]` - `playerTeams` (optional): Player team configuration (e.g. `Duos`) - `limit` (optional): Number of results (max 1000, default 50) - `offset` (optional): Pagination offset diff --git a/resources/lang/en.json b/resources/lang/en.json index 1af29f0c9..13eb59a36 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -1077,6 +1077,7 @@ "replaced": "You joined matchmaking from another tab or window.", "searching": "Searching for game...", "title": "1v1 Ranked Matchmaking (ALPHA)", + "title_2v2": "2v2 Ranked Matchmaking (ALPHA)", "waiting_for_game": "Waiting for game to start..." }, "mode_selector": { @@ -1208,6 +1209,7 @@ "public": "Public", "ranked": "Ranked", "ranked_1v1": "1v1", + "ranked_2v2": "2v2", "solo": "Solo", "stats_games_played": "Games Played", "stats_losses": "Losses", diff --git a/src/client/Main.ts b/src/client/Main.ts index 4e5c49b7b..a74f14ac1 100644 --- a/src/client/Main.ts +++ b/src/client/Main.ts @@ -233,7 +233,7 @@ declare global { "kick-player": CustomEvent; toggle_game_start_timer: CustomEvent; "join-changed": CustomEvent; - "open-matchmaking": CustomEvent; + "open-matchmaking": CustomEvent<{ mode?: "1v1" | "2v2" } | undefined>; userMeResponse: CustomEvent; "leave-lobby": CustomEvent; "update-game-config": CustomEvent; @@ -854,16 +854,24 @@ class Client { window.location.href = "/"; } - if (this.consumeRequeueUrl()) { - document.dispatchEvent(new CustomEvent("open-matchmaking")); + const requeueMode = this.consumeRequeueUrl(); + if (requeueMode !== null) { + document.dispatchEvent( + new CustomEvent("open-matchmaking", { + detail: { mode: requeueMode }, + }), + ); } } - private consumeRequeueUrl(): boolean { + // Returns the requeue mode ("/?requeue" = 1v1, "/?requeue=2v2" = 2v2), or + // null when the URL has no requeue param. + private consumeRequeueUrl(): "1v1" | "2v2" | null { const searchParams = new URLSearchParams(window.location.search); if (!searchParams.has("requeue")) { - return false; + return null; } + const mode = searchParams.get("requeue") === "2v2" ? "2v2" : "1v1"; searchParams.delete("requeue"); const newUrl = @@ -871,7 +879,7 @@ class Client { (searchParams.toString() ? `?${searchParams.toString()}` : "") + window.location.hash; history.replaceState(null, "", newUrl); - return true; + return mode; } private async handleJoinLobby(event: CustomEvent) { @@ -1066,8 +1074,14 @@ class Client { crazyGamesSDK.gameplayStop(); } - private handleOpenMatchmaking(_event: CustomEvent) { - this.matchmakingModal?.open(); + private handleOpenMatchmaking( + event: CustomEvent<{ mode?: "1v1" | "2v2" } | undefined>, + ) { + if (!this.matchmakingModal) return; + // Always set the mode: dispatchers without a detail (homepage button, + // requeue URL) mean 1v1 and must reset a lingering 2v2 selection. + this.matchmakingModal.mode = event.detail?.mode === "2v2" ? "2v2" : "1v1"; + this.matchmakingModal.open(); } private handleKickPlayer(event: CustomEvent) { diff --git a/src/client/Matchmaking.ts b/src/client/Matchmaking.ts index 9f2484241..9e4effdb9 100644 --- a/src/client/Matchmaking.ts +++ b/src/client/Matchmaking.ts @@ -18,6 +18,9 @@ export class MatchmakingModal extends BaseModal { private reconnectTimeout: ReturnType | null = null; private reconnectAttempts = 0; private intentionalClose = false; + // Which queue to join; set by Main from the open-matchmaking event + // before the modal opens. + public mode: "1v1" | "2v2" = "1v1"; @state() private connected = false; @state() private socket: WebSocket | null = null; @state() private gameID: string | null = null; @@ -34,7 +37,11 @@ export class MatchmakingModal extends BaseModal { protected renderHeaderSlot() { return modalHeader({ - title: translateText("matchmaking_modal.title"), + title: translateText( + this.mode === "2v2" + ? "matchmaking_modal.title_2v2" + : "matchmaking_modal.title", + ), onBack: () => this.close(), ariaLabel: translateText("common.back"), }); @@ -80,7 +87,7 @@ export class MatchmakingModal extends BaseModal { this.connectTimeout = null; } this.socket = new WebSocket( - `${ClientEnv.jwtIssuer()}/matchmaking/join?instance_id=${encodeURIComponent(ClientEnv.instanceId())}`, + `${ClientEnv.jwtIssuer()}/matchmaking/join?instance_id=${encodeURIComponent(ClientEnv.instanceId())}&mode=${this.mode}`, ); this.socket.onopen = async () => { console.log("Connected to matchmaking server"); @@ -184,9 +191,11 @@ export class MatchmakingModal extends BaseModal { return; } - this.elo = - userMe.player.leaderboard?.oneVone?.elo ?? - translateText("matchmaking_modal.no_elo"); + const row = + this.mode === "2v2" + ? userMe.player.leaderboard?.twoVtwo + : userMe.player.leaderboard?.oneVone; + this.elo = row?.elo ?? translateText("matchmaking_modal.no_elo"); this.connected = false; this.gameID = null; diff --git a/src/client/components/RankedModal.ts b/src/client/components/RankedModal.ts index 94cf987b1..d377546fe 100644 --- a/src/client/components/RankedModal.ts +++ b/src/client/components/RankedModal.ts @@ -13,6 +13,7 @@ export class RankedModal extends BaseModal { protected routerName = "ranked"; @state() private elo: number | string = "..."; + @state() private elo2v2: number | string = "..."; @state() private userMeResponse: UserMeResponse | false = false; @state() private errorMessage: string | null = null; // CrazyGames players authenticate through the SDK, not a linked @@ -56,20 +57,23 @@ export class RankedModal extends BaseModal { private updateElo() { if (this.errorMessage) { this.elo = translateText("map_component.error"); + this.elo2v2 = translateText("map_component.error"); return; } if (this.isRankedEligible()) { - this.elo = - this.userMeResponse && - this.userMeResponse.player.leaderboard?.oneVone?.elo - ? this.userMeResponse.player.leaderboard.oneVone.elo - : translateText("matchmaking_modal.no_elo"); + const leaderboard = this.userMeResponse + ? this.userMeResponse.player.leaderboard + : undefined; + const noElo = translateText("matchmaking_modal.no_elo"); + this.elo = leaderboard?.oneVone?.elo ?? noElo; + this.elo2v2 = leaderboard?.twoVtwo?.elo ?? noElo; } } protected override async onOpen(): Promise { this.elo = "..."; + this.elo2v2 = "..."; this.errorMessage = null; try { @@ -83,6 +87,7 @@ export class RankedModal extends BaseModal { this.userMeResponse = false; this.errorMessage = translateText("map_component.error"); this.elo = translateText("map_component.error"); + this.elo2v2 = translateText("map_component.error"); } finally { this.updateElo(); } @@ -110,11 +115,15 @@ export class RankedModal extends BaseModal { (this.isRankedEligible() ? translateText("matchmaking_modal.elo", { elo: this.elo }) : translateText("mode_selector.ranked_title")), - () => this.handleRanked(), + () => this.handleRanked("1v1"), )} - ${this.renderDisabledCard( + ${this.renderCard( translateText("mode_selector.ranked_2v2_title"), - translateText("mode_selector.coming_soon"), + this.errorMessage ?? + (this.isRankedEligible() + ? translateText("matchmaking_modal.elo", { elo: this.elo2v2 }) + : translateText("mode_selector.ranked_title")), + () => this.handleRanked("2v2"), )} ${this.renderDisabledCard( translateText("mode_selector.coming_soon"), @@ -133,7 +142,7 @@ export class RankedModal extends BaseModal { return html`