feat: implement name autosave functionality and remove set name button

public/index.html

@@ -56,10 +56,8 @@
           Dein Name
           <input id="name" placeholder="Name"
             class="mt-1 w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3 py-2 h-11 outline-none focus:ring-2 focus:ring-indigo-500" />
+          <span class="mt-1 block text-xs text-slate-500 dark:text-slate-400">Speichert automatisch</span>
         </label>
-        <button id="setName" class="h-11 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium">
-          Setzen
-        </button>
       </div>
       <div class="flex flex-col sm:flex-row gap-3">
         <button id="createRoom" class="h-11 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-medium">

public/js/dom.js

@@ -30,7 +30,6 @@ export const $volumeSlider = el('volumeSlider');
 export const $bufferBadge = el('bufferBadge');
 export const $copyRoomCode = el('copyRoomCode');
 export const $nameLobby = el('name');
-export const $setNameLobby = el('setName');
 export const $createRoom = el('createRoom');
 export const $joinRoom = el('joinRoom');
 export const $roomCode = el('roomCode');

public/js/ui.js

@@ -16,7 +16,6 @@ import {
   $room,
   $roomCode,
   $roomId,
-  $setNameLobby,
   $slotSelect,
   $startGame,
   $leaveRoom,
@@ -31,13 +30,61 @@ import { showToast, wire } from './utils.js';
 export function wireUi() {
   initAudioUI();
 
-  wire($setNameLobby, 'click', () => {
-    const name = $nameLobby.value.trim();
+  // --- Name autosave helpers
+  let nameDebounce;
+  const SAVE_DEBOUNCE_MS = 800;
+  // Button was removed; no state management needed.
+
+  function saveNameIfChanged(raw) {
+    const name = (raw || '').trim();
     if (!name) return;
-    localStorage.setItem('playerName', name);
-    if ($nameDisplay) $nameDisplay.textContent = name;
-    sendMsg({ type: 'set_name', name });
-  });
+    try {
+      const prev = localStorage.getItem('playerName') || '';
+      if (prev === name) return; // no-op
+      localStorage.setItem('playerName', name);
+      if ($nameDisplay) $nameDisplay.textContent = name;
+      sendMsg({ type: 'set_name', name });
+      showToast('Name gespeichert!');
+    } catch {
+      // best-effort
+    }
+  }
+
+  // Button removed: autosave handles everything
+
+  // Autosave on input with debounce
+  if ($nameLobby) {
+    wire($nameLobby, 'input', () => {
+      if (nameDebounce) clearTimeout(nameDebounce);
+      const val = ($nameLobby.value || '').trim();
+      if (!val) return;
+      nameDebounce = setTimeout(() => {
+        saveNameIfChanged($nameLobby.value);
+        nameDebounce = null;
+      }, SAVE_DEBOUNCE_MS);
+    });
+    // Save immediately on blur
+    wire($nameLobby, 'blur', () => {
+      if (nameDebounce) {
+        clearTimeout(nameDebounce);
+        nameDebounce = null;
+      }
+      const val = ($nameLobby.value || '').trim();
+      if (val) saveNameIfChanged(val);
+    });
+    // Save on Enter
+    wire($nameLobby, 'keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        if (nameDebounce) {
+          clearTimeout(nameDebounce);
+          nameDebounce = null;
+        }
+        const val = ($nameLobby.value || '').trim();
+        if (val) saveNameIfChanged(val);
+      }
+    });
+  }
 
   wire($createRoom, 'click', () => sendMsg({ type: 'create_room' }));