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) {

public/menu.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <meta property="og:title" content="Y.A.R.N HTML5" />
+  <meta property="og:title" content="Y.A.R.N. HTML5" />
   <meta property="og:description" content="A collaborative story-writing game. Remake of the 2000s GameSpy Arcade classic." />
   <title>Y.A.R.N. HTML5</title>
 
@@ -104,8 +104,8 @@
 <body>
 
   <div id="splash">
-    <h2>Y.A.R.N.</h2>
-    <h4>HTML5 Edition</h4>
+    <img src="images/yarnlogo.png" />
+    <h4 style="font-style: italic; color:orangered">HTML5 Edition</h4>
 
     <!-- ENTER GAME -->
     <div class="section">
@@ -127,14 +127,14 @@
     <!-- ABOUT OVERLAY -->
     <div id="about-overlay" class="hidden">
       <div id="about-box">
-        <h3>What is Y.A.R.N HTML5?</h3>
-        <p>Y.A.R.N (Yet Another Random Narrative) was a collaborative story-writing "parlor game" originally included in GameSpy Arcade in the early 2000s, but removed shortly thereafter due to security issues that were never resolved.</p>
+        <h3>What is Y.A.R.N. HTML5?</h3>
+        <p>Y.A.R.N. (Yet Another Random Narrative) was a collaborative story-writing "parlor game" originally included in GameSpy Arcade in the early 2000s, but removed shortly thereafter due to security issues that were never resolved.</p>
         <p><strong>Y.A.R.N. HTML5</strong> is a modern remake of (what I can remember from) the original, designed to run in-browser, and with extra features such as (optional) LLM-based bots.</p>
-        <p><strong>The rules are simple:</strong></p>
-        <ul>
+        <p style="text-align: left;"><strong>The rules are simple:</strong></p>
+        <ul style="text-align: left;">
           <li>Players have a limited amount of time to write a sentence, selected by the host at game start.</li>
           <li>Once all players have submitted their sentences, players have 30 seconds to vote for their favorite.</li>
-          <li>The player whose sentence is chosen receives 3 bonus points, and all players receive one point for each vote they received.</li>
+          <li>All players receive one point for each vote their sentence receives. The player whose sentence receives the most votes is awarded 3 bonus points.</li>
           <li>In the case of a tie, the longest sentence receives two extra points and the other sentences tied receive 1 point each.</li>
           <li>When a player reaches the point limit, they win the game.</li>
         </ul>