{% extends "base.html" %}
{% block title %}Zápisník — hra {{ game_id }}{% endblock %}

{% block body %}
<div class="board">
  <header class="masthead">
    <div id="head" data-address="{{ address_key }}">{% include "_head.html" %}</div>
    {% include "_join.html" %}
  </header>

  <div id="sheet">{% include "_sheet.html" %}</div>
</div>

<script>
  // Tabule se doptává serveru; není co udržovat na klientovi.
  const url = "{{ url_for('board_panel', game_id=game_id) }}";

  setInterval(async () => {
    try {
      const response = await fetch(url, { cache: "no-store" });
      if (!response.ok) return;

      const fresh = new DOMParser().parseFromString(await response.text(), "text/html");

      // Notebook se přesunul na jinou síť — adresa v QR kódu už neplatí.
      const head = fresh.getElementById("head");
      if (head && head.dataset.address !== document.getElementById("head").dataset.address) {
        location.reload();
        return;
      }

      for (const id of ["head", "sheet"]) {
        const updated = fresh.getElementById(id);
        if (updated) document.getElementById(id).replaceWith(updated);
      }
    } catch (error) {
      // Server je pryč — zkusíme to za dvě vteřiny znovu.
    }
  }, 2000);
</script>
{% endblock %}