fix lobby join bugs

TODO.txt

@@ -165,8 +165,10 @@
 * UI: leader board DONE 10/12/2024
 * single player mode DONE 10/12/2024
 * single player select map DONE 10/12/2024
-* implement private game
+* implement private game DONE 10/15/2024
+* private game shows how many players joined
 * private game can select map
+* BUG: memory leak: game not deleted when leaving game
 * optimize sendBoat function
 * Test on android
 * NPC more likely to accept alliance fewer alliance player has

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(GameMap)
+              ${Object.entries(new Set())
         .filter(([key]) => isNaN(Number(key)))
         .map(([key, value]) => html`
                   <option value=${value} ?selected=${this.selectedMap === value}>

src/client/JoinPrivateLobbyModal.ts

@@ -7,6 +7,7 @@ export class JoinPrivateLobbyModal extends LitElement {
   @state() private isModalOpen = false;
   @state() private message: string = '';
   @query('#lobbyIdInput') private lobbyIdInput!: HTMLInputElement;
+  @state() private hasJoined = false
 
   static styles = css`
     .modal-overlay {
@@ -108,7 +109,7 @@ export class JoinPrivateLobbyModal extends LitElement {
     return html`
     <div class="modal-overlay" style="display: ${this.isModalOpen ? 'block' : 'none'}">
       <div class="modal-content">
-        <span class="close" @click=${this.close}>&times;</span>
+        <span class="close" @click=${this.closeAndLeave}>&times;</span>
         <h2>Join Private Lobby</h2>
         <div class="lobby-id-container">
           <input type="text" id="lobbyIdInput" placeholder="Enter Lobby ID">
@@ -117,7 +118,7 @@ export class JoinPrivateLobbyModal extends LitElement {
         <div class="message-area ${this.message ? 'show' : ''}">
           ${this.message}
         </div>
-        <button class="join-button" @click=${this.joinLobby}>Join Lobby</button>
+        ${!this.hasJoined ? html`<button class="join-button" @click=${this.joinLobby}>Join Lobby</button>` : ''}
       </div>
     </div>
   `;
@@ -129,13 +130,18 @@ export class JoinPrivateLobbyModal extends LitElement {
 
   public close() {
     this.isModalOpen = false;
+    this.lobbyIdInput.value = null
+  }
+
+  public closeAndLeave() {
+    this.close()
+    this.hasJoined = false
+    this.message = ""
     this.dispatchEvent(new CustomEvent('leave-lobby', {
       detail: {lobby: this.lobbyIdInput.value},
       bubbles: true,
       composed: true
     }));
-    this.lobbyIdInput.value = null
-
   }
 
   private async pasteFromClipboard() {
@@ -162,6 +168,7 @@ export class JoinPrivateLobbyModal extends LitElement {
       .then(data => {
         if (data.exists) {
           this.message = 'Joined successfully! Waiting for game to start...';
+          this.hasJoined = true
           this.dispatchEvent(new CustomEvent('join-lobby', {
             detail: {
               lobby: {id: lobbyId},

src/client/Main.ts

@@ -29,6 +29,11 @@ class Client {
         if (!this.usernameInput) {
             console.warn('Username input element not found');
         }
+        const s = this.stopGame
+        window.addEventListener('beforeunload', function (event) {
+            console.log('Browser is closing');
+            s()
+        });
 
         setFavicon()
         this.ip = getClientIP()
@@ -76,13 +81,15 @@ class Client {
             }
         );
         this.game.join(() => {
-            this.joinModal.close()
+            this.joinModal.closeAndLeave()
         });
         const g = this.game;
-        window.addEventListener('beforeunload', function (event) {
-            console.log('Browser is closing');
-            g.stop();
-        });
+    }
+
+    private stopGame() {
+        if (this.game != null) {
+            this.game.stop()
+        }
     }
 
     private async handleLeaveLobby(event: CustomEvent) {

src/client/Transport.ts

@@ -123,11 +123,11 @@ export class Transport {
         };
         this.socket.onclose = (event: CloseEvent) => {
             console.log(`WebSocket closed. Code: ${event.code}, Reason: ${event.reason}`);
-            if (!isActive()) {
-                return
-            }
             if (event.code != 1000) {
+                console.log(`reconnecting`)
                 this.connect(onconnect, onmessage, isActive)
+            } else {
+                console.log('normal websocket closure')
             }
         };
     }
@@ -147,6 +147,9 @@ export class Transport {
     }
 
     leaveGame() {
+        if (this.isLocal) {
+            return
+        }
         if (this.socket.readyState === WebSocket.OPEN) {
             console.log('on stop: leaving game')
             const msg = ClientLeaveMessageSchema.parse({
@@ -159,6 +162,7 @@ export class Transport {
             console.log('WebSocket is not open. Current state:', this.socket.readyState);
             console.log('attempting reconnect')
         }
+        this.socket = null
     }
 
     private onSendAllianceRequest(event: SendAllianceRequestIntentEvent) {

src/core/configuration/DevConfig.ts

@@ -6,7 +6,7 @@ export const devConfig = new class extends DefaultConfig {
         return 95
     }
     numSpawnPhaseTurns(): number {
-        return 40
+        return 400
     }
     gameCreationRate(): number {
         return 20 * 1000

src/server/GameServer.ts

@@ -137,6 +137,7 @@ export class GameServer {
         if (!this.isPublic) {
             if (this._hasStarted) {
                 if (this.clients.length == 0) {
+                    console.log(`game ${this.id} is finisehd`)
                     return GamePhase.Finished
                 } else {
                     return GamePhase.Active