103 lines
5.6 KiB
JavaScript
103 lines
5.6 KiB
JavaScript
import { state } from './state.js';
|
|
import { badgeColorForYear } from '../utils/colors.js';
|
|
import { $answerForm, $answerResult, $dashboardList, $guesser, $lobby, $nameDisplay, $nextArea, $np, $placeArea, $readyChk, $revealBanner, $room, $roomId, $slotSelect, $startGame, $status, $timeline, $tokens } from './dom.js';
|
|
|
|
export function renderRoom(room) {
|
|
state.room = room; if (!room) { $lobby.classList.remove('hidden'); $room.classList.add('hidden'); return; }
|
|
$lobby.classList.add('hidden'); $room.classList.remove('hidden');
|
|
$roomId.textContent = room.id;
|
|
$status.textContent = room.state.status;
|
|
$guesser.textContent = shortName(room.state.currentGuesser);
|
|
const me = room.players.find(p=>p.id===state.playerId);
|
|
if ($nameDisplay) $nameDisplay.textContent = (me?.name || localStorage.getItem('playerName') || '-');
|
|
if ($dashboardList) {
|
|
$dashboardList.innerHTML = room.players.map(p => {
|
|
const connected = p.connected ? '<span class="text-emerald-600">online</span>' : '<span class="text-rose-600">offline</span>';
|
|
const ready = p.ready ? '<span class="text-emerald-600">bereit</span>' : '<span class="text-slate-400">-</span>';
|
|
const score = (room.state.timeline?.[p.id]?.length) ?? 0;
|
|
const isMe = p.id === state.playerId;
|
|
return `
|
|
<tr class="align-top">
|
|
<td class="py-2 pr-3">
|
|
<div class="inline-flex items-center gap-1">
|
|
<span>${escapeHtml(p.name)}</span>${p.spectator ? ' <span title="Zuschauer">👻</span>' : ''}
|
|
${p.id===room.hostId ? '<span title="Host" class="text-amber-600">\u2B50</span>' : ''}
|
|
${isMe ? '<span title="Du" class="text-indigo-600">(du)</span>' : ''}
|
|
</div>
|
|
</td>
|
|
<td class="py-2 pr-3">${connected}</td>
|
|
<td class="py-2 pr-3">${ready}</td>
|
|
<td class="py-2 pr-3 font-semibold tabular-nums">${score}</td>
|
|
</tr>`;
|
|
}).join('');
|
|
}
|
|
const myTl = room.state.timeline?.[state.playerId] || [];
|
|
$timeline.innerHTML = myTl.map(t => {
|
|
const title = escapeHtml(t.title || t.trackId || 'Unbekannt');
|
|
const artist = t.artist ? escapeHtml(t.artist) : '';
|
|
const year = (t.year ?? '?');
|
|
const badgeStyle = badgeColorForYear(year);
|
|
return `
|
|
<div class="flex items-center gap-2 border border-slate-200 dark:border-slate-800 rounded-lg px-3 py-2 bg-white text-slate-900 dark:bg-slate-800 dark:text-slate-100 shadow-sm" title="${title}${artist? ' — '+artist : ''} (${year})">
|
|
<div class="font-bold tabular-nums text-white rounded-md px-2 py-0.5 min-w-[3ch] text-center" style="${badgeStyle}">${year}</div>
|
|
<div class="leading-tight">
|
|
<div class="font-semibold">${title}</div>
|
|
<div class="text-sm text-slate-600 dark:text-slate-300">${artist}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
$tokens.textContent = room.state.tokens?.[state.playerId] ?? 0;
|
|
if ($readyChk) {
|
|
const serverReady = !!me?.ready;
|
|
if (state.pendingReady === null || state.pendingReady === undefined) { $readyChk.checked = serverReady; }
|
|
else { $readyChk.checked = !!state.pendingReady; if (serverReady === state.pendingReady) state.pendingReady = null; }
|
|
$readyChk.parentElement.classList.toggle('hidden', room.state.status !== 'lobby');
|
|
}
|
|
const isHost = state.playerId === room.hostId;
|
|
const allReady = room.players.length>0 && room.players.every(p=>p.ready);
|
|
if ($startGame) $startGame.classList.toggle('hidden', !(isHost && room.state.status==='lobby' && allReady));
|
|
const isMyTurn = room.state.status==='playing' && room.state.phase==='guess' && room.state.currentGuesser===state.playerId && room.state.currentTrack;
|
|
const canGuess = isMyTurn;
|
|
// Build slot options for insertion positions when it's my turn
|
|
if ($placeArea && $slotSelect) {
|
|
if (canGuess) {
|
|
const tl = room.state.timeline?.[state.playerId] || [];
|
|
$slotSelect.innerHTML = '';
|
|
for (let i = 0; i <= tl.length; i++) {
|
|
const left = i > 0 ? (tl[i - 1]?.year ?? '?') : null;
|
|
const right = i < tl.length ? (tl[i]?.year ?? '?') : null;
|
|
let label = '';
|
|
if (tl.length === 0) label = 'Einsetzen';
|
|
else if (i === 0) label = `Vor (${right})`;
|
|
else if (i === tl.length) label = `Nach (${left})`;
|
|
else label = `Zwischen (${left} / ${right})`;
|
|
const opt = document.createElement('option');
|
|
opt.value = String(i);
|
|
opt.textContent = label;
|
|
$slotSelect.appendChild(opt);
|
|
}
|
|
} else {
|
|
// Clear options when not guessing
|
|
$slotSelect.innerHTML = '';
|
|
}
|
|
$placeArea.classList.toggle('hidden', !canGuess);
|
|
}
|
|
$np.classList.toggle('hidden', !room.state.currentTrack);
|
|
if ($revealBanner) { const inReveal = room.state.phase === 'reveal'; if (!inReveal) { $revealBanner.className = 'hidden'; $revealBanner.textContent=''; } }
|
|
const canNext = room.state.status==='playing' && room.state.phase==='reveal' && (isHost || room.state.currentGuesser===state.playerId);
|
|
if ($nextArea) $nextArea.classList.toggle('hidden', !canNext);
|
|
// Answer form visible during guess phase while a track is active
|
|
const showAnswer = room.state.status==='playing' && room.state.phase==='guess' && !!room.state.currentTrack;
|
|
if ($answerForm) $answerForm.classList.toggle('hidden', !showAnswer);
|
|
if ($answerResult && !showAnswer) { $answerResult.textContent=''; $answerResult.className='mt-1 text-sm'; }
|
|
}
|
|
|
|
export function shortName(id) {
|
|
if (!id) return '-';
|
|
const p = state.room?.players.find(x=>x.id===id);
|
|
return p ? p.name : id.slice(0,4);
|
|
}
|
|
|
|
export function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); }
|