Feature/reuse private lobby (#4536)

**Add approved & assigned issue number here:** Resolves #4476 ## Description: Lets a private-lobby host reuse the same group for **back-to-back games without re-sharing the invite link**. **Flow:** in a private game, the host clicks a **"New lobby"** button in the top-right bar (next to pause). The game's **server** creates a fresh private lobby (same creator, default settings) and broadcasts its id to everyone still connected. Non-hosts get a one-click **"Join"** banner at the top of the screen; the host is taken straight back to the host view for the new lobby. The chain can repeat indefinitely. ### Key design decision: the server creates and broadcasts the successor lobby The successor lobby is minted by the **finished game's server**, not the host's browser. The old game's server is the only thing still connected to every player, so it has to be what announces the new lobby; because it also *creates* that lobby, the id everyone is redirected to is **authoritative**. A real lobby the server just made for the authenticated creator, not an id a client handed it to trust and fan out. The request is **creator-only** and **idempotent** per game, and every successor is wired the same way, so the group can keep playing game after game. ### How it works 1. Host clicks "New lobby" (host + private only) → confirm dialog → the client sends a `create_next_lobby` message. 2. The game server verifies the sender is the lobby creator, mints a successor private lobby on the same worker, stores it (idempotent), and broadcasts a `new_lobby` message with the new id to all connected clients. 3. Each client reacts: the host is navigated to the new lobby's host view (`/…/game/<id>?host`); everyone else sees a dismissible "Host started a new lobby — Join" banner that navigates to the join URL in one click. Two new Zod wire messages in `src/core/Schemas.ts` (`create_next_lobby`, `new_lobby`) carry the request and the broadcast. ### Screenshots <table> <tr> <td width="50%" align="center" valign="top"> <img width="220" alt="In-game New lobby button" src="https://github.com/user-attachments/assets/9a4d4425-a7f6-4b3a-9c4f-9205300b1e5b" /><br /> <sub><b>1.</b> In-game <b>New lobby</b> button (top-right, next to pause) — shown only to the host of a private lobby</sub> </td> <td width="50%" align="center" valign="top"> <img width="320" alt="Confirmation dialog" src="https://github.com/user-attachments/assets/fa023f5a-58e8-439b-8899-5150235a1e8c" /><br /> <sub><b>2.</b> Confirmation so a stray click doesn't pull everyone into a new lobby</sub> </td> </tr> <tr> <td colspan="2" align="center"> <img width="100%" alt="Join banner for non-hosts" src="https://github.com/user-attachments/assets/7e5ef490-aa7e-4449-add9-e857fe273bde" /><br /> <sub><b>3.</b> Everyone else gets a one-click <b>Join</b> banner at the top of the screen</sub> </td> </tr> <tr> <td colspan="2" align="center"> <img width="330" alt="Host view for the new lobby" src="https://github.com/user-attachments/assets/9920b070-4ed3-41f8-9345-78778b4648a7" /><br /> <sub><b>4.</b> The host lands back in the host view for the brand-new lobby</sub> </td> </tr> </table> ### Design Decisions **A. The server creates & broadcasts the successor, not the client.** The finished game's server mints the successor and broadcasts its id. Why this and not "host's browser calls `POST /api/create_game`, then asks the server to relay the id"? - The broadcast id is **authoritative/verified**: it's a real lobby the server just created for the **authenticated** lobby creator (creator identity comes from the JWT the game already holds), not an arbitrary id a client hands the server to fan out to everyone. - The **old game server is the only thing still connected to all the players**, so it must be the one to broadcast. Having it also create the lobby keeps it to one authoritative round-trip instead of "client creates, then client asks server to trust an id it didn't make." - The server can **authorise** (only the creator) and stay **idempotent**. **B. The successor starts with default settings (not a copy of the old game).** A deliberate scope choice. The host lands in the normal host view and reconfigures. Copying the exact config would mean reverse-mapping every `GameConfig` field back into the host-modal controls, which I thought would be out of scope for this PR. Same **creator** is preserved; same **settings** intentionally is not. **C. It's a brand-new lobby, not the same game resurrected.** This directly follows @evanpelle's guidance on the issue: *"A 'lobby' is really just a game that hasn't started yet. So making a persistent lobby isn't really possible. I think instead having a simple way to transfer players to a new lobby is probably the way to go."* A `GameServer` runs exactly one game (start → end → archive), so rather than reworking that lifecycle to resurrect the old game, the server spins up a fresh successor lobby and transfers the group into it, which is also why the feature is framed as "reuse the group," not "reuse the game object." **D. The host returns via a `?host` URL flag + full reload ("attach mode").** Navigating to a normal join URL (`/game/<id>`) always lands you in the **join** view, which has no Start button. So the host can't just use the join URL. The `?host` flag routes the creator to the **host view** instead (`Main.handleUrl` → `HostLobbyModal` in "attach" mode, which binds to the existing lobby id and skips creating a new one). A full reload is used because it cleanly tears down the finished game and mirrors the existing win-screen "Requeue" button's `window.location.href` pattern. **E. Each successor can spawn its own successor (recursive factory).** The first version only chained **one** generation. A spawned lobby had no factory of its own, so the *second* "New lobby" click did nothing (button just greyed out). Fixed by `wireSuccessorLobby` (a small dependency-injected helper) that wires every successor the same way. This is the whole point of the issue ("back-to-back games"), so it has its own regression test. **F. Private-only.** The successor factory is installed **only** on the private `POST /api/create_game` path in `Worker.ts`. Public games (scheduled by the master) and singleplayer never get a factory, so `handleCreateNextLobby` is a no-op for them. The client button is also gated on `isLobbyCreator && isPrivateLobby`. **G. In-game button + confirm; the win-modal button was removed.** An earlier version put the "New lobby" button on the win screen. I moved it to the in-game bar so the host can reuse the lobby **at any time** (without dying or waiting for the game to end), and added a **confirm** (matching the adjacent Exit button) so a stray click next to pause/exit doesn't yank everyone into a new lobby. The win-screen button became redundant and was removed. ### Testing - **Unit tests:** wire-message schema round-trips (`tests/NewLobbyMessages.test.ts`); the server handler — authorisation, broadcast, idempotency — against a real `GameServer` (`tests/server/CreateNextLobby.test.ts`); and successor **chaining** across multiple generations (`tests/server/SuccessorLobby.test.ts`). - **Full suite:** `npm test` passes — **1782 tests across 154 files**. - **Manual:** created a private lobby with multiple clients and played consecutive games via the button; verified non-hosts get the Join banner, the host lands back in the host view, and the chain works for 3+ games in a row. ## 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 ## Please put your Discord username so you can be contacted if a bug or regression is found: MushroomLamp --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-23 20:20:51 +00:00 · 2026-07-10 15:51:49 -07:00
parent a794eca4d6
commit d76691372c
16 changed files with 564 additions and 7 deletions
@@ -18,7 +18,11 @@ import {
  UserMeResponse,
  UserMeResponseSchema,
 } from "../core/ApiSchemas";
-import { AnalyticsRecord, AnalyticsRecordSchema } from "../core/Schemas";
+import {
+  AnalyticsRecord,
+  AnalyticsRecordSchema,
+  GameInfo,
+} from "../core/Schemas";
 import { getAuthHeader, getPlayToken, logOut, userAuth } from "./Auth";
 import { ClientEnv } from "./ClientEnv";

@@ -525,6 +529,33 @@ export async function setLobbyListed(
  }
 }

