masterElmar/hitstar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add manual save button for player name and update UI interactions
All checks were successful
Build and Push Docker Image / docker (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Elmar Kresse
2025-10-12 23:21:46 +02:00
parent 0e51e233c3
commit 6001143bbf
4 changed files with 353 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

620
data/hitster_default/years.json
View File

File diff suppressed because it is too large Load Diff

32
public/index.html
View File

@@ -51,20 +51,24 @@
<!-- Lobby Card -->
<div id="lobby"
class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm p-4 md:p-6 space-y-4">
<div class="flex flex-col sm:flex-row gap-3 sm:items-end">
<div class="flex flex-col sm:flex-row gap-3">
<label class="flex-1 text-sm font-medium text-slate-600 dark:text-slate-300">
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="saveName"
class="h-11 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium sm:mt-6">
💾 Speichern
</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">
Raum erstellen
</button>
<input id="roomCode" placeholder="Code"
class="flex-1 h-11 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3 outline-none focus:ring-2 focus:ring-indigo-500" />
class="flex-1 h-11 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3 py-2 outline-none focus:ring-2 focus:ring-indigo-500" />
<button id="joinRoom"
class="h-11 px-4 rounded-lg bg-slate-900 hover:bg-slate-700 text-white font-medium dark:bg-slate-700 dark:hover:bg-slate-600">
Beitreten
@@ -137,19 +141,25 @@
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
<div class="space-y-1">
<div class="text-slate-700 dark:text-slate-300">
Status: <span id="status" class="font-medium"></span>
<div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center sm:justify-between">
<div class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
<div class="text-slate-700 dark:text-slate-300 flex items-center gap-1.5">
<span class="text-base">⚡</span>
<span class="font-medium text-slate-500 dark:text-slate-400">Status:</span>
<span id="status" class="font-semibold text-slate-900 dark:text-slate-100"></span>
</div>
<div class="text-slate-700 dark:text-slate-300">
Am Zug: <span id="guesser" class="font-medium"></span>
<div class="text-slate-700 dark:text-slate-300 flex items-center gap-1.5">
<span class="text-base">🎯</span>
<span class="font-medium text-slate-500 dark:text-slate-400">Am Zug:</span>
<span id="guesser" class="font-semibold text-slate-900 dark:text-slate-100"></span>
</div>
<div id="playlistInfo" class="text-slate-700 dark:text-slate-300">
Playlist: <span id="currentPlaylist" class="font-medium">default</span>
<div id="playlistInfo" class="text-slate-700 dark:text-slate-300 flex items-center gap-1.5">
<span class="text-base">🎵</span>
<span class="font-medium text-slate-500 dark:text-slate-400">Playlist:</span>
<span id="currentPlaylist" class="font-semibold text-slate-900 dark:text-slate-100">default</span>
</div>
</div>
<div class="flex flex-wrap items-center gap-3 justify-start md:justify-end">
<div class="flex flex-wrap items-center gap-3 justify-start sm:justify-end">
<label class="inline-flex items-center gap-3 text-slate-700 dark:text-slate-300 select-none">
<input type="checkbox" id="readyChk" class="peer sr-only" aria-label="Bereit um zu starten" />
<span

1
public/js/dom.js
View File

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

22
public/js/ui.js
View File

@@ -21,6 +21,7 @@ import {
$leaveRoom,
$playBtn,
$volumeSlider,
$saveName,
} from './dom.js';
import { state } from './state.js';
import { initAudioUI, stopAudioPlayback } from './audio.js';
@@ -50,7 +51,26 @@ export function wireUi() {
}
}
// Button removed: autosave handles everything
// Manual save button
if ($saveName) {
wire($saveName, 'click', () => {
if (nameDebounce) {
clearTimeout(nameDebounce);
nameDebounce = null;
}
const val = ($nameLobby?.value || '').trim();
if (!val) {
showToast('⚠️ Bitte gib einen Namen ein!');
return;
}
const prev = localStorage.getItem('playerName') || '';
if (prev === val) {
showToast('✓ Name bereits gespeichert!');
return;
}
saveNameIfChanged(val);
});
}
// Autosave on input with debounce
if ($nameLobby) {