feat: add 4v4 gamemode support (R1 + R2)

src/App.tsx

@@ -26,7 +26,7 @@ export function App({ router, queryClient, persister }: AppProps) {
             persistOptions={{
                 persister,
                 maxAge,
-                buster: "1", // API version
+                buster: "2", // API version
             }}
         >
             <LocalizationProvider dateAdapter={AdapterDayjs}>

src/helpers/session.unit.test.ts

@@ -29,6 +29,7 @@ const makePlayerDataPIT = (gamesPlayed: number, experience: number): PlayerDataP
     doubles: makeStatsPIT(0),
     threes: makeStatsPIT(0),
     fours: makeStatsPIT(gamesPlayed),
+    "4v4": makeStatsPIT(0),
 });
 
 describe(addExtrapolatedSessions, () => {

src/mocks/data.ts

@@ -94,7 +94,8 @@ export const makePlayerDataPIT = (
     doubles: makeStatsPIT(multiplier),
     threes: makeStatsPIT(multiplier),
     fours: makeStatsPIT(multiplier),
-    overall: makeStatsPIT(multiplier * 4),
+    "4v4": makeStatsPIT(multiplier),
+    overall: makeStatsPIT(multiplier * 5),
 });
 
 export const makeSession = (
@@ -163,13 +164,15 @@ export const makeWrappedResponse = (uuid: string, year: number) => {
                 doubles: { highest: 8, when: startTime },
                 threes: { highest: 6, when: startTime },
                 fours: { highest: 10, when: startTime },
+                "4v4": { highest: 2, when: startTime },
             },
             finalKillStreaks: {
                 overall: { highest: 20, when: startTime },
                 solo: { highest: 8, when: startTime },
                 doubles: { highest: 12, when: startTime },
                 threes: { highest: 10, when: startTime },
                 fours: { highest: 15, when: startTime },
+                "4v4": { highest: 3, when: startTime },
             },
             sessionCoverage: {
                 gamesPlayedPercentage: 0.85,

src/queries/playerdata.ts

@@ -19,6 +19,7 @@ export interface APIPlayerDataPIT {
     readonly doubles: APIStatsPIT;
     readonly threes: APIStatsPIT;
     readonly fours: APIStatsPIT;
+    readonly "4v4": APIStatsPIT;
     readonly overall: APIStatsPIT;
 }
 
@@ -43,6 +44,7 @@ export interface PlayerDataPIT {
     readonly doubles: StatsPIT;
     readonly threes: StatsPIT;
     readonly fours: StatsPIT;
+    readonly "4v4": StatsPIT;
     readonly overall: StatsPIT;
 }
 
@@ -54,5 +56,6 @@ export const apiToPlayerDataPIT = (apiPlayerData: APIPlayerDataPIT): PlayerDataP
     doubles: apiPlayerData.doubles,
     threes: apiPlayerData.threes,
     fours: apiPlayerData.fours,
+    "4v4": apiPlayerData["4v4"],
     overall: apiPlayerData.overall,
 });

src/queries/wrapped.ts

@@ -50,13 +50,15 @@ interface APISessionStats {
         readonly doubles: StreakInfo;
         readonly threes: StreakInfo;
         readonly fours: StreakInfo;
+        readonly "4v4": StreakInfo;
     };
     readonly finalKillStreaks: {
         readonly overall: StreakInfo;
         readonly solo: StreakInfo;
         readonly doubles: StreakInfo;
         readonly threes: StreakInfo;
         readonly fours: StreakInfo;
+        readonly "4v4": StreakInfo;
     };
     readonly sessionCoverage: {
         readonly gamesPlayedPercentage: number;
@@ -99,13 +101,15 @@ interface SessionStats {
         readonly doubles: StreakInfo;
         readonly threes: StreakInfo;
         readonly fours: StreakInfo;
+        readonly "4v4": StreakInfo;
     };
     readonly finalKillStreaks: {
         readonly overall: StreakInfo;
         readonly solo: StreakInfo;
         readonly doubles: StreakInfo;
         readonly threes: StreakInfo;
         readonly fours: StreakInfo;
+        readonly "4v4": StreakInfo;
     };
     readonly sessionCoverage: {
         readonly gamesPlayedPercentage: number;

src/routes/wrapped/$uuid.tsx

@@ -929,7 +929,7 @@ const Streaks: React.FC<StreaksProps> = ({ wrappedData }) => {
     const { sessionStats } = wrappedData;
     if (!sessionStats) return null;
 
-    const modes = ["overall", "solo", "doubles", "threes", "fours"] as const;
+    const modes = ["overall", "solo", "doubles", "threes", "fours", "4v4"] as const;
 
     return (
         <>

src/routes/wrapped/-uuid.ui.test.tsx

@@ -417,6 +417,18 @@ describe("Wrapped detail page", () => {
                                         kills: 200,
                                         deaths: 100,
                                     },
+                                    "4v4": {
+                                        winstreak: 3,
+                                        gamesPlayed: 100,
+                                        wins: 60,
+                                        losses: 40,
+                                        bedsBroken: 80,
+                                        bedsLost: 30,
+                                        finalKills: 150,
+                                        finalDeaths: 50,
+                                        kills: 200,
+                                        deaths: 100,
+                                    },
                                     overall: {
                                         winstreak: 12,
                                         gamesPlayed: 400,
@@ -482,6 +494,18 @@ describe("Wrapped detail page", () => {
                                         kills: 600,
                                         deaths: 300,
                                     },
+                                    "4v4": {
+                                        winstreak: 9,
+                                        gamesPlayed: 300,
+                                        wins: 180,
+                                        losses: 120,
+                                        bedsBroken: 240,
+                                        bedsLost: 90,
+                                        finalKills: 450,
+                                        finalDeaths: 150,
+                                        kills: 600,
+                                        deaths: 300,
+                                    },
                                     overall: {
                                         winstreak: 36,
                                         gamesPlayed: 1200,

src/stats/keys.ts

@@ -31,6 +31,7 @@ export const ALL_GAMEMODE_KEYS = [
     "doubles",
     "threes",
     "fours",
+    "4v4",
     "overall",
 ] as const;
 export type GamemodeKey = (typeof ALL_GAMEMODE_KEYS)[number];

src/stats/labels.ts

@@ -117,6 +117,9 @@ export const getGamemodeLabel = (gamemode: GamemodeKey, capitalize = false): str
         case "fours": {
             return capitalize ? "Fours" : "fours";
         }
+        case "4v4": {
+            return "4v4";
+        }
     }
 };
 

src/stats/progression.unit.test.ts

@@ -137,6 +137,7 @@ class PlayerDataBuilder {
             doubles: { ...emptyStats },
             threes: { ...emptyStats },
             fours: { ...emptyStats },
+            "4v4": { ...emptyStats },
             overall: { ...emptyStats },
         };
     }
@@ -159,6 +160,7 @@ class PlayerDataBuilder {
             doubles: { ...this.player.doubles },
             threes: { ...this.player.threes },
             fours: { ...this.player.fours },
+            "4v4": { ...this.player["4v4"] },
             overall: { ...this.player.overall },
         };
     }

src/theme/tokens.ts

@@ -86,7 +86,7 @@ export const LIGHT_TOKENS: SchemeTokens = {
 };
 
 /**
- * Per-gamemode accent colours for the four real modes. Used for chart strokes
+ * Per-gamemode accent colours for the real modes. Used for chart strokes
  * and legend dots so a gamemode keeps a stable identity colour across the app.
  * Shared across light and dark. "overall" is intentionally absent — it resolves
  * to the scheme's `primary` colour (added in the theme), so the aggregate
@@ -97,6 +97,7 @@ export const GAMEMODE_COLORS: Record<Exclude<GamemodeKey, "overall">, string> =
     doubles: "#06b6d4",
     threes: "#22c55e",
     fours: "#f59e0b",
+    "4v4": "#ef4444",
 };
 
 /**