squares · live NBA pool

\n \n\n\n",[],[101,119],"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",[],[101,127],["D",1780118916090],[137,138,139,140],[19],{"_37":75,"_13":76,"_40":77,"_42":43,"_44":45,"_46":78,"_48":49,"_50":150,"_17":80,"_53":81,"_55":82,"_57":58,"_59":-5,"_97":151,"_18":152},{"_37":68,"_13":69,"_40":70,"_42":43,"_44":45,"_46":71,"_48":49,"_50":147,"_17":52,"_53":54,"_55":73,"_57":58,"_59":-5,"_97":148,"_18":149},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":144,"_17":52,"_53":54,"_55":66,"_57":58,"_59":-5,"_97":145,"_18":146},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":141,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_97":142,"_18":143},["D",1780118984255],[],[19,39],["D",1780118987198],[],[19,62],["D",1780119004950],[],[19,69],["D",1780119023292],[],[19,76],"5bb963fa-5be8-11f1-baa9-ee650bb23af1",["D",1780118895460],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Football squares pool game grid","imageUrl","userId","82e4e894-7768-49c7-9a60-138c502ee79a","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019e7759-e2d4-727d-9886-151e47d314d3","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_207":203},"org",{"_11":12,"_200":201,"_202":203,"_163":164,"_204":205,"_206":58},"branch",{"_17":94,"_13":16,"_37":45,"_192":153,"_193":-5,"_194":-5,"_195":-5,"_196":-5,"_197":-5,"_198":14,"_199":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","nicholastotaro","avatar","https://avatars.githubusercontent.com/u/245603800?v=4","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_37":153,"_13":14,"_50":275,"_155":-5,"_156":58,"_157":158,"_159":158,"_160":161,"_162":-5,"_163":164,"_165":77,"_166":49,"_167":-5,"_168":-5,"_169":52,"_170":171,"_172":-5,"_173":-5,"_174":-5,"_175":-5,"_176":177,"_178":177,"_179":180,"_181":180,"_182":180,"_183":177,"_184":177,"_185":276,"_187":277,"_189":278,"_191":58},[245,250,254],"files",[245,246,247,248,249,250,251,252,253,254],"counts",{"_236":52,"_237":80,"_238":52,"_32":239,"_240":241},[228,229,230,231],{"_37":84,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":80,"_48":49,"_50":85,"_17":52,"_53":86,"_55":-5,"_57":58,"_59":-5,"_18":227},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_37":75,"_13":76,"_40":77,"_42":43,"_44":45,"_46":78,"_48":49,"_50":79,"_17":80,"_53":81,"_55":82,"_57":58,"_59":-5,"_18":235},{"_37":68,"_13":69,"_40":70,"_42":43,"_44":45,"_46":71,"_48":49,"_50":72,"_17":52,"_53":54,"_55":73,"_57":58,"_59":-5,"_18":234},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":65,"_17":52,"_53":54,"_55":66,"_57":58,"_59":-5,"_18":233},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_18":232},[19,39],[19,62],[19,69],[19,76],"pulls","branches","forks",{"_242":52,"_244":52},"connections",{"_242":52,"_243":52},"count","unfilledCount","emptyCount",{"_37":84,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":80,"_48":49,"_50":134,"_17":52,"_53":86,"_55":-5,"_57":58,"_59":-5,"_97":273,"_18":274},{"_37":75,"_13":76,"_40":77,"_42":43,"_44":45,"_46":78,"_48":49,"_50":150,"_17":80,"_53":81,"_55":82,"_57":58,"_59":-5,"_97":271,"_18":272},{"_37":68,"_13":69,"_40":70,"_42":43,"_44":45,"_46":71,"_48":49,"_50":147,"_17":52,"_53":54,"_55":73,"_57":58,"_59":-5,"_97":269,"_18":270},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":144,"_17":52,"_53":54,"_55":66,"_57":58,"_59":-5,"_97":267,"_18":268},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":141,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_97":265,"_18":266},{"_37":100,"_13":101,"_40":102,"_42":-5,"_44":45,"_46":103,"_48":49,"_50":104,"_17":52,"_53":86,"_55":-5,"_57":58,"_59":-5,"_97":263,"_18":264},{"_37":126,"_13":127,"_40":128,"_42":102,"_44":45,"_46":129,"_48":49,"_50":130,"_17":80,"_53":54,"_55":131,"_57":58,"_59":-5,"_97":261,"_18":262},{"_37":118,"_13":119,"_40":120,"_42":102,"_44":45,"_46":121,"_48":49,"_50":122,"_17":80,"_53":24,"_55":123,"_57":58,"_59":-5,"_97":259,"_18":260},{"_37":110,"_13":111,"_40":112,"_42":102,"_44":45,"_46":113,"_48":49,"_50":114,"_17":52,"_53":24,"_55":115,"_57":58,"_59":-5,"_97":257,"_18":258},{"_37":91,"_13":92,"_40":93,"_42":-5,"_44":45,"_46":94,"_48":49,"_50":95,"_17":52,"_53":24,"_55":96,"_57":58,"_59":-5,"_97":255,"_18":256},[],[92],[],[101,111],[],[101,119],[],[101,127],[251,252,253],[101],[],[19,39],[],[19,62],[],[19,69],[],[19,76],[246,247,248,249],[19],["D",1780118895460],{"_11":12,"_207":203},{"_11":12,"_200":201,"_202":203,"_163":164,"_204":205,"_206":58},{"_17":94,"_13":16,"_37":45,"_192":153,"_193":-5,"_194":-5,"_195":-5,"_196":-5,"_197":-5,"_198":14,"_199":12},"ctx",{"_185":-5,"_224":312,"_313":314,"_315":316,"_317":58,"_318":58,"_319":58,"_320":49,"_321":-5,"_322":-7,"_323":-7,"_324":52,"_325":58,"_326":58,"_327":-5,"_328":58,"_329":58,"_330":58,"_331":-5},"ENV",{"_283":284,"_285":286,"_287":16,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311},"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"]