alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-22 13:29:45 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
f1fe5549dccfb5dbd05dce1be69cc40ba7770c20
OpenFrontIO/src/client/HostLobbyModal.ts
T
VariableVince 997cfea730 Fixes lobby team preview: clan players aren't assigned a team + add nation count + other small fixes (#2536) 
## Description:

Fixes for v28. In https://github.com/openfrontio/OpenFrontIO/pull/2444,
lobby team preview was added. But for players with clan tags, this
doesn't work correctly. They don't get assigned to the same team in the
preview, while they do get assigned to the same team in the actual game.
Also added some small fixes and QoL improvements like showing the number
of Nations next to the number of Players. Since we needed that info
anyway. Did not choose to show and assign Nations to teams (just the
numbers), see why under CONSIDERED OPTIONS THAT I DIDN'T WENT WITH.

**BEFORE:**
https://youtu.be/AV_aDJ4PgOk

<img width="767" height="117" alt="Malformed argument because of double
accolades for remove_player"
src="https://github.com/user-attachments/assets/7de1114e-7ce1-4a8f-95cc-6b0528a61e3b"
/>

**AFTER:**
https://youtu.be/aDCKkwedqes

Cause of bug:
maxTeamSize is a number in assignTeams, only used to assign clan
players. It uses the length of the players array as input. At actual
game start, the Nations are also in the players array. But at lobby
preview the Nations aren't yet fetched. So when 2 players want to do a 3
Teams private lobby with them using clan tags to be in the same team.
maxTeamCount would do Math.ceil(2/3)=1. So only 1 clan player per team
as a result. While actually there could be 10 Nations which would result
in maxTeamCount Math.ceil(12/3)=4 so in the game they would actually be
assigned to the same team.

Fix for bug: 
fetch Nations count in HostLobbyModal and pass on to LobbyTeamView. Add
it to the number of players for maxTeamCount that
assignTeamsLobbyPreview uses for its calculation. Also added nation
count to the similar teamMaxSize in LobbyTeamView itself, to display the
same and correct number of max players. For random maps, we now need to
know the random map before the game starts to get its Nation count. So
made some changes for that too in HostLobbyModal.

Also fixed:
- willUpdate ran comptuteTeamPreview every second, now checks if
properties like 'client' actually changed. PollPlayers in HostLobbyModal
'changes' the clients property every second even if there are no actual
changes. Checks if the other properties are actually changed too, to
make it more future proof.
- cache teamsList so it is only fetched once instead of first in
computeTeamPreview and then again for showTeamColors.
- don't show the "Empty Teams" header if there are no empty teams.
- console error ICU format error SyntaxError: MALFORMED ARGUMENT.
Because of double accolades around remove_player in translation value.
- remove fallback for comparing clients on clientID, which used client
name. Players may have the same names so it's not safe to compare based
on name.

Also show number of Nations next to number of Players: 
now we now the nationCount since it is needed for the fix, show number
of Nations next to number of Players. It's handy and it prevents
confusion as to why it says 2/32 for two teams if there are only 2
players; it is because there are 61 Nations as well on the World map for
example.

Also determine number of teams based on Players + Nations: 
now we now the nationCount since it is needed for the fix, use it to
determine the number of teams. Just like populateTeams in GameImpl does.
This means for Duos on the World map, a minimum of 31 teams will be
shown since there are 61 Nations. This is better than just show two
teams based on 1 or 2 humans in the lobby. Also it makes more clear how
many teams there'll be the game and how the players and nations are
divided over the teams. Choose to not show the Nations' team assignments
though. That could be for another PR. See explanation under CONSIDERED
OPTIONS THAT I DIDN'T WENT WITH.

