diff --git a/resources/images/RandomMap.png b/resources/images/RandomMap.png new file mode 100755 index 000000000..9cfd1f27a Binary files /dev/null and b/resources/images/RandomMap.png differ diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts index 2a4cd8c4f..628bce473 100644 --- a/src/client/HostLobbyModal.ts +++ b/src/client/HostLobbyModal.ts @@ -6,6 +6,7 @@ import { consolex } from "../core/Consolex"; import "./components/Difficulties"; import { DifficultyDescription } from "./components/Difficulties"; import "./components/Maps"; +import randomMap from "../../resources/images/RandomMap.png"; @customElement("host-lobby-modal") export class HostLobbyModal extends LitElement { @@ -20,6 +21,7 @@ export class HostLobbyModal extends LitElement { @state() private lobbyId = ""; @state() private copySuccess = false; @state() private players: string[] = []; + @state() private useRandomMap: boolean = false; private playersInterval = null; @@ -365,11 +367,27 @@ export class HostLobbyModal extends LitElement {
this.handleMapSelection(value)}>
`, )} +
+
+ Random Map +
+
Random
+
@@ -544,9 +562,13 @@ export class HostLobbyModal extends LitElement { this.playersInterval = 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) { @@ -599,9 +621,19 @@ export class HostLobbyModal extends LitElement { }); } + private getRandomMap(): GameMapType { + const maps = Object.values(GameMapType); + const randIdx = Math.floor(Math.random() * maps.length); + return maps[randIdx] as GameMapType; + } + private async startGame() { + this.selectedMap = this.useRandomMap + ? this.getRandomMap() + : this.selectedMap; + await this.putGameConfig(); consolex.log( - `Starting private game with map: ${GameMapType[this.selectedMap]}`, + `Starting single player game with map: ${GameMapType[this.selectedMap]} ${this.useRandomMap ? " (Randomly selected)" : ""}`, ); this.close(); const response = await fetch(`/start_private_lobby/${this.lobbyId}`, { diff --git a/src/client/SinglePlayerModal.ts b/src/client/SinglePlayerModal.ts index cd3160fdd..5aa12db9f 100644 --- a/src/client/SinglePlayerModal.ts +++ b/src/client/SinglePlayerModal.ts @@ -6,6 +6,7 @@ import { consolex } from "../core/Consolex"; import "./components/Difficulties"; import { DifficultyDescription } from "./components/Difficulties"; import "./components/Maps"; +import randomMap from "../../resources/images/RandomMap.png"; @customElement("single-player-modal") export class SinglePlayerModal extends LitElement { @@ -17,6 +18,7 @@ export class SinglePlayerModal extends LitElement { @state() private infiniteGold: boolean = false; @state() private infiniteTroops: boolean = false; @state() private instantBuild: boolean = false; + @state() private useRandomMap: boolean = false; static styles = css` .modal-overlay { @@ -230,6 +232,15 @@ export class SinglePlayerModal extends LitElement { width: 80%; } + .random-map { + border: 2px solid rgba(255, 255, 255, 0.1); + background: rgba(30, 30, 30, 0.95); + } + .random-map.selected { + border: 2px solid '@4a9eff' + background: 'rgba(74, 158, 255, 0.1)' + } + @media screen and (max-width: 768px) { .modal-content { max-height: calc(90vh - 42px); @@ -259,14 +270,34 @@ export class SinglePlayerModal extends LitElement { .filter(([key]) => isNaN(Number(key))) .map( ([key, value]) => html` -
this.handleMapSelection(value)}> +
`, )} +
+
+ Random Map +
+
Random
+
@@ -329,7 +360,6 @@ export class SinglePlayerModal extends LitElement { />
Disable Nations
-