Persist player display names

src/index.ts

@@ -59,6 +59,8 @@ const app = new Elysia()
       console.log(`Created new game without specific ID: ${gameId}`);
     }
 
+    const displayName = wsHandler.playerNames.get(playerId) || playerId;
+
     const htmlTemplate = await Bun.file('./index.html').text();
     let finalHtml = htmlTemplate
       .replace(
@@ -68,6 +70,10 @@ const app = new Elysia()
       .replace(
         '<meta name="playerId" content="" />',
         `<meta name="playerId" content="${playerId}" />`,
+      )
+      .replace(
+        '<meta name="displayName" content="" />',
+        `<meta name="displayName" content="${displayName}" />`,
       );
 
     return new Response(finalHtml, {

src/web-socket-handler.tsx

@@ -21,9 +21,9 @@ class PlayerConnection {
   name: string;
   ws: WS;
 
-  constructor(id: string, ws: WS) {
+  constructor(id: string, name: string, ws: WS) {
     this.id = id;
-    this.name = id;
+    this.name = name;
     this.ws = ws;
   }
 
@@ -52,9 +52,9 @@ class GameServer {
     this.connections = new Map();
   }
 
-  public handleConnection(ws: WS) {
+  public handleConnection(ws: WS, playerName: string) {
     const { playerId } = ws.data.query;
-    const conn = new PlayerConnection(playerId, ws);
+    const conn = new PlayerConnection(playerId, playerName, ws);
     this.connections.set(playerId, conn);
     console.log(`Created connection with player ${conn.id} in game ${this.id}`);
 
@@ -658,6 +658,7 @@ class GameServer {
     }
 
     conn.name = newDisplayName;
+    this.webSocketHandler.playerNames.set(conn.id, newDisplayName);
     this.broadcastTitle();
     conn.sendMessage(
       'info',
@@ -668,15 +669,19 @@ class GameServer {
 
 export class WebSocketHandler {
   private games: Map<String, GameServer>;
+  private playerNames: Map<string, string>;
 
   constructor() {
     this.games = new Map();
+    this.playerNames = new Map();
   }
 
   public handleConnection(ws: WS): void {
     const { gameId } = ws.data.query;
     if (this.games.has(gameId)) {
-      this.games.get(gameId)!.handleConnection(ws);
+      const game = this.games.get(gameId)!;
+      const playerName = this.playerNames.get(playerId) || playerId; // Retrieve name or use ID
+      game.handleConnection(ws, playerName);
     } else {
       ws.send('Error: game not found');
       ws.close();