Can select map on private lobbies

src/client/ClientGame.ts

@@ -46,7 +46,7 @@ export function joinLobby(lobbyConfig: LobbyConfig, onjoin: () => void): () => v
             console.log('lobby: game started')
             onjoin()
             const gameConfig = {
-                map: GameMap.World,
+                map: message.config?.gameMap || lobbyConfig.map,
                 clientID: clientID,
                 gameID: lobbyConfig.gameID,
                 ip: lobbyConfig.ip,
@@ -93,6 +93,7 @@ export class GameRunner {
     private intervalID: NodeJS.Timeout
 
     private isProcessingTurn = false
+    private hasJoined = false
 
     constructor(
         private id: ClientID,
@@ -125,6 +126,7 @@ export class GameRunner {
         };
         const onmessage = (message: ServerMessage) => {
             if (message.type == "start") {
+                this.hasJoined = true
                 console.log("starting game!")
                 for (const turn of message.turns) {
                     if (turn.turnNumber < this.turns.length) {
@@ -134,6 +136,9 @@ export class GameRunner {
                 }
             }
             if (message.type == "turn") {
+                if (!this.hasJoined) {
+                    return
+                }
                 if (this.turns.length != message.turn.turnNumber) {
                     console.error(`got wrong turn have turns ${this.turns.length}, received turn ${message.turn.turnNumber}`)
                 } else {

src/client/HostLobbyModal.ts

@@ -111,7 +111,7 @@ export class HostLobbyModal extends LitElement {
           <div>
             <label for="map-select">Map: </label>
             <select id="map-select" @change=${this.handleMapChange}>
-              ${Object.entries(new Set())
+              ${Object.entries(GameMap)
         .filter(([key]) => isNaN(Number(key)))
         .map(([key, value]) => html`
                   <option value=${value} ?selected=${this.selectedMap === value}>
@@ -152,8 +152,17 @@ export class HostLobbyModal extends LitElement {
     this.copySuccess = false;
   }
 
-  private handleMapChange(e: Event) {
+  private async handleMapChange(e: Event) {
     this.selectedMap = Number((e.target as HTMLSelectElement).value) as GameMap;
+    console.log(`updating map to ${this.selectedMap}`)
+    const response = await fetch(`/private_lobby/${this.lobbyId}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({gameMap: this.selectedMap})
+    });
+
   }
   private async startGame() {
     console.log(`Starting private game with map: ${GameMap[this.selectedMap]}`);
@@ -166,6 +175,7 @@ export class HostLobbyModal extends LitElement {
     });
   }
 
+
   private async copyToClipboard() {
     try {
       await navigator.clipboard.writeText(this.lobbyId);
@@ -180,6 +190,7 @@ export class HostLobbyModal extends LitElement {
 
 }
 
+
 async function createLobby(): Promise<Lobby> {
   try {
     const response = await fetch('/private_lobby', {