hitstar/public/js/render.js

import { state } from './state.js';
import { badgeColorForYear } from '../utils/colors.js';
import {
  $answerForm,
  $answerResult,
  $dashboardList,
  $guesser,
  $lobby,
  $mediaControls,
  $nextArea,
  $np,
  $placeArea,
  $readyChk,
  $revealBanner,
  $room,
  $roomId,
  $slotSelect,
  $startGame,
  $status,
  $timeline,
} from './dom.js';

export function renderRoom(room) {
  state.room = room;
  if (!room) {
    $lobby.classList.remove('hidden');
    $room.classList.add('hidden');
    return;
  }
  try {
    localStorage.setItem('lastRoomId', room.id);
  } catch {}
  $lobby.classList.add('hidden');
  $room.classList.remove('hidden');
  $roomId.textContent = room.id;
  $status.textContent = room.state.status;
  $guesser.textContent = shortName(room.state.currentGuesser);
  // If our local playerId doesn't match any player in the snapshot, but there's
  // exactly one player, we must be that player (since only room members get updates).
  if (state.playerId && !room.players.some((p) => p.id === state.playerId)) {
    if (room.players.length === 1) {
      const sole = room.players[0];
      state.playerId = sole.id;
      try {
        localStorage.setItem('playerId', sole.id);
      } catch {}
    }
  }
  const me = room.players.find((p) => p.id === state.playerId);
  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 tokens = room.state.tokens?.[p.id] ?? 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>
          <td class="py-2 pr-3 font-semibold tabular-nums">${tokens}</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('');
  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 activePlayers = room.players.filter((p) => !p.spectator && p.connected);
  const allReady = activePlayers.length > 0 && activePlayers.every((p) => p.ready);

  const canStart = room.state.status === 'lobby' && isHost && allReady;

  if ($startGame) $startGame.classList.toggle('hidden', !canStart);

  // Update playlist display
  const $playlistSection = document.getElementById('playlistSection');
  const $playlistSelect = document.getElementById('playlistSelect');
  const $currentPlaylist = document.getElementById('currentPlaylist');
  const $playlistInfo = document.getElementById('playlistInfo');
  if ($playlistSection) {
    $playlistSection.classList.toggle('hidden', room.state.status !== 'lobby' || !isHost);
  }
  if ($playlistSelect && state.playlists && state.playlists.length > 0) {
    // Populate playlist dropdown if not already populated
    if ($playlistSelect.options.length === 1 && $playlistSelect.options[0].value === 'default') {
      $playlistSelect.innerHTML = '';
      state.playlists.forEach((playlist) => {
        const option = document.createElement('option');
        option.value = playlist.id;
        option.textContent = `${playlist.name} (${playlist.trackCount} Tracks)`;
        $playlistSelect.appendChild(option);
      });
    }
    // Set selected playlist
    $playlistSelect.value = room.state.playlist || 'default';
  }
  if ($currentPlaylist) {
    $currentPlaylist.textContent = room.state.playlist || 'default';
  }
  if ($playlistInfo) {
    $playlistInfo.classList.toggle('hidden', room.state.status === 'lobby');
  }

  const isMyTurn =
    room.state.status === 'playing' &&
    room.state.phase === 'guess' &&
    room.state.currentGuesser === state.playerId &&
    room.state.currentTrack;

  const canGuess = isMyTurn;
  // Media controls (play/pause) only for current guesser while guessing and a track is active
  if ($mediaControls) $mediaControls.classList.toggle('hidden', !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) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]
  );
}