+// POST /wX/api/create_game?previous=<gameID>, targeted at the worker that owns
+// the finished game — mints a successor private lobby (same creator, default
+// settings) and has the old game broadcast the new id to everyone still
+// connected. Returns the successor's info; the caller navigates the host there.
+// Idempotent server-side: repeat calls return the same successor.
+export async function createNextLobby(
+  previousGameID: string,
+): Promise<GameInfo> {
+  const token = await getPlayToken();
+  const response = await fetch(
+    `/${ClientEnv.workerPath(previousGameID)}/api/create_game?previous=${previousGameID}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (!response.ok) {
+    const errorText = await response.text().catch(() => "");
+    console.error("createNextLobby: server error response:", errorText);
+    throw new Error(`create next lobby failed: HTTP ${response.status}`);
+  }
+  return (await response.json()) as GameInfo;
+}
+
 export function getApiBase() {
  const domainname = getAudience();

@@ -54,6 +54,7 @@ import { terrainMapFileLoader } from "./TerrainMapFileLoader";
 import { GoToPlayerEvent } from "./TransformHandler";
 import {
  MoveWarshipIntentEvent,
+  NewLobbyEvent,
  SendAllianceExtensionIntentEvent,
  SendAllianceRequestIntentEvent,
  SendAttackIntentEvent,
@@ -930,6 +931,12 @@ export class ClientGameRunner {
          "error_modal.connection_error",
        );
      }
+      if (message.type === "new_lobby") {
+        // The host reused this private lobby: surface the successor id so the
+        // group can hop over. NewLobbyPrompt navigates the host and prompts
+        // everyone else.
+        this.eventBus.emit(new NewLobbyEvent(message.gameID));
+      }
      if (message.type === "turn") {
        if (
          !this.gameView.inSpawnPhase() &&
@@ -645,7 +645,7 @@ export class HostLobbyModal extends BaseModal {
    `;
  }

-  protected onOpen(): void {
+  protected onOpen(args?: Record<string, unknown>): void {
    // Re-armed here (not in onClose's reset) so that once
    // closeWithoutLeaving() disarms it, no close cascade — e.g. another
    // modal's close() navigating via showPage, which force-closes this one —
@@ -659,6 +659,22 @@ export class HostLobbyModal extends BaseModal {
        ClientEnv.env() === GameEnv.Dev ||
        (userMe !== false && hasActiveSubscription(userMe));
    });
+
+    // Attach mode: the server already minted this successor lobby with us as
+    // creator (win-screen "New lobby" flow), so bind to the existing id instead
+    // of creating another game.
+    const existingLobbyId =
+      typeof args?.existingLobbyId === "string" ? args.existingLobbyId : null;
+    if (existingLobbyId !== null) {
+      this.attachToExistingLobby(existingLobbyId).catch(() => {
+        // Clear clipboard so the host doesn't accidentally share a dead link,
+        // matching the createLobby() failure path below.
+        void navigator.clipboard.writeText("").catch(() => {});
+      });
+      this.loadNationCount();
+      return;
+    }
+
    // The server mints the game id, so we don't know it until createLobby
    // resolves. clientID is assigned by the server when we join the lobby.

@@ -700,6 +716,32 @@ export class HostLobbyModal extends BaseModal {
    this.loadNationCount();
  }

+  // Bind the host view to a lobby the server already created (the successor of a
+  // finished game). Mirrors the createLobby() success path, minus the creation.
+  private async attachToExistingLobby(lobbyId: string): Promise<void> {
+    if (!isValidGameID(lobbyId)) {
+      throw new Error(`Invalid lobby ID format: ${lobbyId}`);
+    }
+    this.lobbyId = lobbyId;
+    crazyGamesSDK.showInviteButton(this.lobbyId);
+
+    const url = await this.constructUrl();
+    this.updateLobbyHistory(url);
+    await this.updateComplete;
+    void (this.querySelector("copy-button") as CopyButton)?.handleCopy();
+
+    this.dispatchEvent(
+      new CustomEvent("join-lobby", {
+        detail: {
+          gameID: this.lobbyId,
+          source: "host",
+        } as JoinLobbyEvent,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
  private leaveLobby() {
    if (!this.lobbyId) {
      return;
@@ -31,9 +31,21 @@ function showDialog(props: Partial<ConfirmDialog>): Promise<boolean> {
  });
 }

-/** In-game replacement for `confirm()`. Resolves true when confirmed. */
-export function showInGameConfirm(message: string): Promise<boolean> {
-  return showDialog({ message, variant: "danger", buttons: "confirmCancel" });
+/**
+ * In-game replacement for `confirm()`. Resolves true when confirmed.
+ * `options` overrides the dialog's presentation (variant, texts, heading)
+ * for confirmations that aren't destructive-red by nature.
+ */
+export function showInGameConfirm(
+  message: string,
+  options?: Partial<ConfirmDialog>,
+): Promise<boolean> {
+  return showDialog({
+    message,
+    variant: "danger",
+    buttons: "confirmCancel",
+    ...options,
+  });
 }

 /** In-game replacement for `alert()`. Resolves once dismissed. */
@@ -820,6 +820,21 @@ class Client {
    const lobbyId =
      pathMatch && GAME_ID_REGEX.test(pathMatch[1]) ? pathMatch[1] : null;
    if (lobbyId) {
+      // ?host means the lobby creator is returning to a successor lobby they
+      // reused from the win screen: reopen the host view bound to the existing
+      // lobby instead of the join flow. Non-creators who hit this URL still get
+      // treated as normal joiners by the server.
+      const returningAsHost = new URLSearchParams(window.location.search).has(
+        "host",
+      );
+      if (returningAsHost) {
+        // open() reveals the inline page itself (it calls showPage internally).
+        // Calling showPage first would open the modal once with no args and
+        // spuriously create a lobby before this attach call runs.
+        this.hostModal.open({ existingLobbyId: lobbyId });
+        console.log(`reopening host lobby ${lobbyId}`);
+        return;
+      }
      window.showPage?.("page-join-lobby");
      this.joinModal.open({ lobbyId });
      console.log(`joining lobby ${lobbyId}`);
@@ -166,6 +166,12 @@ export class SendHashEvent implements GameEvent {
  ) {}
 }

+// Emitted when the server tells us the host started a successor lobby, carrying
+// the new game id to move the group to.
+export class NewLobbyEvent implements GameEvent {
+  constructor(public readonly gameID: string) {}
+}
+
 export class MoveWarshipIntentEvent implements GameEvent {
  constructor(
    public readonly unitIds: number[],
@@ -33,6 +33,7 @@ import { InGamePromo } from "./layers/InGamePromo";
 import { Leaderboard } from "./layers/Leaderboard";
 import { MainRadialMenu } from "./layers/MainRadialMenu";
 import { MultiTabModal } from "./layers/MultiTabModal";
+import { NewLobbyPrompt } from "./layers/NewLobbyPrompt";
 import { PerformanceOverlay } from "./layers/PerformanceOverlay";
 import { PlayerInfoOverlay } from "./layers/PlayerInfoOverlay";
 import { PlayerPanel } from "./layers/PlayerPanel";
@@ -169,6 +170,15 @@ export function createRenderer(
  winModal.eventBus = eventBus;
  winModal.game = game;

+  const newLobbyPrompt = document.querySelector(
+    "new-lobby-prompt",
+  ) as NewLobbyPrompt;
+  if (!(newLobbyPrompt instanceof NewLobbyPrompt)) {
+    console.error("new lobby prompt not found");
+  }
+  newLobbyPrompt.eventBus = eventBus;
+  newLobbyPrompt.game = game;
+
  const replayPanel = document.querySelector("replay-panel") as ReplayPanel;
  if (!(replayPanel instanceof ReplayPanel)) {
    console.error("replay panel not found");
@@ -322,6 +332,7 @@ export function createRenderer(
    controlPanel,
    playerInfo,
    winModal,
+    newLobbyPrompt,
    replayPanel,
    settingsModal,
    graphicsSettingsModal,
@@ -3,10 +3,12 @@ import { customElement, state } from "lit/decorators.js";
 import { assetUrl } from "../../../core/AssetUrls";
 import { EventBus } from "../../../core/EventBus";
 import { GameType } from "../../../core/game/Game";
+import { createNextLobby } from "../../Api";
+import { ClientEnv } from "../../ClientEnv";
 import "../../components/DoomsdayClockPanel";
 import { Controller } from "../../Controller";
 import { crazyGamesSDK } from "../../CrazyGamesSDK";
-import { showInGameConfirm } from "../../InGameModal";
+import { showInGameAlert, showInGameConfirm } from "../../InGameModal";
 import { TogglePauseIntentEvent } from "../../InputHandler";
 import { PauseGameIntentEvent, SendWinnerEvent } from "../../Transport";
 import { translateText } from "../../Utils";
@@ -19,6 +21,7 @@ const exitIcon = assetUrl("images/ExitIconWhite.svg");
 const FastForwardIconSolid = assetUrl("images/FastForwardIconSolidWhite.svg");
 const pauseIcon = assetUrl("images/PauseIconWhite.svg");
 const playIcon = assetUrl("images/PlayIconWhite.svg");
+const newLobbyIcon = assetUrl("images/ReplayRegularIconWhite.svg");
 const settingsIcon = assetUrl("images/SettingIconWhite.svg");
 const fullscreenIcon = assetUrl("images/FullscreenIconWhite.svg");
 const exitFullscreenIcon = assetUrl("images/ExitFullscreenIconWhite.svg");
@@ -50,6 +53,10 @@ export class GameRightSidebar extends LitElement implements Controller {
  private readonly onCrazyGames = crazyGamesSDK.isOnCrazyGames();
  private hasWinner = false;
  private isLobbyCreator = false;
+  private isPrivateLobby = false;
+  // Guards the in-game "New lobby" button so a double click doesn't fire twice
+  // before we navigate to the successor lobby.
+  private newLobbyRequested = false;
  private spawnBarVisible = false;
  private immunityBarVisible = false;

@@ -67,6 +74,8 @@ export class GameRightSidebar extends LitElement implements Controller {
    this._isSinglePlayer =
      this.game?.config()?.gameConfig()?.gameType === GameType.Singleplayer ||
      this.game.config().isReplay();
+    this.isPrivateLobby =
+      this.game?.config()?.gameConfig()?.gameType === GameType.Private;
    this._isVisible = true;

    this.eventBus.on(SpawnBarVisibleEvent, (e) => {
@@ -194,6 +203,34 @@ export class GameRightSidebar extends LitElement implements Controller {
    this.eventBus.emit(new PauseGameIntentEvent(this.isPaused));
  }

+  private async onNewLobbyButtonClick() {
+    if (this.newLobbyRequested) return;
+    // Confirm so a stray click next to pause/exit doesn't yank everyone into a
+    // new lobby mid-game.
+    const isConfirmed = await showInGameConfirm(
+      translateText("new_lobby_prompt.confirm"),
+      { variant: "warning" },
+    );
+    if (!isConfirmed) return;
+    if (this.newLobbyRequested) return; // clicked again while confirming
+    this.newLobbyRequested = true;
+    this.requestUpdate();
+    try {
+      // The worker mints the successor lobby and has the current game
+      // broadcast its id, so everyone else gets the NewLobbyPrompt. We (the
+      // host) navigate straight to the new host view from the response.
+      const lobby = await createNextLobby(this.game.gameID());
+      const id = lobby.gameID;
+      // ?host routes the creator back into the host view on load.
+      window.location.href = `${window.location.origin}/${ClientEnv.workerPath(id)}/game/${id}?host`;
+    } catch (error) {
+      console.error("Failed to create successor lobby", error);
+      this.newLobbyRequested = false;
+      this.requestUpdate();
+      void showInGameAlert(translateText("new_lobby_prompt.failed"));
+    }
+  }
+
  private async onExitButtonClick() {
    const isAlive = this.game.myPlayer()?.isAlive();
    if (isAlive) {
@@ -285,6 +322,9 @@ export class GameRightSidebar extends LitElement implements Controller {
    const isReplayOrSingleplayer =
      this._isSinglePlayer || this.game?.config()?.isReplay();
    const showPauseButton = isReplayOrSingleplayer || this.isLobbyCreator;
+    // The host of a private lobby can start a fresh lobby at any time, without
+    // waiting to die or for the game to end.
+    const showNewLobbyButton = this.isLobbyCreator && this.isPrivateLobby;

    return html`
      ${isReplayOrSingleplayer
@@ -311,6 +351,24 @@ export class GameRightSidebar extends LitElement implements Controller {
            </div>
          `
        : ""}
+      ${showNewLobbyButton
+        ? html`
+            <div
+              class="cursor-pointer ${this.newLobbyRequested
+                ? "opacity-50 pointer-events-none"
+                : ""}"
+              @click=${this.onNewLobbyButtonClick}
+              title=${translateText("win_modal.new_lobby")}
+            >
+              <img
+                src=${newLobbyIcon}
+                alt=${translateText("win_modal.new_lobby")}
+                width="20"
+                height="20"
+              />
+            </div>
+          `
+        : ""}
    `;
  }
 }
@@ -0,0 +1,105 @@
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { translateText } from "../../../client/Utils";
+import { EventBus } from "../../../core/EventBus";
+import { ClientEnv } from "../../ClientEnv";
+import { Controller } from "../../Controller";
+import { crazyGamesSDK } from "../../CrazyGamesSDK";
+import { NewLobbyEvent } from "../../Transport";
+import { GameView } from "../../view";
+
+// Shown to non-host players when the host reuses the private lobby for another
+// game. It reacts to NewLobbyEvent (fired when the server broadcasts the
+// successor's id) so it works even after the win modal has been dismissed and
+// the player is spectating. The host is sent straight to the host view instead.
+@customElement("new-lobby-prompt")
+export class NewLobbyPrompt extends LitElement implements Controller {
+  public game: GameView;
+  public eventBus: EventBus;
+
+  @state()
+  private isVisible = false;
+
+  private gameID: string | null = null;
+
+  // Override to prevent shadow DOM creation (so Tailwind classes apply).
+  createRenderRoot() {
+    return this;
+  }
+
+  init() {
+    this.eventBus.on(NewLobbyEvent, (e) => this.onNewLobby(e));
+  }
+
+  private onNewLobby(event: NewLobbyEvent) {
+    this.gameID = event.gameID;
+    // The host asked for this lobby, so send them back to the host view. The
+    // ?host flag routes them there instead of the join flow on reload.
+    if (this.game?.myPlayer()?.isLobbyCreator()) {
+      window.location.href = this.lobbyUrl(true);
+      return;
+    }
+    this.isVisible = true;
+    this.requestUpdate();
+  }
+
+  private lobbyUrl(asHost: boolean): string {
+    const id = this.gameID ?? "";
+    const url = `${window.location.origin}/${ClientEnv.workerPath(id)}/game/${id}`;
+    return asHost ? `${url}?host` : url;
+  }
+
+  private _handleJoin() {
+    if (this.gameID === null) {
+      return;
+    }
+    // On CrazyGames the page URL still carries the invite param of the OLD
+    // game, and it wins over the path on reload — navigating the iframe to our
+    // own game URL would route the player straight back into the finished
+    // lobby. Send the top page to a fresh CrazyGames invite link instead: it
+    // updates that param and keeps the player on crazygames.com. (The host is
+    // unaffected: games they created are ignored by the invite-param check.)
+    if (crazyGamesSDK.isOnCrazyGames()) {
+      const link = crazyGamesSDK.createInviteLink(this.gameID);
+      if (link !== null) {
+        try {
+          window.top!.location.href = link;
+          return;
+        } catch (error) {
+          console.error("CrazyGames: top navigation failed", error);
+        }
+      }
+    }
+    window.location.href = this.lobbyUrl(false);
+  }
+
+  private _handleDismiss() {
+    this.isVisible = false;
+    this.requestUpdate();
+  }
+
+  render() {
+    if (!this.isVisible) {
+      return html``;
+    }
+    return html`
+      <div
+        class="fixed top-4 left-1/2 -translate-x-1/2 z-[10010] flex items-center gap-3 bg-gray-800/90 text-white px-4 py-3 rounded-lg shadow-2xl backdrop-blur-xs max-w-[90%]"
+      >
+        <span>${translateText("new_lobby_prompt.message")}</span>
+        <o-button
+          variant="primary"
+          translationKey="new_lobby_prompt.join"
+          @click=${this._handleJoin}
+        ></o-button>
+        <button
+          class="text-white/70 hover:text-white text-xl leading-none px-1"
+          aria-label=${translateText("new_lobby_prompt.dismiss")}
+          @click=${this._handleDismiss}
+        >
+          ✕
+        </button>
+      </div>
+    `;
+  }
+}