import { LitElement, html, css } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { Difficulty, GameMapType, GameType } from "../core/game/Game"; import { GameConfig, GameInfo } from "../core/Schemas"; import { consolex } from "../core/Consolex"; import "./components/Difficulties"; import { DifficultyDescription } from "./components/Difficulties"; import "./components/Maps"; import randomMap from "../../resources/images/RandomMap.png"; import { generateID } from "../core/Util"; import { getConfig, getServerConfigFromClient, } from "../core/configuration/Config"; import { JoinLobbyEvent } from "./Main"; @customElement("host-lobby-modal") export class HostLobbyModal extends LitElement { @state() private isModalOpen = false; @state() private selectedMap: GameMapType = GameMapType.World; @state() private selectedDifficulty: Difficulty = Difficulty.Medium; @state() private disableNPCs = false; @state() private bots: number = 400; @state() private infiniteGold: boolean = false; @state() private infiniteTroops: boolean = false; @state() private instantBuild: boolean = false; @state() private lobbyId = ""; @state() private copySuccess = false; @state() private players: string[] = []; @state() private useRandomMap: boolean = false; private playersInterval = null; // Add a new timer for debouncing bot changes private botsUpdateTimer: number | null = null; static styles = css` .modal-overlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); overflow-y: auto; display: flex; align-items: center; justify-content: center; } .modal-content { background-color: rgb(35 35 35 / 0.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: white; padding: 20px; border-radius: 8px; width: 80%; max-width: 1280px; max-height: 80vh; overflow-y: auto; text-align: center; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); position: relative; } /* Add custom scrollbar styles */ .modal-content::-webkit-scrollbar { width: 8px; } .modal-content::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 4px; } .modal-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } .modal-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } .title { font-size: 28px; color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 0 0 20px; } .close { position: sticky; top: 0px; right: 0px; color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } .close:hover, .close:focus { color: white; text-decoration: none; cursor: pointer; } .start-game-button { width: 100%; max-width: 300px; padding: 15px 20px; font-size: 16px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 8px; transition: background-color 0.3s; display: inline-block; margin: 0 0 20px 0; } .start-game-button:not(:disabled):hover { background-color: #0056b3; } .start-game-button:disabled { background: linear-gradient(to right, #4a4a4a, #3d3d3d); opacity: 0.7; cursor: not-allowed; } .options-layout { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 24px 0; } .options-section { background: rgba(0, 0, 0, 0.2); padding: 12px 24px 24px 24px; border-radius: 12px; } .option-title { margin: 0 0 16px 0; font-size: 20px; color: #fff; text-align: center; } .option-cards { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; } .option-card { width: 100%; min-width: 100px; max-width: 120px; padding: 4px 4px 0 4px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: rgba(30, 30, 30, 0.95); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 12px; cursor: pointer; transition: all 0.2s ease-in-out; } .option-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.3); background: rgba(40, 40, 40, 0.95); } .option-card.selected { border-color: #4a9eff; background: rgba(74, 158, 255, 0.1); } .option-card-title { font-size: 14px; color: #aaa; text-align: center; margin: 0 0 4px 0; } .option-image { width: 100%; aspect-ratio: 4/2; color: #aaa; transition: transform 0.2s ease-in-out; border-radius: 8px; background-color: rgba(255, 255, 255, 0.1); font-size: 14px; display: flex; align-items: center; justify-content: center; } .option-card input[type="checkbox"] { display: none; } label.option-card:hover { transform: none; } .checkbox-icon { width: 16px; height: 16px; border: 2px solid #aaa; border-radius: 6px; margin: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease-in-out; } .option-card.selected .checkbox-icon { border-color: #4a9eff; background: #4a9eff; } .option-card.selected .checkbox-icon::after { content: "✓"; color: white; } /* HostLobbyModal css */ .clipboard-icon { display: flex; align-items: center; justify-content: center; color: #fff; } .copy-success { position: relative; transform: translateY(-10px); color: green; font-size: 14px; margin-top: 5px; } .copy-success-icon { width: 18px; height: 18px; color: #4caf50; } .lobby-id-box { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0px 0px 0px; } .lobby-id-button { display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.2); padding: 8px 16px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: all 0.2s ease-in-out; } .lobby-id-button:hover { background: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-1px); } .lobby-id { font-size: 14px; color: #fff; text-align: center; } .players-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0 16px; } .player-tag { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); padding: 4px 16px; border-radius: 16px; font-size: 14px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); } #bots-count { width: 80%; } @media screen and (max-width: 768px) { .modal-content { max-height: calc(90vh - 42px); max-width: 100vw; width: 100%; } `; render() { return html`
×
Private Lobby
Map
${Object.entries(GameMapType) .filter(([key]) => isNaN(Number(key))) .map( ([key, value]) => html`
this.handleMapSelection(value)}>
`, )}
Random Map
Random
Difficulty
${Object.entries(Difficulty) .filter(([key]) => isNaN(Number(key))) .map( ([key, value]) => html`
this.handleDifficultySelection(value)} >

${DifficultyDescription[key]}

`, )}
Options
${this.players.length} ${this.players.length === 1 ? "Player" : "Players"}
${this.players.map( (player) => html`${player}`, )}
`; } public open() { createLobby() .then((lobby) => { this.lobbyId = lobby.gameID; // join lobby }) .then(() => { this.dispatchEvent( new CustomEvent("join-lobby", { detail: { gameID: this.lobbyId, } as JoinLobbyEvent, bubbles: true, composed: true, }), ); }); this.isModalOpen = true; this.playersInterval = setInterval(() => this.pollPlayers(), 1000); } public close() { this.isModalOpen = false; 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.putGameConfig(); } private async handleMapSelection(value: GameMapType) { this.selectedMap = value; this.useRandomMap = false; 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 handleInfiniteGoldChange(e: Event) { this.infiniteGold = Boolean((e.target as HTMLInputElement).checked); this.putGameConfig(); } private handleInfiniteTroopsChange(e: Event) { this.infiniteTroops = Boolean((e.target as HTMLInputElement).checked); this.putGameConfig(); } private async handleDisableNPCsChange(e: Event) { this.disableNPCs = Boolean((e.target as HTMLInputElement).checked); consolex.log(`updating disable npcs to ${this.disableNPCs}`); 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, difficulty: this.selectedDifficulty, disableNPCs: this.disableNPCs, bots: this.bots, infiniteGold: this.infiniteGold, infiniteTroops: this.infiniteTroops, instantBuild: this.instantBuild, } as GameConfig), }, ); } private getRandomMap(): GameMapType { const maps = Object.values(GameMapType); const randIdx = Math.floor(Math.random() * maps.length); return maps[randIdx] as GameMapType; } private async startGame() { if (this.useRandomMap) { this.selectedMap = this.getRandomMap(); } await this.putGameConfig(); consolex.log( `Starting private game with map: ${GameMapType[this.selectedMap]} ${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", }, }, ); } 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) { consolex.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 response: ${data}`); this.players = data.clients.map((p) => p.username); }); } } async function createLobby(): Promise { const config = await getServerConfigFromClient(); try { const id = generateID(); const response = await fetch( `/${config.workerPath(id)}/api/create_game/${id}`, { method: "POST", headers: { "Content-Type": "application/json", }, // body: JSON.stringify(data), // Include this if you need to send data }, ); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); consolex.log("Success:", data); return data as GameInfo; } catch (error) { consolex.error("Error creating lobby:", error); throw error; // Re-throw the error so the caller can handle it } }