can select map private game

src/client/SinglePlayerModal.ts

@@ -1,64 +1,72 @@
 import {LitElement, html, css} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
-
+import {GameMap} from '../core/game/Game';
 
 @customElement('single-player-modal')
 export class SinglePlayerModal extends LitElement {
   @state() private isModalOpen = false;
+  @state() private selectedMap: GameMap = GameMap.World;
 
   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);
-}
+    .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);
+    }
 
-.modal-content {
-  background-color: white;
-  margin: 15% auto;
-  padding: 20px;
-  border-radius: 8px;
-  width: 80%;
-  max-width: 500px;
-  text-align: center; /* Center the content inside the modal */
-}
+    .modal-content {
+      background-color: white;
+      margin: 15% auto;
+      padding: 20px;
+      border-radius: 8px;
+      width: 80%;
+      max-width: 500px;
+      text-align: center;
+    }
 
-.close {
-  color: #aaa;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-  cursor: pointer;
-}
+    .close {
+      color: #aaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+      cursor: pointer;
+    }
 
-.close:hover,
-.close:focus {
-  color: black;
-  text-decoration: none;
-  cursor: pointer;
-}
+    .close:hover,
+    .close:focus {
+      color: black;
+      text-decoration: none;
+      cursor: pointer;
+    }
 
-button {
-  padding: 10px 20px;
-  font-size: 16px;
-  cursor: pointer;
-  background-color: #007bff; /* Changed to blue */
-  color: white;
-  border: none;
-  border-radius: 4px;
-  transition: background-color 0.3s;
-  display: inline-block; /* Ensures the button takes only necessary width */
-  margin-top: 20px; /* Adds some space above the button */
-}
+    button {
+      padding: 10px 20px;
+      font-size: 16px;
+      cursor: pointer;
+      background-color: #007bff;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      transition: background-color 0.3s;
+      display: inline-block;
+      margin-top: 20px;
+    }
 
-button:hover {
-  background-color: #0056b3; /* Darker blue for hover state */
-}
+    button:hover {
+      background-color: #0056b3;
+    }
+
+    select {
+      padding: 8px;
+      font-size: 16px;
+      margin-top: 10px;
+      width: 200px;
+    }
   `;
 
   render() {
@@ -67,6 +75,18 @@ button:hover {
         <div class="modal-content">
           <span class="close" @click=${this.close}>&times;</span>
           <h2>Start Single Player Game</h2>
+          <div>
+            <label for="map-select">Map: </label>
+            <select id="map-select" @change=${this.handleMapChange}>
+              ${Object.entries(GameMap)
+        .filter(([key]) => isNaN(Number(key)))
+        .map(([key, value]) => html`
+                  <option value=${value} ?selected=${this.selectedMap === value}>
+                    ${key}
+                  </option>
+                `)}
+            </select>
+          </div>
           <button @click=${this.startGame}>Start Game</button>
         </div>
       </div>
@@ -81,14 +101,19 @@ button:hover {
     this.isModalOpen = false;
   }
 
+  private handleMapChange(e: Event) {
+    this.selectedMap = Number((e.target as HTMLSelectElement).value) as GameMap;
+  }
+
   private startGame() {
-    console.log('Starting single player game...');
+    console.log(`Starting single player game with map: ${GameMap[this.selectedMap]}`);
     this.dispatchEvent(new CustomEvent('join-lobby', {
       detail: {
         singlePlayer: true,
         lobby: {
           id: "LOCAL",
-        }
+        },
+        map: this.selectedMap,
       },
       bubbles: true,
       composed: true