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

Refactor code structure for improved readability and maintainability
All checks were successful
Build and Push Docker Image / docker (push) Successful in 21s
Details

Browse Source
This commit is contained in:
Elmar Kresse
2025-09-04 21:53:54 +02:00
parent 80f8c4ca90
commit 8c5ca0044f
27 changed files with 3398 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
public/js/main.js
View File

@@ -1,4 +1,31 @@
import { $audio, $copyRoomCode, $leaveRoom, $nameDisplay, $nameLobby, $npArtist, $npTitle, $npYear, $pauseBtn, $placeBtn, $readyChk, $roomId, $roomCode, $slotSelect, $startGame, $volumeSlider, $playBtn, $nextBtn, $createRoom, $joinRoom, $lobby, $room, $setNameLobby, $guessTitle, $guessArtist, $answerResult } from './dom.js';
import {
$audio,
$copyRoomCode,
$leaveRoom,
$nameDisplay,
$nameLobby,
$npArtist,
$npTitle,
$npYear,
$pauseBtn,
$placeBtn,
$readyChk,
$roomId,
$roomCode,
$slotSelect,
$startGame,
$volumeSlider,
$playBtn,
$nextBtn,
$createRoom,
$joinRoom,
$lobby,
$room,
$setNameLobby,
$guessTitle,
$guessArtist,
$answerResult,
} from './dom.js';
import { state } from './state.js';
import { connectWS, sendMsg, cacheSessionId, cacheLastRoomId } from './ws.js';
import { renderRoom } from './render.js';
@@ -56,8 +83,13 @@ function handlePlayTrack(msg) {
// reset answer UI
if ($guessTitle) $guessTitle.value = '';
if ($guessArtist) $guessArtist.value = '';
if ($answerResult) { $answerResult.textContent=''; $answerResult.className='mt-1 text-sm'; }
try { $audio.preload = 'auto'; } catch {}
if ($answerResult) {
$answerResult.textContent = '';
$answerResult.className = 'mt-1 text-sm';
}
try {
$audio.preload = 'auto';
} catch {}
$audio.src = t.url;
const pf = document.getElementById('progressFill');
if (pf) {
@@ -124,10 +156,12 @@ function handleReveal(msg) {
if ($rb) {
if (result.correct) {
$rb.textContent = 'Richtig!';
$rb.className = 'inline-block rounded-md bg-emerald-600 text-white px-3 py-1 text-sm font-medium';
$rb.className =
'inline-block rounded-md bg-emerald-600 text-white px-3 py-1 text-sm font-medium';
} else {
$rb.textContent = 'Falsch!';
$rb.className = 'inline-block rounded-md bg-rose-600 text-white px-3 py-1 text-sm font-medium';
$rb.className =
'inline-block rounded-md bg-rose-600 text-white px-3 py-1 text-sm font-medium';
}
}
const $placeArea = document.getElementById('placeArea');
@@ -139,8 +173,12 @@ function handleReveal(msg) {
if (rd && track?.id) {
const coverUrl = `/cover/${encodeURIComponent(track.id)}`;
const img = new Image();
img.onload = () => { rd.src = coverUrl; };
img.onerror = () => { /* keep default logo */ };
img.onload = () => {
rd.src = coverUrl;
};
img.onerror = () => {
/* keep default logo */
};
img.src = coverUrl + `?t=${Date.now()}`; // bypass cache just in case
}
}
@@ -197,7 +235,9 @@ function onMessage(ev) {
if (msg.awarded) coin = ' +1 Token';
else if (msg.alreadyAwarded) coin = ' (bereits erhalten)';
$answerResult.textContent = `${parts.join(' · ')}${coin}`;
$answerResult.className = okBoth ? 'mt-1 text-sm text-emerald-600' : 'mt-1 text-sm text-amber-600';
$answerResult.className = okBoth
? 'mt-1 text-sm text-emerald-600'
: 'mt-1 text-sm text-amber-600';
}
}
break;
@@ -239,14 +279,26 @@ function wireUi() {
});
wire($leaveRoom, 'click', () => {
sendMsg({ type: 'leave_room' });
// Clear all local storage entries on leave
try { localStorage.clear(); } catch {}
stopAudioPlayback();
// Clear all local storage entries on leave
try {
localStorage.clear();
} catch {}
stopAudioPlayback();
state.room = null;
// Reset visible name inputs/labels
if ($nameLobby) { try { $nameLobby.value = ''; } catch {} }
if ($nameDisplay) { $nameDisplay.textContent = ''; }
if ($readyChk) { try { $readyChk.checked = false; } catch {} }
// Reset visible name inputs/labels
if ($nameLobby) {
try {
$nameLobby.value = '';
} catch {}
}
if ($nameDisplay) {
$nameDisplay.textContent = '';
}
if ($readyChk) {
try {
$readyChk.checked = false;
} catch {}
}
$lobby.classList.remove('hidden');
$room.classList.add('hidden');
});
@@ -307,7 +359,10 @@ function wireUi() {
const title = ($guessTitle?.value || '').trim();
const artist = ($guessArtist?.value || '').trim();
if (!title || !artist) {
if ($answerResult) { $answerResult.textContent = 'Bitte Titel und Künstler eingeben'; $answerResult.className = 'mt-1 text-sm text-amber-600'; }
if ($answerResult) {
$answerResult.textContent = 'Bitte Titel und Künstler eingeben';
$answerResult.className = 'mt-1 text-sm text-amber-600';
}
return;
}
sendMsg({ type: 'submit_answer', guess: { title, artist } });