squares · live NBA pool

\n \n\n\n","label",[163,65],"frontend","pulls","branches","forks","envVars",{"_171":26,"_173":26},"connections",{"_171":26,"_172":26},"count","unfilledCount","emptyCount",{"_33":251,"_13":226,"_63":220,"_43":-5,"_35":36,"_155":158,"_156":94,"_37":252,"_39":26,"_66":214,"_159":-5,"_67":24,"_161":-5,"_189":253,"_17":254},{"_33":243,"_13":244,"_63":92,"_43":220,"_35":36,"_155":245,"_156":94,"_37":246,"_39":158,"_66":247,"_159":248,"_67":24,"_161":-5,"_189":249,"_17":250},{"_33":235,"_13":236,"_63":237,"_43":220,"_35":36,"_155":238,"_156":94,"_37":239,"_39":26,"_66":208,"_159":240,"_67":24,"_161":-5,"_189":241,"_17":242},{"_33":227,"_13":228,"_63":229,"_43":220,"_35":36,"_155":230,"_156":94,"_37":231,"_39":26,"_66":208,"_159":232,"_67":24,"_161":-5,"_189":233,"_17":234},{"_33":217,"_13":218,"_63":219,"_43":220,"_35":36,"_155":221,"_156":94,"_37":222,"_39":26,"_66":208,"_159":223,"_67":24,"_161":-5,"_189":224,"_17":225},{"_33":212,"_13":163,"_63":154,"_43":-5,"_35":36,"_155":40,"_156":94,"_37":213,"_39":26,"_66":214,"_159":-5,"_67":24,"_161":-5,"_189":215,"_17":216},{"_33":203,"_13":204,"_63":205,"_43":154,"_35":36,"_155":206,"_156":94,"_37":207,"_39":158,"_66":208,"_159":209,"_67":24,"_161":-5,"_189":210,"_17":211},{"_33":153,"_13":65,"_63":64,"_43":154,"_35":36,"_155":73,"_156":94,"_37":200,"_39":158,"_66":21,"_159":160,"_67":24,"_161":-5,"_189":201,"_17":202},{"_33":192,"_13":193,"_63":194,"_43":154,"_35":36,"_155":195,"_156":94,"_37":196,"_39":26,"_66":21,"_159":197,"_67":24,"_161":-5,"_189":198,"_17":199},{"_33":184,"_13":185,"_63":186,"_43":-5,"_35":36,"_155":117,"_156":94,"_37":187,"_39":26,"_66":21,"_159":188,"_67":24,"_161":-5,"_189":190,"_17":191},"f0fe3b52-5be8-11f1-9a96-ee650bb23af1","README.md","f0fe3c42-5be8-11f1-9a96-ee650bb23af1",["D",1780119145867],"# 🏀 Gameday Squares\n\nA live NBA squares pool you run from a link. Create a room, share the short URL,\nfriends pick squares from their phones, and winners settle **automatically** off\nthe live NBA score — no manual scorekeeping.\n\n## How to play\n\n1. Open the app and **create a room** — pick a short slug (e.g. `okc`), the team\n tricodes (away + home), and a stake per square.\n2. Share `your-app-url/okc`. Each person enters their name and **taps squares** to\n claim them. Tap again to release.\n3. When the board hits **100/100**, anyone can **Lock + roll numbers** — the row\n (away) and column (home) digits are shuffled `0–9`.\n4. During the game, the app polls the public NBA scoreboard. At the end of each\n quarter it derives the winning square from the **last digit of each team's\n cumulative score** and credits the payout share. Q1/Q2/Q3/Final shares are\n configurable (default 15/25/15/45%).\n5. Winners show up on a **leaderboard** with one-tap **Venmo / Cash App** payment\n links between players.\n\n## Architecture\n\n```mermaid\nflowchart TD\n U[Phone browser] -->|poll every 4s| H[backend/index.ts · Hono]\n H -->|read/write rooms| B[(std/blob)]\n H -->|locked rooms only| N[backend/nba.ts]\n N -->|20s cache| CDN[cdn.nba.com scoreboard]\n N -->|derive quarter winners| S[settle → blob]\n H -->|serve| F[frontend: index.html · app.js · style.css]\n```\n\n## Files\n\n| File | Role |\n|------|------|\n| `backend/index.ts` | Hono HTTP handler — REST API + serves the frontend |\n| `backend/nba.ts` | NBA scoreboard fetch (cached 20s) + quarter settlement |\n| `backend/store.ts` | Blob-backed room storage + number shuffle |\n| `backend/types.ts` | Shared types + the avatar color palette |\n| `frontend/index.html` | App shell |\n| `frontend/app.js` | Vanilla-JS SPA: pick view, live view, leaderboard |\n| `frontend/style.css` | Dark, mobile-first styling |\n\n## API\n\n| Method & path | Purpose |\n|---------------|---------|\n| `POST /api/create` | Create a room `{ slug, label, home, away, stake }` |\n| `GET /api/:slug/state` | Room + live score (settles quarters when locked) |\n| `POST /api/:slug/join` | Register player / claim squares |\n| `POST /api/:slug/release` | Release one of your squares |\n| `POST /api/:slug/lock` | Lock board + roll the 0–9 digits |\n| `POST /api/:slug/reset` | Unlock + clear numbers/settlements |\n\n## Notes\n\n- State lives in **blob storage** keyed by slug — no database setup needed.\n- Scores come from the public `cdn.nba.com` live scoreboard (no API key). It only\n contains **today's** games, so lock a room on game day.\n- Sync is **poll-based** (4s) since Val Town doesn't accept inbound WebSockets.\n- Money flows are just deep links — the app never touches funds.\n","children",[],[185],"b89b7dec-5be8-11f1-98b0-ee650bb23af1","style.css","b89b7ef0-5be8-11f1-98b0-ee650bb23af1",8,["D",1780119051265],":root {\n --bg:#0e0e10; --panel:#18181b; --panel-2:#1f1f24; --line:#2a2a31;\n --ink:#f4f4f5; --ink-2:#a1a1aa; --ink-3:#71717a;\n --accent:#ff5a1f; --accent-soft:#ff5a1f1a; --good:#4ade80; --warn:#fbbf24;\n}\n* { box-sizing:border-box; }\nhtml, body {\n margin:0; padding:0; background:var(--bg); color:var(--ink);\n font-family:ui-sans-serif,-apple-system,\"SF Pro Text\",\"Inter\",system-ui,sans-serif;\n -webkit-font-smoothing:antialiased; min-height:100vh;\n}\nh1,h2,h3,h4 { font-family:\"SF Pro Display\",ui-sans-serif,system-ui,sans-serif; letter-spacing:-0.01em; margin:0; }\nbody { padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)); max-width:560px; margin:0 auto; }\n.topbar { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-bottom:14px; }\n.pill { display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent); font-size:11px; padding:4px 9px; border-radius:999px; font-weight:600; letter-spacing:0.02em; }\n.pill.neutral { background:#ffffff0d; color:var(--ink-2); }\n.pill.good { background:#4ade8022; color:var(--good); }\n.pill.live::before { content:\"\"; width:6px; height:6px; background:var(--accent); border-radius:50%; box-shadow:0 0 0 4px var(--accent-soft); animation:beat 1.2s infinite; }\n@keyframes beat { 0%,100% { opacity:1; } 50% { opacity:.4; } }\n.title { font-size:22px; font-weight:600; letter-spacing:-0.02em; line-height:1.15; }\n.sub { font-size:13px; color:var(--ink-2); line-height:1.45; }\n.label { font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.1em; font-weight:600; }\n.field { background:#ffffff0a; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:14px; color:var(--ink); width:100%; font-family:inherit; }\n.field::placeholder { color:var(--ink-3); }\n.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }\n.btn { background:var(--accent); color:#0a0a0c; font-weight:600; font-size:14px; padding:13px; border-radius:12px; text-align:center; letter-spacing:-0.01em; border:none; width:100%; cursor:pointer; font-family:inherit; }\n.btn:disabled { opacity:.5; cursor:not-allowed; }\n.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--ink); }\n.btn.danger { background:transparent; border:1px solid #ef444466; color:#fca5a5; }\n.stack { display:flex; flex-direction:column; gap:10px; }\n.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; }\n.url { font-family:\"SF Mono\",ui-monospace,monospace; font-size:12px; color:var(--ink-2); text-align:center; word-break:break-all; }\n.score { display:flex; justify-content:space-between; align-items:center; background:#ffffff08; border:1px solid var(--line); border-radius:12px; padding:14px 16px; }\n.score .team { display:flex; flex-direction:column; gap:2px; }\n.score .team .name { font-size:11px; color:var(--ink-2); font-weight:500; }\n.score .team .pts { font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }\n.score .clock { font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; text-align:center; }\n.score .clock .q { font-size:14px; color:var(--ink); font-weight:600; }\n.grid-wrap { display:grid; grid-template-columns:24px 1fr; gap:6px; align-items:start; }\n.axis-col { display:grid; grid-template-columns:24px repeat(10,1fr); gap:3px; font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }\n.axis-col .h { grid-column:1/2; text-align:center; font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); font-weight:600; }\n.axis-col .cell { text-align:center; font-weight:600; }\n.axis-row { display:grid; grid-template-rows:repeat(10,1fr); font-size:11px; color:var(--ink-3); gap:3px; font-variant-numeric:tabular-nums; }\n.axis-row .h { text-align:center; font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); font-weight:600; display:flex; align-items:center; justify-content:center; }\n.axis-row .cell { display:flex; align-items:center; justify-content:center; font-weight:600; }\n.grid { display:grid; grid-template-columns:repeat(10,1fr); gap:3px; aspect-ratio:1/1; }\n.sq { background:#ffffff08; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--ink-3); aspect-ratio:1/1; border:none; font-family:inherit; cursor:pointer; padding:0; overflow:hidden; text-overflow:ellipsis; line-height:1.1; }\n.sq.taken { color:#0a0a0c; font-weight:600; }\n.sq.mine { outline:2px solid var(--accent); outline-offset:-2px; }\n.sq.win { box-shadow:0 0 0 2px var(--good),0 0 12px #4ade8055; z-index:1; }\n.sq[disabled] { cursor:default; }\n.lb-row { display:flex; justify-content:space-between; font-size:13px; padding:8px 10px; border-radius:8px; background:#ffffff05; }\n.lb-row.you { background:var(--accent-soft); color:var(--accent); }\n.lb-row .amt { font-variant-numeric:tabular-nums; }\n.presence { display:flex; align-items:center; flex-wrap:wrap; gap:0; margin-top:6px; }\n.avatar { width:22px; height:22px; border-radius:50%; background:#ffffff22; border:2px solid var(--bg); margin-left:-6px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#0a0a0c; }\n.avatar:first-child { margin-left:0; }\n.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--panel); border:1px solid var(--line); padding:10px 16px; border-radius:999px; font-size:13px; color:var(--ink); box-shadow:0 8px 24px #00000080; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:10; }\n.toast.show { opacity:1; transform:translateX(-50%) translateY(-4px); }\n.center { text-align:center; }\na { color:var(--accent); }\ndetails { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }\ndetails summary { cursor:pointer; font-size:13px; color:var(--ink-2); font-weight:600; list-style:none; }\ndetails summary::-webkit-details-marker { display:none; }\ndetails[open] { padding-bottom:14px; }\n.quarter-card { background:linear-gradient(180deg,#4ade8033,#4ade8011); border:1px solid #4ade8044; border-radius:14px; padding:16px; }\n.quarter-card.you { background:linear-gradient(180deg,var(--accent),var(--accent)); color:#0a0a0c; }\n.quarter-card .qlabel { font-size:11px; font-weight:700; opacity:.7; text-transform:uppercase; letter-spacing:.12em; }\n.quarter-card .qwinner { font-size:22px; font-weight:700; margin-top:4px; }\n.quarter-card .qamt { font-size:14px; margin-top:2px; opacity:.85; }\nhr { border:0; border-top:1px solid var(--line); margin:8px 0; }\n.foot { text-align:center; font-size:11px; color:var(--ink-3); margin-top:18px; }\n",[],[163,193],["D",1780119055106],[],[163,65],"df554742-5be8-11f1-9864-ee650bb23af1","app.js","8040c88a-5be8-11f1-ba93-ee650bb23af1",10,["D",1780119116252],"script","const $app = document.getElementById(\"app\");\nconst $toast = document.getElementById(\"toast\");\nconst path = location.pathname.replace(/^\\//, \"\").replace(/\\/+$/, \"\").toLowerCase();\nconst slug = path && /^[a-z0-9]{2,8}$/.test(path) ? path : \"\";\nlet me = JSON.parse(localStorage.getItem(\"squares:me\") || \"{}\"); // { name, venmo, cashapp }\nlet state = null; // { room, live }\nlet pollTimer = null;\nlet lastHash = \"\"; // skip re-render if nothing changed (preserves focus + typing)\n\nfunction toast(msg) {\n $toast.textContent = msg;\n $toast.classList.add(\"show\");\n clearTimeout(toast._t);\n toast._t = setTimeout(() => $toast.classList.remove(\"show\"), 2400);\n}\nwindow.toast = toast;\n\nasync function api(p, body) {\n const opts = body\n ? { method: \"POST\", headers: { \"content-type\": \"application/json\" }, body: JSON.stringify(body) }\n : {};\n const res = await fetch(\"/api\" + p, opts);\n return res.json();\n}\n\nfunction saveMe() {\n localStorage.setItem(\"squares:me\", JSON.stringify(me));\n}\n\n// ── views ────────────────────────────────────────────────────────────────\n\nfunction viewCreate() {\n $app.innerHTML = `\n \n

