QR kód se dá přepnout na jinou adresu

Tabule dosud zbylé adresy jen vypsala, ale naskenovat se dala pouze ta
první. Teď se na ně dá kliknout: vybraná se přesune nahoru velkým písmem,
QR kód se přepne na ni a ta předchozí se objeví v seznamu, takže se dá
kroužit dokola.

Kódy jsou vykreslené všechny předem a přepíná se jen ten viditelný —
žádné doptávání serveru, žádná QR knihovna na klientovi. Aby to stránku
nenafouklo, skládá se SVG ze souvislých úseků místo jednotlivých
čtverečků; tabule se třemi adresami má 23 kB.

Otisk v data-address zahrnuje všechny adresy, ne jen tu první. Když se
změní kterákoli z nich, nabídka i QR kódy jsou k ničemu a tabule se
načte znovu.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

templates/_join.html

@@ -1,22 +1,58 @@
-{# Kudy se na počitadlo dostane telefon. Nabídneme víc cest, vybrat si může člověk. #}
-{% if primary %}
+{# Kudy se na počitadlo dostane telefon. Nabídneme víc cest, vybrat si může
+   člověk — QR kódy jsou vykreslené všechny, přepíná se jen ten viditelný. #}
+{% if choices %}
 <div class="join">
-  {{ target|qr }}
+  <div class="qr-stack">
+    {% for choice in choices %}
+    <div class="qr-slot" data-ip="{{ choice.ip }}"{% if not loop.first %} hidden{% endif %}>
+      {{ choice.url|qr }}
+    </div>
+    {% endfor %}
+  </div>
+
   <div class="address">
-    <span>Zapisuje se z telefonu</span>
-    {{ target }}
-    {% if others %}
+    <span class="what">Zapisuje se z telefonu</span>
+    <span class="url">{{ choices[0].url }}</span>
+
+    {% if choices|length > 1 %}
     <ul class="alt">
-      {% for address in others %}
-      <li>{{ address.ip }}:{{ port }} <em>{{ address.label }}</em></li>
+      {% for choice in choices %}
+      <li data-ip="{{ choice.ip }}"{% if loop.first %} hidden{% endif %}>
+        <button type="button" data-ip="{{ choice.ip }}" data-url="{{ choice.url }}"
+                aria-label="Ukázat QR kód pro {{ choice.url }}">
+          {{ choice.ip }}:{{ port }} <em>{{ choice.label }}</em>
+        </button>
+      </li>
       {% endfor %}
     </ul>
     {% endif %}
   </div>
 </div>
+
+<script>
+  // Klik na jinou adresu jen prohodí, který QR kód a který řádek je vidět.
+  // Vybraná adresa ze seznamu zmizí a ta předchozí se v něm objeví, takže
+  // se dá kroužit dokola.
+  {
+    const join = document.currentScript.previousElementSibling;
+    const shown = join.querySelector(".address .url");
+
+    for (const button of join.querySelectorAll(".alt button")) {
+      button.addEventListener("click", () => {
+        for (const slot of join.querySelectorAll(".qr-slot")) {
+          slot.hidden = slot.dataset.ip !== button.dataset.ip;
+        }
+        for (const item of join.querySelectorAll(".alt li")) {
+          item.hidden = item.dataset.ip === button.dataset.ip;
+        }
+        shown.textContent = button.dataset.url;
+      });
+    }
+  }
+</script>
 {% else %}
 <div class="join">
-  <p class="address"><span>Adresu se nepodařilo zjistit</span>
+  <p class="address"><span class="what">Adresu se nepodařilo zjistit</span>
     Spusť server s <code>DICE_HOST=&lt;adresa&gt;</code>.</p>
 </div>
 {% endif %}

templates/_panel.html

@@ -1,3 +1,3 @@
 {# Fragment pro tabuli: obě části, které se během hry mění. #}
-<div id="head" data-address="{{ primary_ip }}">{% include "_head.html" %}</div>
+<div id="head" data-address="{{ address_key }}">{% include "_head.html" %}</div>
 <div id="sheet">{% include "_sheet.html" %}</div>

templates/board.html

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