Persist player display names

index.html

@@ -6,6 +6,7 @@
     <title>Gomoku!</title>
     <meta name="gameId" content="" />
     <meta name="playerId" content="" />
+    <meta name="displayName" content="" />
     <script
       src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"
       crossorigin="anonymous"

public/scripts/profile-editor.js

@@ -7,11 +7,11 @@ document.addEventListener('DOMContentLoaded', () => {
   const cancelButton = document.getElementById('cancel-display-name-button');
 
   // Get playerId from meta tag
-  const playerIdMeta = document.querySelector('meta[name="playerId"]');
+  const displayNameMeta = document.querySelector('meta[name="displayName"]');
-  const playerId = playerIdMeta ? playerIdMeta.content : 'UnknownPlayer';
+  const initialDisplayName = displayNameMeta ? displayNameMeta.content : 'UnknownPlayer';
 
-  // Initialize display name with player ID
+  // Initialize display name with initial name
-  displayNameSpan.textContent = playerId;
+  displayNameSpan.textContent = initialDisplayName;
 
   function setEditMode(isEditing) {
     if (isEditing) {

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();