Start a squares pool

Pick a short URL. Share the link. Friends pick squares from their phones — winners settle automatically from the live NBA score.

Short URL

\n ${location.host}/\n \n

Matchup label

\n \n

Away tricode

\n \n

Home tricode

\n \n

Stake per square ($)

\n \n

No account. Open the room URL to share.

view source

\n `;\n document.getElementById(\"create\").onclick = onCreate;\n}\n\nasync function onCreate() {\n const s = document.getElementById(\"slug\").value.trim();\n const label = document.getElementById(\"label\").value.trim();\n const away = document.getElementById(\"away\").value.trim().toUpperCase();\n const home = document.getElementById(\"home\").value.trim().toUpperCase();\n const stake = Number(document.getElementById(\"stake\").value) || 5;\n if (!s || !home || !away) return toast(\"slug + home + away required\");\n const r = await api(\"/create\", { slug: s, label, home, away, stake });\n if (r.error) return toast(r.error);\n location.href = \"/\" + r.slug;\n}\n\nfunction viewRoom() {\n if (!state || !state.room) {\n $app.innerHTML = `

Room not found

Double-check the URL.

Start a new room

`;\n return;\n }\n if (!state.room.locked) return viewPicking();\n return viewLive();\n}\n\nfunction viewPicking() {\n const room = state.room;\n const filled = Object.keys(room.squares).length;\n const meName = (me.name || \"\").toLowerCase();\n const myPicks = Object.entries(room.squares).filter(([, n]) => n === meName).map(([i]) => Number(i));\n\n $app.innerHTML = `\n \n

