now get message if join sucessful

src/client/ClientGame.ts

@@ -73,7 +73,7 @@ export class ClientGame {
         private transport: Transport,
     ) { }
 
-    public join() {
+    public join(onstart: () => void) {
         const onconnect = () => {
             console.log('Connected to game server!');
             this.transport.joinGame(this.clientIP, this.turns.length)
@@ -81,6 +81,7 @@ export class ClientGame {
         const onmessage = (message: ServerMessage) => {
             if (message.type == "start") {
                 console.log("starting game!")
+                onstart()
                 for (const turn of message.turns) {
                     if (turn.turnNumber < this.turns.length) {
                         continue

src/client/JoinPrivateLobbyModal.ts

@@ -5,6 +5,7 @@ import {GameMap} from '../core/game/Game';
 @customElement('join-private-lobby-modal')
 export class JoinPrivateLobbyModal extends LitElement {
   @state() private isModalOpen = false;
+  @state() private message: string = '';
   @query('#lobbyIdInput') private lobbyIdInput!: HTMLInputElement;
 
   static styles = css`
@@ -74,22 +75,52 @@ export class JoinPrivateLobbyModal extends LitElement {
     .join-button {
       margin-top: 10px;
     }
+
+  .message-area {
+   margin-top: 10px;
+   padding: 10px;
+   border-radius: 4px;
+   font-size: 14px;
+   transition: opacity 0.3s ease;
+   opacity: 0;
+   height: 0;
+   overflow: hidden;
+  }
+
+  .message-area.show {
+    opacity: 1;
+    height: auto;
+    margin-bottom: 10px;
+  }
+
+  .message-area.error {
+    background-color: #ffebee;
+    color: #c62828;
+  }
+
+  .message-area.success {
+    background-color: #e8f5e9;
+    color: #2e7d32;
+  }
   `;
 
   render() {
     return html`
-      <div class="modal-overlay" style="display: ${this.isModalOpen ? 'block' : 'none'}">
+    <div class="modal-overlay" style="display: ${this.isModalOpen ? 'block' : 'none'}">
-        <div class="modal-content">
+      <div class="modal-content">
-          <span class="close" @click=${this.close}>&times;</span>
+        <span class="close" @click=${this.close}>&times;</span>
-          <h2>Join Private Lobby</h2>
+        <h2>Join Private Lobby</h2>
-          <div class="lobby-id-container">
+        <div class="lobby-id-container">
-            <input type="text" id="lobbyIdInput" placeholder="Enter Lobby ID">
+          <input type="text" id="lobbyIdInput" placeholder="Enter Lobby ID">
-            <button @click=${this.pasteFromClipboard}>Paste</button>
+          <button @click=${this.pasteFromClipboard}>Paste</button>
-          </div>
-          <button class="join-button" @click=${this.joinLobby}>Join Lobby</button>
         </div>
+        <div class="message-area ${this.message ? 'show' : ''}">
+          ${this.message}
+        </div>
+        <button class="join-button" @click=${this.joinLobby}>Join Lobby</button>
       </div>
-    `;
+    </div>
+  `;
   }
 
   public open() {
@@ -98,6 +129,13 @@ export class JoinPrivateLobbyModal extends LitElement {
 
   public close() {
     this.isModalOpen = false;
+    this.dispatchEvent(new CustomEvent('leave-lobby', {
+      detail: {lobby: this.lobbyIdInput.value},
+      bubbles: true,
+      composed: true
+    }));
+    this.lobbyIdInput.value = null
+
   }
 
   private async pasteFromClipboard() {
@@ -111,18 +149,36 @@ export class JoinPrivateLobbyModal extends LitElement {
 
   private joinLobby() {
     const lobbyId = this.lobbyIdInput.value;
-    // Add your logic here to join the lobby using the lobbyId
     console.log(`Joining lobby with ID: ${lobbyId}`);
-    this.dispatchEvent(new CustomEvent('join-lobby', {
+    this.message = 'Checking lobby...'; // Set initial message
-      detail: {
-        lobby: {id: lobbyId},
-        singlePlayer: false,
-        map: GameMap.World,
-      },
-      bubbles: true,
-      composed: true
-    }))
 
-    this.close();
+    fetch(`/lobby/${lobbyId}/exists`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    })
+      .then(response => response.json())
+      .then(data => {
+        if (data.exists) {
+          this.message = 'Joined successfully! Waiting for game to start...';
+          this.dispatchEvent(new CustomEvent('join-lobby', {
+            detail: {
+              lobby: {id: lobbyId},
+              singlePlayer: false,
+              map: GameMap.World,
+            },
+            bubbles: true,
+            composed: true
+          }));
+        } else {
+          this.message = 'Lobby not found. Please check the ID and try again.';
+        }
+      })
+      .catch(error => {
+        console.error('Error checking lobby existence:', error);
+        this.message = 'An error occurred. Please try again.';
+      });
   }
+
 }

src/client/Main.ts

@@ -20,7 +20,7 @@ class Client {
 
     private usernameInput: UsernameInput | null = null;
 
-
+    private joinModal: JoinPrivateLobbyModal
     constructor() {
     }
 
@@ -49,10 +49,10 @@ class Client {
             hostModal.open();
         })
 
-        const joinModal = document.querySelector('join-private-lobby-modal') as JoinPrivateLobbyModal;
+        this.joinModal = document.querySelector('join-private-lobby-modal') as JoinPrivateLobbyModal;
-        joinModal instanceof JoinPrivateLobbyModal
+        this.joinModal instanceof JoinPrivateLobbyModal
         document.getElementById('join-private-lobby-button').addEventListener('click', () => {
-            joinModal.open();
+            this.joinModal.open();
         })
 
 
@@ -75,7 +75,9 @@ class Client {
                 map: event.detail.map,
             }
         );
-        this.game.join();
+        this.game.join(() => {
+            this.joinModal.close()
+        });
         const g = this.game;
         window.addEventListener('beforeunload', function (event) {
             console.log('Browser is closing');
@@ -84,6 +86,9 @@ class Client {
     }
 
     private async handleLeaveLobby(event: CustomEvent) {
+        if (this.game == null) {
+            return
+        }
         this.game.stop()
         this.game = null
     }

src/server/GameManager.ts

@@ -33,6 +33,11 @@ export class GameManager {
         return id
     }
 
+    hasActiveGame(gameID: GameID): boolean {
+        const game = this.games.filter(g => g.phase() == GamePhase.Lobby || g.phase() == GamePhase.Active).find(g => g.id == gameID)
+        return game != null
+    }
+
     // TODO: stop private games to prevent memory leak.
     startPrivateGame(gameID: GameID) {
         const game = this.games.find(g => g.id == gameID)

src/server/Server.ts

@@ -50,9 +50,19 @@ app.post('/start_private_lobby/:id', (req, res) => {
 
 
 app.put('/private_lobby/:id', (req, res) => {
-
 });
 
+app.get('/lobby/:id/exists', (req, res) => {
+    const lobbyId = req.params.id;
+    console.log(`checking lobby ${lobbyId} exists`)
+    const lobbyExists = gm.hasActiveGame(lobbyId);
+
+    res.json({
+        exists: lobbyExists
+    });
+});
+
+
 app.get('/private_lobby/:id', (req, res) => {
     res.json({
         hi: '5'

webpack.config.js

@@ -95,7 +95,7 @@ export default (env, argv) => {
 					ws: true,
 				},
 				{
-					context: ['/lobbies', '/join_game', '/join_lobby', '/private_lobby', '/start_private_lobby'],
+					context: ['/lobbies', '/join_game', '/join_lobby', '/private_lobby', '/start_private_lobby', '/lobby'],
 					target: 'http://localhost:3000',
 					secure: false,
 					changeOrigin: true,