Add board renderer

render.py

@@ -0,0 +1,123 @@
+"""HTML rendering of the boards (pure strings, no JS)."""
+from __future__ import annotations
+
+import html
+
+from tetris import HEIGHT, WIDTH
+
+MEDALS = {1: "🥇", 2: "🥈", 3: "🥉"}
+
+CSS = """
+.arena {display:grid; grid-template-columns:repeat(auto-fit, minmax(min(128px, 100%), 1fr)); gap:12px 10px; padding:4px 0; max-width:960px; margin:0 auto;}
+.pcard {width:100%; max-width:214px; min-width:0; justify-self:center; display:flex; flex-direction:column; gap:6px;}
+.pname {font-weight:700; font-size:13px; line-height:1.25; overflow:hidden; text-overflow:ellipsis;
+        white-space:nowrap; color:var(--body-text-color);}
+.pmeta {font-size:11px; color:var(--body-text-color-subdued); display:flex; justify-content:space-between; gap:6px;}
+.pstats {display:grid; grid-template-columns:repeat(3,1fr); gap:4px;}
+.pstats div {background:var(--block-background-fill); border:1px solid var(--border-color-primary);
+             border-radius:6px; padding:3px 4px; text-align:center;}
+.pstats b {display:block; font-size:15px; color:var(--body-text-color); font-variant-numeric:tabular-nums;}
+.pstats span {font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--body-text-color-subdued);}
+.board {position:relative; display:grid; grid-template-columns:repeat(10,1fr); gap:1px; padding:3px;
+        background:#0b1020; border-radius:8px; border:1px solid #273048; aspect-ratio:1/2;}
+.board i {display:block; border-radius:2px; background:#141b2e;}
+.board i.c1 {background:#22d3ee;} .board i.c2 {background:#facc15;} .board i.c3 {background:#a855f7;}
+.board i.c4 {background:#22c55e;} .board i.c5 {background:#ef4444;} .board i.c6 {background:#3b82f6;}
+.board i.c7 {background:#f97316;}
+.board i.n {box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);}
+.board .over {position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
+        background:rgba(8,10,20,.78); font-weight:800; font-size:18px; border-radius:8px; gap:6px; text-align:center; padding:6px;}
+.board .over, .board .over * {color:#fff !important; opacity:1 !important;}
+.board .over .medal {font-size:44px; line-height:1;}
+.board .over small {font-weight:600; font-size:12px;}
+.pmove {font-size:11px; line-height:1.35; color:var(--body-text-color-subdued); min-height:4.1em;
+        display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;}
+.pmove b {color:var(--body-text-color);}
+.results {width:100%; max-width:760px; margin:4px auto 0; border-collapse:collapse !important; font-size:13px; border:none !important;}
+.results th, .results td {padding:6px 5px !important; border:none !important; border-bottom:1px solid var(--border-color-primary) !important;
+        text-align:right; color:var(--body-text-color); font-variant-numeric:tabular-nums; background:transparent !important;}
+.results td.p {min-width:8.5em;}
+@media (max-width:480px) {.results .sm-hide {display:none;} .results {font-size:12px;}}
+.results th {font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--body-text-color-subdued);}
+.results td.l, .results th.l {text-align:left; overflow-wrap:break-word;}
+.results .up {color:#16a34a;} .results .down {color:#dc2626;}
+.rnote {font-size:12px; color:var(--body-text-color-subdued); margin:8px auto 0; max-width:760px; line-height:1.45;}
+.rnote a {color:var(--link-text-color);}
+.arena-empty {text-align:center; padding:40px 12px; color:var(--body-text-color-subdued); font-size:14px;
+              border:1px dashed var(--border-color-primary); border-radius:10px;}
+"""
+
+
+def _board(game) -> str:
+    hl = set(game.last_cells)
+    cells = []
+    for r in range(HEIGHT):
+        row = game.grid[r]
+        for c in range(WIDTH):
+            v = row[c]
+            if v:
+                cells.append(f'<i class="c{v}{" n" if (r, c) in hl else ""}"></i>')
+            else:
+                cells.append("<i></i>")
+    return "".join(cells)
+
+
+def player_card(game, player, final_rank=None, elo=None) -> str:
+    name = html.escape(player.display)
+    params = "baseline" if not player.n_params else f"{player.n_params / 1e6:.1f}M params"
+    over = ""
+    if final_rank is not None:
+        medal = MEDALS.get(final_rank, f"#{final_rank}")
+        sub = "survived" if game.alive else "topped out"
+        elo_txt = ""
+        if elo is not None:
+            elo_txt = f"<small>Elo {elo[0]:.0f} → {elo[1]:.0f} ({elo[1] - elo[0]:+.1f})</small>"
+        over = f'<div class="over"><span class="medal">{medal}</span><small>{sub}</small>{elo_txt}</div>'
+    elif not game.alive:
+        over = '<div class="over">GAME OVER</div>'
+    if game.last_description:
+        v = "" if game.last_value is None else f" <b>({game.last_value:+.2f})</b>"
+        move = f"<b>Last:</b> {html.escape(game.last_description)}{v}"
+    else:
+        move = "Waiting for the first piece…"
+    nxt = game.current_piece if game.alive else "–"
+    return (
+        f'<div class="pcard"><div class="pname" title="{name}">{name}</div>'
+        f'<div class="pmeta"><span>{params}</span><span>next: {nxt}</span></div>'
+        f'<div class="pstats"><div><b>{game.score}</b><span>score</span></div>'
+        f'<div><b>{game.lines}</b><span>lines</span></div><div><b>{game.pieces}</b><span>pieces</span></div></div>'
+        f'<div class="board">{_board(game)}{over}</div>'
+        f'<div class="pmove">{move}</div></div>'
+    )
+
+
+def arena_html(games, players, ranks=None, elos=None) -> str:
+    cards = []
+    for i, (g, p) in enumerate(zip(games, players)):
+        cards.append(player_card(g, p, ranks[i] if ranks else None, elos[i] if elos else None))
+    return f'<div class="arena">{"".join(cards)}</div>'
+
+
+def empty_html(msg="Pick the models and press <b>Start match</b>. The boards will appear here.") -> str:
+    return f'<div class="arena-empty">{msg}</div>'
+
+
+def results_html(order, ranks, players, games, elos, note_html) -> str:
+    rows = []
+    for i in order:
+        p, g = players[i], games[i]
+        if elos:
+            d = elos[i][1] - elos[i][0]
+            cls = "up" if d > 0.05 else "down" if d < -0.05 else ""
+            elo = f'{elos[i][1]:.0f} <span class="{cls}">({d:+.1f})</span>'
+        else:
+            elo = "–"
+        medal = MEDALS.get(ranks[i], str(ranks[i]))
+        alive = " ✓" if g.alive else ""
+        rows.append(
+            f'<tr><td class="l">{medal}</td><td class="l p">{html.escape(p.display).replace("/", "/<wbr>")}</td><td>{g.score}</td>'
+            f'<td class="sm-hide">{g.lines}</td><td>{g.pieces}{alive}</td><td>{elo}</td></tr>'
+        )
+    head = ('<tr><th class="l">#</th><th class="l">Player</th><th>Score</th><th class="sm-hide">Lines</th>'
+            "<th>Pieces</th><th>Elo</th></tr>")
+    return f'<table class="results">{head}{"".join(rows)}</table><div class="rnote">{note_html}</div>'