${esc(room.label)}

$${room.stake} per square · Q1 ${pct(room.payouts.q1)} · Q2 ${pct(room.payouts.q2)} · Q3 ${pct(room.payouts.q3)} · Final ${pct(room.payouts.final)}

Your name (appears on your squares)

\n \n

Venmo

\n \n

Cash App

\n \n

\n\n

Pick squares — tap to claim, tap again to release

${room.home}→

\n ${Array.from({ length: 10 }).map(() => '

').join(\"\")}\n

${room.away}↓

\n ${Array.from({ length: 9 }).map(() => '

').join(\"\")}\n

You own ${myPicks.length} · $${myPicks.length * room.stake}

\n \n

\n\n

Share / admin

${location.href}

\n \n \n

view source

\n `;\n\n const $grid = document.getElementById(\"grid\");\n for (let i = 0; i < 100; i++) {\n const owner = room.squares[String(i)];\n const player = owner ? room.players[owner] : null;\n const isMine = owner && owner === meName;\n const btn = document.createElement(\"button\");\n btn.className = \"sq\" + (owner ? \" taken\" : \"\") + (isMine ? \" mine\" : \"\");\n btn.style.background = player ? player.color : \"\";\n btn.textContent = player ? initials(player.name) : \"\";\n btn.dataset.idx = String(i);\n btn.onclick = () => toggleSquare(i);\n $grid.appendChild(btn);\n }\n\n document.getElementById(\"save-me\").onclick = () => {\n me = {\n name: document.getElementById(\"me-name\").value.trim(),\n venmo: document.getElementById(\"me-venmo\").value.trim(),\n cashapp: document.getElementById(\"me-cashapp\").value.trim(),\n };\n if (!me.name) return toast(\"add your name\");\n saveMe();\n api(\"/\" + room.slug + \"/join\", { name: me.name, venmo: me.venmo, cashapp: me.cashapp, picks: [] })\n .then(() => { toast(\"saved\"); refresh(); });\n };\n\n document.getElementById(\"lock\").onclick = async () => {\n if (filled < 100) return;\n if (!confirm(\"Lock the board and roll numbers? Cannot undo.\")) return;\n const r = await api(\"/\" + room.slug + \"/lock\", {});\n if (r.error) return toast(r.error);\n refresh();\n };\n\n document.getElementById(\"copy-url\").onclick = () => {\n navigator.clipboard.writeText(location.href);\n toast(\"copied\");\n };\n document.getElementById(\"reset-room\").onclick = () => {\n if (confirm(\"Reset all squares + unlock?\")) {\n api(\"/\" + room.slug + \"/reset\", {}).then(() => location.reload());\n }\n };\n\n const $pres = document.getElementById(\"presence\");\n Object.values(room.players).forEach((p) => {\n const a = document.createElement(\"div\");\n a.className = \"avatar\";\n a.style.background = p.color;\n a.textContent = initials(p.name);\n a.title = p.name;\n $pres.appendChild(a);\n });\n}\n\nasync function toggleSquare(idx) {\n const room = state.room;\n if (!me.name) {\n toast(\"add your name first\");\n document.getElementById(\"me-name\").focus();\n return;\n }\n const meKey = me.name.toLowerCase();\n const owner = room.squares[String(idx)];\n if (owner && owner !== meKey) return toast(\"taken by \" + room.players[owner].name);\n if (owner === meKey) {\n await api(\"/\" + room.slug + \"/release\", { name: me.name, idx });\n } else {\n await api(\"/\" + room.slug + \"/join\", { name: me.name, venmo: me.venmo, cashapp: me.cashapp, picks: [idx] });\n }\n refresh();\n}\n\nfunction viewLive() {\n const { room, live } = state;\n const meName = (me.name || \"\").toLowerCase();\n const pot = 100 * room.stake;\n const homePts = live ? live.home.score : 0;\n const awayPts = live ? live.away.score : 0;\n const period = live ? live.period : 0;\n const clock = live ? formatClock(live.clock) : \"\";\n const statusText = !live\n ? \"waiting for tip-off\"\n : live.status === 1 ? \"pre-game\"\n : live.status === 3 ? \"FINAL\"\n : (period <= 4 ? \"Q\" + period : \"OT\" + (period - 4));\n const liveCell = live && room.locked ? cellForScore(room, homePts, awayPts) : -1;\n const hotWinner = liveCell >= 0 ? room.squares[String(liveCell)] : null;\n const hotPlayer = hotWinner ? room.players[hotWinner] : null;\n\n const settled = room.settled || {};\n const quarters = [\"q1\", \"q2\", \"q3\", \"final\"];\n\n const totals = {};\n for (const [qk, share] of Object.entries(room.payouts)) {\n const s = settled[qk];\n if (s) totals[s.winner] = (totals[s.winner] || 0) + share * pot;\n }\n const lbRows = Object.values(room.players)\n .map((p) => ({ p, won: totals[p.name.toLowerCase()] || 0 }))\n .sort((a, b) => b.won - a.won);\n\n $app.innerHTML = `\n \n

${esc(room.label)}

Pot: $${pot} · share at ${location.host}/${room.slug}

\n\n

${room.away}${awayPts}

${statusText}

${clock}

${room.home}${homePts}

\n\n ${renderJustSettled(room, meName, pot)}\n\n

${room.home}→

\n ${room.colDigits.map((d) => `

${d}

`).join(\"\")}\n

${room.away}↓

\n ${room.rowDigits.map((d) => `

${d}

`).join(\"\")}\n

\n ${hotPlayer ? `

If ${statusText} ends now${esc(hotPlayer.name)} · $${Math.round((room.payouts[currentQKey(period)] || 0) * pot)}

` : \"\"}\n

\n\n

Leaderboard

\n ${lbRows.map(({ p, won }) => `

${esc(p.name)}$${won.toFixed(0)}

`).join(\"\") || '

No payouts yet.

'}\n

\n\n

Quarter ledger

\n ${quarters.map((qk) => {\n const s = settled[qk];\n const share = room.payouts[qk];\n const amt = Math.round(share * pot);\n if (!s) return `

${qLabel(qk)}TBD · $${amt}

`;\n const winnerName = room.players[s.winner].name;\n return `

${qLabel(qk)} · ${esc(winnerName)} (${s.awayDigit}-${s.homeDigit})$${amt}

`;\n }).join(\"\")}\n

\n\n

Share / admin

${location.href}

\n \n

view source

\n `;\n\n const $grid = document.getElementById(\"grid\");\n for (let i = 0; i < 100; i++) {\n const owner = room.squares[String(i)];\n const player = owner ? room.players[owner] : null;\n const isMine = owner === meName;\n const isHot = i === liveCell;\n const isWin = Object.values(settled).some((s) => s && s.squareIdx === i);\n const btn = document.createElement(\"button\");\n btn.className = \"sq taken\" + (isMine ? \" mine\" : \"\") + (isHot || isWin ? \" win\" : \"\");\n btn.disabled = true;\n btn.style.background = player ? player.color : \"#ffffff14\";\n btn.textContent = player ? initials(player.name) : \"\";\n $grid.appendChild(btn);\n }\n\n const $copy = document.getElementById(\"copy-url\");\n if ($copy) $copy.onclick = () => { navigator.clipboard.writeText(location.href); toast(\"copied\"); };\n}\n\nfunction renderJustSettled(room, meName, pot) {\n const settled = room.settled || {};\n const recent = Object.entries(settled)\n .map(([qk, s]) => ({ qk, s }))\n .filter(({ s }) => s && Date.now() - s.recordedAt < 90000)\n .sort((a, b) => b.s.recordedAt - a.s.recordedAt)[0];\n if (!recent) return \"\";\n const { qk, s } = recent;\n const winner = room.players[s.winner];\n const amt = Math.round(room.payouts[qk] * pot);\n const isYou = s.winner === meName;\n return `

${qLabel(qk)} winner

${esc(winner.name)} · ${s.awayDigit}-${s.homeDigit}

+$${amt}

\n ${isYou ? \"\" : payoutLinks(winner, room, meName, amt)}\n

`;\n}\n\nfunction payoutLinks(winner, room, meName, amt) {\n const meP = room.players[meName];\n if (!meP) return \"\";\n let html = '

';\n if (meP.venmo && winner.venmo) {\n const url = `https://venmo.com/${winner.venmo}?txn=pay&amount=${amt}¬e=${encodeURIComponent(room.label + \" squares\")}`;\n html += `Pay ${esc(winner.name)} $${amt} · Venmo`;\n }\n if (meP.cashapp && winner.cashapp) {\n const url = `https://cash.app/$${winner.cashapp}/${amt}`;\n html += `Pay ${esc(winner.name)} $${amt} · Cash App`;\n }\n html += \"

\";\n return html;\n}\n\nfunction cellForScore(room, homePts, awayPts) {\n const hd = homePts % 10;\n const ad = awayPts % 10;\n const rowIdx = room.rowDigits.indexOf(ad);\n const colIdx = room.colDigits.indexOf(hd);\n if (rowIdx < 0 || colIdx < 0) return -1;\n return rowIdx * 10 + colIdx;\n}\n\nfunction currentQKey(period) {\n if (period <= 1) return \"q1\";\n if (period === 2) return \"q2\";\n if (period === 3) return \"q3\";\n return \"final\";\n}\nfunction qLabel(qk) { return { q1: \"Q1\", q2: \"Q2 / Half\", q3: \"Q3\", final: \"Final\" }[qk]; }\nfunction pct(x) { return Math.round(x * 100) + \"%\"; }\nfunction initials(name) { return name.trim().slice(0, 2).toUpperCase(); }\nfunction esc(s) {\n return String(s || \"\").replace(/[&<>\"']/g, (c) => ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\", \"'\": \"'\" }[c]));\n}\nfunction formatClock(c) {\n if (!c) return \"\";\n const m = c.match(/PT(\\d+)M([\\d.]+)S/);\n if (!m) return c;\n return m[1] + \":\" + String(Math.floor(Number(m[2]))).padStart(2, \"0\");\n}\n\n// ── lifecycle ──────────────────────────────────────────────────────────────\n\nasync function refresh() {\n if (!slug) return viewCreate();\n const r = await api(\"/\" + slug + \"/state\");\n if (r.error) {\n $app.innerHTML = `

Room \"${esc(slug)}\" not found

Need a different room URL? Start one below.

Start a new room

`;\n return;\n }\n state = r;\n const hash = JSON.stringify([r.room, r.live]);\n if (hash === lastHash) return;\n const focused = document.activeElement;\n const typing = focused && (focused.tagName === \"INPUT\" || focused.tagName === \"TEXTAREA\");\n if (typing && lastHash !== \"\") return; // active typing → defer redraw to next poll\n lastHash = hash;\n viewRoom();\n}\n\nrefresh();\npollTimer = setInterval(refresh, 4000);\ndocument.addEventListener(\"visibilitychange\", () => {\n if (document.hidden) {\n clearInterval(pollTimer);\n pollTimer = null;\n } else if (!pollTimer) {\n refresh();\n pollTimer = setInterval(refresh, 4000);\n }\n});\n",[],[163,204],"74ef3be2-5be8-11f1-bb46-ee650bb23af1",["D",1780118937735],"directory",[180,181,182],[163],"90a76ea4-5be8-11f1-87fa-ee650bb23af1","types.ts","90a76f62-5be8-11f1-87fa-ee650bb23af1","a8b44d52-6eee-4b44-b78f-e99f8945f6e9",4,["D",1780118984255],"export type Player = {\n name: string;\n venmo?: string;\n cashapp?: string;\n color: string;\n};\n\nexport type SettleEntry = {\n homeDigit: number;\n awayDigit: number;\n squareIdx: number;\n winner: string; // lowercase player key\n homeScore: number;\n awayScore: number;\n recordedAt: number;\n};\n\nexport type Room = {\n slug: string;\n createdAt: number;\n home: string; // tricode, e.g. \"OKC\"\n away: string; // tricode, e.g. \"SAS\"\n label: string; // \"Thunder vs Spurs · Game 5\"\n stake: number; // dollars per square\n payouts: { q1: number; q2: number; q3: number; final: number }; // shares of pot, sum=1\n players: Record; // by name (lowercased key)\n squares: Record; // grid index \"0\"..\"99\" → player name (lowercase)\n locked: boolean;\n rowDigits: number[]; // length 10, digit for row index (away team)\n colDigits: number[]; // length 10, digit for col index (home team)\n settled: { q1?: SettleEntry; q2?: SettleEntry; q3?: SettleEntry; final?: SettleEntry };\n};\n\nexport type LiveGame = {\n status: 0 | 1 | 2 | 3; // 0 unknown, 1 scheduled, 2 in progress, 3 final\n period: number; // 0..4+\n clock: string;\n home: { tricode: string; score: number; periods: { period: number; score: number }[] };\n away: { tricode: string; score: number; periods: { period: number; score: number }[] };\n};\n\nexport const PALETTE = [\n \"#ff5a1f\", \"#4ade80\", \"#60a5fa\", \"#fbbf24\", \"#f472b6\",\n \"#a78bfa\", \"#22d3ee\", \"#fb7185\", \"#facc15\", \"#34d399\",\n];\n",[],[226,218],"backend","92689024-5be8-11f1-a095-ee650bb23af1","store.ts","926890d8-5be8-11f1-a095-ee650bb23af1",5,["D",1780118987198],"import { blob } from \"https://esm.town/v/std/blob\";\nimport type { Room } from \"./types.ts\";\n\nconst roomKey = (slug: string) => `squares:room:${slug.toLowerCase()}`;\n\nexport async function getRoom(slug: string): Promise {\n try {\n return (await blob.getJSON(roomKey(slug))) as Room;\n } catch {\n return null;\n }\n}\n\nexport async function saveRoom(r: Room): Promise {\n await blob.setJSON(roomKey(r.slug), r);\n}\n\nexport function shuffled10(): number[] {\n const a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n for (let i = a.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n}\n",[],[226,228],"9cfd38b4-5be8-11f1-87fa-ee650bb23af1","nba.ts","9cfd3990-5be8-11f1-87fa-ee650bb23af1",6,["D",1780119004950],"import { blob } from \"https://esm.town/v/std/blob\";\nimport type { LiveGame, Room } from \"./types.ts\";\nimport { saveRoom } from \"./store.ts\";\n\nconst NBA_SCOREBOARD =\n \"https://cdn.nba.com/static/json/liveData/scoreboard/todaysScoreboard_00.json\";\nconst NBA_UA =\n \"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36\";\nconst SCORE_CACHE_SECS = 20;\n\nconst scoreKey = (home: string, away: string) => `squares:score:${home}:${away}`;\n\nexport async function fetchLive(home: string, away: string): Promise {\n const cacheK = scoreKey(home, away);\n try {\n const cached = (await blob.getJSON(cacheK)) as { ts: number; game: LiveGame };\n if (cached && Date.now() - cached.ts < SCORE_CACHE_SECS * 1000) {\n return cached.game;\n }\n } catch {}\n\n let game: LiveGame | null = null;\n try {\n const res = await fetch(NBA_SCOREBOARD, {\n headers: { \"User-Agent\": NBA_UA, Referer: \"https://www.nba.com/\" },\n });\n const data = await res.json();\n const games = data?.scoreboard?.games ?? [];\n const match = games.find(\n (g: any) =>\n g?.homeTeam?.teamTricode?.toUpperCase() === home.toUpperCase() &&\n g?.awayTeam?.teamTricode?.toUpperCase() === away.toUpperCase(),\n );\n if (match) {\n game = {\n status: match.gameStatus ?? 1,\n period: match.period ?? 0,\n clock: match.gameClock ?? \"\",\n home: {\n tricode: match.homeTeam.teamTricode,\n score: match.homeTeam.score ?? 0,\n periods: (match.homeTeam.periods ?? []).map((p: any) => ({\n period: p.period,\n score: p.score ?? 0,\n })),\n },\n away: {\n tricode: match.awayTeam.teamTricode,\n score: match.awayTeam.score ?? 0,\n periods: (match.awayTeam.periods ?? []).map((p: any) => ({\n period: p.period,\n score: p.score ?? 0,\n })),\n },\n };\n }\n } catch (e) {\n console.error(\"NBA fetch failed\", e);\n }\n\n if (game) await blob.setJSON(cacheK, { ts: Date.now(), game });\n return game;\n}\n\nfunction cumulativeAtEndOfPeriod(periods: { period: number; score: number }[], n: number) {\n let total = 0;\n for (const p of periods) if (p.period <= n) total += p.score;\n return total;\n}\n\n// Derive quarter winners from cumulative score at end of each Q. Mutates + persists room.\nexport async function settle(room: Room, live: LiveGame): Promise {\n if (!room.locked || !live) return room;\n const periodsDone = live.status === 3 ? 4 : Math.max(0, live.period - 1);\n\n const qKeys = [\"q1\", \"q2\", \"q3\", \"final\"] as const;\n let changed = false;\n\n for (let i = 0; i < Math.min(periodsDone, 4); i++) {\n const qk = qKeys[i];\n if (room.settled[qk]) continue;\n const homeCum = cumulativeAtEndOfPeriod(live.home.periods, i + 1);\n const awayCum = cumulativeAtEndOfPeriod(live.away.periods, i + 1);\n const hd = homeCum % 10;\n const ad = awayCum % 10;\n const rowIdx = room.rowDigits.indexOf(ad);\n const colIdx = room.colDigits.indexOf(hd);\n if (rowIdx < 0 || colIdx < 0) continue;\n const sqIdx = rowIdx * 10 + colIdx;\n const winner = room.squares[String(sqIdx)];\n if (!winner) continue;\n room.settled[qk] = {\n homeDigit: hd,\n awayDigit: ad,\n squareIdx: sqIdx,\n winner,\n homeScore: homeCum,\n awayScore: awayCum,\n recordedAt: Date.now(),\n };\n changed = true;\n }\n\n // final settle when game is final and 4th hasn't recorded yet\n if (live.status === 3 && !room.settled.final) {\n const hd = live.home.score % 10;\n const ad = live.away.score % 10;\n const rowIdx = room.rowDigits.indexOf(ad);\n const colIdx = room.colDigits.indexOf(hd);\n if (rowIdx >= 0 && colIdx >= 0) {\n const sqIdx = rowIdx * 10 + colIdx;\n const winner = room.squares[String(sqIdx)];\n if (winner) {\n room.settled.final = {\n homeDigit: hd,\n awayDigit: ad,\n squareIdx: sqIdx,\n winner,\n homeScore: live.home.score,\n awayScore: live.away.score,\n recordedAt: Date.now(),\n };\n changed = true;\n }\n }\n }\n\n if (changed) await saveRoom(room);\n return room;\n}\n",[],[226,236],"a7ede520-5be8-11f1-9864-ee650bb23af1","index.ts",7,["D",1780119023292],"http","import { Hono } from \"npm:hono@4\";\nimport { readFile, serveFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport type { Room } from \"./types.ts\";\nimport { PALETTE } from \"./types.ts\";\nimport { getRoom, saveRoom, shuffled10 } from \"./store.ts\";\nimport { fetchLive, settle } from \"./nba.ts\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\n// ── API ──────────────────────────────────────────────────────────────────\n\napp.post(\"/api/create\", async (c) => {\n const body = await c.req.json();\n const slug = String(body.slug || \"\").toLowerCase().replace(/[^a-z0-9]/g, \"\").slice(0, 8);\n if (slug.length < 2) return c.json({ error: \"slug must be 2–8 alphanumeric chars\" });\n if (await getRoom(slug)) return c.json({ error: \"slug already in use, try another\" });\n\n const home = String(body.home || \"\").toUpperCase().slice(0, 4);\n const away = String(body.away || \"\").toUpperCase().slice(0, 4);\n if (!home || !away) return c.json({ error: \"home and away tricodes required\" });\n\n const room: Room = {\n slug,\n createdAt: Date.now(),\n home,\n away,\n label: String(body.label || `${away} @ ${home}`).slice(0, 80),\n stake: Number(body.stake) || 5,\n payouts: body.payouts || { q1: 0.15, q2: 0.25, q3: 0.15, final: 0.45 },\n players: {},\n squares: {},\n locked: false,\n rowDigits: [],\n colDigits: [],\n settled: {},\n };\n await saveRoom(room);\n return c.json({ ok: true, slug });\n});\n\napp.get(\"/api/:slug/state\", async (c) => {\n const room = await getRoom(c.req.param(\"slug\"));\n if (!room) return c.json({ error: \"room not found\" });\n let live = null;\n if (room.locked) {\n live = await fetchLive(room.home, room.away);\n if (live) await settle(room, live);\n }\n return c.json({ room, live });\n});\n\napp.post(\"/api/:slug/join\", async (c) => {\n const room = await getRoom(c.req.param(\"slug\"));\n if (!room) return c.json({ error: \"room not found\" });\n if (room.locked) return c.json({ error: \"room is locked\" });\n const body = await c.req.json();\n const name = String(body.name || \"\").trim();\n if (!name) return c.json({ error: \"name required\" });\n const key = name.toLowerCase();\n const picks: number[] = (body.picks || [])\n .map((n: any) => Number(n))\n .filter((n: number) => n >= 0 && n < 100);\n\n if (!room.players[key]) {\n room.players[key] = {\n name,\n venmo: body.venmo ? String(body.venmo).replace(/^@/, \"\") : undefined,\n cashapp: body.cashapp ? String(body.cashapp).replace(/^\\$/, \"\") : undefined,\n color: PALETTE[Object.keys(room.players).length % PALETTE.length],\n };\n } else {\n if (body.venmo !== undefined) room.players[key].venmo = String(body.venmo).replace(/^@/, \"\") || undefined;\n if (body.cashapp !== undefined) room.players[key].cashapp = String(body.cashapp).replace(/^\\$/, \"\") || undefined;\n }\n\n for (const idx of picks) {\n if (!room.squares[String(idx)]) room.squares[String(idx)] = key;\n }\n await saveRoom(room);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/:slug/release\", async (c) => {\n const room = await getRoom(c.req.param(\"slug\"));\n if (!room) return c.json({ error: \"room not found\" });\n if (room.locked) return c.json({ error: \"room is locked\" });\n const body = await c.req.json();\n const name = String(body.name || \"\").trim().toLowerCase();\n const idx = Number(body.idx);\n if (!name || isNaN(idx)) return c.json({ error: \"name and idx required\" });\n if (room.squares[String(idx)] === name) {\n delete room.squares[String(idx)];\n await saveRoom(room);\n }\n return c.json({ ok: true });\n});\n\napp.post(\"/api/:slug/lock\", async (c) => {\n const room = await getRoom(c.req.param(\"slug\"));\n if (!room) return c.json({ error: \"room not found\" });\n if (room.locked) return c.json({ error: \"already locked\" });\n room.locked = true;\n room.rowDigits = shuffled10();\n room.colDigits = shuffled10();\n await saveRoom(room);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/:slug/reset\", async (c) => {\n const room = await getRoom(c.req.param(\"slug\"));\n if (!room) return c.json({ error: \"room not found\" });\n room.locked = false;\n room.rowDigits = [];\n room.colDigits = [];\n room.settled = {};\n await saveRoom(room);\n return c.json({ ok: true });\n});\n\n// ── Static frontend ────────────────────────────────────────────────────────\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\napp.get(\"/frontend/app.js\", (c) => serveFile(\"/frontend/app.js\", import.meta.url));\napp.get(\"/frontend/style.css\", (c) => serveFile(\"/frontend/style.css\", import.meta.url));\n\n// Any other path serves the SPA shell (room slug is read client-side from the URL)\napp.get(\"*\", async (c) => c.html(await readFile(\"/frontend/index.html\", import.meta.url)));\n\nexport default app.fetch;\n",[],[226,244],"6807f96e-5be8-11f1-84d7-ee650bb23af1",["D",1780118916090],[175,176,177,178],[226],["D",1780118895460],{"_11":12,"_131":70},{"_11":12,"_126":127,"_69":70,"_30":68,"_128":129,"_130":24},{"_39":117,"_13":16,"_33":36,"_118":81,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":14,"_125":12},"ctx",{"_53":-5,"_150":292,"_293":294,"_295":296,"_297":24,"_298":24,"_299":24,"_300":94,"_301":-5,"_302":-7,"_303":-7,"_304":26,"_305":24,"_306":24,"_307":-5,"_308":24,"_309":24,"_310":24,"_311":-5},"ENV",{"_263":264,"_265":266,"_267":16,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html