feat: implement name autosave functionality and remove set name button

README.md

@@ -57,7 +57,7 @@ Dann im Browser öffnen: http://localhost:5173
 
 ## Nutzung
 
-- Namen setzen, Raum erstellen oder mit Code beitreten (Code wird angezeigt).
+- Namen eingeben (speichert automatisch), Raum erstellen oder mit Code beitreten (Code wird angezeigt).
 - Host klickt „Spiel starten“.
 - DJ klickt „Lied scannen“; der Track spielt bei allen.
 - Aktiver Spieler wählt „Vor“ oder „Nach“. Bei Erfolg wandert das Lied in seine Zeitleiste.

data/years.json

@@ -1571,8 +1571,8 @@
       "mbid": "f74ddcbf-bcf6-42fd-8557-485b047cc276"
     },
     "Rick James - Super Freak.mp3": {
-      "year": 1993,
-      "date": "1993",
+      "year": 1981,
+      "date": "1981",
       "title": "Super Freak",
       "artist": "Rick James",
       "mbid": "bb507204-50d1-4a76-9037-1f8f62da7ac5"
@@ -1641,8 +1641,8 @@
       "mbid": "71709e8c-fb6b-48c6-972a-851ecff0a60d"
     },
     "Sam Cooke - (What A) Wonderful World  (Mono).mp3": {
-      "year": null,
-      "date": null,
+      "year": 1960,
+      "date": "1960",
       "title": "(What A) Wonderful World  (Mono)",
       "artist": "Sam Cooke",
       "mbid": null

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' }));