squares · live NBA pool

\n \n\n\n",[],[249,251],"df554742-5be8-11f1-9864-ee650bb23af1","app.js","8040c88a-5be8-11f1-ba93-ee650bb23af1",10,["D",1780119116252],"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",[],[249,259],"74ef3be2-5be8-11f1-bb46-ee650bb23af1",2,["D",1780118937735],[228,229,230],[249],["D",1780118984255],[],[18,85],["D",1780118987198],[],[18,95],["D",1780119004950],[],[18,104],["D",1780119023292],[],[18,68],["D",1780118916090],[223,224,225,226],[18],["D",1780118895460],{"_11":12,"_163":74},{"_11":12,"_158":159,"_73":74,"_31":72,"_160":161,"_162":30},{"_43":149,"_13":16,"_37":40,"_150":115,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":14,"_157":12},"ctx",{"_56":-5,"_182":323,"_324":325,"_326":327,"_328":30,"_329":30,"_330":30,"_331":24,"_332":-5,"_333":-7,"_334":-7,"_335":26,"_336":30,"_337":30,"_338":-5,"_339":30,"_340":30,"_341":30,"_342":-5},"ENV",{"_294":295,"_296":297,"_298":16,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · backend