feat: show next map and mode info in public lobby

resources/lang/en.json

@@ -266,14 +266,15 @@
     "version_mismatch": "This game was created with a different version. Cannot join."
   },
   "public_lobby": {
-    "join": "Join next Game",
+    "join": "Join Game",
     "waiting": "players waiting",
     "teams_Duos": "of 2 (Duos)",
     "teams_Trios": "of 3 (Trios)",
     "teams_Quads": "of 4 (Quads)",
     "teams_hvn": "Humans Vs Nations",
     "teams": "{num} teams",
-    "players_per_team": "of {num}"
+    "players_per_team": "of {num}",
+    "up_next": "Up next"
   },
   "matchmaking_modal": {
     "title": "Matchmaking",

src/client/PublicLobby.ts

@@ -9,7 +9,7 @@ import {
   Quads,
   Trios,
 } from "../core/game/Game";
-import { GameID, GameInfo } from "../core/Schemas";
+import { GameID, GameInfo, TeamCountConfig } from "../core/Schemas";
 import { generateID } from "../core/Util";
 import { JoinLobbyEvent } from "./Main";
 import { terrainMapFileLoader } from "./TerrainMapFileLoader";
@@ -124,37 +124,44 @@ export class PublicLobby extends LitElement {
     // Format time to show minutes and seconds
     const timeDisplay = renderDuration(timeRemaining);
 
-    const teamCount =
-      lobby.gameConfig.gameMode === GameMode.Team
-        ? (lobby.gameConfig.playerTeams ?? 0)
-        : null;
-
-    const maxPlayers = lobby.gameConfig.maxPlayers ?? 0;
-    const teamSize = this.getTeamSize(teamCount, maxPlayers);
-    const teamTotal = this.getTeamTotal(teamCount, teamSize, maxPlayers);
-    const modeLabel = this.getModeLabel(
-      lobby.gameConfig.gameMode,
-      teamCount,
-      teamTotal,
-    );
-    const teamDetailLabel = this.getTeamDetailLabel(
+    const {
+      modeLabel,
+      teamDetailLabel,
+      mapName: currentMapName,
+    } = this.getGameDisplayDetails(
+      lobby.gameConfig.gameMap,
       lobby.gameConfig.gameMode,
-      teamCount,
-      teamTotal,
-      teamSize,
+      lobby.gameConfig.playerTeams,
+      lobby.gameConfig.maxPlayers,
     );
 
+
+
     const fullModeLabel = teamDetailLabel
       ? `${modeLabel} ${teamDetailLabel}`
       : modeLabel;
-
     const mapImageSrc = this.mapImages.get(lobby.gameID);
 
+    // Calculate details for Next Game
+    const {
+      modeLabel: nextModeLabel,
+      teamDetailLabel: nextTeamDetailLabel,
+      mapName: nextMapName,
+    } = this.getGameDisplayDetails(
+      lobby.nextGameConfig?.gameMap,
+      lobby.nextGameConfig?.gameMode,
+      lobby.nextGameConfig?.playerTeams,
+      lobby.nextGameConfig?.maxPlayers,
+    );
+
+    const fullNextModeLabel = nextTeamDetailLabel
+      ? `${nextModeLabel} ${nextTeamDetailLabel}`
+      : nextModeLabel;
     return html`
       <button
         @click=${() => this.lobbyClicked(lobby)}
         ?disabled=${this.isButtonDebounced}
-        class="isolate grid h-40 grid-cols-[100%] grid-rows-[100%] place-content-stretch w-full overflow-hidden ${this
+        class="isolate grid h-60 grid-cols-[100%] grid-rows-[100%] place-content-stretch w-full overflow-hidden ${this
           .isLobbyHighlighted
           ? "bg-gradient-to-r from-emerald-600 to-emerald-500"
           : "bg-gradient-to-r from-red-800 to-red-700"} text-white font-medium rounded-xl transition-opacity duration-200 hover:opacity-90 ${this
@@ -183,11 +190,7 @@ export class PublicLobby extends LitElement {
               <span class="text-sm text-red-800 bg-white rounded-sm px-1 mr-1"
                 >${fullModeLabel}</span
               >
-              <span
-                >${translateText(
-                  `map.${lobby.gameConfig.gameMap.toLowerCase().replace(/[\s.]+/g, "")}`,
-                )}</span
-              >
+              <span>${currentMapName}</span>
             </div>
           </div>
 
@@ -197,6 +200,25 @@ export class PublicLobby extends LitElement {
             </div>
             <div class="text-md font-medium text-white-400">${timeDisplay}</div>
           </div>
+          ${lobby.nextGameConfig
+            ? html` <div
+                class="col-span-full border-t border-white/20 pt-2 mt-2 flex flex-col items-end"
+              >
+                <div
+                  class="text-xs font-semibold uppercase tracking-wide opacity-80 mb-1"
+                >
+                  ${translateText("public_lobby.up_next")}
+                </div>
+                <div
+                  class="text-sm font-medium text-white-300 flex items-center justify-end gap-1"
+                >
+                  <span class="text-xs text-red-800 bg-white rounded-sm px-1"
+                    >${fullNextModeLabel}</span
+                  >
+                  <span>${nextMapName}</span>
+                </div>
+              </div>`
+            : ""}
         </div>
       </button>
     `;
@@ -269,6 +291,37 @@ export class PublicLobby extends LitElement {
     return null;
   }
 
+  private getGameDisplayDetails(
+    gameMap?: string,
+    gameMode?: GameMode,
+    playerTeams?: TeamCountConfig,
+    maxPlayers?: number,
+  ) {
+    const teamCount = gameMode === GameMode.Team ? (playerTeams ?? 0) : null;
+
+    const totalMaxPlayers = maxPlayers ?? 0;
+    const teamSize = this.getTeamSize(teamCount, totalMaxPlayers);
+    const teamTotal = this.getTeamTotal(teamCount, teamSize, totalMaxPlayers);
+
+    const modeLabel = gameMode
+      ? this.getModeLabel(gameMode, teamCount, teamTotal)
+      : "";
+
+    const teamDetailLabel = gameMode
+      ? this.getTeamDetailLabel(gameMode, teamCount, teamTotal, teamSize)
+      : null;
+
+    const mapName = gameMap
+      ? translateText(`map.${gameMap.toLowerCase().replace(/[\s.]+/g, "")}`)
+      : "";
+
+    return {
+      modeLabel,
+      teamDetailLabel,
+      mapName,
+    };
+  }
+
   private lobbyClicked(lobby: GameInfo) {
     if (this.isButtonDebounced) {
       return;

src/core/Schemas.ts

@@ -130,6 +130,7 @@ export interface GameInfo {
   numClients?: number;
   msUntilStart?: number;
   gameConfig?: GameConfig;
+  nextGameConfig?: GameConfig;
 }
 export interface ClientInfo {
   clientID: ClientID;

src/core/WorkerSchemas.ts

@@ -1,11 +1,17 @@
 import { z } from "zod";
 import { GameConfigSchema } from "./Schemas";
 
-export const CreateGameInputSchema = GameConfigSchema.or(
-  z
-    .object({})
-    .strict()
-    .transform((val) => undefined),
-);
+export const CreateGameInputSchema = z
+  .object({
+    gameConfig: GameConfigSchema,
+    nextGameConfig: GameConfigSchema.optional(),
+  })
+  .or(GameConfigSchema)
+  .or(
+    z
+      .object({})
+      .strict()
+      .transform((val) => undefined),
+  );
 
 export const GameInputSchema = GameConfigSchema.partial();

src/server/GameManager.ts

@@ -51,6 +51,7 @@ export class GameManager {
   createGame(
     id: GameID,
     gameConfig: GameConfig | undefined,
+    nextGameConfig: GameConfig | undefined,
     creatorClientID?: string,
   ) {
     const game = new GameServer(
@@ -76,6 +77,7 @@ export class GameManager {
         disabledUnits: [],
         ...gameConfig,
       },
+      nextGameConfig,
       creatorClientID,
     );
     this.games.set(id, game);

src/server/GameServer.ts

@@ -75,6 +75,7 @@ export class GameServer {
     public readonly createdAt: number,
     private config: ServerConfig,
     public gameConfig: GameConfig,
+    public nextGameConfig?: GameConfig,
     private lobbyCreatorID?: string,
   ) {
     this.log = log_.child({ gameID: id });
@@ -651,6 +652,7 @@ export class GameServer {
         clientID: c.clientID,
       })),
       gameConfig: this.gameConfig,
+      nextGameConfig: this.nextGameConfig,
       msUntilStart: this.isPublic()
         ? this.createdAt + this.config.gameCreationRate()
         : undefined,

src/server/MapPlaylist.ts

@@ -60,6 +60,7 @@ const frequency: Partial<Record<GameMapName, number>> = {
 interface MapWithMode {
   map: GameMapType;
   mode: GameMode;
+  playerTeams?: TeamCountConfig;
 }
 
 const TEAM_COUNTS = [
@@ -79,13 +80,52 @@ export class MapPlaylist {
 
   constructor(private disableTeams: boolean = false) {}
 
-  public gameConfig(): GameConfig {
-    const { map, mode } = this.getNextMap();
+  public gameConfig(): {
+    gameConfig: GameConfig;
+    nextGameConfig?: GameConfig;
+  } {
+    const nextItem = this.getNextMap();
+    const { map, mode } = nextItem;
+
+    this.ensurePlaylistPopulated();
+    const upNextItem = this.mapsPlaylist[0];
+    let nextPlayerTeams: TeamCountConfig | undefined;
+
+    if (upNextItem) {
+      if (upNextItem.mode === GameMode.Team && !upNextItem.playerTeams) {
+        upNextItem.playerTeams = this.getTeamCount();
+      }
+      nextPlayerTeams = upNextItem.playerTeams;
+    }
 
     const playerTeams =
-      mode === GameMode.Team ? this.getTeamCount() : undefined;
+      mode === GameMode.Team
+        ? (nextItem.playerTeams ?? this.getTeamCount())
+        : undefined;
+
+    const gameConfig = this.createConfig(map, mode, playerTeams);
+
+    let nextGameConfig: GameConfig | undefined;
+    if (upNextItem) {
+      nextGameConfig = this.createConfig(
+        upNextItem.map,
+        upNextItem.mode,
+        nextPlayerTeams,
+      );
+    }
 
     // Create the default public game config (from your GameManager)
+    return {
+      gameConfig,
+      nextGameConfig,
+    };
+  }
+
+  private createConfig(
+    map: GameMapType,
+    mode: GameMode,
+    playerTeams?: TeamCountConfig,
+  ): GameConfig {
     return {
       donateGold: mode === GameMode.Team,
       donateTroops: mode === GameMode.Team,
@@ -104,24 +144,28 @@ export class MapPlaylist {
       playerTeams,
       bots: 400,
       disabledUnits: [],
-    } satisfies GameConfig;
+    };
   }
 
   private getTeamCount(): TeamCountConfig {
     return TEAM_COUNTS[Math.floor(Math.random() * TEAM_COUNTS.length)];
   }
 
-  private getNextMap(): MapWithMode {
+  private ensurePlaylistPopulated() {
     if (this.mapsPlaylist.length === 0) {
       const numAttempts = 10000;
       for (let i = 0; i < numAttempts; i++) {
         if (this.shuffleMapsPlaylist()) {
           log.info(`Generated map playlist in ${i} attempts`);
-          return this.mapsPlaylist.shift()!;
+          return;
         }
       }
       log.error("Failed to generate a valid map playlist");
     }
+  }
+
+  private getNextMap(): MapWithMode {
+    this.ensurePlaylistPopulated();
     // Even if it failed, playlist will be partially populated.
     return this.mapsPlaylist.shift()!;
   }

src/server/Master.ts

@@ -225,6 +225,7 @@ async function fetchLobbies(): Promise<number> {
         gameID: gi.gameID,
         numClients: gi?.clients?.length ?? 0,
         gameConfig: gi.gameConfig,
+        nextGameConfig: gi.nextGameConfig,
         msUntilStart: (gi.msUntilStart ?? Date.now()) - Date.now(),
       } as GameInfo;
     });

src/server/Worker.ts

@@ -11,6 +11,7 @@ import { getServerConfigFromServer } from "../core/configuration/ConfigLoader";
 import { GameType } from "../core/game/Game";
 import {
   ClientMessageSchema,
+  GameConfig,
   GameID,
   ID,
   PartialGameRecordSchema,
@@ -128,9 +129,19 @@ export async function startWorker() {
       return res.status(400).json({ error });
     }
 
-    const gc = result.data;
+    const input = result.data;
+    let gameConfig: GameConfig | undefined;
+    let nextGameConfig: GameConfig | undefined;
+
+    if (input && "gameConfig" in input) {
+      gameConfig = input.gameConfig;
+      nextGameConfig = input.nextGameConfig;
+    } else {
+      gameConfig = input;
+    }
+
     if (
-      gc?.gameType === GameType.Public &&
+      gameConfig?.gameType === GameType.Public &&
       req.headers[config.adminHeader()] !== config.adminToken()
     ) {
       log.warn(
@@ -149,10 +160,10 @@ export async function startWorker() {
     }
 
     // Pass creatorClientID to createGame
-    const game = gm.createGame(id, gc, creatorClientID);
+    const game = gm.createGame(id, gameConfig, nextGameConfig, creatorClientID);
 
     log.info(
-      `Worker ${workerId}: IP ${ipAnonymize(clientIP)} creating ${game.isPublic() ? "Public" : "Private"}${gc?.gameMode ? ` ${gc.gameMode}` : ""} game with id ${id}${creatorClientID ? `, creator: ${creatorClientID}` : ""}`,
+      `Worker ${workerId}: IP ${ipAnonymize(clientIP)} creating ${game.isPublic() ? "Public" : "Private"}${gameConfig?.gameMode ? ` ${gameConfig.gameMode}` : ""} game with id ${id}${creatorClientID ? `, creator: ${creatorClientID}` : ""}`,
     );
     res.json(game.gameInfo());
   });
@@ -556,7 +567,8 @@ async function pollLobby(gm: GameManager) {
     if (data.assignment) {
       // TODO: Only allow specified players to join the game.
       console.log(`Creating game ${gameId}`);
-      const game = gm.createGame(gameId, playlist.gameConfig());
+      const { gameConfig, nextGameConfig } = playlist.gameConfig();
+      const game = gm.createGame(gameId, gameConfig, nextGameConfig);
       setTimeout(() => {
         // Wait a few seconds to allow clients to connect.
         console.log(`Starting game ${gameId}`);