have private lobby show players

src/client/HostLobbyModal.ts

@@ -9,8 +9,11 @@ export class HostLobbyModal extends LitElement {
   @state() private isModalOpen = false;
   @state() private selectedMap: GameMap = GameMap.World;
   @state() private selectedDiffculty: Difficulty = Difficulty.Medium;
-  @state() private lobbyId = 'a345d';
+  @state() private lobbyId = '';
   @state() private copySuccess = false;
+  @state() private players: string[] = []
+
+  private playersInterval = null
 
   static styles = css`
     .modal-overlay {
@@ -135,6 +138,9 @@ export class HostLobbyModal extends LitElement {
             </select>
           </div>
           <button @click=${this.startGame}>Start Game</button>
+        <div>
+        <p>Players: ${this.players.join(", ")}<p>
+        </div>
         </div>
       </div>
     `;
@@ -160,11 +166,16 @@ export class HostLobbyModal extends LitElement {
 
     })
     this.isModalOpen = true;
+    this.playersInterval = setInterval(() => this.pollPlayers(), 1000)
   }
 
   public close() {
     this.isModalOpen = false;
     this.copySuccess = false;
+    if (this.playersInterval) {
+      clearInterval(this.playersInterval)
+      this.playersInterval = null
+    }
   }
 
   private async handleMapChange(e: Event) {
@@ -200,7 +211,6 @@ export class HostLobbyModal extends LitElement {
     });
   }
 
-
   private async copyToClipboard() {
     try {
       await navigator.clipboard.writeText(this.lobbyId);
@@ -213,6 +223,18 @@ export class HostLobbyModal extends LitElement {
     }
   }
 
+  private async pollPlayers() {
+    fetch(`/lobby/${this.lobbyId}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    }).then(response => response.json())
+      .then(data => {
+        console.log(`got response: ${data}`)
+        this.players = data.players.map(p => p.username)
+      })
+  }
 }
 
 
@@ -244,4 +266,5 @@ async function createLobby(): Promise<Lobby> {
     consolex.error('Error creating lobby:', error);
     throw error; // Re-throw the error so the caller can handle it
   }
+
 }

src/server/GameManager.ts

@@ -16,6 +16,10 @@ export class GameManager {
 
     constructor(private config: Config) { }
 
+    public game(id: GameID): GameServer | null {
+        return this.games.find(g => g.id == id)
+    }
+
     gamesByPhase(phase: GamePhase): GameServer[] {
         return this.games.filter(g => g.phase() == phase)
     }

src/server/GameServer.ts

@@ -21,7 +21,7 @@ export class GameServer {
 
     private turns: Turn[] = []
     private intents: Intent[] = []
-    private activeClients: Client[] = []
+    public activeClients: Client[] = []
     // Used for record record keeping
     private allClients: Map<ClientID, Client> = new Map()
     private _hasStarted = false

src/server/Server.ts

@@ -98,6 +98,20 @@ app.get('/lobby/:id/exists', (req, res) => {
     });
 });
 
+app.get('/lobby/:id', (req, res) => {
+    const game = gm.game(req.params.id)
+    if (game == null) {
+        console.log(`lobby ${req.params.id} not found`)
+        return res.status(404).json({ error: 'Game not found' });
+    }
+    res.json({
+        players: game.activeClients.map(c => ({
+            username: c.username,
+            clientID: c.clientID
+        }))
+    });
+});
+
 
 app.get('/private_lobby/:id', (req, res) => {
     res.json({