hitstar/public/js/ui.js

import {
  $audio,
  $answerResult,
  $copyRoomCode,
  $createRoom,
  $guessArtist,
  $guessTitle,
  $joinRoom,
  $lobby,
  $nameDisplay,
  $nameLobby,
  $nextBtn,
  $pauseBtn,
  $placeBtn,
  $readyChk,
  $room,
  $roomCode,
  $roomId,
  $setNameLobby,
  $slotSelect,
  $startGame,
  $leaveRoom,
  $playBtn,
  $volumeSlider,
} from './dom.js';
import { state } from './state.js';
import { initAudioUI, stopAudioPlayback } from './audio.js';
import { sendMsg } from './ws.js';
import { showToast, wire } from './utils.js';

export function wireUi() {
  initAudioUI();

  wire($setNameLobby, 'click', () => {
    const name = $nameLobby.value.trim();
    if (!name) return;
    localStorage.setItem('playerName', name);
    if ($nameDisplay) $nameDisplay.textContent = name;
    sendMsg({ type: 'set_name', name });
  });

  wire($createRoom, 'click', () => sendMsg({ type: 'create_room' }));

  wire($joinRoom, 'click', () => {
    const code = $roomCode.value.trim();
    if (code) sendMsg({ type: 'join_room', code });
  });

  wire($leaveRoom, 'click', () => {
    sendMsg({ type: 'leave_room' });
    try {
      localStorage.removeItem('playerId');
      localStorage.removeItem('sessionId');
      localStorage.removeItem('dashboardHintSeen');
      localStorage.removeItem('lastRoomId');
    } catch {}
    stopAudioPlayback();
    state.room = null;
    if ($nameLobby) {
      try {
        const storedName = localStorage.getItem('playerName') || '';
        $nameLobby.value = storedName;
      } catch {
        $nameLobby.value = '';
      }
    }
    if ($nameDisplay) $nameDisplay.textContent = '';
    if ($readyChk) {
      try {
        $readyChk.checked = false;
      } catch {}
    }
    $lobby.classList.remove('hidden');
    $room.classList.add('hidden');
  });

  wire($startGame, 'click', () => sendMsg({ type: 'start_game' }));

  wire($readyChk, 'change', (e) => {
    const val = !!e.target.checked;
    state.pendingReady = val;
    sendMsg({ type: 'set_ready', ready: val });
  });

  wire($placeBtn, 'click', () => {
    const slot = parseInt($slotSelect.value, 10);
    sendMsg({ type: 'place_guess', slot });
  });

  wire($playBtn, 'click', () => sendMsg({ type: 'player_control', action: 'play' }));
  wire($pauseBtn, 'click', () => sendMsg({ type: 'player_control', action: 'pause' }));
  wire($nextBtn, 'click', () => sendMsg({ type: 'next_track' }));

  if ($volumeSlider && $audio) {
    try {
      $volumeSlider.value = String($audio.volume ?? 1);
    } catch {}
    $volumeSlider.addEventListener('input', () => {
      $audio.volume = parseFloat($volumeSlider.value);
    });
  }

  if ($copyRoomCode) {
    $copyRoomCode.style.display = 'inline-block';
    wire($copyRoomCode, 'click', () => {
      if (state.room?.id) {
        navigator.clipboard.writeText(state.room.id).then(() => {
          $copyRoomCode.textContent = '✔️';
          showToast('Code kopiert!');
          setTimeout(() => {
            $copyRoomCode.textContent = '📋';
          }, 1200);
        });
      }
    });
  }

  if ($roomId) {
    wire($roomId, 'click', () => {
      if (state.room?.id) {
        navigator.clipboard.writeText(state.room.id).then(() => {
          $roomId.title = 'Kopiert!';
          showToast('Code kopiert!');
          setTimeout(() => {
            $roomId.title = 'Klicken zum Kopieren';
          }, 1200);
        });
      }
    });
    $roomId.style.cursor = 'pointer';
  }

  const form = document.getElementById('answerForm');
  if (form) {
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      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';
        }
        return;
      }
      sendMsg({ type: 'submit_answer', guess: { title, artist } });
    });
  }

  // Dashboard one-time hint
  const dashboard = document.getElementById('dashboard');
  const dashboardHint = document.getElementById('dashboardHint');
  if (dashboard && dashboardHint) {
    try {
      const seen = localStorage.getItem('dashboardHintSeen');
      if (!seen) {
        dashboardHint.classList.remove('hidden');
        const hide = () => {
          dashboardHint.classList.add('hidden');
          try {
            localStorage.setItem('dashboardHintSeen', '1');
          } catch {}
          dashboard.removeEventListener('toggle', hide);
          dashboard.removeEventListener('click', hide);
        };
        dashboard.addEventListener('toggle', hide);
        dashboard.addEventListener('click', hide, { once: true });
        setTimeout(() => {
          if (!localStorage.getItem('dashboardHintSeen')) hide();
        }, 6000);
      }
    } catch {}
  }
}