Also show Nations team as pre-filled for HumansVSNations: 
now we now the nationCount since it is needed for the fix, for
HumansVSNations, show the Nations team as fully assigned and non-empty.
For example for World map it shows Nations 61/61. Don't show them as
Empty Team but as Assigned Team. Although i choose not to show the
actual Nations (see CONSIDERED OPTIONS THAT I DIDN'T WENT WITH), this
makes it clear their team is pre-filled and how many Nations you're
actually up against. Whereas for other Team game types like 7 Teams or
Duos, it will display the teams that the Nations will fill up as empty.

CONSIDERED OPTIONS THAT I DIDN'T WENT WITH
- Use an optional param 'nationsCount' to assignTeams with default = 0.
And simply add nationsCount to the players.length count for maxTeamSize.
This would be error prone; 'nationsCount' should then never be assigned
a value except when called from LobbyTeamView. But in the future someone
might assign it a value even when called from somewhere else. Then you
could say, check if there are Nations in the players array and if so, do
not use Nationscount because we know they are already counted from
players.length. But if Disable Nations is enabled, there would be no
Nations in the players array but if nationsCount was somehow given a
value we still should not use it. So again, too developer error prone.

- Not only fetch the number of Nations, but actually get the Nations
themselves to show them in the team assign preview as well. They are
shuffled on team assignment but of course deterministicly (nation player
ID assigned based on Pseudorandom seeded with GameID in GameRunner, then
shuffled in TeamAssignment with Pseudorandom seeded with map's first
Nation's playerID), so we could replicate it. But then, how to
distinguish humans and Nations in the UI? This feels like something for
a follow-up PR.

FOR A FUTURE PR
- change the way Clan team overflow is handled. Now they're "kicked" as
in not assigned to a team without their knowing, are loaded into the
game but cannot spawn. This UX could need some improvement. And the
logic can be improved too, ie. don't "kick" too soon, check the number
of Clans in the lobby and the number of teams to decide if we can assign
the 'overflowing' Clan player to another team that doesn't have
rivalling Clan players. Far out of scope for this PR.


## 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
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

tryout33
2025-12-01 20:44:07 -08:00

913 lines
32 KiB
TypeScript
Raw Blame History

import { LitElement, html } from "lit";
import { customElement, query, state } from "lit/decorators.js";
import randomMap from "../../resources/images/RandomMap.webp";
import { translateText } from "../client/Utils";
import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
import {
Difficulty,
Duos,
GameMapSize,
GameMapType,
GameMode,
HumansVsNations,
Quads,
Trios,
UnitType,
mapCategories,
} from "../core/game/Game";
import { UserSettings } from "../core/game/UserSettings";
import {
ClientInfo,
GameConfig,
GameInfo,
TeamCountConfig,
} from "../core/Schemas";
import { generateID } from "../core/Util";
import "./components/baseComponents/Modal";
import "./components/Difficulties";
import "./components/LobbyTeamView";
import "./components/Maps";
import { JoinLobbyEvent } from "./Main";
import { terrainMapFileLoader } from "./TerrainMapFileLoader";
import { renderUnitTypeOptions } from "./utilities/RenderUnitTypeOptions";
@customElement("host-lobby-modal")
export class HostLobbyModal extends LitElement {
@query("o-modal") private modalEl!: HTMLElement & {
open: () => void;
close: () => void;
};
@state() private selectedMap: GameMapType = GameMapType.World;
@state() private selectedDifficulty: Difficulty = Difficulty.Medium;
@state() private disableNPCs = false;
@state() private gameMode: GameMode = GameMode.FFA;
@state() private teamCount: TeamCountConfig = 2;
@state() private bots: number = 400;
@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 instantBuild: boolean = false;
@state() private randomSpawn: boolean = false;
@state() private compactMap: boolean = false;
@state() private lobbyId = "";
@state() private copySuccess = false;
@state() private clients: ClientInfo[] = [];
@state() private useRandomMap: boolean = false;
@state() private disabledUnits: UnitType[] = [];
@state() private lobbyCreatorClientID: string = "";
@state() private lobbyIdVisible: boolean = true;
@state() private nationCount: number = 0;
private playersInterval: NodeJS.Timeout | null = null;
// Add a new timer for debouncing bot changes
private botsUpdateTimer: number | null = null;
private userSettings: UserSettings = new UserSettings();
private mapLoader = terrainMapFileLoader;
connectedCallback() {
super.connectedCallback();
window.addEventListener("keydown", this.handleKeyDown);
}
disconnectedCallback() {
window.removeEventListener("keydown", this.handleKeyDown);
super.disconnectedCallback();
}
private handleKeyDown = (e: KeyboardEvent) => {
if (e.code === "Escape") {
e.preventDefault();
this.close();
}
};
render() {
return html`
<o-modal title=${translateText("host_modal.title")}>
<div class="lobby-id-box">
<button class="lobby-id-button">
<!-- Visibility toggle icon on the left -->
${
this.lobbyIdVisible
? html`<svg
class="visibility-icon"
@click=${() => {
this.lobbyIdVisible = !this.lobbyIdVisible;
this.requestUpdate();
}}
style="margin-right: 8px; cursor: pointer;"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
height="18px"
width="18px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M256 105c-101.8 0-188.4 62.7-224 151 35.6 88.3 122.2 151 224 151s188.4-62.7 224-151c-35.6-88.3-122.2-151-224-151zm0 251.7c-56 0-101.7-45.7-101.7-101.7S200 153.3 256 153.3 357.7 199 357.7 255 312 356.7 256 356.7zm0-161.1c-33 0-59.4 26.4-59.4 59.4s26.4 59.4 59.4 59.4 59.4-26.4 59.4-59.4-26.4-59.4-59.4-59.4z"
></path>
</svg>`
: html`<svg
class="visibility-icon"
@click=${() => {
this.lobbyIdVisible = !this.lobbyIdVisible;
this.requestUpdate();
}}
style="margin-right: 8px; cursor: pointer;"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
height="18px"
width="18px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M448 256s-64-128-192-128S64 256 64 256c32 64 96 128 192 128s160-64 192-128z"
fill="none"
stroke="currentColor"
stroke-width="32"
></path>
<path
d="M144 256l224 0"
fill="none"
stroke="currentColor"
stroke-width="32"
stroke-linecap="round"
></path>
</svg>`
}
<!-- Lobby ID (conditionally shown) -->
<span class="lobby-id" @click=${this.copyToClipboard} style="cursor: pointer;">
${this.lobbyIdVisible ? this.lobbyId : "••••••••"}
</span>
<!-- Copy icon/success indicator -->
<div @click=${this.copyToClipboard} style="margin-left: 8px; cursor: pointer;">
${
this.copySuccess
? html`<span class="copy-success-icon">✓</span>`
: html`
<svg
class="clipboard-icon"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
height="18px"
width="18px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M296 48H176.5C154.4 48 136 65.4 136 87.5V96h-7.5C106.4 96 88 113.4 88 135.5v288c0 22.1 18.4 40.5 40.5 40.5h208c22.1 0 39.5-18.4 39.5-40.5V416h8.5c22.1 0 39.5-18.4 39.5-40.5V176L296 48zm0 44.6l83.4 83.4H296V92.6zm48 330.9c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5h7.5v255.5c0 22.1 10.4 32.5 32.5 32.5H344v7.5zm48-48c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5H264v128h128v167.5z"
></path>
</svg>
`
}
</div>
</button>
</div>
<div class="options-layout">
<!-- Map Selection -->
<div class="options-section">
<div class="option-title">${translateText("map.map")}</div>
<div class="option-cards flex-col">
<!-- Use the imported mapCategories -->
${Object.entries(mapCategories).map(
([categoryKey, maps]) => html`
<div class="w-full mb-4">
<h3
class="text-lg font-semibold mb-2 text-center text-gray-300"
>
${translateText(`map_categories.${categoryKey}`)}
</h3>
<div class="flex flex-row flex-wrap justify-center gap-4">
${maps.map((mapValue) => {
const mapKey = Object.keys(GameMapType).find(
(key) =>
GameMapType[key as keyof typeof GameMapType] ===
mapValue,
);
return html`
<div
@click=${() => this.handleMapSelection(mapValue)}
>
<map-display
.mapKey=${mapKey}
.selected=${!this.useRandomMap &&
this.selectedMap === mapValue}
.translation=${translateText(
`map.${mapKey?.toLowerCase()}`,
)}
></map-display>
</div>
`;
})}
</div>
</div>
`,
)}
<div
class="option-card random-map ${
this.useRandomMap ? "selected" : ""
}"
@click=${this.handleRandomMapToggle}
>
<div class="option-image">
<img
src=${randomMap}
alt="Random Map"
style="width:100%; aspect-ratio: 4/2; object-fit:cover; border-radius:8px;"
/>
</div>
<div class="option-card-title">
${translateText("map.random")}
</div>
</div>
</div>
</div>
<!-- Difficulty Selection -->
<div class="options-section">
<div class="option-title">${translateText("difficulty.difficulty")}</div>
<div class="option-cards">
${Object.entries(Difficulty)
.filter(([key]) => isNaN(Number(key)))
.map(
([key, value]) => html`
<div
class="option-card ${this.selectedDifficulty === value
? "selected"
: ""}"
@click=${() => this.handleDifficultySelection(value)}
>
<difficulty-display
.difficultyKey=${key}
></difficulty-display>
<p class="option-card-title">
${translateText(`difficulty.${key}`)}
</p>
</div>
`,
)}
</div>
</div>
<!-- Game Mode Selection -->
<div class="options-section">
<div class="option-title">${translateText("host_modal.mode")}</div>
<div class="option-cards">
<div
class="option-card ${this.gameMode === GameMode.FFA ? "selected" : ""}"
@click=${() => this.handleGameModeSelection(GameMode.FFA)}
>
<div class="option-card-title">
${translateText("game_mode.ffa")}
</div>
</div>
<div
class="option-card ${this.gameMode === GameMode.Team ? "selected" : ""}"
@click=${() => this.handleGameModeSelection(GameMode.Team)}
>
<div class="option-card-title">
${translateText("game_mode.teams")}
</div>
</div>
</div>
</div>
${
this.gameMode === GameMode.FFA
? ""
: html`
<!-- Team Count Selection -->
<div class="options-section">
<div class="option-title">
${translateText("host_modal.team_count")}
</div>
<div class="option-cards">
${[
2,
3,
4,
5,
6,
7,
Quads,
Trios,
Duos,
HumansVsNations,
].map(
(o) => html`
<div
class="option-card ${this.teamCount === o
? "selected"
: ""}"
@click=${() => this.handleTeamCountSelection(o)}
>
<div class="option-card-title">
${typeof o === "string"
? o === HumansVsNations
? translateText("public_lobby.teams_hvn")
: translateText(`public_lobby.teams_${o}`)
: translateText("public_lobby.teams", {
num: o,
})}
</div>
</div>
`,
)}
</div>
</div>
`
}
<!-- Game Options -->
<div class="options-section">
<div class="option-title">
${translateText("host_modal.options_title")}
</div>
<div class="option-cards">
<label for="bots-count" class="option-card">
<input
type="range"
id="bots-count"
min="0"
max="400"
step="1"
@input=${this.handleBotsChange}
@change=${this.handleBotsChange}
.value="${String(this.bots)}"
/>
<div class="option-card-title">
<span>${translateText("host_modal.bots")}</span>${
this.bots === 0
? translateText("host_modal.bots_disabled")
: this.bots
}
</div>
</label>
${
!(
this.gameMode === GameMode.Team &&
this.teamCount === HumansVsNations
)
? html`
<label
for="disable-npcs"
class="option-card ${this.disableNPCs
? "selected"
: ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="disable-npcs"
@change=${this.handleDisableNPCsChange}
.checked=${this.disableNPCs}
/>
<div class="option-card-title">
${translateText("host_modal.disable_nations")}
</div>
</label>
`
: ""
}
<label
for="instant-build"
class="option-card ${this.instantBuild ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="instant-build"
@change=${this.handleInstantBuildChange}
.checked=${this.instantBuild}
/>
<div class="option-card-title">
${translateText("host_modal.instant_build")}
</div>
</label>
<label
for="random-spawn"
class="option-card ${this.randomSpawn ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="random-spawn"
@change=${this.handleRandomSpawnChange}
.checked=${this.randomSpawn}
/>
<div class="option-card-title">
${translateText("host_modal.random_spawn")}
</div>
</label>
<label
for="donate-gold"
class="option-card ${this.donateGold ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="donate-gold"
@change=${this.handleDonateGoldChange}
.checked=${this.donateGold}
/>
<div class="option-card-title">
${translateText("host_modal.donate_gold")}
</div>
</label>
<label
for="donate-troops"
class="option-card ${this.donateTroops ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="donate-troops"
@change=${this.handleDonateTroopsChange}
.checked=${this.donateTroops}
/>
<div class="option-card-title">
${translateText("host_modal.donate_troops")}
</div>
</label>
<label
for="infinite-gold"
class="option-card ${this.infiniteGold ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="infinite-gold"
@change=${this.handleInfiniteGoldChange}
.checked=${this.infiniteGold}
/>
<div class="option-card-title">
${translateText("host_modal.infinite_gold")}
</div>
</label>
<label
for="infinite-troops"
class="option-card ${this.infiniteTroops ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="infinite-troops"
@change=${this.handleInfiniteTroopsChange}
.checked=${this.infiniteTroops}
/>
<div class="option-card-title">
${translateText("host_modal.infinite_troops")}
</div>
</label>
<label
for="host-modal-compact-map"
class="option-card ${this.compactMap ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="host-modal-compact-map"
@change=${this.handleCompactMapChange}
.checked=${this.compactMap}
/>
<div class="option-card-title">
${translateText("host_modal.compact_map")}
</div>
</label>
<label
for="max-timer"
class="option-card ${this.maxTimer ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="max-timer"
@change=${(e: Event) => {
const checked = (e.target as HTMLInputElement).checked;
if (!checked) {
this.maxTimerValue = undefined;
}
this.maxTimer = checked;
this.putGameConfig();
}}
.checked=${this.maxTimer}
/>
${
this.maxTimer === false
? ""
: html`<input
type="number"
id="end-timer-value"
min="0"
max="120"
.value=${String(this.maxTimerValue ?? "")}
style="width: 60px; color: black; text-align: right; border-radius: 8px;"
@input=${this.handleMaxTimerValueChanges}
@keydown=${this.handleMaxTimerValueKeyDown}
/>`
}
<div class="option-card-title">
${translateText("host_modal.max_timer")}
</div>
</label>
<hr style="width: 100%; border-top: 1px solid #444; margin: 16px 0;" />
<!-- Individual disables for structures/weapons -->
<div
style="margin: 8px 0 12px 0; font-weight: bold; color: #ccc; text-align: center;"
>
${translateText("host_modal.enables_title")}
</div>
<div
style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;"
>
${renderUnitTypeOptions({
disabledUnits: this.disabledUnits,
toggleUnit: this.toggleUnit.bind(this),
})}
</div>
</div>
</div>
</div>
</div>
<!-- Lobby Selection -->
<div class="options-section">
<div class="option-title">
${this.clients.length}
${
this.clients.length === 1
? translateText("host_modal.player")
: translateText("host_modal.players")
}
<span style="margin: 0 8px;">•</span>
${this.nationCount}
${
this.nationCount === 1
? translateText("host_modal.nation_player")
: translateText("host_modal.nation_players")
}
</div>
<lobby-team-view
.gameMode=${this.gameMode}
.clients=${this.clients}
.lobbyCreatorClientID=${this.lobbyCreatorClientID}
.teamCount=${this.teamCount}
.nationCount=${this.disableNPCs ? 0 : this.nationCount}
.onKickPlayer=${(clientID: string) => this.kickPlayer(clientID)}
></lobby-team-view>
</div>
<div class="start-game-button-container">
<button
@click=${this.startGame}
?disabled=${this.clients.length < 2}
class="start-game-button"
>
${
this.clients.length === 1
? translateText("host_modal.waiting")
: translateText("host_modal.start")
}
</button>
</div>
</div>
</o-modal>
`;
}
createRenderRoot() {
return this;
}
public open() {
this.lobbyCreatorClientID = generateID();
this.lobbyIdVisible = this.userSettings.get(
"settings.lobbyIdVisibility",
true,
);
createLobby(this.lobbyCreatorClientID)
.then((lobby) => {
this.lobbyId = lobby.gameID;
// join lobby
})
.then(() => {
this.dispatchEvent(
new CustomEvent("join-lobby", {
detail: {
gameID: this.lobbyId,
clientID: this.lobbyCreatorClientID,
} as JoinLobbyEvent,
bubbles: true,
composed: true,
}),
);
});
this.modalEl?.open();
this.playersInterval = setInterval(() => this.pollPlayers(), 1000);
this.loadNationCount();
}
public close() {
this.modalEl?.close();
this.copySuccess = false;
if (this.playersInterval) {
clearInterval(this.playersInterval);
this.playersInterval = null;
}
// Clear any pending bot updates
if (this.botsUpdateTimer !== null) {
clearTimeout(this.botsUpdateTimer);
this.botsUpdateTimer = null;
}
}
private async handleRandomMapToggle() {
this.useRandomMap = true;
this.selectedMap = this.getRandomMap();
await this.loadNationCount();
this.putGameConfig();
}
private async handleMapSelection(value: GameMapType) {
this.selectedMap = value;
this.useRandomMap = false;
await this.loadNationCount();
this.putGameConfig();
}
private async handleDifficultySelection(value: Difficulty) {
this.selectedDifficulty = value;
this.putGameConfig();
}
// Modified to include debouncing
private handleBotsChange(e: Event) {
const value = parseInt((e.target as HTMLInputElement).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(e: Event) {
this.instantBuild = Boolean((e.target as HTMLInputElement).checked);
this.putGameConfig();
}
private handleRandomSpawnChange(e: Event) {
this.randomSpawn = Boolean((e.target as HTMLInputElement).checked);
this.putGameConfig();
}
private handleInfiniteGoldChange(e: Event) {
this.infiniteGold = Boolean((e.target as HTMLInputElement).checked);
this.putGameConfig();
}
private handleDonateGoldChange(e: Event) {
this.donateGold = Boolean((e.target as HTMLInputElement).checked);
this.putGameConfig();
}
private handleInfiniteTroopsChange(e: Event) {
this.infiniteTroops = Boolean((e.target as HTMLInputElement).checked);
this.putGameConfig();
}
private handleCompactMapChange(e: Event) {
this.compactMap = Boolean((e.target as HTMLInputElement).checked);
this.putGameConfig();
}
private handleDonateTroopsChange(e: Event) {
this.donateTroops = Boolean((e.target as HTMLInputElement).checked);
this.putGameConfig();
}
private handleMaxTimerValueKeyDown(e: KeyboardEvent) {
if (["-", "+", "e"].includes(e.key)) {
e.preventDefault();
}
}
private handleMaxTimerValueChanges(e: Event) {
(e.target as HTMLInputElement).value = (
e.target as HTMLInputElement
).value.replace(/[e+-]/gi, "");
const value = parseInt((e.target as HTMLInputElement).value);
if (isNaN(value) || value < 0 || value > 120) {
return;
}
this.maxTimerValue = value;
this.putGameConfig();
}
private async handleDisableNPCsChange(e: Event) {
this.disableNPCs = Boolean((e.target as HTMLInputElement).checked);
console.log(`updating disable npcs to ${this.disableNPCs}`);
this.putGameConfig();
}
private async handleGameModeSelection(value: GameMode) {
this.gameMode = value;
this.putGameConfig();
}
private async handleTeamCountSelection(value: TeamCountConfig) {
this.teamCount = value;
this.putGameConfig();
}
private async putGameConfig() {
const config = await getServerConfigFromClient();
const response = await fetch(
`${window.location.origin}/${config.workerPath(this.lobbyId)}/api/game/${this.lobbyId}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
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,
playerTeams: this.teamCount,
...(this.gameMode === GameMode.Team &&
this.teamCount === HumansVsNations
? {
disableNPCs: false,
}
: {
disableNPCs: this.disableNPCs,
}),
maxTimerValue:
this.maxTimer === true ? this.maxTimerValue : undefined,
} satisfies Partial<GameConfig>),
},
);
return response;
}
private toggleUnit(unit: UnitType, checked: boolean): void {
console.log(`Toggling unit type: ${unit} to ${checked}`);
this.disabledUnits = checked
? [...this.disabledUnits, unit]
: this.disabledUnits.filter((u) => u !== unit);
this.putGameConfig();
}
private getRandomMap(): GameMapType {
const maps = Object.values(GameMapType);
const randIdx = Math.floor(Math.random() * maps.length);
return maps[randIdx] as GameMapType;
}
private async startGame() {
await this.putGameConfig();
console.log(
`Starting private game with map: ${GameMapType[this.selectedMap as keyof typeof GameMapType]} ${this.useRandomMap ? " (Randomly selected)" : ""}`,
);
this.close();
const config = await getServerConfigFromClient();
const response = await fetch(
`${window.location.origin}/${config.workerPath(this.lobbyId)}/api/start_game/${this.lobbyId}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
},
);
return response;
}
private async copyToClipboard() {
try {
//TODO: Convert id to url and copy
await navigator.clipboard.writeText(
`${location.origin}/#join=${this.lobbyId}`,
);
this.copySuccess = true;
setTimeout(() => {
this.copySuccess = false;
}, 2000);
} catch (err) {
console.error(`Failed to copy text: ${err}`);
}
}
private async pollPlayers() {
const config = await getServerConfigFromClient();
fetch(`/${config.workerPath(this.lobbyId)}/api/game/${this.lobbyId}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((data: GameInfo) => {
console.log(`got game info response: ${JSON.stringify(data)}`);
this.clients = data.clients ?? [];
});
}
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() {
try {
const mapData = this.mapLoader.getMapData(this.selectedMap);
const manifest = await mapData.manifest();
this.nationCount = manifest.nations.length;
} catch (error) {
console.warn("Failed to load nation count", error);
this.nationCount = 0;
}
}
}
async function createLobby(creatorClientID: string): Promise<GameInfo> {
const config = await getServerConfigFromClient();
try {
const id = generateID();
const response = await fetch(
`/${config.workerPath(id)}/api/create_game/${id}?creatorClientID=${encodeURIComponent(creatorClientID)}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
// body: JSON.stringify(data), // Include this if you need to send data
},
);
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;
}
}
Reference in New Issue View Git Blame Copy Permalink