publicquiz/templates/host.html

<!-- host.html -->
{% extends 'base.html' %}
{% block content %}
<style>
/* Right sidebar leaderboard (default during game) */
  #final-results {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100vh;
    overflow-y: auto;
    background: #fff;
    border-left: 1px solid #dee2e6;
    box-shadow: -2px 0 8px rgba(0,0,0,.06);
    padding: 1rem;
    z-index: 2000;
    display: none; /* shown by JS */
    transition: all .25s ease;
  }

  /* Shift the page when the sidebar is visible */
  body.with-sidebar { margin-right: 400px; }

  /* NEW: centered leaderboard style for end of game */
  #final-results.centerboard {
    position: fixed;               /* take it out of the flow */
    top: 64px;                     /* nice breathing space from top */
    left: 50%;
    transform: translateX(-50%);   /* perfect horizontal centering */
    right: auto;                   /* cancel sidebar positioning */
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 128px);
    overflow: auto;
    margin: 0;                     /* override .mt-4 from markup */
    border: 1px solid #dee2e6;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    z-index: 2050;                 /* above page content, below controls-bar (2100) */
  }

  /* Make large questions adapt responsively */
  #qText {
    font-size: 5rem;
    line-height: 1.1;
    word-break: break-word;
  }
  @media (max-width: 992px) { #qText { font-size: 3rem; } }
  @media (max-width: 576px) {
    #final-results { width: 320px; }
    body.with-sidebar { margin-right: 340px; }
    #qText { font-size: 2.5rem; }
  }

  /* Sticky controls bar shown during the game */
  .controls-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #dee2e6;
    padding: .75rem 1rem;
    z-index: 2100;
  }
  /* Leave room for the sidebar while in-game */
  body.with-sidebar .controls-bar { right: 400px; }

  /* Prevent content being covered by the controls bar */
  #host-question { padding-bottom: 88px; } /* ~bar height + breathing room */

</style>

<h1 class="mb-4">Public Quiz</h1>

<div class="container" id="host-app">
  <!-- QR & Join Roster -->
  <div id="qrContainer" class="mb-4 text-center">
    <img
      id="qrImg"
      src="data:image/png;base64,{{ qr_data }}"
      class="img-fluid"
      style="max-width:300px;"
    />
    <p class="mt-2">Scanne den QR-Code, um dem Spiel beizutreten!</p>
  </div>

  <!-- new-game form -->
  <form id="newGameForm" action="{{ url_for('new_game') }}" method="post" class="d-inline">
    <button type="submit" class="btn btn-secondary mb-3" id="newGameButton">
      Spiel neu starten
    </button>
  </form>

  <button id="startBtn" class="btn btn-primary mb-3" disabled>Spiel beginnen</button>
  <h3 id="rosterHeader">Spieler Beigetreten:</h3>
  <ul id="roster" class="list-group mb-4"></ul>

  <!-- Question & Answer Area -->
  <div id="host-question" style="display:none;">
    <h2 id="qText"></h2>
    <div id="host-results" style="display:none; margin:20px;">
      <ul id="perQ" class="list-group mb-3 text-center"></ul>
    </div>
    <div id="controlsBar" class="controls-bar" style="display:none;">
      <div class="d-flex gap-2 justify-content-center align-items-center flex-wrap">
        <button id="showAnswerBtn" class="btn btn-info">Antwort zeigen</button>
        <button id="nextBtn" class="btn btn-warning" disabled>Nächste Frage</button>
      </div>
    </div>
  </div>

  <!-- Right Sidebar Leaderboard (used during game + final) -->
  <aside id="final-results" class="mt-4">
    <h4 id="finalResultsTitle" class="mb-3">Rangliste</h4>
    <table class="table table-striped mb-0">
      <thead>
        <tr><th>Rang</th><th>Name</th><th>Punkte</th></tr>
      </thead>
      <tbody id="finalResultsBody"></tbody>
    </table>
  </aside>
</div>

