Run Detail
completeddeepseek-v4.1-flash-1017Recorded for these videos
47:51Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)
Nov 6, 2026 · YouTube
10:57"Crouton Alpha": the latest super-efficient coding model by Meta?
Nov 3, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
22:47Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?
Oct 6, 2026 · YouTube
16:54Stealth Union Alpha: Is this another cheap GPT model? (better than Luna, cheaper than Terra?)
Sep 16, 2026 · YouTube
16:45DeepSeek V4.1 Flash Is Shockingly Good for the Price
Sep 10, 2026 · YouTube
17:37Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?
Aug 28, 2026 · YouTube
23:58Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok
Aug 27, 2026 · YouTube
14:50Stealth Ox Alpha: a new GLM model! Full test (coding & writing) against Grok, Gemini, GPT & others
Aug 21, 2026 · YouTube
Provider
openrouter
Challenge Version
v1.0
Turns
1
Duration
400.1s
Total Tokens
50,072
Input Tokens
921
Output Tokens
49,151
Reasoning Tokens
35,320
Reasoning Effort
default
Est. Cost
$0.0247
Started
10/17/2026, 12:21:38 PM
OR Provider
InferenceNet
Finish Reason
stop
Generation ID
gen-1792239699-cELEzxYpwNo1kofDoejd
Turns (1)
Turn #1
921 in49,151 out35,320 reasoning50,072 total400.0s
user
My buddy runs a bar. I told him I'd build him something for Thursdays. He's the one talking here — I just write down what he says and hand it to you.
The game
It's not real pool. Three balls on the table, you shoot until all three are down, and we count how many shots it took you. Low is good. Everybody takes a turn, then we go around again — that's a round.
Twenty bucks to play. You start with five chips. Take more than four shots to clear the table and it costs you a chip. Out of chips and you're out, go back to drinking. Last one with chips left takes the pot.
There's a clock on your turn — a minute, minute and a half, we've never really settled it. Clock runs out and you're not at the table, that's a chip.
The night
It's a Thursday. Nine o'clock, everybody's had a few, the jukebox is loud and half the room is outside smoking. Twelve, sixteen people usually, however many show up. It runs two, three hours and nobody's in a hurry.
Last year I ran the whole thing on a legal pad and it got away from me around round four. Two guys arguing with me about what they shot, me trying to remember whose turn it was, somebody's beer on the pad. Never again.
I'm running this off my phone, one-handed, standing at the table with a beer in the other. There's a TV over the bar and that's the only screen anybody in the room can see — from across the room, in the dark, so it's got to be big. People want to know where they stand without walking over and asking me.
My phone's on 15% by ten. The bar's wifi is the bar's wifi.
The money
Twenty a head, all of it in the pot. Winner takes it — mostly. We kick a little to second. And there's a side thing we do for whoever's shooting best early on, I never wrote that part down properly.
The app doesn't hold the money. I do. But at the end of the night it has to tell me what I owe who, and I'm reading that off my phone with sixteen people standing around the table.
What I want
Two pages.
The console — the thing I run it from, and the thing that goes up on the TV. Open it and there's already a game going. I'm not typing in twelve names to find out whether it works.
The playback — a separate page that plays a whole night through, start to finish, so I can watch it work before Thursday. One step at a time, a step being one thing happening, with the scorecard filling in as it goes and a slider for how fast it runs. I want to slow it down, back it up, and read what just happened. Show me the way a night actually goes.
The playback runs the same rules the console runs. If the two of them drift apart, the playback is a cartoon and it's no use to me.
House rules
- Two files. Each one a single HTML file — everything inline, no CDN, no external stylesheet, font, script or image.
data:URIs are fine. - No libraries. No frameworks.
- No network at runtime.
- No
localStorage,sessionStorage, cookies orindexedDB— these run in a sandboxed frame where those throw. - Exactly two fenced
htmlblocks: the console first, the playback second. Leave yourself room for the second one.
Answer in exactly these sections
What you filled in
I know I wasn't clear about everything. Everything you had to decide for me, one line each — what you decided and why. Short.
The console
The first fenced html block.
The playback
The second fenced html block.
What'll go wrong
It's Thursday, it's nine o'clock, and I'm running this for real. What comes up that this doesn't handle? Be straight with me. I'd much rather hear it now than find out with sixteen people around a pool table and three hundred dollars sitting on the bar.
assistant
What you filled in
- Clock is 90 seconds; timeout is a manual button because the app cannot know if someone is actually at the table.
- A round is one pass through all players still holding chips; eliminated players are skipped.
- More than 4 shots costs a chip; a timeout also costs a chip and ends the turn immediately.
- Everyone starts with 5 chips; at 0 chips they are out; last player with chips wins.
- Buy-in is $20, pot is players × $20; payouts are 70% winner, 20% second, 10% early bird.
- Early bird is the best single completed turn in round 1; ties split the early-bird money.
- If there is no second or no early-bird winner, that money rolls into the winner’s payout.
- If everyone busts in the same round, the last eliminated player is treated as winner and the previous elimination as second.
- Manual “End night” ranks by chips left, then lowest total shots.
- The console opens on a 12-player demo already in round 2 with some chips lost.
- The playback uses the same rules with a deterministic simulated night, one step per shot/timeout/turn start/finish.
- Nothing persists; refresh or close the page and the night is gone.
The console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Thursday Pool — Console</title>
<style>
:root {
--bg:#0b0f14; --panel:#151c24; --line:#2a3542; --text:#f5f7fa; --muted:#9aa7b5;
--accent:#ffd166; --good:#4ade80; --bad:#ff5c5c; --blue:#60a5fa;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
body { min-height:100vh; }
.app { display:flex; flex-direction:column; min-height:100vh; }
header { padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); background:#0e141b; position:sticky; top:0; z-index:10; }
h1 { font-size:clamp(18px,2.2vw,28px); margin:0; letter-spacing:.02em; }
.badge { font-size:clamp(12px,1.4vw,18px); color:var(--muted); }
.main { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr); gap:12px; padding:12px; flex:1; }
@media (max-width:900px) { .main { grid-template-columns:1fr; } }
.board { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.controls { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.current { background:linear-gradient(135deg,#1d2a38,#111820); border:1px solid #3b4b5e; border-radius:14px; padding:12px; }
.current .name { font-size:clamp(28px,5vw,64px); font-weight:800; line-height:1.05; }
.current .sub { font-size:clamp(14px,1.8vw,22px); color:var(--muted); }
.big-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px; }
.stat { background:#0e141b; border:1px solid var(--line); border-radius:10px; padding:8px; text-align:center; }
.stat .v { font-size:clamp(22px,3vw,42px); font-weight:800; }
.stat .l { font-size:clamp(10px,1.1vw,14px); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; flex:1; min-height:200px; }
table { width:100%; border-collapse:collapse; font-size:clamp(14px,1.5vw,22px); }
th,td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { position:sticky; top:0; background:#0e141b; color:var(--muted); font-size:.75em; text-transform:uppercase; letter-spacing:.06em; z-index:1; }
tr.current { background:rgba(255,209,102,.14); }
tr.eliminated { opacity:.45; text-decoration:line-through; }
td.num,th.num { text-align:right; }
.chip { display:inline-block; min-width:1.6em; padding:2px 6px; border-radius:999px; background:#243241; text-align:center; font-weight:700; }
.chip.low { background:#5a1f1f; color:#ffb4b4; }
.chip.ok { background:#1f4d2e; color:#b9f6ca; }
.bad { color:var(--bad); font-weight:700; }
.controls .row { display:flex; gap:8px; flex-wrap:wrap; }
button { font:inherit; border:0; border-radius:12px; padding:14px 16px; background:#243241; color:var(--text); font-weight:700; cursor:pointer; touch-action:manipulation; }
button:active { transform:translateY(1px); }
button.primary { background:var(--accent); color:#111; }
button.good { background:var(--good); color:#052e16; }
button.bad { background:var(--bad); color:#2a0000; }
button.blue { background:var(--blue); color:#061a33; }
button.ghost { background:transparent; border:1px solid var(--line); color:var(--muted); }
button:disabled { opacity:.35; cursor:not-allowed; }
button.wide { flex:1 1 100%; }
button.half { flex:1 1 calc(50% - 4px); }
button.third { flex:1 1 calc(33.333% - 6px); }
.timer { font-variant-numeric:tabular-nums; font-size:clamp(28px,4vw,56px); font-weight:800; text-align:center; padding:8px; border-radius:12px; background:#0e141b; border:1px solid var(--line); }
.timer.warn { color:var(--accent); }
.timer.danger { color:var(--bad); animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.55; } }
.log { font-size:clamp(12px,1.2vw,16px); color:var(--muted); min-height:2.5em; }
.payout { background:#0e141b; border:1px solid var(--line); border-radius:12px; padding:10px; font-size:clamp(14px,1.5vw,20px); }
.payout h3 { margin:0 0 6px; font-size:1em; color:var(--accent); }
.payout .line { display:flex; justify-content:space-between; gap:10px; padding:3px 0; border-bottom:1px dashed #2a3542; }
.payout .line:last-child { border-bottom:0; }
.setup { display:none; flex-direction:column; gap:8px; }
.setup.open { display:flex; }
textarea { width:100%; min-height:120px; background:#0e141b; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; }
.small { font-size:.8em; color:var(--muted); }
.hidden { display:none !important; }
body.tv .main { grid-template-columns:1fr; }
body.tv .controls { display:none; }
body.tv .board { min-height:calc(100vh - 80px); }
body.tv .current .name { font-size:clamp(40px,8vw,120px); }
body.tv table { font-size:clamp(18px,2.2vw,36px); }
body.tv .big-stats .v { font-size:clamp(32px,5vw,72px); }
</style>
</head>
<body>
<div class="app">
<header>
<div>
<h1>Thursday Pool — Console</h1>
<div class="badge" id="headerInfo"></div>
</div>
<div class="row">
<button class="ghost" id="tvBtn">TV</button>
<button class="ghost" id="setupBtn">Setup</button>
</div>
</header>
<div class="main">
<section class="board">
<div class="current" id="currentCard"></div>
<div class="table-wrap"><table id="scoreTable"></table></div>
<div class="log" id="logLine"></div>
</section>
<section class="controls">
<div class="timer" id="timer">1:30</div>
<div class="row">
<button class="good half" id="madeBtn">Ball down</button>
<button class="bad half" id="missBtn">Miss</button>
</div>
<div class="row">
<button class="bad wide" id="timeoutBtn">Timeout — lose chip</button>
</div>
<div class="row">
<button class="blue half" id="undoBtn">Undo</button>
<button class="ghost half" id="endBtn">End night</button>
</div>
<div class="row">
<button class="ghost third" id="demoBtn">Demo</button>
<button class="ghost third" id="newBtn">New</button>
</div>
<div class="setup" id="setupPanel">
<div class="small">Names, one per line. Buy-in $20 each. Start with 5 chips. 90-second clock.</div>
<textarea id="namesInput"></textarea>
<div class="row">
<button class="primary" id="startBtn">Start night</button>
<button class="ghost" id="cancelSetup">Cancel</button>
</div>
</div>
<div class="payout hidden" id="payoutPanel"></div>
</section>
</div>
</div>
<script>
const BUY_IN = 20;
const START_CHIPS = 5;
const MAX_SHOTS = 4;
const CLOCK_SECONDS = 90;
const DEMO_NAMES = ["Ace","Bella","Cruz","Dee","Eddie","Frankie","Gia","Hank","Ivy","Jo","Kai","Lou"];
function makeGame(names) {
const players = names.map((name, i) => ({
id: i,
name: (name || "").trim() || ("Player " + (i + 1)),
chips: START_CHIPS,
totalShots: 0,
turns: [],
eliminated: false,
eliminatedAt: null
}));
return {
players,
round: 1,
currentIndex: -1,
currentTurn: null,
phase: "playing",
earlyBird: { best: Infinity, winners: [] },
eliminationOrder: [],
pot: players.length * BUY_IN,
initialCount: players.length,
log: [],
lastEvent: "",
payouts: null
};
}
function isActive(p) { return p.chips > 0 && !p.eliminated; }
function activePlayers(state) { return state.players.filter(isActive); }
function playerById(state, id) { return state.players.find(p => p.id === id); }
function playerName(state, id) { const p = playerById(state, id); return p ? p.name : "?"; }
function beginTurn(state) {
if (state.phase !== "playing") return;
const p = state.players[state.currentIndex];
if (!p || !isActive(p)) return;
state.currentTurn = { playerId: p.id, shots: 0, ballsDown: 0, timeout: false, startedAt: Date.now() };
state.lastEvent = `Round ${state.round}: ${p.name} at the table.`;
state.log.push(state.lastEvent);
}
function advanceToNextTurn(state) {
if (state.phase !== "playing" || state.currentTurn) return;
const n = state.players.length;
const start = state.currentIndex + 1;
for (let k = 0; k < n; k++) {
const i = (start + k) % n;
if (isActive(state.players[i])) {
if (start + k >= n) state.round++;
state.currentIndex = i;
beginTurn(state);
return;
}
}
finishGame(state, false);
}
function applyShot(state, made) {
if (state.phase !== "playing" || !state.currentTurn) return;
const t = state.currentTurn;
t.shots++;
if (made) t.ballsDown++;
if (t.ballsDown >= 3) {
finishTurn(state, false);
} else {
state.lastEvent = `${playerName(state, t.playerId)} shot ${t.shots}: ${made ? "ball down" : "miss"} (${t.ballsDown}/3).`;
state.log.push(state.lastEvent);
}
}
function applyTimeout(state) {
if (state.phase !== "playing" || !state.currentTurn) return;
state.currentTurn.timeout = true;
finishTurn(state, true);
}
function finishTurn(state, timeout) {
const t = state.currentTurn;
if (!t) return;
const p = playerById(state, t.playerId);
const completed = !timeout && t.ballsDown >= 3;
const chipLost = timeout || t.shots > MAX_SHOTS;
p.totalShots += t.shots;
p.turns.push({ round: state.round, shots: t.shots, ballsDown: t.ballsDown, timeout: !!timeout, chipLost, completed });
if (chipLost) {
p.chips--;
if (p.chips <= 0) {
p.chips = 0;
p.eliminated = true;
p.eliminatedAt = state.eliminationOrder.length + 1;
state.eliminationOrder.push(p.id);
}
}
if (completed && state.round === 1) {
if (t.shots < state.earlyBird.best) {
state.earlyBird.best = t.shots;
state.earlyBird.winners = [p.id];
} else if (t.shots === state.earlyBird.best) {
state.earlyBird.winners.push(p.id);
}
}
let msg = `${p.name} ${timeout ? "timed out" : "cleared"} in ${t.shots} shot${t.shots === 1 ? "" : "s"}`;
if (chipLost) msg += ` — loses a chip (${p.chips} left)`;
else msg += ` — no chip lost`;
if (p.eliminated) msg += ` — ELIMINATED`;
state.lastEvent = msg;
state.log.push(msg);
state.currentTurn = null;
const active = activePlayers(state);
if (active.length <= 1) finishGame(state, false);
}
function finishGame(state, manual) {
if (state.phase === "finished") return;
state.phase = "finished";
state.currentTurn = null;
let winner, second;
const active = activePlayers(state);
if (manual) {
const ranked = [...state.players].sort((a, b) => b.chips - a.chips || a.totalShots - b.totalShots || a.name.localeCompare(b.name));
winner = ranked[0];
second = ranked[1] || null;
} else if (active.length === 1) {
winner = active[0];
const lastElim = state.eliminationOrder.length ? playerById(state, state.eliminationOrder[state.eliminationOrder.length - 1]) : null;
second = lastElim && lastElim.id !== winner.id ? lastElim : null;
} else if (active.length === 0) {
const lastElim = state.eliminationOrder.length ? playerById(state, state.eliminationOrder[state.eliminationOrder.length - 1]) : null;
const secondElim = state.eliminationOrder.length > 1 ? playerById(state, state.eliminationOrder[state.eliminationOrder.length - 2]) : null;
winner = lastElim;
second = secondElim;
} else {
const ranked = [...state.players].sort((a, b) => b.chips - a.chips || a.totalShots - b.totalShots || a.name.localeCompare(b.name));
winner = ranked[0];
second = ranked[1] || null;
}
if (!winner) {
state.payouts = { lines: [], winnerId: null, secondId: null, earlyWinners: [] };
return;
}
const pot = state.pot;
let winnerAmt, secondAmt, earlyAmt;
if (state.initialCount === 1) {
winnerAmt = pot; secondAmt = 0; earlyAmt = 0;
} else if (state.initialCount === 2) {
winnerAmt = pot * 0.8; secondAmt = pot * 0.2; earlyAmt = 0;
} else {
winnerAmt = pot * 0.7; secondAmt = pot * 0.2; earlyAmt = pot * 0.1;
}
if (!second) { winnerAmt += secondAmt; secondAmt = 0; }
const earlyWinners = state.earlyBird.winners.map(id => playerById(state, id)).filter(Boolean);
if (earlyWinners.length === 0) { winnerAmt += earlyAmt; earlyAmt = 0; }
const lines = [];
lines.push({ name: winner.name, amount: winnerAmt, reason: "Winner" });
if (second && secondAmt > 0) lines.push({ name: second.name, amount: secondAmt, reason: "Second" });
if (earlyWinners.length && earlyAmt > 0) {
const each = earlyAmt / earlyWinners.length;
earlyWinners.forEach(p => lines.push({ name: p.name, amount: each, reason: `Early bird (${state.earlyBird.best} shots)` }));
}
state.payouts = {
winnerId: winner.id,
secondId: second ? second.id : null,
earlyWinners: earlyWinners.map(p => p.id),
winnerAmt, secondAmt, earlyAmt,
lines
};
state.lastEvent = `Night over. ${winner.name} wins $${winnerAmt.toFixed(2)}.`;
state.log.push(state.lastEvent);
}
function makeDemoState() {
const state = makeGame(DEMO_NAMES);
const outcomes = [
[1,1,1],
[0,1,0,1,1],
[1,0,1,1],
[0,0,1,1,1],
[1,1,1],
[0,1,1,1],
[1,0,0,1,1],
[1,1,1],
[0,0,0,1,1,1],
[1,1,1],
[0,1,1,1],
[1,1,1],
[0,0,1,1,1],
[1,1,1]
];
advanceToNextTurn(state);
for (let turn = 0; turn < outcomes.length; turn++) {
if (state.phase !== "playing") break;
const pid = state.currentTurn ? state.currentTurn.playerId : null;
if (pid === null) break;
const shots = outcomes[turn];
for (let s = 0; s < shots.length; s++) {
if (state.phase !== "playing" || !state.currentTurn || state.currentTurn.playerId !== pid) break;
applyShot(state, !!shots[s]);
if (!state.currentTurn) break;
}
if (state.phase === "playing" && !state.currentTurn) {
advanceToNextTurn(state);
} else if (state.phase === "playing" && state.currentTurn && state.currentTurn.playerId === pid) {
applyTimeout(state);
if (state.phase === "playing" && !state.currentTurn) advanceToNextTurn(state);
}
}
if (state.phase === "playing" && !state.currentTurn) advanceToNextTurn(state);
if (state.currentTurn) state.currentTurn.startedAt = Date.now();
return state;
}
function escapeHtml(s) {
return String(s).replace(/[&<>"']/g, c => ({ "&":"&", "<":"<", ">":">", '"':""", "'":"'" }[c]));
}
let state = makeDemoState();
let history = [];
function pushHistory() {
history.push(JSON.stringify(state));
if (history.length > 200) history.shift();
}
function doShot(made) {
if (state.phase !== "playing" || !state.currentTurn) return;
pushHistory();
applyShot(state, made);
if (state.phase === "playing" && !state.currentTurn) advanceToNextTurn(state);
render();
}
function doTimeout() {
if (state.phase !== "playing" || !state.currentTurn) return;
pushHistory();
applyTimeout(state);
if (state.phase === "playing" && !state.currentTurn) advanceToNextTurn(state);
render();
}
function doUndo() {
if (!history.length) return;
state = JSON.parse(history.pop());
render();
}
function doEndNight() {
if (state.phase === "finished") return;
pushHistory();
finishGame(state, true);
render();
}
function doDemo() {
state = makeDemoState();
history = [];
render();
}
function doNew() {
document.getElementById("namesInput").value = state.players.map(p => p.name).join("\n");
document.getElementById("setupPanel").classList.add("open");
}
function startNight() {
const raw = document.getElementById("namesInput").value;
let names = raw.split(/\n/).map(s => s.trim()).filter(Boolean);
if (names.length === 0) names = DEMO_NAMES.slice();
state = makeGame(names);
advanceToNextTurn(state);
history = [];
document.getElementById("setupPanel").classList.remove("open");
render();
}
function updateTimer() {
const el = document.getElementById("timer");
if (state.phase === "playing" && state.currentTurn) {
const elapsed = (Date.now() - state.currentTurn.startedAt) / 1000;
const remaining = Math.max(0, CLOCK_SECONDS - elapsed);
const m = Math.floor(remaining / 60);
const s = Math.floor(remaining % 60);
el.textContent = `${m}:${String(s).padStart(2, "0")}`;
el.classList.toggle("warn", remaining <= 30 && remaining > 10);
el.classList.toggle("danger", remaining <= 10);
} else {
el.textContent = "—";
el.classList.remove("warn", "danger");
}
}
function render() {
const active = activePlayers(state);
document.getElementById("headerInfo").textContent =
`Round ${state.round} • ${active.length} active • Pot $${state.pot} • ${state.phase === "finished" ? "FINISHED" : "Playing"}`;
const currentCard = document.getElementById("currentCard");
if (state.phase === "finished" && state.payouts) {
const winner = playerById(state, state.payouts.winnerId);
currentCard.innerHTML = `<div class="name">${escapeHtml(winner ? winner.name : "Night over")}</div>
<div class="sub">Night over • Pot $${state.pot}</div>
<div class="big-stats">
<div class="stat"><div class="v">${state.payouts.lines.length}</div><div class="l">Payouts</div></div>
<div class="stat"><div class="v">${state.initialCount}</div><div class="l">Players</div></div>
<div class="stat"><div class="v">${state.round}</div><div class="l">Rounds</div></div>
<div class="stat"><div class="v">${state.eliminationOrder.length}</div><div class="l">Out</div></div>
</div>`;
} else if (state.currentTurn) {
const p = playerById(state, state.currentTurn.playerId);
const t = state.currentTurn;
currentCard.innerHTML = `<div class="name">${escapeHtml(p.name)}</div>
<div class="sub">Chips ${p.chips} • Total ${p.totalShots} • Round ${state.round}</div>
<div class="big-stats">
<div class="stat"><div class="v">${t.shots}</div><div class="l">Shots</div></div>
<div class="stat"><div class="v">${t.ballsDown}/3</div><div class="l">Balls down</div></div>
<div class="stat"><div class="v">${p.chips}</div><div class="l">Chips</div></div>
<div class="stat"><div class="v">${state.round}</div><div class="l">Round</div></div>
</div>`;
} else {
currentCard.innerHTML = `<div class="name">Waiting</div><div class="sub">No active turn</div>`;
}
const table = document.getElementById("scoreTable");
let maxRound = state.round;
if (maxRound < 1) maxRound = 1;
let html = '<thead><tr><th>Player</th><th class="num">Chips</th><th class="num">Total</th>';
for (let r = 1; r <= maxRound; r++) html += `<th class="num">R${r}</th>`;
html += '<th>Status</th></tr></thead><tbody>';
for (const p of state.players) {
const isCurrent = state.currentTurn && state.currentTurn.playerId === p.id;
const rowClass = (isCurrent ? "current " : "") + (p.eliminated ? "eliminated" : "");
const displayTotal = p.totalShots + (isCurrent ? state.currentTurn.shots : 0);
html += `<tr class="${rowClass}"><td>${escapeHtml(p.name)}</td>`;
html += `<td class="num"><span class="chip ${p.chips <= 1 ? "low" : "ok"}">${p.chips}</span></td>`;
html += `<td class="num">${displayTotal}</td>`;
for (let r = 1; r <= maxRound; r++) {
const turn = p.turns.find(t => t.round === r);
let cell = "";
if (turn) {
const txt = turn.timeout ? "T" : turn.shots;
const cls = turn.chipLost ? "bad" : "";
cell = `<span class="${cls}">${txt}</span>`;
} else if (isCurrent && r === state.round) {
cell = `${state.currentTurn.shots}…`;
}
html += `<td class="num">${cell}</td>`;
}
let status = "";
if (p.eliminated) status = "OUT";
else if (isCurrent) status = "AT TABLE";
else status = "waiting";
html += `<td>${status}</td></tr>`;
}
html += "</tbody>";
table.innerHTML = html;
const logLine = document.getElementById("logLine");
const recent = state.log.slice(-4);
logLine.innerHTML = recent.map(s => `<div>${escapeHtml(s)}</div>`).join("");
const payoutPanel = document.getElementById("payoutPanel");
if (state.phase === "finished" && state.payouts) {
payoutPanel.classList.remove("hidden");
let ph = "<h3>Payouts</h3>";
for (const line of state.payouts.lines) {
ph += `<div class="line"><span>${escapeHtml(line.name)} <span class="small">${escapeHtml(line.reason)}</span></span><strong>$${line.amount.toFixed(2)}</strong></div>`;
}
ph += `<div class="line"><span>Pot</span><strong>$${state.pot.toFixed(2)}</strong></div>`;
payoutPanel.innerHTML = ph;
} else {
payoutPanel.classList.add("hidden");
payoutPanel.innerHTML = "";
}
const playing = state.phase === "playing" && !!state.currentTurn;
document.getElementById("madeBtn").disabled = !playing;
document.getElementById("missBtn").disabled = !playing;
document.getElementById("timeoutBtn").disabled = !playing;
document.getElementById("undoBtn").disabled = history.length === 0;
document.getElementById("endBtn").disabled = state.phase === "finished";
updateTimer();
}
document.getElementById("madeBtn").onclick = () => doShot(true);
document.getElementById("missBtn").onclick = () => doShot(false);
document.getElementById("timeoutBtn").onclick = doTimeout;
document.getElementById("undoBtn").onclick = doUndo;
document.getElementById("endBtn").onclick = doEndNight;
document.getElementById("demoBtn").onclick = doDemo;
document.getElementById("newBtn").onclick = doNew;
document.getElementById("startBtn").onclick = startNight;
document.getElementById("cancelSetup").onclick = () => document.getElementById("setupPanel").classList.remove("open");
document.getElementById("setupBtn").onclick = () => document.getElementById("setupPanel").classList.toggle("open");
document.getElementById("tvBtn").onclick = () => document.body.classList.toggle("tv");
render();
setInterval(updateTimer, 250);
</script>
</body>
</html>
The playback
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Thursday Pool — Playback</title>
<style>
:root {
--bg:#0b0f14; --panel:#151c24; --line:#2a3542; --text:#f5f7fa; --muted:#9aa7b5;
--accent:#ffd166; --good:#4ade80; --bad:#ff5c5c; --blue:#60a5fa;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
body { min-height:100vh; }
.app { display:flex; flex-direction:column; min-height:100vh; }
header { padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); background:#0e141b; position:sticky; top:0; z-index:10; }
h1 { font-size:clamp(18px,2.2vw,28px); margin:0; letter-spacing:.02em; }
.badge { font-size:clamp(12px,1.4vw,18px); color:var(--muted); }
.main { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr); gap:12px; padding:12px; flex:1; }
@media (max-width:900px) { .main { grid-template-columns:1fr; } }
.board { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.controls { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.event-banner { font-size:clamp(18px,2.5vw,36px); font-weight:800; background:#1d2a38; border:1px solid #3b4b5e; border-radius:14px; padding:12px; }
.current { background:linear-gradient(135deg,#1d2a38,#111820); border:1px solid #3b4b5e; border-radius:14px; padding:12px; }
.current .name { font-size:clamp(28px,5vw,64px); font-weight:800; line-height:1.05; }
.current .sub { font-size:clamp(14px,1.8vw,22px); color:var(--muted); }
.big-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px; }
.stat { background:#0e141b; border:1px solid var(--line); border-radius:10px; padding:8px; text-align:center; }
.stat .v { font-size:clamp(22px,3vw,42px); font-weight:800; }
.stat .l { font-size:clamp(10px,1.1vw,14px); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; flex:1; min-height:200px; }
table { width:100%; border-collapse:collapse; font-size:clamp(14px,1.5vw,22px); }
th,td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { position:sticky; top:0; background:#0e141b; color:var(--muted); font-size:.75em; text-transform:uppercase; letter-spacing:.06em; z-index:1; }
tr.current { background:rgba(255,209,102,.14); }
tr.eliminated { opacity:.45; text-decoration:line-through; }
td.num,th.num { text-align:right; }
.chip { display:inline-block; min-width:1.6em; padding:2px 6px; border-radius:999px; background:#243241; text-align:center; font-weight:700; }
.chip.low { background:#5a1f1f; color:#ffb4b4; }
.chip.ok { background:#1f4d2e; color:#b9f6ca; }
.bad { color:var(--bad); font-weight:700; }
.controls .row { display:flex; gap:8px; flex-wrap:wrap; }
button { font:inherit; border:0; border-radius:12px; padding:14px 16px; background:#243241; color:var(--text); font-weight:700; cursor:pointer; touch-action:manipulation; }
button:active { transform:translateY(1px); }
button.primary { background:var(--accent); color:#111; }
button.blue { background:var(--blue); color:#061a33; }
button.ghost { background:transparent; border:1px solid var(--line); color:var(--muted); }
button:disabled { opacity:.35; cursor:not-allowed; }
.slider-group { display:flex; flex-direction:column; gap:6px; }
.slider-group label { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:clamp(12px,1.2vw,16px); }
input[type=range] { width:100%; accent-color:var(--accent); }
.log { font-size:clamp(12px,1.2vw,16px); color:var(--muted); min-height:2.5em; max-height:220px; overflow:auto; border-top:1px solid var(--line); padding-top:8px; }
.log div { padding:2px 0; border-bottom:1px dashed #2a3542; }
.payout { background:#0e141b; border:1px solid var(--line); border-radius:12px; padding:10px; font-size:clamp(14px,1.5vw,20px); }
.payout h3 { margin:0 0 6px; font-size:1em; color:var(--accent); }
.payout .line { display:flex; justify-content:space-between; gap:10px; padding:3px 0; border-bottom:1px dashed #2a3542; }
.payout .line:last-child { border-bottom:0; }
.small { font-size:.8em; color:var(--muted); }
.hidden { display:none !important; }
</style>
</head>
<body>
<div class="app">
<header>
<div>
<h1>Thursday Pool — Playback</h1>
<div class="badge" id="headerInfo"></div>
</div>
<div class="badge" id="stepInfo"></div>
</header>
<div class="main">
<section class="board">
<div class="event-banner" id="eventBanner"></div>
<div class="current" id="currentCard"></div>
<div class="table-wrap"><table id="scoreTable"></table></div>
<div class="payout hidden" id="payoutPanel"></div>
</section>
<section class="controls">
<div class="row">
<button class="ghost" id="resetBtn">Reset</button>
<button class="blue" id="backBtn">◀ Step</button>
<button class="primary" id="playBtn">Play</button>
<button class="blue" id="fwdBtn">Step ▶</button>
</div>
<div class="slider-group">
<label>Timeline <span id="stepLabel"></span></label>
<input type="range" id="stepSlider" min="0" max="0" value="0" step="1">
</div>
<div class="slider-group">
<label>Speed <span id="speedLabel">1×</span></label>
<input type="range" id="speedSlider" min="0.25" max="4" value="1" step="0.25">
</div>
<div class="log" id="logLine"></div>
</section>
</div>
</div>
<script>
const BUY_IN = 20;
const START_CHIPS = 5;
const MAX_SHOTS = 4;
const DEMO_NAMES = ["Ace","Bella","Cruz","Dee","Eddie","Frankie","Gia","Hank","Ivy","Jo","Kai","Lou"];
function makeGame(names) {
const players = names.map((name, i) => ({
id: i,
name: (name || "").trim() || ("Player " + (i + 1)),
chips: START_CHIPS,
totalShots: 0,
turns: [],
eliminated: false,
eliminatedAt: null
}));
return {
players,
round: 1,
currentIndex: -1,
currentTurn: null,
phase: "playing",
earlyBird: { best: Infinity, winners: [] },
eliminationOrder: [],
pot: players.length * BUY_IN,
initialCount: players.length,
log: [],
lastEvent: "",
payouts: null
};
}
function isActive(p) { return p.chips > 0 && !p.eliminated; }
function activePlayers(state) { return state.players.filter(isActive); }
function playerById(state, id) { return state.players.find(p => p.id === id); }
function playerName(state, id) { const p = playerById(state, id); return p ? p.name : "?"; }
function beginTurn(state, record) {
if (state.phase !== "playing") return;
const p = state.players[state.currentIndex];
if (!p || !isActive(p)) return;
state.currentTurn = { playerId: p.id, shots: 0, ballsDown: 0, timeout: false, startedAt: 0 };
state.lastEvent = `Round ${state.round}: ${p.name} at the table.`;
state.log.push(state.lastEvent);
if (record) record(state, state.lastEvent);
}
function advanceToNextTurn(state, record) {
if (state.phase !== "playing" || state.currentTurn) return;
const n = state.players.length;
const start = state.currentIndex + 1;
for (let k = 0; k < n; k++) {
const i = (start + k) % n;
if (isActive(state.players[i])) {
if (start + k >= n) state.round++;
state.currentIndex = i;
beginTurn(state, record);
return;
}
}
finishGame(state, false, record);
}
function applyShot(state, made, record) {
if (state.phase !== "playing" || !state.currentTurn) return;
const t = state.currentTurn;
t.shots++;
if (made) t.ballsDown++;
if (t.ballsDown >= 3) {
const shotMsg = `${playerName(state, t.playerId)} shot ${t.shots}: ball down (3/3).`;
finishTurn(state, false, record, shotMsg);
} else {
state.lastEvent = `${playerName(state, t.playerId)} shot ${t.shots}: ${made ? "ball down" : "miss"} (${t.ballsDown}/3).`;
state.log.push(state.lastEvent);
if (record) record(state, state.lastEvent);
}
}
function applyTimeout(state, record) {
if (state.phase !== "playing" || !state.currentTurn) return;
state.currentTurn.timeout = true;
finishTurn(state, true, record, "");
}
function finishTurn(state, timeout, record, prefix) {
const t = state.currentTurn;
if (!t) return;
const p = playerById(state, t.playerId);
const completed = !timeout && t.ballsDown >= 3;
const chipLost = timeout || t.shots > MAX_SHOTS;
p.totalShots += t.shots;
p.turns.push({ round: state.round, shots: t.shots, ballsDown: t.ballsDown, timeout: !!timeout, chipLost, completed });
if (chipLost) {
p.chips--;
if (p.chips <= 0) {
p.chips = 0;
p.eliminated = true;
p.eliminatedAt = state.eliminationOrder.length + 1;
state.eliminationOrder.push(p.id);
}
}
if (completed && state.round === 1) {
if (t.shots < state.earlyBird.best) {
state.earlyBird.best = t.shots;
state.earlyBird.winners = [p.id];
} else if (t.shots === state.earlyBird.best) {
state.earlyBird.winners.push(p.id);
}
}
let msg = prefix ? prefix + " " : "";
msg += `${p.name} ${timeout ? "timed out" : "cleared"} in ${t.shots} shot${t.shots === 1 ? "" : "s"}`;
if (chipLost) msg += ` — loses a chip (${p.chips} left)`;
else msg += ` — no chip lost`;
if (p.eliminated) msg += ` — ELIMINATED`;
state.lastEvent = msg;
state.log.push(msg);
state.currentTurn = null;
if (record) record(state, msg);
const active = activePlayers(state);
if (active.length <= 1) finishGame(state, false, record);
}
function finishGame(state, manual, record) {
if (state.phase === "finished") return;
state.phase = "finished";
state.currentTurn = null;
let winner, second;
const active = activePlayers(state);
if (manual) {
const ranked = [...state.players].sort((a, b) => b.chips - a.chips || a.totalShots - b.totalShots || a.name.localeCompare(b.name));
winner = ranked[0];
second = ranked[1] || null;
} else if (active.length === 1) {
winner = active[0];
const lastElim = state.eliminationOrder.length ? playerById(state, state.eliminationOrder[state.eliminationOrder.length - 1]) : null;
second = lastElim && lastElim.id !== winner.id ? lastElim : null;
} else if (active.length === 0) {
const lastElim = state.eliminationOrder.length ? playerById(state, state.eliminationOrder[state.eliminationOrder.length - 1]) : null;
const secondElim = state.eliminationOrder.length > 1 ? playerById(state, state.eliminationOrder[state.eliminationOrder.length - 2]) : null;
winner = lastElim;
second = secondElim;
} else {
const ranked = [...state.players].sort((a, b) => b.chips - a.chips || a.totalShots - b.totalShots || a.name.localeCompare(b.name));
winner = ranked[0];
second = ranked[1] || null;
}
if (!winner) {
state.payouts = { lines: [], winnerId: null, secondId: null, earlyWinners: [] };
return;
}
const pot = state.pot;
let winnerAmt, secondAmt, earlyAmt;
if (state.initialCount === 1) {
winnerAmt = pot; secondAmt = 0; earlyAmt = 0;
} else if (state.initialCount === 2) {
winnerAmt = pot * 0.8; secondAmt = pot * 0.2; earlyAmt = 0;
} else {
winnerAmt = pot * 0.7; secondAmt = pot * 0.2; earlyAmt = pot * 0.1;
}
if (!second) { winnerAmt += secondAmt; secondAmt = 0; }
const earlyWinners = state.earlyBird.winners.map(id => playerById(state, id)).filter(Boolean);
if (earlyWinners.length === 0) { winnerAmt += earlyAmt; earlyAmt = 0; }
const lines = [];
lines.push({ name: winner.name, amount: winnerAmt, reason: "Winner" });
if (second && secondAmt > 0) lines.push({ name: second.name, amount: secondAmt, reason: "Second" });
if (earlyWinners.length && earlyAmt > 0) {
const each = earlyAmt / earlyWinners.length;
earlyWinners.forEach(p => lines.push({ name: p.name, amount: each, reason: `Early bird (${state.earlyBird.best} shots)` }));
}
state.payouts = {
winnerId: winner.id,
secondId: second ? second.id : null,
earlyWinners: earlyWinners.map(p => p.id),
winnerAmt, secondAmt, earlyAmt,
lines
};
state.lastEvent = `Night over. ${winner.name} wins $${winnerAmt.toFixed(2)}.`;
state.log.push(state.lastEvent);
if (record) record(state, state.lastEvent);
}
function mulberry32(a) {
return function() {
a |= 0; a = a + 0x6D2B79F5 | 0;
let t = Math.imul(a ^ a >>> 15, 1 | a);
t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
return ((t ^ t >>> 14) >>> 0) / 4294967296;
};
}
function buildTimeline() {
const timeline = [];
const record = (state, message) => {
timeline.push({ state: JSON.parse(JSON.stringify(state)), message });
};
const state = makeGame(DEMO_NAMES);
timeline.push({
state: JSON.parse(JSON.stringify(state)),
message: `Night begins. ${state.initialCount} players, $${BUY_IN} each, pot $${state.pot}.`
});
advanceToNextTurn(state, record);
const rng = mulberry32(0xC0FFEE);
let safety = 0;
while (state.phase === "playing" && safety < 5000) {
safety++;
if (!state.currentTurn) {
advanceToNextTurn(state, record);
continue;
}
if (state.currentTurn.shots >= 2 && rng() < 0.012) {
applyTimeout(state, record);
} else {
const p = playerById(state, state.currentTurn.playerId);
const skill = 0.45 + ((p.id * 13) % 25) / 100;
const made = rng() < skill;
applyShot(state, made, record);
}
if (state.phase === "playing" && !state.currentTurn) {
advanceToNextTurn(state, record);
}
}
if (state.phase !== "finished") {
finishGame(state, true, record);
}
return timeline;
}
function escapeHtml(s) {
return String(s).replace(/[&<>"']/g, c => ({ "&":"&", "<":"<", ">":">", '"':""", "'":"'" }[c]));
}
const timeline = buildTimeline();
let step = 0;
let playing = false;
let speed = 1;
let timerId = null;
function schedule() {
clearTimeout(timerId);
if (!playing) return;
if (step >= timeline.length - 1) {
playing = false;
render();
return;
}
timerId = setTimeout(() => {
if (!playing) return;
step++;
render();
schedule();
}, 1200 / speed);
}
function render() {
const entry = timeline[step];
const cur = entry.state;
const maxStep = timeline.length - 1;
document.getElementById("headerInfo").textContent =
`Step ${step} / ${maxStep} • Round ${cur.round} • ${activePlayers(cur).length} active • Pot $${cur.pot} • ${cur.phase === "finished" ? "FINISHED" : "Playing"}`;
document.getElementById("stepInfo").textContent = `Step ${step} / ${maxStep}`;
document.getElementById("eventBanner").textContent = entry.message;
const currentCard = document.getElementById("currentCard");
if (cur.phase === "finished" && cur.payouts) {
const winner = playerById(cur, cur.payouts.winnerId);
currentCard.innerHTML = `<div class="name">${escapeHtml(winner ? winner.name : "Night over")}</div>
<div class="sub">Night over • Pot $${cur.pot}</div>
<div class="big-stats">
<div class="stat"><div class="v">${cur.payouts.lines.length}</div><div class="l">Payouts</div></div>
<div class="stat"><div class="v">${cur.initialCount}</div><div class="l">Players</div></div>
<div class="stat"><div class="v">${cur.round}</div><div class="l">Rounds</div></div>
<div class="stat"><div class="v">${cur.eliminationOrder.length}</div><div class="l">Out</div></div>
</div>`;
} else if (cur.currentTurn) {
const p = playerById(cur, cur.currentTurn.playerId);
const t = cur.currentTurn;
currentCard.innerHTML = `<div class="name">${escapeHtml(p.name)}</div>
<div class="sub">Chips ${p.chips} • Total ${p.totalShots} • Round ${cur.round}</div>
<div class="big-stats">
<div class="stat"><div class="v">${t.shots}</div><div class="l">Shots</div></div>
<div class="stat"><div class="v">${t.ballsDown}/3</div><div class="l">Balls down</div></div>
<div class="stat"><div class="v">${p.chips}</div><div class="l">Chips</div></div>
<div class="stat"><div class="v">${cur.round}</div><div class="l">Round</div></div>
</div>`;
} else {
currentCard.innerHTML = `<div class="name">Between turns</div><div class="sub">No active turn</div>`;
}
const table = document.getElementById("scoreTable");
let maxRound = cur.round;
if (maxRound < 1) maxRound = 1;
let html = '<thead><tr><th>Player</th><th class="num">Chips</th><th class="num">Total</th>';
for (let r = 1; r <= maxRound; r++) html += `<th class="num">R${r}</th>`;
html += '<th>Status</th></tr></thead><tbody>';
for (const p of cur.players) {
const isCurrent = cur.currentTurn && cur.currentTurn.playerId === p.id;
const rowClass = (isCurrent ? "current " : "") + (p.eliminated ? "eliminated" : "");
const displayTotal = p.totalShots + (isCurrent ? cur.currentTurn.shots : 0);
html += `<tr class="${rowClass}"><td>${escapeHtml(p.name)}</td>`;
html += `<td class="num"><span class="chip ${p.chips <= 1 ? "low" : "ok"}">${p.chips}</span></td>`;
html += `<td class="num">${displayTotal}</td>`;
for (let r = 1; r <= maxRound; r++) {
const turn = p.turns.find(t => t.round === r);
let cell = "";
if (turn) {
const txt = turn.timeout ? "T" : turn.shots;
const cls = turn.chipLost ? "bad" : "";
cell = `<span class="${cls}">${txt}</span>`;
} else if (isCurrent && r === cur.round) {
cell = `${cur.currentTurn.shots}…`;
}
html += `<td class="num">${cell}</td>`;
}
let status = "";
if (p.eliminated) status = "OUT";
else if (isCurrent) status = "AT TABLE";
else status = "waiting";
html += `<td>${status}</td></tr>`;
}
html += "</tbody>";
table.innerHTML = html;
const logLine = document.getElementById("logLine");
const start = Math.max(0, step - 7);
const recent = timeline.slice(start, step + 1).map(t => t.message);
logLine.innerHTML = recent.map(s => `<div>${escapeHtml(s)}</div>`).join("");
const payoutPanel = document.getElementById("payoutPanel");
if (cur.phase === "finished" && cur.payouts) {
payoutPanel.classList.remove("hidden");
let ph = "<h3>Payouts</h3>";
for (const line of cur.payouts.lines) {
ph += `<div class="line"><span>${escapeHtml(line.name)} <span class="small">${escapeHtml(line.reason)}</span></span><strong>$${line.amount.toFixed(2)}</strong></div>`;
}
ph += `<div class="line"><span>Pot</span><strong>$${cur.pot.toFixed(2)}</strong></div>`;
payoutPanel.innerHTML = ph;
} else {
payoutPanel.classList.add("hidden");
payoutPanel.innerHTML = "";
}
document.getElementById("stepSlider").max = maxStep;
document.getElementById("stepSlider").value = step;
document.getElementById("stepLabel").textContent = `${step} / ${maxStep}`;
document.getElementById("speedLabel").textContent = speed.toFixed(2).replace(/\.00$/, "") + "×";
document.getElementById("playBtn").textContent = playing ? "Pause" : "Play";
document.getElementById("backBtn").disabled = step <= 0;
document.getElementById("fwdBtn").disabled = step >= maxStep;
document.getElementById("resetBtn").disabled = step === 0 && !playing;
}
document.getElementById("stepSlider").addEventListener("input", e => {
playing = false;
clearTimeout(timerId);
step = parseInt(e.target.value, 10);
render();
});
document.getElementById("speedSlider").addEventListener("input", e => {
speed = parseFloat(e.target.value);
if (playing) schedule();
render();
});
document.getElementById("playBtn").onclick = () => {
if (playing) {
playing = false;
clearTimeout(timerId);
} else {
if (step >= timeline.length - 1) step = 0;
playing = true;
schedule();
}
render();
};
document.getElementById("backBtn").onclick = () => {
playing = false;
clearTimeout(timerId);
if (step > 0) step--;
render();
};
document.getElementById("fwdBtn").onclick = () => {
playing = false;
clearTimeout(timerId);
if (step < timeline.length - 1) step++;
render();
};
document.getElementById("resetBtn").onclick = () => {
playing = false;
clearTimeout(timerId);
step = 0;
render();
};
render();
</script>
</body>
</html>
What'll go wrong
- No persistence. Refresh, close the tab, or let the phone die and the whole night is gone. At 15% battery, put it on a charger before you start.
- One phone cannot magically drive a separate TV browser without mirroring/casting. The console is one page; if you cast the phone screen, the TV sees the same thing. If you open it separately on the TV, it will not sync.
- The timer is advisory. The app does not know whether someone is at the table. If you forget to hit Timeout, nobody loses a chip.
- Undo is in-memory only and limited. It will save you from a double-tap, not from a refresh or a closed tab.
- Late buy-ins are not handled mid-game. You can start a new night with more names, but adding a player after the game starts is not built in.
- The payout rules are my guesses: 70/20/10, early bird as best round-1 turn, ties split. If your bar does it differently, settle that before money is on the bar.
- Edge cases can be argued: timeout ends the turn with shots so far, all-bust picks the last eliminated as winner, manual End night ranks by chips then total shots. Those are decisions, not universal pool-hall law.
- The scorecard gets wide after many rounds. On a phone it scrolls; on a TV it depends on cast resolution and how far away people are standing.
- The playback is a deterministic simulated night. It uses the same rules, but it is not your actual crowd, actual pace, or actual arguments. It is there to catch broken flows, not to predict Thursday.
- The app does not hold money, verify buy-ins, or stop anyone from tapping your phone. You are still the bank and the referee.
Attachments
deepseek/deepseek-v4.1-flash-1017 — page 1
deepseek/deepseek-v4.1-flash-1017 — page 2