Webové počitadlo na LAN s historií her #2
No files matched your search
@@ -0,0 +1,421 @@
|
||||
/* Počitadlo v kostkách.
|
||||
Vizuálně stojí na tom, co nahrazuje: čtverečkovaný papír a dvě propisky —
|
||||
modrá zapisuje, červená škrtá. Zvýrazňovač ukazuje, kdo je na tahu. */
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
|
||||
--paper: #FBFAF6;
|
||||
--grid: rgba(27, 59, 111, 0.06);
|
||||
--rule: #C3D0E2;
|
||||
--ink: #1B3B6F;
|
||||
--ink-soft: #6C7C9B;
|
||||
--red: #CB2B25;
|
||||
--marker: #FFE7A0;
|
||||
|
||||
--font-voice: Georgia, "Times New Roman", serif;
|
||||
--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-num: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
|
||||
|
||||
--step: 1.5rem;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: var(--step);
|
||||
min-height: 100vh;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-ui);
|
||||
background-color: var(--paper);
|
||||
background-image:
|
||||
linear-gradient(var(--grid) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
a { color: var(--ink); }
|
||||
|
||||
/* --- hlavička ------------------------------------------------------------ */
|
||||
|
||||
.masthead {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: var(--step);
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 2px solid var(--ink);
|
||||
padding-bottom: 0.6rem;
|
||||
margin-bottom: var(--step);
|
||||
}
|
||||
|
||||
.masthead h1 {
|
||||
font-family: var(--font-voice);
|
||||
font-size: clamp(1.6rem, 4vw, 2.4rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
margin: 0 0 0.2rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-family: var(--font-num);
|
||||
font-size: 0.85rem;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
/* --- zápisník ------------------------------------------------------------ */
|
||||
|
||||
.sheet-wrap { overflow-x: auto; }
|
||||
|
||||
.sheet {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
font-family: var(--font-num);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.sheet th,
|
||||
.sheet td {
|
||||
border: 1px solid var(--rule);
|
||||
padding: 0.7rem 1.2rem;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sheet thead th {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: var(--ink-soft);
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-color: var(--ink);
|
||||
}
|
||||
|
||||
.sheet .label {
|
||||
text-align: left;
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.85rem;
|
||||
width: 1%; /* sloupec s číslem kola se smrskne na obsah */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sheet tbody td { font-size: 1.5rem; }
|
||||
|
||||
.sheet .empty { color: var(--rule); }
|
||||
|
||||
/* Zvýrazňovač na sloupci hráče, který je na tahu. Nerovnoměrný, jako tah fixem. */
|
||||
.marked {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 231, 160, 0.35) 0%,
|
||||
rgba(255, 231, 160, 0.9) 18%,
|
||||
rgba(255, 231, 160, 0.75) 82%,
|
||||
rgba(255, 231, 160, 0.3) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Škrtnuté zápisy před vynulováním. */
|
||||
.struck {
|
||||
color: var(--ink-soft);
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: var(--red);
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
.wiped { color: var(--red); }
|
||||
|
||||
.wiped small {
|
||||
display: block;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sheet tfoot td {
|
||||
border-top: 2px solid var(--ink);
|
||||
font-size: 2.1rem;
|
||||
font-weight: 700;
|
||||
padding-top: 0.7rem;
|
||||
}
|
||||
|
||||
.sheet tfoot .label { font-weight: 400; }
|
||||
|
||||
/* --- nuly za sebou ------------------------------------------------------- */
|
||||
|
||||
.ticks {
|
||||
color: var(--red);
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--red);
|
||||
font-size: 0.85rem;
|
||||
margin: 0.6rem 0 0;
|
||||
}
|
||||
|
||||
/* --- zadávací pohled ----------------------------------------------------- */
|
||||
|
||||
.phone { max-width: 30rem; margin: 0 auto; }
|
||||
|
||||
.turn {
|
||||
border: 2px solid var(--ink);
|
||||
background: var(--paper);
|
||||
padding: 1.2rem;
|
||||
margin-bottom: var(--step);
|
||||
}
|
||||
|
||||
.turn h2 {
|
||||
font-family: var(--font-voice);
|
||||
font-size: clamp(2rem, 9vw, 3rem);
|
||||
font-weight: 400;
|
||||
margin: 0.1rem 0 0.4rem;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.progress {
|
||||
font-family: var(--font-num);
|
||||
font-size: 1.1rem;
|
||||
color: var(--ink-soft);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.progress strong { color: var(--ink); font-size: 1.35rem; }
|
||||
|
||||
input[type="number"] {
|
||||
width: 100%;
|
||||
font-family: var(--font-num);
|
||||
font-size: 1.6rem;
|
||||
padding: 0.7rem 0.8rem;
|
||||
color: var(--ink);
|
||||
background: transparent;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 1.1rem;
|
||||
padding: 0.7rem 0.8rem;
|
||||
color: var(--ink);
|
||||
background: transparent;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input:focus-visible,
|
||||
button:focus-visible,
|
||||
a:focus-visible {
|
||||
outline: 3px solid var(--red);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.field { margin-bottom: 0.8rem; }
|
||||
|
||||
.field label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 0.9rem;
|
||||
border: 2px solid var(--ink);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.btn:hover { background: #16305c; }
|
||||
|
||||
.btn-quiet {
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--rule);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn-quiet:hover { border-color: var(--ink); }
|
||||
|
||||
.btn-danger { color: var(--red); border-color: var(--red); }
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
margin-top: var(--step);
|
||||
}
|
||||
|
||||
.actions form { flex: 1; }
|
||||
.actions button { width: 100%; padding: 0.75rem 0.5rem; }
|
||||
|
||||
.standings {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-family: var(--font-num);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.standings td { padding: 0.45rem 0; border-bottom: 1px solid var(--rule); }
|
||||
.standings td:last-child { text-align: right; font-weight: 600; }
|
||||
.standings .rank { color: var(--ink-soft); width: 2.5rem; }
|
||||
.standings .self { font-family: var(--font-ui); }
|
||||
|
||||
.error {
|
||||
border-left: 3px solid var(--red);
|
||||
color: var(--red);
|
||||
padding: 0.5rem 0.8rem;
|
||||
margin-bottom: var(--step);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* --- výběr hráčů --------------------------------------------------------- */
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.chip {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 1rem;
|
||||
padding: 0.7rem 1rem;
|
||||
border: 1px solid var(--rule);
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.chip[aria-pressed="true"] {
|
||||
border-color: var(--ink);
|
||||
background: var(--marker);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chip .seat {
|
||||
font-family: var(--font-num);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.chip[aria-pressed="true"] .seat { color: var(--ink); }
|
||||
|
||||
.hint {
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.85rem;
|
||||
margin: 0 0 var(--step);
|
||||
}
|
||||
|
||||
.add-player { display: flex; gap: 0.5rem; }
|
||||
.add-player input { flex: 1; }
|
||||
.add-player button { padding: 0 1rem; border: 1px solid var(--ink); background: transparent; }
|
||||
|
||||
.notice {
|
||||
border: 1px solid var(--rule);
|
||||
border-left: 3px solid var(--ink);
|
||||
padding: 0.8rem 1rem;
|
||||
margin-bottom: var(--step);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* --- tabule -------------------------------------------------------------- */
|
||||
|
||||
.board { max-width: 64rem; margin: 0 auto; }
|
||||
|
||||
.join {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.join .address {
|
||||
font-family: var(--font-num);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.join .address span {
|
||||
display: block;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.qr { width: 5.5rem; height: 5.5rem; fill: var(--ink); }
|
||||
|
||||
.idle {
|
||||
text-align: center;
|
||||
padding-top: 12vh;
|
||||
}
|
||||
|
||||
.idle .join { justify-content: center; margin-top: var(--step); }
|
||||
.idle .qr { width: 9rem; height: 9rem; }
|
||||
|
||||
/* --- vyhlášení ----------------------------------------------------------- */
|
||||
|
||||
.win {
|
||||
border: 2px solid var(--ink);
|
||||
padding: 1.4rem var(--step);
|
||||
margin-bottom: var(--step);
|
||||
background: var(--marker);
|
||||
}
|
||||
|
||||
.win h2 {
|
||||
font-family: var(--font-voice);
|
||||
font-size: clamp(1.8rem, 5vw, 3rem);
|
||||
font-weight: 400;
|
||||
margin: 0.2rem 0 0.4rem;
|
||||
}
|
||||
|
||||
.win p { margin: 0; color: var(--ink-soft); }
|
||||
|
||||
/* --- odkazy dole --------------------------------------------------------- */
|
||||
|
||||
.footer {
|
||||
margin-top: calc(var(--step) * 2);
|
||||
padding-top: 0.8rem;
|
||||
border-top: 1px solid var(--rule);
|
||||
font-size: 0.85rem;
|
||||
color: var(--ink-soft);
|
||||
display: flex;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { transition: none !important; animation: none !important; }
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<p class="eyebrow">Zápisník · hra {{ game_id }}</p>
|
||||
<h1>{% if winner %}Konec hry{% else %}Na tahu {{ current }}{% endif %}</h1>
|
||||
<p class="meta">do {{ game.final_score|cislo }} bodů · kolo {{ game.round_number }}</p>
|
||||
@@ -0,0 +1,3 @@
|
||||
{# Fragment pro tabuli: obě části, které se během hry mění. #}
|
||||
<div id="head">{% include "_head.html" %}</div>
|
||||
<div id="sheet">{% include "_sheet.html" %}</div>
|
||||
@@ -0,0 +1,57 @@
|
||||
{% if winner %}
|
||||
<div class="win">
|
||||
<p class="eyebrow">Konec hry</p>
|
||||
<h2>{{ winner }}</h2>
|
||||
<p>Vyhrává s {{ totals[winner]|cislo }} body z cílových {{ game.final_score|cislo }}.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="sheet-wrap">
|
||||
<table class="sheet">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="label">Kolo</th>
|
||||
{% for name in game.names %}
|
||||
<th class="{{ 'marked' if name == current }}">{{ name }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in rows %}
|
||||
<tr>
|
||||
<td class="label">{{ row.round }}</td>
|
||||
{% for cell in row.cells %}
|
||||
<td class="{{ 'marked' if game.names[loop.index0] == current }}
|
||||
{{ 'struck' if cell.struck }} {{ 'wiped' if cell.reset }}">
|
||||
{%- if cell.value is none -%}
|
||||
<span class="empty">·</span>
|
||||
{%- elif cell.reset -%}
|
||||
0<small>vynulováno</small>
|
||||
{%- else -%}
|
||||
{{ cell.value|cislo }}
|
||||
{%- endif -%}
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td class="label">1</td>
|
||||
{% for name in game.names %}
|
||||
<td class="{{ 'marked' if name == current }}"><span class="empty">·</span></td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td class="label">Celkem</td>
|
||||
{% for name in game.names %}
|
||||
<td class="{{ 'marked' if name == current }}">
|
||||
{{ totals[name]|cislo }}
|
||||
{%- if streaks[name] %} <span class="ticks">{{ '✕' * streaks[name] }}</span>{% endif %}
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="cs">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}Kostky{% endblock %}</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
{% block body %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
{% 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 %}
|
||||
@@ -0,0 +1,14 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Zápisník{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="board idle">
|
||||
<p class="eyebrow">Zápisník</p>
|
||||
<h1>Zatím se nehraje</h1>
|
||||
<p class="hint">Naskenuj kód telefonem a založ hru.</p>
|
||||
<div class="join">
|
||||
{{ qr }}
|
||||
<p class="address"><span>Adresa počitadla</span>{{ address }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,78 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{% if winner %}Konec hry{% else %}Na tahu {{ game.current_player }}{% endif %}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="phone">
|
||||
<header class="masthead">
|
||||
<div>
|
||||
<p class="eyebrow">Hra {{ game_id }}</p>
|
||||
<h1>Kostky</h1>
|
||||
</div>
|
||||
<p class="meta">do {{ game.final_score|cislo }} · kolo {{ game.round_number }}</p>
|
||||
</header>
|
||||
|
||||
{% if chyba %}
|
||||
<p class="error">{{ chyba }}</p>
|
||||
{% endif %}
|
||||
|
||||
{% if winner %}
|
||||
<div class="win">
|
||||
<p class="eyebrow">Konec hry</p>
|
||||
<h2>{{ winner }}</h2>
|
||||
<p>Vyhrává s {{ totals[winner]|cislo }} body z cílových {{ game.final_score|cislo }}.</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="turn">
|
||||
<p class="eyebrow">Na tahu</p>
|
||||
<h2>{{ game.current_player }}</h2>
|
||||
<p class="progress">
|
||||
<strong>{{ totals[game.current_player]|cislo }}</strong> / {{ game.final_score|cislo }}
|
||||
{%- if streaks[game.current_player] %}
|
||||
<span class="ticks">{{ '✕' * streaks[game.current_player] }}</span>
|
||||
{%- endif %}
|
||||
</p>
|
||||
{% if streaks[game.current_player] == 2 %}
|
||||
<p class="warning">Ještě jedna nula a skóre jde pryč.</p>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="{{ url_for('add_turn', game_id=game_id) }}" style="margin-top: 1.2rem">
|
||||
<div class="field">
|
||||
<label for="value">Skóre za tah</label>
|
||||
<input type="number" name="value" id="value" inputmode="numeric" autofocus required>
|
||||
</div>
|
||||
<button class="btn" type="submit">Zapsat</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<p class="eyebrow">Průběžné pořadí</p>
|
||||
<table class="standings">
|
||||
{% for rank, name, total in standings %}
|
||||
<tr>
|
||||
<td class="rank">{{ rank }}.</td>
|
||||
<td class="self">{{ name }}</td>
|
||||
<td>
|
||||
{{ total|cislo }}
|
||||
{%- if streaks[name] %} <span class="ticks">{{ '✕' * streaks[name] }}</span>{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
|
||||
<div class="actions">
|
||||
<form method="post" action="{{ url_for('undo', game_id=game_id) }}">
|
||||
<button class="btn-quiet" type="submit" {{ 'disabled' if not game.turns }}>Vrátit poslední zápis</button>
|
||||
</form>
|
||||
{% if not winner %}
|
||||
<form method="post" action="{{ url_for('abandon', game_id=game_id) }}">
|
||||
<button class="btn-quiet btn-danger" type="submit">Ukončit hru</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<p class="footer">
|
||||
<a href="{{ url_for('board', game_id=game_id) }}">Zápisník</a>
|
||||
<a href="{{ url_for('index') }}">Nová hra</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,109 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Nová hra{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="phone">
|
||||
<header class="masthead">
|
||||
<div>
|
||||
<p class="eyebrow">Počitadlo</p>
|
||||
<h1>Kostky</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if request.args.get('chyba') %}
|
||||
<p class="error">{{ request.args.get('chyba') }}</p>
|
||||
{% endif %}
|
||||
|
||||
{% if running %}
|
||||
<div class="notice">
|
||||
<span>Rozehraná hra {{ running }} čeká.</span>
|
||||
<a href="{{ url_for('game_view', game_id=running) }}">Pokračovat</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="{{ url_for('new_game') }}">
|
||||
<p class="eyebrow">Kdo hraje</p>
|
||||
<p class="hint">Ťukej jména v pořadí, jak sedíte kolem stolu.</p>
|
||||
|
||||
<div class="chips" id="chips">
|
||||
{% for player in players %}
|
||||
<button type="button" class="chip" aria-pressed="false" data-name="{{ player.name }}">
|
||||
{{ player.name }}<span class="seat"></span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="add-player">
|
||||
<input type="text" id="new-name" placeholder="Nový hráč" autocomplete="off">
|
||||
<button type="button" id="add">Přidat</button>
|
||||
</div>
|
||||
|
||||
<div class="field" style="margin-top: 1.5rem">
|
||||
<label for="final">Cílové skóre</label>
|
||||
<input type="number" name="final_score" id="final" value="{{ final_score }}" inputmode="numeric">
|
||||
</div>
|
||||
|
||||
<div id="chosen"></div>
|
||||
<button class="btn" type="submit">Začít hru</button>
|
||||
</form>
|
||||
|
||||
<p class="footer"><a href="{{ url_for('board_redirect') }}">Zápisník</a></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const chips = document.getElementById("chips");
|
||||
const chosen = [];
|
||||
|
||||
function render() {
|
||||
for (const chip of chips.querySelectorAll(".chip")) {
|
||||
const seat = chosen.indexOf(chip.dataset.name);
|
||||
chip.setAttribute("aria-pressed", seat > -1);
|
||||
chip.querySelector(".seat").textContent = seat > -1 ? seat + 1 : "";
|
||||
}
|
||||
|
||||
// Pořadí odeslaných polí je pořadí u stolu.
|
||||
document.getElementById("chosen").replaceChildren(...chosen.map(name => {
|
||||
const field = document.createElement("input");
|
||||
field.type = "hidden";
|
||||
field.name = "player";
|
||||
field.value = name;
|
||||
return field;
|
||||
}));
|
||||
}
|
||||
|
||||
chips.addEventListener("click", event => {
|
||||
const chip = event.target.closest(".chip");
|
||||
if (!chip) return;
|
||||
|
||||
const seat = chosen.indexOf(chip.dataset.name);
|
||||
if (seat > -1) chosen.splice(seat, 1);
|
||||
else chosen.push(chip.dataset.name);
|
||||
render();
|
||||
});
|
||||
|
||||
const field = document.getElementById("new-name");
|
||||
|
||||
function addPlayer() {
|
||||
const name = field.value.trim();
|
||||
if (!name) return;
|
||||
|
||||
if (!chips.querySelector(`[data-name="${CSS.escape(name)}"]`)) {
|
||||
const chip = document.createElement("button");
|
||||
chip.type = "button";
|
||||
chip.className = "chip";
|
||||
chip.dataset.name = name;
|
||||
chip.append(name, Object.assign(document.createElement("span"), { className: "seat" }));
|
||||
chips.append(chip);
|
||||
}
|
||||
|
||||
if (!chosen.includes(name)) chosen.push(name);
|
||||
field.value = "";
|
||||
render();
|
||||
}
|
||||
|
||||
document.getElementById("add").addEventListener("click", addPlayer);
|
||||
field.addEventListener("keydown", event => {
|
||||
if (event.key === "Enter") { event.preventDefault(); addPlayer(); }
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,177 @@
|
||||
import pytest
|
||||
|
||||
import storage
|
||||
import web
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def client(tmp_path, monkeypatch):
|
||||
monkeypatch.setattr(storage, "DB_PATH", tmp_path / "test.db")
|
||||
monkeypatch.setenv("DICE_HOST", "192.168.0.10")
|
||||
web.app.config["TESTING"] = True
|
||||
with web.app.test_client() as client:
|
||||
yield client
|
||||
|
||||
|
||||
def start_game(client, *names, final_score=1000):
|
||||
response = client.post("/game", data={"player": list(names),
|
||||
"final_score": final_score})
|
||||
assert response.status_code == 302
|
||||
return int(response.headers["Location"].rsplit("/", 1)[1])
|
||||
|
||||
|
||||
def score(client, game_id, value):
|
||||
return client.post(f"/game/{game_id}/turn", data={"value": value})
|
||||
|
||||
|
||||
def text(response):
|
||||
return response.get_data(as_text=True)
|
||||
|
||||
|
||||
def test_prazdne_pocitadlo_nabizi_novou_hru(client):
|
||||
page = text(client.get("/"))
|
||||
|
||||
assert "Kdo hraje" in page
|
||||
assert "Začít hru" in page
|
||||
|
||||
|
||||
def test_zalozeni_hry_a_zapis_tahu(client):
|
||||
game_id = start_game(client, "Adam", "Eva")
|
||||
|
||||
page = text(client.get(f"/game/{game_id}"))
|
||||
assert "Na tahu" in page
|
||||
assert "Adam" in page
|
||||
|
||||
score(client, game_id, 450)
|
||||
|
||||
page = text(client.get(f"/game/{game_id}"))
|
||||
assert "Eva" in page
|
||||
assert "450" in page
|
||||
|
||||
|
||||
def test_znama_jmena_se_nabidnou_v_dalsi_hre(client):
|
||||
start_game(client, "Adam", "Eva")
|
||||
|
||||
page = text(client.get("/"))
|
||||
|
||||
assert 'data-name="Adam"' in page
|
||||
assert 'data-name="Eva"' in page
|
||||
|
||||
|
||||
def test_rozehrana_hra_se_nabidne_k_pokracovani(client):
|
||||
game_id = start_game(client, "Adam", "Eva")
|
||||
|
||||
page = text(client.get("/"))
|
||||
|
||||
assert "Rozehraná hra" in page
|
||||
assert f"/game/{game_id}" in page
|
||||
|
||||
|
||||
def test_neplatne_skore_neprojde(client):
|
||||
game_id = start_game(client, "Adam", "Eva")
|
||||
|
||||
response = score(client, game_id, "hodně")
|
||||
|
||||
assert "chyba" in response.headers["Location"]
|
||||
assert "Zadej skóre jako číslo." in text(client.get(response.headers["Location"]))
|
||||
|
||||
|
||||
def test_vynulovani_se_v_zapisniku_vyznaci(client):
|
||||
game_id = start_game(client, "Adam")
|
||||
for value in (300, 0, 0, 0):
|
||||
score(client, game_id, value)
|
||||
|
||||
panel = text(client.get(f"/board/{game_id}/panel"))
|
||||
|
||||
assert "vynulováno" in panel
|
||||
assert "struck" in panel # škrtnutý zápis před vynulováním
|
||||
|
||||
|
||||
def test_vraceni_posledniho_zapisu(client):
|
||||
game_id = start_game(client, "Adam", "Eva")
|
||||
score(client, game_id, 450)
|
||||
score(client, game_id, 200)
|
||||
|
||||
client.post(f"/game/{game_id}/undo")
|
||||
page = text(client.get(f"/game/{game_id}"))
|
||||
|
||||
assert "Eva" in page
|
||||
assert "200" not in page
|
||||
|
||||
|
||||
def test_varovani_pred_treti_nulou(client):
|
||||
game_id = start_game(client, "Adam")
|
||||
score(client, game_id, 300)
|
||||
score(client, game_id, 0)
|
||||
score(client, game_id, 0)
|
||||
|
||||
assert "Ještě jedna nula" in text(client.get(f"/game/{game_id}"))
|
||||
|
||||
|
||||
def test_dohrani_hry_vyhlasi_viteze(client):
|
||||
game_id = start_game(client, "Adam", "Eva", final_score=500)
|
||||
score(client, game_id, 500)
|
||||
score(client, game_id, 100)
|
||||
|
||||
page = text(client.get(f"/game/{game_id}"))
|
||||
assert "Vyhrává" in page
|
||||
assert "Konec hry" in page
|
||||
|
||||
assert storage.running_game(storage.connect(storage.DB_PATH)) is None
|
||||
|
||||
|
||||
def test_do_dohrane_hry_uz_nejde_zapsat(client):
|
||||
game_id = start_game(client, "Adam", "Eva", final_score=500)
|
||||
score(client, game_id, 500)
|
||||
score(client, game_id, 100)
|
||||
|
||||
score(client, game_id, 999)
|
||||
|
||||
conn = storage.connect(storage.DB_PATH)
|
||||
assert storage.load_game(conn, game_id).totals()["Adam"] == 500
|
||||
|
||||
|
||||
def test_remiza_hru_neukonci(client):
|
||||
game_id = start_game(client, "Adam", "Eva", final_score=500)
|
||||
score(client, game_id, 500)
|
||||
score(client, game_id, 500)
|
||||
|
||||
page = text(client.get(f"/game/{game_id}"))
|
||||
|
||||
assert "Na tahu" in page
|
||||
assert "Konec hry" not in page
|
||||
|
||||
|
||||
def test_ukonceni_hry(client):
|
||||
game_id = start_game(client, "Adam", "Eva")
|
||||
|
||||
client.post(f"/game/{game_id}/abandon")
|
||||
|
||||
assert "Rozehraná hra" not in text(client.get("/"))
|
||||
|
||||
|
||||
def test_tabule_ukazuje_qr_a_adresu(client):
|
||||
game_id = start_game(client, "Adam", "Eva")
|
||||
|
||||
page = text(client.get(f"/board/{game_id}"))
|
||||
|
||||
assert "<svg class=\"qr\"" in page
|
||||
assert "http://192.168.0.10:8000" in page
|
||||
|
||||
|
||||
def test_tabule_bez_hry(client):
|
||||
page = text(client.get("/board"))
|
||||
|
||||
assert "Zatím se nehraje" in page
|
||||
|
||||
|
||||
def test_tabule_presmeruje_na_rozehranou_hru(client):
|
||||
game_id = start_game(client, "Adam", "Eva")
|
||||
|
||||
response = client.get("/board")
|
||||
|
||||
assert response.headers["Location"].endswith(f"/board/{game_id}")
|
||||
|
||||
|
||||
def test_neexistujici_hra(client):
|
||||
assert client.get("/game/999").status_code == 404
|
||||
@@ -0,0 +1,238 @@
|
||||
"""Webové počitadlo pro domácí síť.
|
||||
|
||||
Telefon zapisuje skóre (`/game/<id>`), notebook ukazuje zápisník (`/board`).
|
||||
Server-rendered HTML, formuláře přes POST/redirect/GET, žádný build step.
|
||||
"""
|
||||
|
||||
import os
|
||||
import socket
|
||||
|
||||
import qrcode
|
||||
from flask import (Flask, abort, g, redirect, render_template, request,
|
||||
url_for)
|
||||
from markupsafe import Markup
|
||||
|
||||
import storage
|
||||
from core import FINAL_SCORE, Game, GameOver
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
PORT = int(os.environ.get("DICE_PORT", 8000))
|
||||
|
||||
|
||||
# --- připojení k databázi ---------------------------------------------------
|
||||
|
||||
def db():
|
||||
if "db" not in g:
|
||||
g.db = storage.connect()
|
||||
return g.db
|
||||
|
||||
|
||||
@app.teardown_appcontext
|
||||
def close_db(_exception):
|
||||
conn = g.pop("db", None)
|
||||
if conn is not None:
|
||||
conn.close()
|
||||
|
||||
|
||||
# --- adresa a QR kód --------------------------------------------------------
|
||||
|
||||
def lan_address() -> str:
|
||||
"""Adresa, na kterou se dá z telefonu připojit.
|
||||
|
||||
IP notebooku se podle DHCP mění, proto ji hledáme za běhu. Připojení
|
||||
UDP socketu nic neposílá, jen si vyžádá směrování k výchozí bráně.
|
||||
"""
|
||||
host = os.environ.get("DICE_HOST")
|
||||
if not host:
|
||||
sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
|
||||
try:
|
||||
sock.connect(("10.255.255.255", 1))
|
||||
host = sock.getsockname()[0]
|
||||
except OSError:
|
||||
host = socket.gethostbyname(socket.gethostname())
|
||||
finally:
|
||||
sock.close()
|
||||
return f"http://{host}:{PORT}"
|
||||
|
||||
|
||||
def qr_svg(data: str) -> Markup:
|
||||
"""QR jako SVG složené ze čtverečků — bez Pillow a bez práce s obrázky."""
|
||||
code = qrcode.QRCode(box_size=1, border=2)
|
||||
code.add_data(data)
|
||||
code.make(fit=True)
|
||||
matrix = code.get_matrix()
|
||||
size = len(matrix)
|
||||
|
||||
rects = [
|
||||
f'<rect x="{x}" y="{y}" width="1" height="1"/>'
|
||||
for y, row in enumerate(matrix)
|
||||
for x, dark in enumerate(row) if dark
|
||||
]
|
||||
|
||||
return Markup(
|
||||
f'<svg class="qr" viewBox="0 0 {size} {size}" role="img" '
|
||||
f'aria-label="QR kód s adresou pro telefon" '
|
||||
f'shape-rendering="crispEdges">{"".join(rects)}</svg>'
|
||||
)
|
||||
|
||||
|
||||
@app.template_filter("cislo")
|
||||
def cislo(value: int) -> str:
|
||||
"""Tisíce se v češtině oddělují mezerou."""
|
||||
return f"{value:,}".replace(",", " ")
|
||||
|
||||
|
||||
# --- zápisník ---------------------------------------------------------------
|
||||
|
||||
def scoresheet(game: Game) -> list[dict]:
|
||||
"""Řádky zápisníku po kolech.
|
||||
|
||||
Tahy zapsané před posledním vynulováním se přeškrtnou — přesně tak, jak
|
||||
by se škrtaly na papíře.
|
||||
"""
|
||||
wiped_in_round = {}
|
||||
for turn in game.turns:
|
||||
if turn.reset:
|
||||
wiped_in_round[turn.player] = turn.round
|
||||
|
||||
rows = []
|
||||
for number, by_player in game.rounds():
|
||||
cells = []
|
||||
for name in game.names:
|
||||
turn = by_player[name]
|
||||
cells.append({
|
||||
"value": None if turn is None else turn.value,
|
||||
"reset": turn is not None and turn.reset,
|
||||
"struck": turn is not None and turn.round < wiped_in_round.get(name, 0),
|
||||
})
|
||||
rows.append({"round": number, "cells": cells})
|
||||
|
||||
return rows
|
||||
|
||||
|
||||
def view(game: Game, game_id: int, row) -> dict:
|
||||
"""Společný podklad pro zápisník i pro zadávací pohled."""
|
||||
totals = game.totals()
|
||||
winner = row["winner_name"] if row["status"] == storage.STATUS_FINISHED else ""
|
||||
return {
|
||||
"game": game,
|
||||
"game_id": game_id,
|
||||
"row": row,
|
||||
"totals": totals,
|
||||
"rows": scoresheet(game),
|
||||
"streaks": {name: game.zero_streak(name) for name in game.names},
|
||||
"standings": game.standings(),
|
||||
"winner": winner,
|
||||
"current": "" if winner else game.current_player,
|
||||
}
|
||||
|
||||
|
||||
def load(game_id: int) -> tuple[Game, "storage.sqlite3.Row"]:
|
||||
row = storage.game_row(db(), game_id)
|
||||
if row is None:
|
||||
abort(404)
|
||||
return storage.load_game(db(), game_id), row
|
||||
|
||||
|
||||
# --- routy ------------------------------------------------------------------
|
||||
|
||||
@app.route("/")
|
||||
def index():
|
||||
return render_template(
|
||||
"index.html",
|
||||
players=storage.known_players(db()),
|
||||
running=storage.running_game(db()),
|
||||
final_score=FINAL_SCORE,
|
||||
)
|
||||
|
||||
|
||||
@app.post("/game")
|
||||
def new_game():
|
||||
names = [n for n in request.form.getlist("player") if n.strip()]
|
||||
if not names:
|
||||
return redirect(url_for("index", chyba="Vyber aspoň jednoho hráče."))
|
||||
|
||||
try:
|
||||
final_score = int(request.form.get("final_score") or FINAL_SCORE)
|
||||
except ValueError:
|
||||
return redirect(url_for("index", chyba="Cílové skóre musí být číslo."))
|
||||
|
||||
try:
|
||||
game_id = storage.create_game(db(), names, final_score)
|
||||
except ValueError as exc:
|
||||
return redirect(url_for("index", chyba=str(exc)))
|
||||
|
||||
return redirect(url_for("game_view", game_id=game_id))
|
||||
|
||||
|
||||
@app.route("/game/<int:game_id>")
|
||||
def game_view(game_id: int):
|
||||
game, row = load(game_id)
|
||||
return render_template("game.html", chyba=request.args.get("chyba", ""),
|
||||
**view(game, game_id, row))
|
||||
|
||||
|
||||
@app.post("/game/<int:game_id>/turn")
|
||||
def add_turn(game_id: int):
|
||||
game, row = load(game_id)
|
||||
|
||||
try:
|
||||
value = int(request.form.get("value", ""))
|
||||
except ValueError:
|
||||
return redirect(url_for("game_view", game_id=game_id,
|
||||
chyba="Zadej skóre jako číslo."))
|
||||
|
||||
try:
|
||||
result = game.add_score(value)
|
||||
except GameOver:
|
||||
return redirect(url_for("game_view", game_id=game_id))
|
||||
|
||||
storage.add_turn(db(), game_id, result.turn)
|
||||
if result.winner:
|
||||
storage.finish_game(db(), game_id, result.winner)
|
||||
|
||||
return redirect(url_for("game_view", game_id=game_id))
|
||||
|
||||
|
||||
@app.post("/game/<int:game_id>/undo")
|
||||
def undo(game_id: int):
|
||||
storage.undo_turn(db(), game_id)
|
||||
return redirect(url_for("game_view", game_id=game_id))
|
||||
|
||||
|
||||
@app.post("/game/<int:game_id>/abandon")
|
||||
def abandon(game_id: int):
|
||||
storage.abandon_game(db(), game_id)
|
||||
return redirect(url_for("index"))
|
||||
|
||||
|
||||
@app.route("/board")
|
||||
def board_redirect():
|
||||
game_id = storage.running_game(db())
|
||||
if game_id:
|
||||
return redirect(url_for("board", game_id=game_id))
|
||||
|
||||
return render_template("board_idle.html", address=lan_address(),
|
||||
qr=qr_svg(lan_address()))
|
||||
|
||||
|
||||
@app.route("/board/<int:game_id>")
|
||||
def board(game_id: int):
|
||||
game, row = load(game_id)
|
||||
address = lan_address() + url_for("game_view", game_id=game_id)
|
||||
return render_template("board.html", address=address, qr=qr_svg(address),
|
||||
**view(game, game_id, row))
|
||||
|
||||
|
||||
@app.route("/board/<int:game_id>/panel")
|
||||
def board_panel(game_id: int):
|
||||
"""Fragment, na který se tabule doptává každé dvě vteřiny."""
|
||||
game, row = load(game_id)
|
||||
return render_template("_panel.html", **view(game, game_id, row))
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
print(f"Počitadlo běží na {lan_address()}")
|
||||
print(f"Tabule: {lan_address()}/board")
|
||||
app.run(host="0.0.0.0", port=PORT, threaded=True)
|
||||
Reference in new issue
Block a user