<script>
  const socket = io();

  /* ------------------ Persistence (no backend change) ------------------ */
  const LS_KEY = 'leaderboardState'; // { title: string, board: array, ts: number }

  /* Timers */
  let answerTimer = null;           // existing auto-reveal timeout
  let countdownInterval = null;     // visible countdown updater
  let countdownDeadline = 0;

  function saveLeaderboardToStorage(title, board) {
    try {
      const payload = { title: title || 'Rangliste', board: board || [], ts: Date.now() };
      localStorage.setItem(LS_KEY, JSON.stringify(payload));
    } catch (e) {
      console.warn('Could not save leaderboard:', e);
    }
  }

  function loadLeaderboardFromStorage() {
    try {
      const raw = localStorage.getItem(LS_KEY);
      if (!raw) return null;
      const data = JSON.parse(raw);
      if (!data || !Array.isArray(data.board)) return null;
      return data;
    } catch (e) {
      console.warn('Could not parse leaderboard:', e);
      return null;
    }
  }

  function clearLeaderboardStorage() {
    try { localStorage.removeItem(LS_KEY); } catch(e) {}
  }

  /* ------------------ UI Helpers ------------------ */
  function showSidebar(titleText = 'Rangliste') {
    document.body.classList.add('with-sidebar');
    const panel = document.getElementById('final-results');
    panel.classList.remove('centerboard');
    $('#finalResultsTitle').text(titleText);
    $('#final-results').show();
  }

  function hideSidebar() {
    document.body.classList.remove('with-sidebar');
    $('#final-results').hide();
  }

  function renderLeaderboard(board = [], limit = 10) {
    const rows = (board || []).slice(0, limit);
    const $tbody = $('#finalResultsBody');
    $tbody.empty();
    rows.forEach((p, i) => {
      $tbody.append(
        `<tr><td>${i + 1}</td><td>${p.name}</td><td>${Number(p.score).toFixed(1)}</td></tr>`
      );
    });
  }

  function renderAndShow(title, board) {
    renderLeaderboard(board, 10);
    showSidebar(title);
  }

  /* ------------------ COUNTDOWN-IN-ANSWER helpers ------------------ */
  function showCountdownInAnswer(msTotal = 20000) {
    stopCountdownInAnswer(); // clean slate

    countdownDeadline = Date.now() + msTotal;

    // Put a single LI into #perQ and show the host-results box
    $('#perQ')
      .empty()
      .append(
        `<li id="countdownItem"
             class="list-group-item list-group-item-light"
             style="font-size:2.5rem;">
            <strong><span id="countdownValue">${(msTotal/1000).toFixed(1)}</span>s</strong>
         </li>`
      );
    $('#host-results').show();

    // Update every 100ms
    countdownInterval = setInterval(() => {
      const remainingMs = Math.max(0, countdownDeadline - Date.now());
      const seconds = (remainingMs / 1000).toFixed(1);
      $('#countdownValue').text(seconds);
      if (remainingMs <= 0) {
        stopCountdownInAnswer();
      }
    }, 100);
  }

  function stopCountdownInAnswer() {
    if (countdownInterval) { clearInterval(countdownInterval); countdownInterval = null; }
  }

  function replaceCountdownWithAnswer(text) {
    // Swap the LI content & styling to the “answer revealed” state
    $('#countdownItem')
      .removeClass('list-group-item-light')
      .addClass('list-group-item-success')
      .css('font-size', '2.5rem')
      .html(`${text}`);
  }

  /* ------------------ Restore from storage on load ------------------ */
  (function restoreFromStorageOnLoad() {
    const stored = loadLeaderboardFromStorage();
    if (stored && stored.board.length) {
      if ((stored.title || '').toLowerCase().includes('final')) {
        showCenteredBoard(stored.title, stored.board);
      } else {
        renderAndShow(stored.title || 'Rangliste', stored.board);
      }
    } else {
      hideSidebar();
    }
  })();

  /* Clear storage when starting a totally new game (so an old board isn't shown) */
  document.getElementById('newGameForm')?.addEventListener('submit', () => {
    clearLeaderboardStorage();
  });

  /* ------------------ Socket Wiring ------------------ */

  // On connect, just fetch roster (no backend change required)
  socket.on('connect', () => {
    console.log('Connected as host');
    socket.emit('get_roster');
  });

  // Update roster when players join
  socket.on('update_roster', data => {
    console.log('Roster update:', data.players);
    $('#roster').empty();
    (data.players || []).forEach(name => {
      $('#roster').append(`<li class="list-group-item">${name}</li>`);
    });
    $('#startBtn').prop('disabled', (data.players || []).length === 0);
  });

  // Start game
  $('#startBtn').on('click', () => {
    console.log('Start game clicked');
    $('#newGameButton').hide();
    showSidebar('Rangliste');
    socket.emit('start_game');
  });

  // Handle new question
  socket.on('new_question', data => {
    console.log('New question:', data.question);
    $('#qrContainer, #startBtn, #rosterHeader, #roster').hide();
    $('#host-question').show();
    $('#qText').text(data.question || '');
    $('#host-results').hide();
    $('#perQ').empty();
    $('#showAnswerBtn').prop({ disabled: false }).show();
    $('#nextBtn').prop('disabled', true);
    $('#controlsBar').show();

    // Keep the sidebar visible during the game
    showSidebar('Rangliste');

    // Auto-reveal after 20s
    if (answerTimer) clearTimeout(answerTimer);
    answerTimer = setTimeout(() => {
      if (!$('#showAnswerBtn').prop('disabled')) {
        $('#showAnswerBtn').trigger('click');
      }
    }, 20000);

    // === Show countdown inside the answer area ===
    showCountdownInAnswer(20000);
  });

  // Live overall leaderboard updates -> fill the right sidebar (top 10)
  socket.on('overall_leader', data => {
    console.log('Overall leader:', data.board);
    const board = (data && Array.isArray(data.board)) ? data.board : [];
    renderAndShow('Rangliste', board);
    saveLeaderboardToStorage('Rangliste', board);
  });

  // Next question
  $('#nextBtn').off('click').on('click', () => {
    console.log('Next question clicked');
    if (answerTimer) { clearTimeout(answerTimer); answerTimer = null; }
    stopCountdownInAnswer();
    socket.emit('next_question');
  });

  // when host clicks “Show Answer”
  $('#showAnswerBtn').off('click').on('click', () => {
    if (answerTimer) { clearTimeout(answerTimer); answerTimer = null; }
    stopCountdownInAnswer();
    socket.emit('show_answer');
  });

  // once server confirms the answer is revealed
  socket.on('answer_revealed', data => {
    // Ensure the field is visible and swap countdown → answer
    $('#host-results').show();
    replaceCountdownWithAnswer(`${data.correct}`);

    $('#showAnswerBtn').prop('disabled', true);
    $('#nextBtn').prop('disabled', false);

    if (answerTimer) { clearTimeout(answerTimer); answerTimer = null; }
    stopCountdownInAnswer();
  });

  // Final results (use the same sidebar, change the title)
  socket.on('game_over', data => {
    $('#controlsBar').hide();
    if (answerTimer) { clearTimeout(answerTimer); answerTimer = null; }
    stopCountdownInAnswer();

    if (data && Array.isArray(data.board)) {
      console.log('Game over');
      $('#qrContainer, #startBtn, #rosterHeader, #roster, #host-question, #host-results').hide();
      $('#newGameButton').show();
      showCenteredBoard('Finale Rangliste', data.board);
      $('#startBtn').prop('disabled', true);
      saveLeaderboardToStorage('Finale Rangliste', data.board);
    }
  });

  function showCenteredBoard(title, board) {
    renderLeaderboard(board, 10);
    $('#finalResultsTitle').text(title);
    document.body.classList.remove('with-sidebar');
    const panel = document.getElementById('final-results');
    panel.classList.add('centerboard');
    panel.style.display = 'block';
    $('#final-results').show();
  }

  /* ------------------ Initial UI state for lobby ------------------ */
  $('#host-question').hide();
</script>
{% endblock %}