import { TemplateResult, html } from "lit"; import { customElement, state } from "lit/decorators.js"; import { translateText } from "../client/Utils"; import { UserMeResponse } from "../core/ApiSchemas"; import { Difficulty, Duos, GameMapSize, GameMapType, GameMode, GameType, HumansVsNations, Quads, Trios, UnitType, mapCategories, } from "../core/game/Game"; import { UserSettings } from "../core/game/UserSettings"; import { TeamCountConfig } from "../core/Schemas"; import { generateID } from "../core/Util"; import { hasLinkedAccount } from "./Api"; import "./components/baseComponents/Button"; import "./components/baseComponents/Modal"; import { BaseModal } from "./components/BaseModal"; import "./components/Difficulties"; import "./components/FluentSlider"; import "./components/Maps"; import { modalHeader } from "./components/ui/ModalHeader"; import { fetchCosmetics } from "./Cosmetics"; import { crazyGamesSDK } from "./CrazyGamesSDK"; import { FlagInput } from "./FlagInput"; import { JoinLobbyEvent } from "./Main"; import { UsernameInput } from "./UsernameInput"; import { renderUnitTypeOptions } from "./utilities/RenderUnitTypeOptions"; import randomMap from "/images/RandomMap.webp?url"; @customElement("single-player-modal") export class SinglePlayerModal extends BaseModal { @state() private selectedMap: GameMapType = GameMapType.World; @state() private selectedDifficulty: Difficulty = Difficulty.Easy; @state() private disableNations: boolean = false; @state() private bots: number = 400; @state() private infiniteGold: boolean = false; @state() private infiniteTroops: boolean = false; @state() private compactMap: 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 useRandomMap: boolean = false; @state() private gameMode: GameMode = GameMode.FFA; @state() private teamCount: TeamCountConfig = 2; @state() private showAchievements: boolean = false; @state() private mapWins: Map> = new Map(); @state() private userMeResponse: UserMeResponse | false = 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 disabledUnits: UnitType[] = []; private userSettings: UserSettings = new UserSettings(); connectedCallback() { super.connectedCallback(); document.addEventListener( "userMeResponse", this.handleUserMeResponse as EventListener, ); } disconnectedCallback() { document.removeEventListener( "userMeResponse", this.handleUserMeResponse as EventListener, ); super.disconnectedCallback(); } private toggleAchievements = () => { this.showAchievements = !this.showAchievements; }; private handleUserMeResponse = ( event: CustomEvent, ) => { this.userMeResponse = event.detail; this.applyAchievements(event.detail); }; private renderNotLoggedInBanner(): TemplateResult { if (crazyGamesSDK.isOnCrazyGames()) { return html``; } return html`
${translateText("single_modal.sign_in_for_achievements")}
`; } private applyAchievements(userMe: UserMeResponse | false) { if (!userMe) { this.mapWins = new Map(); return; } const achievements = Array.isArray(userMe.player.achievements) ? userMe.player.achievements : []; const completions = achievements.find( (achievement) => achievement?.type === "singleplayer-map", )?.data ?? []; const winsMap = new Map>(); for (const entry of completions) { const { mapName, difficulty } = entry ?? {}; const isValidMap = typeof mapName === "string" && Object.values(GameMapType).includes(mapName as GameMapType); const isValidDifficulty = typeof difficulty === "string" && Object.values(Difficulty).includes(difficulty as Difficulty); if (!isValidMap || !isValidDifficulty) continue; const map = mapName as GameMapType; const set = winsMap.get(map) ?? new Set(); set.add(difficulty as Difficulty); winsMap.set(map, set); } this.mapWins = winsMap; } render() { const content = html`
${modalHeader({ title: translateText("main.solo") || "Solo", onBack: this.close, ariaLabel: translateText("common.back"), rightContent: hasLinkedAccount(this.userMeResponse) ? html`` : this.renderNotLoggedInBanner(), })}

${translateText("map.map")}

${Object.entries(mapCategories).map( ([categoryKey, maps]) => html`

${translateText(`map_categories.${categoryKey}`)}

${maps.map((mapValue) => { const mapKey = Object.keys(GameMapType).find( (key) => GameMapType[key as keyof typeof GameMapType] === mapValue, ); return html`
this.handleMapSelection(mapValue)} class="cursor-pointer transition-transform duration-200 active:scale-95" >
`; })}
`, )}

${translateText("map_categories.special")}

${translateText("difficulty.difficulty")}

${Object.entries(Difficulty) .filter(([key]) => isNaN(Number(key))) .map( ([key, value]) => html` `, )}

${translateText("host_modal.mode")}

${[GameMode.FFA, GameMode.Team].map((mode) => { const isSelected = this.gameMode === mode; const label = mode === GameMode.FFA ? translateText("game_mode.ffa") : translateText("game_mode.teams"); return html` `; })}
${this.gameMode === GameMode.FFA ? "" : html`
${translateText("host_modal.team_count")}
${[ 2, 3, 4, 5, 6, 7, Quads, Trios, Duos, HumansVsNations, ].map( (o) => html` `, )}
`}

${translateText("single_modal.options_title")}

${this.renderOptionToggle( "single_modal.disable_nations", this.disableNations, (val) => (this.disableNations = val), this.gameMode === GameMode.Team && this.teamCount === HumansVsNations, )} ${this.renderOptionToggle( "single_modal.instant_build", this.instantBuild, (val) => (this.instantBuild = val), )} ${this.renderOptionToggle( "single_modal.random_spawn", this.randomSpawn, (val) => (this.randomSpawn = val), )} ${this.renderOptionToggle( "single_modal.infinite_gold", this.infiniteGold, (val) => (this.infiniteGold = val), )} ${this.renderOptionToggle( "single_modal.infinite_troops", this.infiniteTroops, (val) => (this.infiniteTroops = val), )} ${this.renderOptionToggle( "single_modal.compact_map", this.compactMap, (val) => { this.compactMap = val; if (val && this.bots === 400) { this.bots = 100; } else if (!val && this.bots === 100) { this.bots = 400; } }, )}
{ // Prevent toggling when clicking the input if ( (e.target as HTMLElement).tagName.toLowerCase() === "input" ) return; this.maxTimer = !this.maxTimer; if (!this.maxTimer) { this.maxTimerValue = undefined; } else { // Set default value when enabling if not already set or invalid if (!this.maxTimerValue || this.maxTimerValue <= 0) { this.maxTimerValue = 30; } // Focus the input after render setTimeout(() => { const input = this.getEndTimerInput(); if (input) { input.focus(); input.select(); } }, 0); } }} >
${this.maxTimer ? html` ` : ""}
${this.maxTimer ? html`` : html`
`}
${translateText("single_modal.max_timer")}
{ if ( (e.target as HTMLElement).tagName.toLowerCase() === "input" ) return; this.goldMultiplier = !this.goldMultiplier; if (!this.goldMultiplier) { this.goldMultiplierValue = undefined; } else { if ( !this.goldMultiplierValue || this.goldMultiplierValue <= 0 ) { this.goldMultiplierValue = 2; } setTimeout(() => { const input = this.renderRoot.querySelector( "#gold-multiplier-value", ) as HTMLInputElement; if (input) { input.focus(); input.select(); } }, 0); } }} >
${this.goldMultiplier ? html` ` : ""}
${this.goldMultiplier ? html`` : html`
`}
${translateText("single_modal.gold_multiplier")}
{ if ( (e.target as HTMLElement).tagName.toLowerCase() === "input" ) return; this.startingGold = !this.startingGold; if (!this.startingGold) { this.startingGoldValue = undefined; } else { if ( !this.startingGoldValue || this.startingGoldValue < 0 ) { this.startingGoldValue = 5000000; } setTimeout(() => { const input = this.renderRoot.querySelector( "#starting-gold-value", ) as HTMLInputElement; if (input) { input.focus(); input.select(); } }, 0); } }} >
${this.startingGold ? html` ` : ""}
${this.startingGold ? html`` : html`
`}
${translateText("single_modal.starting_gold")}

${translateText("single_modal.enables_title")}

${renderUnitTypeOptions({ disabledUnits: this.disabledUnits, toggleUnit: this.toggleUnit.bind(this), })}
`; if (this.inline) { return content; } return html` ${content} `; } // Helper for consistent option buttons private renderOptionToggle( labelKey: string, checked: boolean, onChange: (val: boolean) => void, hidden: boolean = false, ): TemplateResult { if (hidden) return html``; return html` `; } protected onClose(): void { // Reset all transient form state to ensure clean slate this.selectedMap = GameMapType.World; this.selectedDifficulty = Difficulty.Easy; this.gameMode = GameMode.FFA; this.useRandomMap = false; this.disableNations = false; this.bots = 400; this.infiniteGold = false; this.infiniteTroops = false; this.compactMap = false; this.maxTimer = false; this.maxTimerValue = undefined; this.instantBuild = false; this.randomSpawn = false; this.teamCount = 2; this.disabledUnits = []; this.goldMultiplier = false; this.goldMultiplierValue = undefined; this.startingGold = false; this.startingGoldValue = undefined; } private handleSelectRandomMap() { this.useRandomMap = true; } private handleMapSelection(value: GameMapType) { this.selectedMap = value; this.useRandomMap = false; } private handleDifficultySelection(value: Difficulty) { this.selectedDifficulty = value; } private handleBotsChange(e: Event) { const customEvent = e as CustomEvent<{ value: number }>; const value = customEvent.detail.value; if (isNaN(value) || value < 0 || value > 400) { return; } this.bots = value; } private handleMaxTimerValueKeyDown(e: KeyboardEvent) { if (["-", "+", "e"].includes(e.key)) { e.preventDefault(); } } private getEndTimerInput(): HTMLInputElement | null { return ( (this.renderRoot.querySelector( "#end-timer-value", ) as HTMLInputElement | null) ?? (this.querySelector("#end-timer-value") as HTMLInputElement | null) ); } private handleMaxTimerValueChanges(e: Event) { const input = e.target as HTMLInputElement; input.value = input.value.replace(/[e+-]/gi, ""); const value = parseInt(input.value); // Always update state to keep UI and internal state in sync if (isNaN(value) || value < 1 || value > 120) { // Set to undefined for invalid/empty/out-of-range values this.maxTimerValue = undefined; } else { this.maxTimerValue = value; } } private handleGoldMultiplierValueKeyDown(e: KeyboardEvent) { if (["+", "-", "e", "E"].includes(e.key)) { e.preventDefault(); } } private handleGoldMultiplierValueChanges(e: Event) { const input = e.target as HTMLInputElement; const value = parseFloat(input.value); if (isNaN(value) || value < 0.1 || value > 1000) { this.goldMultiplierValue = undefined; input.value = ""; } else { this.goldMultiplierValue = value; } } private handleStartingGoldValueKeyDown(e: KeyboardEvent) { if (["-", "+", "e", "E"].includes(e.key)) { e.preventDefault(); } } private handleStartingGoldValueChanges(e: Event) { const input = e.target as HTMLInputElement; input.value = input.value.replace(/[eE+-]/g, ""); const value = parseInt(input.value); if (isNaN(value) || value < 0 || value > 1000000000) { this.startingGoldValue = undefined; } else { this.startingGoldValue = value; } } private handleGameModeSelection(value: GameMode) { this.gameMode = value; } private handleTeamCountSelection(value: TeamCountConfig) { this.teamCount = value; } private getRandomMap(): GameMapType { const maps = Object.values(GameMapType); const randIdx = Math.floor(Math.random() * maps.length); return maps[randIdx] as GameMapType; } private toggleUnit(unit: UnitType, checked: boolean): void { this.disabledUnits = checked ? [...this.disabledUnits, unit] : this.disabledUnits.filter((u) => u !== unit); } private async startGame() { // Validate and clamp maxTimer setting before starting let finalMaxTimerValue: number | undefined = undefined; if (this.maxTimer) { if (!this.maxTimerValue || this.maxTimerValue <= 0) { console.error("Max timer is enabled but no valid value is set"); alert( translateText("single_modal.max_timer_invalid") || "Please enter a valid max timer value (1-120 minutes)", ); // Focus the input const input = this.getEndTimerInput(); if (input) { input.focus(); input.select(); } return; } // Clamp value to valid range finalMaxTimerValue = Math.max(1, Math.min(120, this.maxTimerValue)); } // If random map is selected, choose a random map now if (this.useRandomMap) { this.selectedMap = this.getRandomMap(); } console.log( `Starting single player game with map: ${GameMapType[this.selectedMap as keyof typeof GameMapType]}${this.useRandomMap ? " (Randomly selected)" : ""}`, ); const clientID = generateID(); const gameID = generateID(); const usernameInput = document.querySelector( "username-input", ) as UsernameInput; if (!usernameInput) { console.warn("Username input element not found"); } const flagInput = document.querySelector("flag-input") as FlagInput; if (!flagInput) { console.warn("Flag input element not found"); } const cosmetics = await fetchCosmetics(); let selectedPattern = this.userSettings.getSelectedPatternName(cosmetics); selectedPattern ??= cosmetics ? (this.userSettings.getDevOnlyPattern() ?? null) : null; const selectedColor = this.userSettings.getSelectedColor(); await crazyGamesSDK.requestMidgameAd(); this.dispatchEvent( new CustomEvent("join-lobby", { detail: { clientID: clientID, gameID: gameID, gameStartInfo: { gameID: gameID, players: [ { clientID, username: usernameInput.getCurrentUsername(), cosmetics: { flag: flagInput.getCurrentFlag() === "xx" ? "" : flagInput.getCurrentFlag(), pattern: selectedPattern ?? undefined, color: selectedColor ? { color: selectedColor } : undefined, }, }, ], config: { gameMap: this.selectedMap, gameMapSize: this.compactMap ? GameMapSize.Compact : GameMapSize.Normal, gameType: GameType.Singleplayer, gameMode: this.gameMode, playerTeams: this.teamCount, difficulty: this.selectedDifficulty, maxTimerValue: finalMaxTimerValue, bots: this.bots, infiniteGold: this.infiniteGold, donateGold: this.gameMode === GameMode.Team, donateTroops: this.gameMode === GameMode.Team, infiniteTroops: this.infiniteTroops, instantBuild: this.instantBuild, randomSpawn: this.randomSpawn, disabledUnits: this.disabledUnits .map((u) => Object.values(UnitType).find((ut) => ut === u)) .filter((ut): ut is UnitType => ut !== undefined), ...(this.gameMode === GameMode.Team && this.teamCount === HumansVsNations ? { disableNations: false, } : { disableNations: this.disableNations, }), ...(this.goldMultiplier && this.goldMultiplierValue ? { goldMultiplier: this.goldMultiplierValue } : {}), ...(this.startingGold && this.startingGoldValue !== undefined ? { startingGold: this.startingGoldValue } : {}), }, lobbyCreatedAt: Date.now(), // ms; server should be authoritative in MP }, } satisfies JoinLobbyEvent, bubbles: true, composed: true, }), ); this.close(); } }