mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-04 21:06:09 +00:00
Zixer1
78ef7b56fd
Resolves Issue #4463 ## Description: An optional game mode that (almost) guarantees a finish instead of letting late-game stalemates drag on. Originally called sudden death, renamed to Doomsday clock Once enabled, every side (each player in FFA, each whole team in team modes) must hold a rising share of the map. A side below the bar is skulled; after a short warn its troops bleed to zero, forcing consolidation to a winner. ### How it works - **Rising zone:** a grace period, then the required share ramps up linearly to each level with 30s pauses between (a battle-royale "zone"). Levels track the ofstats FFA territory median (3/5/10/20/30%). - **Four speed presets** (slow / normal / fast / very fast) change only the pace: normal ends ~30 min, very fast ~15. - **Troop decay:** a linear ramp as a % of max capacity, ~50s from caught to zero (10s warn + ~50s ≈ 1 min total). - **UI:** a HUD panel (live share vs target, wave/decay countdowns, red/orange cues) and an on-map skull above flagged players (blinks in danger, steady while draining). ### Notes for review - Off by default; no effect on existing games. However, as discussed we can add it to the modifier pool for public games to see how popular the gamemode is vs normal play. - Sim is deterministic (integer-only, in `src/core`), covered by unit + integration tests. - One-line addition to `GameServer.updateGameConfig` so the setting survives the host → server → client round-trip. - Status is packed into the existing name-pass data slot (`pd4.w`: 0/1/2 = none/danger/draining); the skull is composited into the icon atlas at load. ### Testing `npm test`, `npm run lint`, `npx prettier --check .`, `npm run build-prod` all pass. ### UI: <img width="243" height="100" alt="Image" src="https://github.com/user-attachments/assets/c4c9eeb0-4feb-437d-9aac-b2786a841b74" /> Dropdown between slow, normal, fast, very fast Before zone: <img width="302" height="175" alt="Image" src="https://github.com/user-attachments/assets/7359a1ea-4951-446d-a23c-0711fe06cc5d" /> Zone started, player not affected the pannel also blinks orange for 10s: <img width="297" height="175" alt="Image" src="https://github.com/user-attachments/assets/fcc565a5-d5d0-47a7-97ea-d0ba9d9ad899" /> Player affected, grace period (Danger): <img width="314" height="170" alt="Image" src="https://github.com/user-attachments/assets/ff96d21e-96f3-4ef9-8190-48eecc7aac0f" /> Skull icon blinking over player (everyone sees it) - older screenshot, the clipping has been fixed <img width="462" height="145" alt="Image" src="https://github.com/user-attachments/assets/53899211-33b1-40e1-83f2-77f2096f0cad" /> Player affected, grace period ended (Draining): <img width="360" height="159" alt="Image" src="https://github.com/user-attachments/assets/4b226d57-da4d-4866-ab5f-db48e4ed1ea2" /> Skull icon no longer blinking, everyone can see you are in a state of decay, and troops are draining: <img width="732" height="146" alt="image" src="https://github.com/user-attachments/assets/cd10fedb-6e87-4dfc-9fbf-55d3945a7901" /> Skull is visible like alliances icon also on player tab <img width="558" height="81" alt="Image" src="https://github.com/user-attachments/assets/6acdbe91-bdd0-40c7-942b-3990d4dae87f" /> (just UI example, best way to see it is to hop on a solo game and play against AI) ## 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: zixer._
1230 lines
40 KiB
TypeScript
1230 lines
40 KiB
TypeScript
import { html } from "lit";
|
|
import { customElement, property, state } from "lit/decorators.js";
|
|
import { ClientEnv } from "src/client/ClientEnv";
|
|
import {
|
|
calculateServerTimeOffset,
|
|
getSecondsUntilServerTimestamp,
|
|
renderDuration,
|
|
translateText,
|
|
} from "../client/Utils";
|
|
import { EventBus } from "../core/EventBus";
|
|
import { DoomsdayClockSpeed } from "../core/game/DoomsdayClock";
|
|
import {
|
|
Difficulty,
|
|
GameMapSize,
|
|
GameMapType,
|
|
GameMode,
|
|
UnitType,
|
|
} from "../core/game/Game";
|
|
import { UserSettings } from "../core/game/UserSettings";
|
|
import {
|
|
ClientInfo,
|
|
GameConfig,
|
|
GameInfo,
|
|
LobbyInfoEvent,
|
|
TeamCountConfig,
|
|
isValidGameID,
|
|
} from "../core/Schemas";
|
|
import { getPlayToken } from "./Auth";
|
|
import "./components/baseComponents/Modal";
|
|
import { BaseModal } from "./components/BaseModal";
|
|
import { CopyButton } from "./components/CopyButton";
|
|
import "./components/GameConfigSettings";
|
|
import "./components/InputCard";
|
|
import "./components/LobbyPlayerView";
|
|
import "./components/ToggleInputCard";
|
|
import { modalHeader } from "./components/ui/ModalHeader";
|
|
import { crazyGamesSDK } from "./CrazyGamesSDK";
|
|
import { JoinLobbyEvent } from "./Main";
|
|
import { terrainMapFileLoader } from "./TerrainMapFileLoader";
|
|
import {
|
|
getBotsForCompactMap,
|
|
getNationsForCompactMap,
|
|
getRandomMapType,
|
|
getUpdatedDisabledUnits,
|
|
parseBoundedFloatFromInput,
|
|
parseBoundedIntegerFromInput,
|
|
preventDisallowedKeys,
|
|
sliderToNationsConfig,
|
|
toOptionalNumber,
|
|
} from "./utilities/GameConfigHelpers";
|
|
|
|
@customElement("host-lobby-modal")
|
|
export class HostLobbyModal extends BaseModal {
|
|
@state() private selectedMap: GameMapType = GameMapType.World;
|
|
@state() private selectedDifficulty: Difficulty = Difficulty.Easy;
|
|
@state() private nations: number = 0;
|
|
@state() private defaultNationCount: number = 0;
|
|
@state() private gameMode: GameMode = GameMode.FFA;
|
|
@state() private teamCount: TeamCountConfig = 2;
|
|
|
|
constructor() {
|
|
super();
|
|
this.id = "page-host-lobby";
|
|
}
|
|
@state() private bots: number = 400;
|
|
@state() private spawnImmunity: boolean = false;
|
|
@state() private spawnImmunityDurationMinutes: number | undefined = undefined;
|
|
@state() private infiniteGold: boolean = false;
|
|
@state() private donateGold: boolean = false;
|
|
@state() private infiniteTroops: boolean = false;
|
|
@state() private donateTroops: boolean = false;
|
|
@state() private maxTimer: boolean = false;
|
|
@state() private maxTimerValue: number | undefined = undefined;
|
|
@state() private startDelayValue: number | undefined = 3;
|
|
@state() private instantBuild: boolean = false;
|
|
@state() private randomSpawn: boolean = false;
|
|
@state() private compactMap: boolean = false;
|
|
@state() private goldMultiplier: boolean = false;
|
|
@state() private goldMultiplierValue: number | undefined = undefined;
|
|
@state() private startingGold: boolean = false;
|
|
@state() private startingGoldValue: number | undefined = undefined;
|
|
@state() private disableAlliances: boolean = false;
|
|
@state() private doomsdayClock: boolean = false;
|
|
@state() private doomsdayClockSpeed: DoomsdayClockSpeed = "normal";
|
|
@state() private anonymizeNames: boolean = false;
|
|
@state() private nameReveals: string[] = [];
|
|
@state() private whitelistEnabled: boolean = false;
|
|
@state() private allowedPublicIds: string = "";
|
|
@state() private waterNukes: boolean = false;
|
|
@state() private lobbyId = "";
|
|
@state() private lobbyUrlSuffix = "";
|
|
@state() private clients: ClientInfo[] = [];
|
|
@state() private useRandomMap: boolean = false;
|
|
@state() private disabledUnits: UnitType[] = [];
|
|
@state() private hostCheatsEnabled: boolean = false;
|
|
@state() private hostCheatInfiniteGold: boolean = false;
|
|
@state() private hostCheatInfiniteTroops: boolean = false;
|
|
@state() private hostCheatGoldMultiplier: boolean = false;
|
|
@state() private hostCheatGoldMultiplierValue: number | undefined = undefined;
|
|
@state() private hostCheatStartingGold: boolean = false;
|
|
@state() private hostCheatStartingGoldValue: number | undefined = undefined;
|
|
@state() private lobbyCreatorClientID: string = "";
|
|
@state() private lobbyStartAt: number | null = null;
|
|
@state() private serverTimeOffset: number = 0;
|
|
|
|
@property({ attribute: false }) eventBus: EventBus | null = null;
|
|
// Timers for debouncing slider changes
|
|
private botsUpdateTimer: number | null = null;
|
|
private nationsUpdateTimer: number | null = null;
|
|
private mapLoader = terrainMapFileLoader;
|
|
private userSettings = new UserSettings();
|
|
|
|
private leaveLobbyOnClose = true;
|
|
|
|
private readonly handleLobbyInfo = (event: LobbyInfoEvent) => {
|
|
const lobby = event.lobby;
|
|
if (!this.lobbyId || lobby.gameID !== this.lobbyId) {
|
|
return;
|
|
}
|
|
if ("serverTime" in lobby && typeof lobby.serverTime === "number") {
|
|
this.serverTimeOffset = calculateServerTimeOffset(lobby.serverTime);
|
|
}
|
|
this.lobbyStartAt = lobby.startsAt ?? null;
|
|
this.lobbyCreatorClientID = lobby.lobbyCreatorClientID ?? "";
|
|
if (lobby.clients) {
|
|
this.clients = lobby.clients;
|
|
}
|
|
};
|
|
|
|
private getRandomString(): string {
|
|
const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
|
|
return Array.from(
|
|
{ length: 5 },
|
|
() => chars[Math.floor(Math.random() * chars.length)],
|
|
).join("");
|
|
}
|
|
|
|
private async buildLobbyUrl(): Promise<string> {
|
|
if (crazyGamesSDK.isOnCrazyGames()) {
|
|
const link = crazyGamesSDK.createInviteLink(this.lobbyId);
|
|
if (link !== null) {
|
|
return link;
|
|
}
|
|
}
|
|
return `${window.location.origin}/${ClientEnv.workerPath(this.lobbyId)}/game/${this.lobbyId}?lobby&s=${encodeURIComponent(this.lobbyUrlSuffix)}`;
|
|
}
|
|
|
|
private async constructUrl(): Promise<string> {
|
|
this.lobbyUrlSuffix = this.getRandomString();
|
|
return await this.buildLobbyUrl();
|
|
}
|
|
|
|
private updateHistory(url: string): void {
|
|
if (crazyGamesSDK.isOnCrazyGames()) {
|
|
return;
|
|
}
|
|
history.replaceState(null, "", url);
|
|
}
|
|
|
|
private updateLobbyHistory(lobbyUrl: string): void {
|
|
if (crazyGamesSDK.isOnCrazyGames()) {
|
|
return;
|
|
}
|
|
const lobbyIdHidden = !this.userSettings.lobbyIdVisibility();
|
|
history.replaceState(null, "", lobbyIdHidden ? "/streamer-mode" : lobbyUrl);
|
|
}
|
|
|
|
private startLobbyUpdates() {
|
|
this.stopLobbyUpdates();
|
|
if (!this.eventBus) {
|
|
console.warn(
|
|
"HostLobbyModal: eventBus not set, cannot subscribe to lobby updates",
|
|
);
|
|
return;
|
|
}
|
|
this.eventBus.on(LobbyInfoEvent, this.handleLobbyInfo);
|
|
}
|
|
|
|
private stopLobbyUpdates() {
|
|
this.eventBus?.off(LobbyInfoEvent, this.handleLobbyInfo);
|
|
}
|
|
|
|
protected renderHeaderSlot() {
|
|
return modalHeader({
|
|
title: translateText("host_modal.title"),
|
|
onBack: () => {
|
|
this.leaveLobbyOnClose = true;
|
|
this.close();
|
|
},
|
|
ariaLabel: translateText("common.back"),
|
|
rightContent: html`
|
|
<copy-button
|
|
.lobbyId=${this.lobbyId}
|
|
.lobbySuffix=${this.lobbyUrlSuffix}
|
|
include-lobby-query
|
|
></copy-button>
|
|
`,
|
|
});
|
|
}
|
|
|
|
protected renderBody() {
|
|
const secondsRemaining =
|
|
this.lobbyStartAt !== null
|
|
? getSecondsUntilServerTimestamp(
|
|
this.lobbyStartAt,
|
|
this.serverTimeOffset,
|
|
)
|
|
: null;
|
|
const statusLabel =
|
|
secondsRemaining === null
|
|
? this.clients.length === 1
|
|
? translateText("host_modal.waiting")
|
|
: translateText("host_modal.start")
|
|
: translateText("host_modal.starting_in", {
|
|
time: renderDuration(secondsRemaining),
|
|
});
|
|
|
|
const inputCards = [
|
|
html`<toggle-input-card
|
|
.labelKey=${"host_modal.max_timer"}
|
|
.checked=${this.maxTimer}
|
|
.inputMin=${1}
|
|
.inputMax=${120}
|
|
.inputValue=${this.maxTimerValue}
|
|
.inputAriaLabel=${translateText("host_modal.max_timer")}
|
|
.inputPlaceholder=${translateText("host_modal.mins_placeholder")}
|
|
.defaultInputValue=${30}
|
|
.minValidOnEnable=${1}
|
|
.onToggle=${this.handleMaxTimerToggle}
|
|
.onInput=${this.handleMaxTimerValueChanges}
|
|
.onKeyDown=${this.handleMaxTimerValueKeyDown}
|
|
></toggle-input-card>`,
|
|
html`<input-card
|
|
.labelKey=${"host_modal.start_delay"}
|
|
.inputId=${"start-delay-value"}
|
|
.inputMin=${0}
|
|
.inputMax=${600}
|
|
.inputStep=${"1"}
|
|
.inputValue=${this.startDelayValue}
|
|
.inputAriaLabel=${translateText("host_modal.start_delay")}
|
|
.inputPlaceholder=${translateText("host_modal.start_delay_placeholder")}
|
|
.defaultInputValue=${3}
|
|
.onChange=${this.handleStartDelayValueChanges}
|
|
.onKeyDown=${this.handleStartDelayValueKeyDown}
|
|
></input-card>`,
|
|
html`<toggle-input-card
|
|
.labelKey=${"host_modal.player_immunity_duration"}
|
|
.checked=${this.spawnImmunity}
|
|
.inputMin=${0}
|
|
.inputMax=${120}
|
|
.inputStep=${1}
|
|
.inputValue=${this.spawnImmunityDurationMinutes}
|
|
.inputAriaLabel=${translateText("host_modal.player_immunity_duration")}
|
|
.inputPlaceholder=${translateText("host_modal.mins_placeholder")}
|
|
.defaultInputValue=${5}
|
|
.minValidOnEnable=${0}
|
|
.onToggle=${this.handleSpawnImmunityToggle}
|
|
.onInput=${this.handleSpawnImmunityDurationInput}
|
|
.onKeyDown=${this.handleSpawnImmunityDurationKeyDown}
|
|
></toggle-input-card>`,
|
|
html`<toggle-input-card
|
|
.labelKey=${"host_modal.gold_multiplier"}
|
|
.checked=${this.goldMultiplier}
|
|
.inputId=${"gold-multiplier-value"}
|
|
.inputMin=${0.1}
|
|
.inputMax=${1000}
|
|
.inputStep=${"any"}
|
|
.inputValue=${this.goldMultiplierValue}
|
|
.inputAriaLabel=${translateText("host_modal.gold_multiplier")}
|
|
.inputPlaceholder=${translateText(
|
|
"host_modal.gold_multiplier_placeholder",
|
|
)}
|
|
.defaultInputValue=${2}
|
|
.minValidOnEnable=${0.1}
|
|
.onToggle=${this.handleGoldMultiplierToggle}
|
|
.onChange=${this.handleGoldMultiplierValueChanges}
|
|
.onKeyDown=${this.handleGoldMultiplierValueKeyDown}
|
|
></toggle-input-card>`,
|
|
html`<toggle-input-card
|
|
.labelKey=${"host_modal.starting_gold"}
|
|
.checked=${this.startingGold}
|
|
.inputId=${"starting-gold-value"}
|
|
.inputMin=${0.1}
|
|
.inputMax=${1000}
|
|
.inputStep=${"any"}
|
|
.inputValue=${this.startingGoldValue}
|
|
.inputAriaLabel=${translateText("host_modal.starting_gold")}
|
|
.inputPlaceholder=${translateText(
|
|
"host_modal.starting_gold_placeholder",
|
|
)}
|
|
.defaultInputValue=${5}
|
|
.minValidOnEnable=${0.1}
|
|
.onToggle=${this.handleStartingGoldToggle}
|
|
.onChange=${this.handleStartingGoldValueChanges}
|
|
.onKeyDown=${this.handleStartingGoldValueKeyDown}
|
|
></toggle-input-card>`,
|
|
html`<toggle-input-card
|
|
.labelKey=${"host_modal.player_whitelist"}
|
|
.checked=${this.whitelistEnabled}
|
|
.inputType=${"text"}
|
|
.inputId=${"allowed-public-ids"}
|
|
.inputValue=${this.allowedPublicIds}
|
|
.inputAriaLabel=${translateText("host_modal.player_whitelist")}
|
|
.inputPlaceholder=${translateText(
|
|
"host_modal.player_whitelist_placeholder",
|
|
)}
|
|
.onToggle=${this.handleWhitelistToggle}
|
|
.onChange=${this.handleAllowedPublicIdsChange}
|
|
></toggle-input-card>`,
|
|
];
|
|
|
|
const hostCheatInputCards = [
|
|
html`<toggle-input-card
|
|
.labelKey=${"host_modal.gold_multiplier"}
|
|
.checked=${this.hostCheatGoldMultiplier}
|
|
.inputId=${"host-cheat-gold-multiplier-value"}
|
|
.inputMin=${0.1}
|
|
.inputMax=${1000}
|
|
.inputStep=${"any"}
|
|
.inputValue=${this.hostCheatGoldMultiplierValue}
|
|
.inputAriaLabel=${translateText("host_modal.gold_multiplier")}
|
|
.inputPlaceholder=${translateText(
|
|
"host_modal.gold_multiplier_placeholder",
|
|
)}
|
|
.defaultInputValue=${2}
|
|
.minValidOnEnable=${0.1}
|
|
.onToggle=${this.handleHostCheatGoldMultiplierToggle}
|
|
.onChange=${this.handleHostCheatGoldMultiplierValueChanges}
|
|
.onKeyDown=${this.handleHostCheatGoldMultiplierValueKeyDown}
|
|
></toggle-input-card>`,
|
|
html`<toggle-input-card
|
|
.labelKey=${"host_modal.starting_gold"}
|
|
.checked=${this.hostCheatStartingGold}
|
|
.inputId=${"host-cheat-starting-gold-value"}
|
|
.inputMin=${0.1}
|
|
.inputMax=${1000}
|
|
.inputStep=${"any"}
|
|
.inputValue=${this.hostCheatStartingGoldValue}
|
|
.inputAriaLabel=${translateText("host_modal.starting_gold")}
|
|
.inputPlaceholder=${translateText(
|
|
"host_modal.starting_gold_placeholder",
|
|
)}
|
|
.defaultInputValue=${5}
|
|
.minValidOnEnable=${0.1}
|
|
.onToggle=${this.handleHostCheatStartingGoldToggle}
|
|
.onChange=${this.handleHostCheatStartingGoldValueChanges}
|
|
.onKeyDown=${this.handleHostCheatStartingGoldValueKeyDown}
|
|
></toggle-input-card>`,
|
|
];
|
|
|
|
return html`
|
|
<div class="flex flex-col h-full">
|
|
<div
|
|
class="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-6 mr-1 mx-auto w-full max-w-5xl"
|
|
>
|
|
<game-config-settings
|
|
class="block"
|
|
.sectionGapClass=${"space-y-10"}
|
|
.settings=${{
|
|
map: {
|
|
selected: this.selectedMap,
|
|
useRandom: this.useRandomMap,
|
|
randomMapDivider: true,
|
|
},
|
|
difficulty: {
|
|
selected: this.selectedDifficulty,
|
|
disabled: this.nations === 0,
|
|
},
|
|
gameMode: {
|
|
selected: this.gameMode,
|
|
},
|
|
teamCount: {
|
|
selected: this.teamCount,
|
|
},
|
|
options: {
|
|
titleKey: "host_modal.options_title",
|
|
bots: {
|
|
value: this.bots,
|
|
labelKey: "host_modal.bots",
|
|
disabledKey: "host_modal.bots_disabled",
|
|
},
|
|
nations: {
|
|
value: this.nations,
|
|
defaultValue: this.defaultNationCount,
|
|
labelKey: "host_modal.nations",
|
|
disabledKey: "host_modal.nations_disabled",
|
|
},
|
|
toggles: [
|
|
{
|
|
labelKey: "host_modal.instant_build",
|
|
checked: this.instantBuild,
|
|
},
|
|
{
|
|
labelKey: "host_modal.random_spawn",
|
|
checked: this.randomSpawn,
|
|
},
|
|
{
|
|
labelKey: "host_modal.donate_gold",
|
|
checked: this.donateGold,
|
|
},
|
|
{
|
|
labelKey: "host_modal.donate_troops",
|
|
checked: this.donateTroops,
|
|
},
|
|
{
|
|
labelKey: "host_modal.infinite_gold",
|
|
checked: this.infiniteGold,
|
|
},
|
|
{
|
|
labelKey: "host_modal.infinite_troops",
|
|
checked: this.infiniteTroops,
|
|
},
|
|
{
|
|
labelKey: "host_modal.compact_map",
|
|
checked: this.compactMap,
|
|
},
|
|
{
|
|
labelKey: "host_modal.disable_alliances",
|
|
checked: this.disableAlliances,
|
|
},
|
|
{
|
|
labelKey: "host_modal.anonymous_players",
|
|
checked: this.anonymizeNames,
|
|
},
|
|
{
|
|
labelKey: "host_modal.water_nukes",
|
|
checked: this.waterNukes,
|
|
},
|
|
{
|
|
labelKey: "host_modal.doomsday_clock",
|
|
checked: this.doomsdayClock,
|
|
doomsdayClockSpeed: this.doomsdayClockSpeed,
|
|
},
|
|
{
|
|
labelKey: "host_modal.host_cheats",
|
|
checked: this.hostCheatsEnabled,
|
|
},
|
|
],
|
|
inputCards,
|
|
},
|
|
hostCheats: {
|
|
titleKey: "host_modal.host_cheats",
|
|
visible: this.hostCheatsEnabled,
|
|
toggles: [
|
|
{
|
|
labelKey: "host_modal.infinite_gold",
|
|
checked: this.hostCheatInfiniteGold,
|
|
},
|
|
{
|
|
labelKey: "host_modal.infinite_troops",
|
|
checked: this.hostCheatInfiniteTroops,
|
|
},
|
|
],
|
|
inputCards: hostCheatInputCards,
|
|
},
|
|
unitTypes: {
|
|
titleKey: "host_modal.enables_title",
|
|
disabledUnits: this.disabledUnits,
|
|
},
|
|
}}
|
|
@map-selected=${this.handleConfigMapSelected}
|
|
@random-map-selected=${this.handleConfigRandomMapSelected}
|
|
@difficulty-selected=${this.handleConfigDifficultySelected}
|
|
@doomsday-clock-speed-selected=${this
|
|
.handleConfigDoomsdayClockSpeedSelected}
|
|
@game-mode-selected=${this.handleConfigGameModeSelected}
|
|
@team-count-selected=${this.handleConfigTeamCountSelected}
|
|
@bots-changed=${this.handleBotsChange}
|
|
@nations-changed=${this.handleNationsChange}
|
|
@option-toggle-changed=${this.handleConfigOptionToggleChanged}
|
|
@host-cheat-toggle-changed=${this
|
|
.handleConfigHostCheatToggleChanged}
|
|
@unit-toggle-changed=${this.handleConfigUnitToggleChanged}
|
|
></game-config-settings>
|
|
|
|
<lobby-player-view
|
|
class="mt-10"
|
|
.gameMode=${this.gameMode}
|
|
.clients=${this.clients}
|
|
.lobbyCreatorClientID=${this.lobbyCreatorClientID}
|
|
.currentClientID=${this.lobbyCreatorClientID}
|
|
.teamCount=${this.teamCount}
|
|
.nationCount=${this.nations}
|
|
.onKickPlayer=${(clientID: string) => this.kickPlayer(clientID)}
|
|
.onToggleNameReveal=${(clientID: string) =>
|
|
this.toggleNameReveal(clientID)}
|
|
.nameReveals=${this.nameReveals}
|
|
.anonymizeNames=${this.anonymizeNames}
|
|
></lobby-player-view>
|
|
</div>
|
|
|
|
<!-- Player List / footer -->
|
|
<div class="p-6 pt-4 border-t border-white/10 bg-black/20 shrink-0">
|
|
<o-button
|
|
variant=${secondsRemaining !== null ? "warning" : "primary"}
|
|
width="block"
|
|
size="lg"
|
|
.title=${statusLabel}
|
|
?disable=${this.lobbyStartAt === null && this.clients.length < 2}
|
|
@click=${this.toggleGameStartTimer}
|
|
></o-button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
protected onOpen(): void {
|
|
this.startLobbyUpdates();
|
|
// 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.
|
|
|
|
// Pass auth token for creator identification (server extracts persistentID from it)
|
|
createLobby()
|
|
.then(async (lobby) => {
|
|
this.lobbyId = lobby.gameID;
|
|
if (!isValidGameID(this.lobbyId)) {
|
|
throw new Error(`Invalid lobby ID format: ${this.lobbyId}`);
|
|
}
|
|
crazyGamesSDK.showInviteButton(this.lobbyId);
|
|
|
|
// Now that we have the id, build and copy the share link. If lobby
|
|
// creation fails, the catch below clears the clipboard.
|
|
const url = await this.constructUrl();
|
|
this.updateLobbyHistory(url);
|
|
await this.updateComplete;
|
|
void (this.querySelector("copy-button") as CopyButton)?.handleCopy();
|
|
})
|
|
.then(() => {
|
|
this.dispatchEvent(
|
|
new CustomEvent("join-lobby", {
|
|
detail: {
|
|
gameID: this.lobbyId,
|
|
source: "host",
|
|
} as JoinLobbyEvent,
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
})
|
|
.catch(() => {
|
|
// Clear clipboard so the host doesn't accidentally share a dead link
|
|
void navigator.clipboard.writeText("").catch(() => {});
|
|
});
|
|
// BaseModal.firstUpdated() owns modalEl.onClose so the o-modal close path
|
|
// (backdrop / close button) runs confirmBeforeClose(). Don't override it
|
|
// here — doing so would bypass the leave-lobby confirmation.
|
|
this.loadNationCount();
|
|
}
|
|
|
|
private leaveLobby() {
|
|
if (!this.lobbyId) {
|
|
return;
|
|
}
|
|
this.dispatchEvent(
|
|
new CustomEvent("leave-lobby", {
|
|
detail: { lobby: this.lobbyId },
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
}
|
|
|
|
public confirmBeforeClose(): boolean | Promise<boolean> {
|
|
return this.confirmClose(translateText("host_modal.leave_confirmation"));
|
|
}
|
|
|
|
protected onClose(): void {
|
|
console.log("Closing host lobby modal");
|
|
this.stopLobbyUpdates();
|
|
if (this.leaveLobbyOnClose) {
|
|
this.leaveLobby();
|
|
this.updateHistory("/"); // Reset URL to base
|
|
}
|
|
crazyGamesSDK.hideInviteButton();
|
|
|
|
// Clean up timers and resources
|
|
if (this.botsUpdateTimer !== null) {
|
|
clearTimeout(this.botsUpdateTimer);
|
|
this.botsUpdateTimer = null;
|
|
}
|
|
if (this.nationsUpdateTimer !== null) {
|
|
clearTimeout(this.nationsUpdateTimer);
|
|
this.nationsUpdateTimer = null;
|
|
}
|
|
|
|
// Reset all transient form state to ensure clean slate
|
|
this.selectedMap = GameMapType.World;
|
|
this.selectedDifficulty = Difficulty.Easy;
|
|
this.nations = 0;
|
|
this.defaultNationCount = 0;
|
|
this.gameMode = GameMode.FFA;
|
|
this.teamCount = 2;
|
|
this.bots = 400;
|
|
this.spawnImmunity = false;
|
|
this.spawnImmunityDurationMinutes = undefined;
|
|
this.infiniteGold = false;
|
|
this.donateGold = false;
|
|
this.infiniteTroops = false;
|
|
this.donateTroops = false;
|
|
this.maxTimer = false;
|
|
this.maxTimerValue = undefined;
|
|
this.startDelayValue = 3;
|
|
this.instantBuild = false;
|
|
this.randomSpawn = false;
|
|
this.compactMap = false;
|
|
this.useRandomMap = false;
|
|
this.disabledUnits = [];
|
|
this.lobbyId = "";
|
|
this.clients = [];
|
|
this.lobbyCreatorClientID = "";
|
|
this.goldMultiplier = false;
|
|
this.goldMultiplierValue = undefined;
|
|
this.startingGold = false;
|
|
this.startingGoldValue = undefined;
|
|
this.disableAlliances = false;
|
|
this.doomsdayClock = false;
|
|
this.doomsdayClockSpeed = "normal";
|
|
this.anonymizeNames = false;
|
|
this.nameReveals = [];
|
|
this.whitelistEnabled = false;
|
|
this.allowedPublicIds = "";
|
|
this.waterNukes = false;
|
|
this.hostCheatsEnabled = false;
|
|
this.hostCheatInfiniteGold = false;
|
|
this.hostCheatInfiniteTroops = false;
|
|
this.hostCheatGoldMultiplier = false;
|
|
this.hostCheatGoldMultiplierValue = undefined;
|
|
this.hostCheatStartingGold = false;
|
|
this.hostCheatStartingGoldValue = undefined;
|
|
|
|
this.leaveLobbyOnClose = true;
|
|
}
|
|
|
|
private async handleSelectRandomMap() {
|
|
this.useRandomMap = true;
|
|
this.selectedMap = getRandomMapType();
|
|
await this.loadNationCount();
|
|
this.putGameConfig();
|
|
}
|
|
|
|
private handleConfigRandomMapSelected = () => {
|
|
void this.handleSelectRandomMap();
|
|
};
|
|
|
|
private async handleMapSelection(value: GameMapType) {
|
|
this.selectedMap = value;
|
|
this.useRandomMap = false;
|
|
await this.loadNationCount();
|
|
this.putGameConfig();
|
|
}
|
|
|
|
private handleConfigMapSelected = (e: Event) => {
|
|
const customEvent = e as CustomEvent<{ map: GameMapType }>;
|
|
void this.handleMapSelection(customEvent.detail.map);
|
|
};
|
|
|
|
private async handleDifficultySelection(value: Difficulty) {
|
|
this.selectedDifficulty = value;
|
|
this.putGameConfig();
|
|
}
|
|
|
|
private handleConfigDifficultySelected = (e: Event) => {
|
|
const customEvent = e as CustomEvent<{ difficulty: Difficulty }>;
|
|
void this.handleDifficultySelection(customEvent.detail.difficulty);
|
|
};
|
|
|
|
private handleConfigDoomsdayClockSpeedSelected = (e: Event) => {
|
|
const customEvent = e as CustomEvent<{ speed: DoomsdayClockSpeed }>;
|
|
this.doomsdayClockSpeed = customEvent.detail.speed;
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleConfigGameModeSelected = (e: Event) => {
|
|
const customEvent = e as CustomEvent<{ mode: GameMode }>;
|
|
void this.handleGameModeSelection(customEvent.detail.mode);
|
|
};
|
|
|
|
private handleConfigTeamCountSelected = (e: Event) => {
|
|
const customEvent = e as CustomEvent<{ count: TeamCountConfig }>;
|
|
void this.handleTeamCountSelection(customEvent.detail.count);
|
|
};
|
|
|
|
private handleConfigOptionToggleChanged = (e: Event) => {
|
|
const customEvent = e as CustomEvent<{
|
|
labelKey: string;
|
|
checked: boolean;
|
|
}>;
|
|
const { labelKey, checked } = customEvent.detail;
|
|
|
|
switch (labelKey) {
|
|
case "host_modal.instant_build":
|
|
this.handleInstantBuildChange(checked);
|
|
break;
|
|
case "host_modal.random_spawn":
|
|
this.handleRandomSpawnChange(checked);
|
|
break;
|
|
case "host_modal.donate_gold":
|
|
this.handleDonateGoldChange(checked);
|
|
break;
|
|
case "host_modal.donate_troops":
|
|
this.handleDonateTroopsChange(checked);
|
|
break;
|
|
case "host_modal.infinite_gold":
|
|
this.handleInfiniteGoldChange(checked);
|
|
break;
|
|
case "host_modal.infinite_troops":
|
|
this.handleInfiniteTroopsChange(checked);
|
|
break;
|
|
case "host_modal.compact_map":
|
|
this.handleCompactMapChange(checked);
|
|
break;
|
|
case "host_modal.disable_alliances":
|
|
this.disableAlliances = checked;
|
|
this.putGameConfig();
|
|
break;
|
|
case "host_modal.anonymous_players":
|
|
this.anonymizeNames = checked;
|
|
this.putGameConfig();
|
|
break;
|
|
case "host_modal.water_nukes":
|
|
this.waterNukes = checked;
|
|
this.putGameConfig();
|
|
break;
|
|
case "host_modal.doomsday_clock":
|
|
this.doomsdayClock = checked;
|
|
this.putGameConfig();
|
|
break;
|
|
case "host_modal.host_cheats":
|
|
this.hostCheatsEnabled = checked;
|
|
this.putGameConfig();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
private handleConfigHostCheatToggleChanged = (e: Event) => {
|
|
const customEvent = e as CustomEvent<{
|
|
labelKey: string;
|
|
checked: boolean;
|
|
}>;
|
|
const { labelKey, checked } = customEvent.detail;
|
|
|
|
switch (labelKey) {
|
|
case "host_modal.infinite_gold":
|
|
this.hostCheatInfiniteGold = checked;
|
|
this.putGameConfig();
|
|
break;
|
|
case "host_modal.infinite_troops":
|
|
this.hostCheatInfiniteTroops = checked;
|
|
this.putGameConfig();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
private handleConfigUnitToggleChanged = (e: Event) => {
|
|
const customEvent = e as CustomEvent<{ unit: UnitType; checked: boolean }>;
|
|
const { unit, checked } = customEvent.detail;
|
|
this.disabledUnits = getUpdatedDisabledUnits(
|
|
this.disabledUnits,
|
|
unit,
|
|
checked,
|
|
);
|
|
this.putGameConfig();
|
|
};
|
|
|
|
// Modified to include debouncing
|
|
private handleBotsChange = (e: Event) => {
|
|
const customEvent = e as CustomEvent<{ value: number }>;
|
|
const value = customEvent.detail.value;
|
|
if (isNaN(value) || value < 0 || value > 400) {
|
|
return;
|
|
}
|
|
|
|
// Update the display value immediately
|
|
this.bots = value;
|
|
|
|
// Clear any existing timer
|
|
if (this.botsUpdateTimer !== null) {
|
|
clearTimeout(this.botsUpdateTimer);
|
|
}
|
|
|
|
// Set a new timer to call putGameConfig after 300ms of inactivity
|
|
this.botsUpdateTimer = window.setTimeout(() => {
|
|
this.putGameConfig();
|
|
this.botsUpdateTimer = null;
|
|
}, 300);
|
|
};
|
|
|
|
private handleInstantBuildChange = (val: boolean) => {
|
|
this.instantBuild = val;
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleMaxTimerToggle = (
|
|
checked: boolean,
|
|
value: number | string | undefined,
|
|
) => {
|
|
this.maxTimer = checked;
|
|
this.maxTimerValue = toOptionalNumber(value);
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleSpawnImmunityToggle = (
|
|
checked: boolean,
|
|
value: number | string | undefined,
|
|
) => {
|
|
this.spawnImmunity = checked;
|
|
this.spawnImmunityDurationMinutes = toOptionalNumber(value);
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleGoldMultiplierToggle = (
|
|
checked: boolean,
|
|
value: number | string | undefined,
|
|
) => {
|
|
this.goldMultiplier = checked;
|
|
this.goldMultiplierValue = toOptionalNumber(value);
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleStartingGoldToggle = (
|
|
checked: boolean,
|
|
value: number | string | undefined,
|
|
) => {
|
|
this.startingGold = checked;
|
|
this.startingGoldValue = toOptionalNumber(value);
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleSpawnImmunityDurationKeyDown = (e: KeyboardEvent) => {
|
|
preventDisallowedKeys(e, ["-", "+", "e", "E"]);
|
|
};
|
|
|
|
private handleSpawnImmunityDurationInput = (e: Event) => {
|
|
const input = e.target as HTMLInputElement;
|
|
const value = parseBoundedIntegerFromInput(input, { min: 0, max: 120 });
|
|
if (value === undefined) {
|
|
return;
|
|
}
|
|
this.spawnImmunityDurationMinutes = value;
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleGoldMultiplierValueKeyDown = (e: KeyboardEvent) => {
|
|
preventDisallowedKeys(e, ["+", "-", "e", "E"]);
|
|
};
|
|
|
|
private handleGoldMultiplierValueChanges = (e: Event) => {
|
|
const input = e.target as HTMLInputElement;
|
|
const value = parseBoundedFloatFromInput(input, { min: 0.1, max: 1000 });
|
|
|
|
if (value === undefined) {
|
|
this.goldMultiplierValue = undefined;
|
|
input.value = "";
|
|
} else {
|
|
this.goldMultiplierValue = value;
|
|
}
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleStartingGoldValueKeyDown = (e: KeyboardEvent) => {
|
|
preventDisallowedKeys(e, ["-", "+", "e", "E"]);
|
|
};
|
|
|
|
private handleStartingGoldValueChanges = (e: Event) => {
|
|
const input = e.target as HTMLInputElement;
|
|
const value = parseBoundedFloatFromInput(input, {
|
|
min: 0.1,
|
|
max: 1000,
|
|
});
|
|
|
|
if (value === undefined) {
|
|
this.startingGoldValue = undefined;
|
|
input.value = "";
|
|
} else {
|
|
this.startingGoldValue = value;
|
|
}
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleHostCheatGoldMultiplierToggle = (
|
|
checked: boolean,
|
|
value: number | string | undefined,
|
|
) => {
|
|
this.hostCheatGoldMultiplier = checked;
|
|
this.hostCheatGoldMultiplierValue = toOptionalNumber(value);
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleHostCheatGoldMultiplierValueKeyDown = (e: KeyboardEvent) => {
|
|
preventDisallowedKeys(e, ["+", "-", "e", "E"]);
|
|
};
|
|
|
|
private handleHostCheatGoldMultiplierValueChanges = (e: Event) => {
|
|
const input = e.target as HTMLInputElement;
|
|
const value = parseBoundedFloatFromInput(input, { min: 0.1, max: 1000 });
|
|
|
|
if (value === undefined) {
|
|
this.hostCheatGoldMultiplierValue = undefined;
|
|
input.value = "";
|
|
} else {
|
|
this.hostCheatGoldMultiplierValue = value;
|
|
}
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleHostCheatStartingGoldToggle = (
|
|
checked: boolean,
|
|
value: number | string | undefined,
|
|
) => {
|
|
this.hostCheatStartingGold = checked;
|
|
this.hostCheatStartingGoldValue = toOptionalNumber(value);
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleHostCheatStartingGoldValueKeyDown = (e: KeyboardEvent) => {
|
|
preventDisallowedKeys(e, ["-", "+", "e", "E"]);
|
|
};
|
|
|
|
private handleHostCheatStartingGoldValueChanges = (e: Event) => {
|
|
const input = e.target as HTMLInputElement;
|
|
const value = parseBoundedFloatFromInput(input, {
|
|
min: 0.1,
|
|
max: 1000,
|
|
});
|
|
|
|
if (value === undefined) {
|
|
this.hostCheatStartingGoldValue = undefined;
|
|
input.value = "";
|
|
} else {
|
|
this.hostCheatStartingGoldValue = value;
|
|
}
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleRandomSpawnChange = (val: boolean) => {
|
|
this.randomSpawn = val;
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleInfiniteGoldChange = (val: boolean) => {
|
|
this.infiniteGold = val;
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleDonateGoldChange = (val: boolean) => {
|
|
this.donateGold = val;
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleInfiniteTroopsChange = (val: boolean) => {
|
|
this.infiniteTroops = val;
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleCompactMapChange = (val: boolean) => {
|
|
this.compactMap = val;
|
|
this.bots = getBotsForCompactMap(this.bots, val);
|
|
this.nations = getNationsForCompactMap(
|
|
this.nations,
|
|
this.defaultNationCount,
|
|
val,
|
|
);
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleDonateTroopsChange = (val: boolean) => {
|
|
this.donateTroops = val;
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleMaxTimerValueKeyDown = (e: KeyboardEvent) => {
|
|
preventDisallowedKeys(e, ["-", "+", "e"]);
|
|
};
|
|
|
|
private handleMaxTimerValueChanges = (e: Event) => {
|
|
const input = e.target as HTMLInputElement;
|
|
const value = parseBoundedIntegerFromInput(input, {
|
|
min: 1,
|
|
max: 120,
|
|
stripPattern: /[e+-]/gi,
|
|
});
|
|
|
|
if (value === undefined) {
|
|
return;
|
|
}
|
|
this.maxTimerValue = value;
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleStartDelayValueKeyDown = (e: KeyboardEvent) => {
|
|
preventDisallowedKeys(e, ["-", "+", "e", "E", "."]);
|
|
};
|
|
|
|
private handleStartDelayValueChanges = (e: Event) => {
|
|
const input = e.target as HTMLInputElement;
|
|
const value = parseBoundedIntegerFromInput(input, {
|
|
min: 0,
|
|
max: 600,
|
|
});
|
|
|
|
if (value === undefined) {
|
|
this.startDelayValue = undefined;
|
|
input.value = "";
|
|
} else {
|
|
this.startDelayValue = value;
|
|
}
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleNationsChange = (e: Event) => {
|
|
const customEvent = e as CustomEvent<{ value: number }>;
|
|
const value = customEvent.detail.value;
|
|
if (isNaN(value) || value < 0 || value > 400) {
|
|
return;
|
|
}
|
|
this.nations = value;
|
|
|
|
if (this.nationsUpdateTimer !== null) {
|
|
clearTimeout(this.nationsUpdateTimer);
|
|
}
|
|
this.nationsUpdateTimer = window.setTimeout(() => {
|
|
this.putGameConfig();
|
|
this.nationsUpdateTimer = null;
|
|
}, 300);
|
|
};
|
|
|
|
private async handleGameModeSelection(value: GameMode) {
|
|
this.gameMode = value;
|
|
if (this.gameMode === GameMode.Team) {
|
|
this.donateGold = true;
|
|
this.donateTroops = true;
|
|
} else {
|
|
this.donateGold = false;
|
|
this.donateTroops = false;
|
|
}
|
|
this.putGameConfig();
|
|
}
|
|
|
|
private async handleTeamCountSelection(value: TeamCountConfig) {
|
|
this.teamCount = value;
|
|
this.putGameConfig();
|
|
}
|
|
|
|
private handleWhitelistToggle = (checked: boolean) => {
|
|
this.whitelistEnabled = checked;
|
|
this.putGameConfig();
|
|
};
|
|
|
|
private handleAllowedPublicIdsChange = (e: Event) => {
|
|
this.allowedPublicIds = (e.target as HTMLInputElement).value;
|
|
this.putGameConfig();
|
|
};
|
|
|
|
// Comma/space/newline-separated publicIds, capped at the 200 the schema
|
|
// allows so a large paste can't make the config update fail validation.
|
|
// Undefined when empty (no allowlist).
|
|
private parseAllowedPublicIds(): string[] | undefined {
|
|
const ids = this.allowedPublicIds
|
|
.split(/[\s,]+/)
|
|
.map((s) => s.trim())
|
|
.filter((s) => s.length > 0)
|
|
.slice(0, 200);
|
|
return ids.length > 0 ? ids : undefined;
|
|
}
|
|
|
|
private async putGameConfig() {
|
|
const spawnImmunityTicks = this.spawnImmunityDurationMinutes
|
|
? this.spawnImmunityDurationMinutes * 60 * 10
|
|
: 0;
|
|
const url = await this.constructUrl();
|
|
this.updateLobbyHistory(url);
|
|
this.dispatchEvent(
|
|
new CustomEvent("update-game-config", {
|
|
detail: {
|
|
config: {
|
|
gameMap: this.selectedMap,
|
|
gameMapSize: this.compactMap
|
|
? GameMapSize.Compact
|
|
: GameMapSize.Normal,
|
|
difficulty: this.selectedDifficulty,
|
|
bots: this.bots,
|
|
infiniteGold: this.infiniteGold,
|
|
donateGold: this.donateGold,
|
|
infiniteTroops: this.infiniteTroops,
|
|
donateTroops: this.donateTroops,
|
|
instantBuild: this.instantBuild,
|
|
randomSpawn: this.randomSpawn,
|
|
gameMode: this.gameMode,
|
|
disabledUnits: this.disabledUnits,
|
|
spawnImmunityDuration: this.spawnImmunity
|
|
? spawnImmunityTicks
|
|
: null,
|
|
playerTeams: this.teamCount,
|
|
nations: sliderToNationsConfig(
|
|
this.nations,
|
|
this.defaultNationCount,
|
|
),
|
|
maxTimerValue: this.maxTimer === true ? this.maxTimerValue : null,
|
|
startDelay: this.startDelayValue,
|
|
goldMultiplier:
|
|
this.goldMultiplier === true ? this.goldMultiplierValue : null,
|
|
startingGold:
|
|
this.startingGold === true && this.startingGoldValue !== undefined
|
|
? Math.round(this.startingGoldValue * 1_000_000)
|
|
: null,
|
|
disableAlliances: this.disableAlliances || null,
|
|
// Send {enabled:false} (not undefined) when off: undefined is dropped
|
|
// by JSON.stringify, so the server's "!== undefined" merge would keep a
|
|
// previously-enabled config and the toggle could never turn off.
|
|
doomsdayClock: this.doomsdayClock
|
|
? { enabled: true, speed: this.doomsdayClockSpeed }
|
|
: { enabled: false },
|
|
anonymizeNames: this.anonymizeNames,
|
|
nameReveals: this.nameReveals,
|
|
allowedPublicIds: this.whitelistEnabled
|
|
? (this.parseAllowedPublicIds() ?? [])
|
|
: [],
|
|
waterNukes: this.waterNukes ? true : null,
|
|
hostCheats: this.hostCheatsEnabled
|
|
? {
|
|
infiniteGold: this.hostCheatInfiniteGold || undefined,
|
|
infiniteTroops: this.hostCheatInfiniteTroops || undefined,
|
|
goldMultiplier:
|
|
this.hostCheatGoldMultiplier === true
|
|
? this.hostCheatGoldMultiplierValue
|
|
: null,
|
|
startingGold:
|
|
this.hostCheatStartingGold === true &&
|
|
this.hostCheatStartingGoldValue !== undefined
|
|
? Math.round(this.hostCheatStartingGoldValue * 1_000_000)
|
|
: null,
|
|
}
|
|
: undefined,
|
|
} satisfies Partial<GameConfig>,
|
|
},
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
}
|
|
|
|
private toggleNameReveal(clientID: string) {
|
|
this.nameReveals = this.nameReveals.includes(clientID)
|
|
? this.nameReveals.filter((c) => c !== clientID)
|
|
: [...this.nameReveals, clientID];
|
|
this.putGameConfig();
|
|
}
|
|
|
|
private async toggleGameStartTimer() {
|
|
await this.putGameConfig();
|
|
console.log(
|
|
`Starting private game with map: ${GameMapType[this.selectedMap as keyof typeof GameMapType]} ${this.useRandomMap ? " (Randomly selected)" : ""}`,
|
|
);
|
|
|
|
// If the modal closes as part of starting the game, do not leave the lobby
|
|
this.leaveLobbyOnClose = false;
|
|
|
|
this.dispatchEvent(
|
|
new CustomEvent("toggle_game_start_timer", {
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
}
|
|
|
|
private kickPlayer(clientID: string) {
|
|
// Dispatch event to be handled by WebSocket instead of HTTP
|
|
this.dispatchEvent(
|
|
new CustomEvent("kick-player", {
|
|
detail: { target: clientID },
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
}
|
|
|
|
private async loadNationCount() {
|
|
const currentMap = this.selectedMap;
|
|
try {
|
|
const mapData = this.mapLoader.getMapData(currentMap);
|
|
const manifest = await mapData.manifest();
|
|
// Only update if the map hasn't changed
|
|
if (this.selectedMap === currentMap) {
|
|
this.defaultNationCount = manifest.nations.length;
|
|
this.nations = this.compactMap
|
|
? Math.max(0, Math.floor(manifest.nations.length * 0.25))
|
|
: manifest.nations.length;
|
|
}
|
|
} catch (error) {
|
|
console.warn("Failed to load nation count", error);
|
|
// Leave existing values unchanged so the UI stays consistent
|
|
}
|
|
}
|
|
}
|
|
|
|
async function createLobby(): Promise<GameInfo> {
|
|
// Send JWT token for creator identification - server extracts persistentID from it
|
|
// persistentID should never be exposed to other clients
|
|
const token = await getPlayToken();
|
|
try {
|
|
// No worker prefix and no id: nginx (prod) / the vite dev proxy randomly
|
|
// routes to a worker, which mints a self-owned id and returns it.
|
|
const response = await fetch(`/api/create_game`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorText = await response.text();
|
|
console.error("Server error response:", errorText);
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log("Success:", data);
|
|
|
|
return data as GameInfo;
|
|
} catch (error) {
|
|
console.error("Error creating lobby:", error);
|
|
throw error;
|
|
}
|
|
}
|