Adds name changing feature. Tweaks timing rules.

public/game.html

@@ -332,7 +332,9 @@
 <div id="layout">
 
   <div id="header">
-    Y.A.R.N. HTML5 - Spin a Story! -&nbsp;<span id="room-display"></span>
+    <img src="../images/yarnlogo.png" /> &nbsp; <span id="room-display"></span>
+    <button id="change-name-btn" style="margin-left:auto;margin-right:1rem;font-size:.9rem;padding:.3rem .6rem;">Change Name</button>
+    <button id="leave-game-btn" style="margin-right:1rem;font-size:.9rem;padding:.3rem .6rem;">Leave Game</button>
   </div>
 
   <div id="main-text">
@@ -789,6 +791,21 @@
     updateGameBar();
   }
 
+  // === Header Functions ===
+
+  document.getElementById('change-name-btn').addEventListener('click', () => {
+    const newName = prompt('Enter a new name (1-20 characters):', playerName);
+    if (newName && newName.trim() && newName.trim() !== playerName) {
+      socket.emit('setName', { name: newName.trim() });
+    }
+  });
+  
+  document.getElementById('leave-game-btn').addEventListener('click', () => {
+    if (confirm('Are you sure you want to leave the game?')) {
+      window.location.href = '/';
+    }
+  });
+
   // === Chat Functions ===
 
   document.getElementById('chat-input').addEventListener('keypress', function(e) {