Add 2v2 ranked matchmaking (#4596)

## 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 <noreply@anthropic.com>

src/client/Main.ts

@@ -233,7 +233,7 @@ declare global {
     "kick-player": CustomEvent;
     toggle_game_start_timer: CustomEvent;
     "join-changed": CustomEvent;
-    "open-matchmaking": CustomEvent<undefined>;
+    "open-matchmaking": CustomEvent<{ mode?: "1v1" | "2v2" } | undefined>;
     userMeResponse: CustomEvent<UserMeResponse | false>;
     "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<JoinLobbyEvent>) {
@@ -1066,8 +1074,14 @@ class Client {
     crazyGamesSDK.gameplayStop();
   }
 
-  private handleOpenMatchmaking(_event: CustomEvent<undefined>) {
-    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) {

src/client/Matchmaking.ts

@@ -18,6 +18,9 @@ export class MatchmakingModal extends BaseModal {
   private reconnectTimeout: ReturnType<typeof setTimeout> | 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;

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<void> {
     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`
       <button
         @click=${onClick}
-        class="flex flex-col w-full h-28 sm:h-32 rounded-2xl bg-surface border-0 transition-transform hover:scale-[1.02] active:scale-[0.98] p-6 items-center justify-center gap-3"
+        class="flex flex-col w-full h-28 sm:h-32 rounded-2xl bg-malibu-blue border-0 transition-all duration-200 hover:bg-aquarius hover:scale-[1.03] hover:shadow-[var(--shadow-action-card-hover)] active:bg-malibu-blue/80 active:scale-[0.98] p-6 items-center justify-center gap-3"
       >
         <div class="flex flex-col items-center gap-1 text-center">
           <h3
@@ -142,7 +151,7 @@ export class RankedModal extends BaseModal {
             ${title}
           </h3>
           <p
-            class="text-xs text-white/60 uppercase tracking-wider whitespace-pre-line leading-tight"
+            class="text-xs text-white/80 uppercase tracking-wider whitespace-pre-line leading-tight"
           >
             ${subtitle}
           </p>
@@ -172,13 +181,15 @@ export class RankedModal extends BaseModal {
     `;
   }
 
-  private async handleRanked() {
+  private async handleRanked(mode: "1v1" | "2v2") {
     if ((await userAuth()) === false) {
       this.close();
       window.showPage?.("page-account");
       return;
     }
 
-    document.dispatchEvent(new CustomEvent("open-matchmaking"));
+    document.dispatchEvent(
+      new CustomEvent("open-matchmaking", { detail: { mode } }),
+    );
   }
 }

src/client/components/baseComponents/stats/PlayerStatsTree.ts

@@ -78,6 +78,8 @@ export class PlayerStatsTreeView extends LitElement {
     switch (r) {
       case RankedType.OneVOne:
         return translateText("player_stats_tree.ranked_1v1");
+      case RankedType.TwoVTwo:
+        return translateText("player_stats_tree.ranked_2v2");
     }
   }
 

src/client/hud/layers/WinModal.ts

@@ -228,7 +228,7 @@ export class WinModal extends LitElement implements Controller {
     await this.loadPatternContent();
     // Check if this is a ranked game
     this.isRankedGame =
-      this.game.config().gameConfig().rankedType === RankedType.OneVOne;
+      this.game.config().gameConfig().rankedType !== undefined;
     this.isVisible = true;
     this.requestUpdate();
     setTimeout(() => {
@@ -250,8 +250,12 @@ export class WinModal extends LitElement implements Controller {
 
   private _handleRequeue() {
     this.hide();
-    // Navigate to homepage and open matchmaking modal
-    window.location.href = "/?requeue";
+    // Navigate to homepage and open matchmaking modal for the same mode
+    const requeue =
+      this.game.config().gameConfig().rankedType === RankedType.TwoVTwo
+        ? "/?requeue=2v2"
+        : "/?requeue";
+    window.location.href = requeue;
   }
 
   init() {}