Add name editing. Add icons for all buttons.

public/scripts/display-ws-connection.js

@@ -11,7 +11,7 @@ const playerId = playerIdMeta.content;
 const wsUrl = `ws://${window.location.host}/ws?gameId=${gameId}&playerId=${playerId}`;
 
 // Get the game container element
-const gameContainer = document.getElementById('game-container');
+const gameContainer = document.getElementById('ws-container');
 
 // Set the ws-connect attribute
 gameContainer.setAttribute('ws-connect', wsUrl);

public/scripts/profile-editor.js

@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const displayNameSpan = document.getElementById('display-name');
+  const editIcon = document.getElementById('edit-display-name-icon');
+  const editControls = document.getElementById('display-name-edit-controls');
+  const displayNameInput = document.getElementById('display-name-input');
+  const saveButton = document.getElementById('save-display-name-ws-button');
+  const cancelButton = document.getElementById('cancel-display-name-button');
+
+  // Get playerId from meta tag
+  const playerIdMeta = document.querySelector('meta[name="playerId"]');
+  const playerId = playerIdMeta ? playerIdMeta.content : 'UnknownPlayer';
+
+  // Initialize display name with player ID
+  displayNameSpan.textContent = playerId;
+
+  function setEditMode(isEditing) {
+    if (isEditing) {
+      displayNameSpan.style.display = 'none';
+      editIcon.style.display = 'none';
+      editControls.style.display = 'flex';
+      displayNameInput.value = displayNameSpan.textContent;
+      displayNameInput.focus();
+    } else {
+      displayNameSpan.style.display = 'inline';
+      editIcon.style.display = 'inline';
+      editControls.style.display = 'none';
+    }
+  }
+
+  editIcon.addEventListener('click', () => setEditMode(true));
+  cancelButton.addEventListener('click', () => setEditMode(false));
+
+  saveButton.addEventListener('click', () => {
+    // The actual sending of the message is handled by hx-trigger and send-ws-messages.js
+    // We just handle the optimistic UI update here.
+    const newName = displayNameInput.value.trim();
+    if (newName && newName !== displayNameSpan.textContent) {
+      displayNameSpan.textContent = newName; // Optimistically update display
+    }
+    setEditMode(false);
+  });
+});

public/scripts/send-ws-messages.js

@@ -73,5 +73,11 @@ document.addEventListener('htmx:wsConfigSend', function (e) {
       type: 'rematch',
       action: 'cancel',
     };
+  } else if (e.target.id == 'save-display-name-ws-button') {
+    const displayNameInput = document.getElementById('display-name-input');
+    e.detail.parameters = {
+      type: 'update_display_name',
+      displayName: displayNameInput ? displayNameInput.value.trim() : '',
+    };
   }
 });