Flask, server-rendered HTML, formuláře přes POST/redirect/GET. Žádný build step, žádný JS framework. - / zakládá hru výběrem známých hráčů v pořadí u stolu - /game/<id> je zadávací pohled: kdo je na tahu, skóre, x/xx, průběžné pořadí, vrácení posledního zápisu - /board/<id> je zápisník po kolech; tahy před vynulováním se škrtnou červeně, sloupec hráče na tahu drží zvýrazňovač - tabule se doptává serveru každé dvě vteřiny a vyměňuje jen hlavičku a zápisník, QR s adresou zůstává mimo obnovovanou část - adresa pro telefon se hledá za běhu, QR se skládá ze čtverečků přímo do SVG, takže není potřeba Pillow - 16 funkčních testů přes Flask test client Vizuálně to stojí na tom, co appka nahrazuje: čtverečkovaný papír, modrá propiska zapisuje, červená škrtá, zvýrazňovač drží tah. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
38 lines
1.1 KiB
HTML
38 lines
1.1 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Zápisník — hra {{ game_id }}{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="board">
|
|
<header class="masthead">
|
|
<div id="head">{% include "_head.html" %}</div>
|
|
<div class="join">
|
|
{{ qr }}
|
|
<p class="address"><span>Zapisuje se z telefonu</span>{{ address }}</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="sheet">{% include "_sheet.html" %}</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Tabule se doptává serveru; není co udržovat na klientovi.
|
|
// QR kód a adresa se needitují, takže zůstávají mimo obnovovanou část.
|
|
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");
|
|
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 %}
|