mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-24 04:43:47 +00:00
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>
This commit is contained in:
MushroomLamp
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
a794eca4d6
commit
d76691372c
@@ -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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user