[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_372":373,"_374":375},"routes/_app.x.$handle.$name",{"_103":102,"_32":46,"_112":91,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":-5,"_125":126,"_127":25,"_128":129,"_130":60,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",18,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","components/Draw.tsx","latestPath","fileId","019e9f0e-d5c3-7132-859f-9df9aa6947d8","name","Draw.tsx","fileType","script","content","// Draw reveal page. The allocations are fixed in the DB (seeded RNG,\n// immutable). This page is theatre: the server ships the data, the client\n// paces a pot-by-pot, contestant-by-contestant reveal that feels like a live\n// broadcast.\n//\n// Two phases:\n// 1. Teams — 4 pots of 11, drawn first.\n// 2. Forwards — 2 pots of 11, drawn after for the Top Scorer side prize.\n//\n// Contestants are revealed in the order defined in lib/contestants.ts so anyone\n// watching knows roughly when their turn is up. The card layout stays put —\n// the contestant chip never moves. Only the right side animates from \"?\" to\n// the team / player flag + name.\n\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type {\n OwnerRow,\n PlayerOwnerRow,\n PlayerRow,\n TeamRow,\n} from \"../db.ts\";\nimport { CONTESTANT_BY_ID, CONTESTANTS } from \"../lib/contestants.ts\";\n\ntype Card = {\n contestantId: string;\n contestantName: string;\n hex: string;\n flag: string;\n teamName: string;\n fifaRank: number;\n};\n\ntype ForwardCard = {\n contestantId: string;\n contestantName: string;\n hex: string;\n playerName: string;\n teamName: string;\n flag: string;\n consensusRank: number;\n};\n\ntype Pot = {\n number: number;\n label: string;\n rankRange: string;\n cards: Card[];\n};\n\ntype ForwardPot = {\n number: number;\n label: string;\n rankRange: string;\n cards: ForwardCard[];\n};\n\nexport function buildPots(teams: TeamRow[], owners: OwnerRow[]): Pot[] {\n const teamById = new Map(teams.map((t) => [t.id, t]));\n const contestantIdx = new Map(CONTESTANTS.map((c, i) => [c.id, i]));\n\n const pots: Pot[] = [1, 2, 3, 4].map((n) => ({\n number: n,\n label: `Pot ${n}`,\n rankRange: \"\",\n cards: [],\n }));\n\n for (const o of owners) {\n const t = teamById.get(o.team_id);\n const c = CONTESTANT_BY_ID[o.contestant_id];\n if (!t || !c) continue;\n pots[o.pot - 1].cards.push({\n contestantId: o.contestant_id,\n contestantName: c.name,\n hex: c.hex,\n flag: t.flag,\n teamName: t.name,\n fifaRank: t.fifa_rank,\n });\n }\n\n for (const p of pots) {\n p.cards.sort(\n (a, b) =>\n (contestantIdx.get(a.contestantId) ?? 0) -\n (contestantIdx.get(b.contestantId) ?? 0),\n );\n const ranks = p.cards.map((c) => c.fifaRank);\n p.rankRange = ranks.length\n ? `FIFA #${Math.min(...ranks)}–${Math.max(...ranks)}`\n : \"\";\n }\n\n return pots;\n}\n\nexport function buildForwardsPots(\n players: PlayerRow[],\n playerOwners: PlayerOwnerRow[],\n teams: TeamRow[],\n): ForwardPot[] {\n const teamById = new Map(teams.map((t) => [t.id, t]));\n const playerById = new Map(players.map((p) => [p.id, p]));\n const contestantIdx = new Map(CONTESTANTS.map((c, i) => [c.id, i]));\n\n const pots: ForwardPot[] = [\n { number: 1, label: \"Pot A\", rankRange: \"Consensus #1–11\", cards: [] },\n { number: 2, label: \"Pot B\", rankRange: \"Consensus #12–22\", cards: [] },\n ];\n\n for (const o of playerOwners) {\n const p = playerById.get(o.player_id);\n const c = CONTESTANT_BY_ID[o.contestant_id];\n if (!p || !c) continue;\n const team = teamById.get(p.team_id);\n pots[o.pot - 1].cards.push({\n contestantId: o.contestant_id,\n contestantName: c.name,\n hex: c.hex,\n playerName: p.name,\n teamName: team?.name ?? \"\",\n flag: team?.flag ?? \"❓\",\n consensusRank: p.consensus_rank,\n });\n }\n\n for (const pot of pots) {\n pot.cards.sort(\n (a, b) =>\n (contestantIdx.get(a.contestantId) ?? 0) -\n (contestantIdx.get(b.contestantId) ?? 0),\n );\n }\n\n return pots;\n}\n\nconst DRAW_SCRIPT = `\n(function() {\n var REVEAL_ANTICIPATION_MS = 550;\n var REVEAL_HOLD_MS = 350;\n var POT_INTRO_MS = 1000;\n var BETWEEN_POTS_MS = 350;\n var BETWEEN_SECTIONS_MS = 900;\n var COOKIE = 'pool_seen_draw=1; path=/; max-age=31536000; samesite=lax';\n\n // CDN-hosted sound effects (all CORS open, no auth)\n // kick: Mixkit soccer ball kick — short, snappy\n // whistle: Freesound \"referee-whistle.wav\" — proper sports whistle (was a\n // finger-whistle before; swapped after user feedback)\n // cheer: Mixkit crowd cheer\n var SOUNDS = {\n kick: 'https://assets.mixkit.co/active_storage/sfx/2077/2077-preview.mp3',\n whistle: 'https://cdn.freesound.org/previews/90/90743_1476665-lq.mp3',\n cheer: 'https://assets.mixkit.co/active_storage/sfx/2111/2111-preview.mp3'\n };\n var kickAudio = new Audio(SOUNDS.kick); kickAudio.volume = 0.35; kickAudio.preload = 'auto';\n var whistleAudio = new Audio(SOUNDS.whistle); whistleAudio.volume = 0.45; whistleAudio.preload = 'auto';\n var cheerAudio = new Audio(SOUNDS.cheer); cheerAudio.volume = 0.55; cheerAudio.preload = 'auto';\n\n var soundOn = true;\n function play(audio) {\n if (!soundOn) return;\n try { audio.currentTime = 0; audio.play().catch(function() {}); } catch (_) {}\n }\n\n var cancelled = false;\n var playing = false;\n\n var startBtn = document.getElementById('draw-play');\n var skipBtn = document.getElementById('draw-skip');\n var muteBtn = document.getElementById('draw-mute');\n var statusEl = document.getElementById('draw-status');\n var finishCta = document.getElementById('draw-finish');\n\n function sleep(ms) { return new Promise(function(r) { setTimeout(r, ms); }); }\n function setStatus(text) { if (statusEl) statusEl.textContent = text; }\n\n // Smooth-scroll the page so the given element sits just below the sticky\n // bar — but only when it's not already in view. Measures the bar height\n // each call so it stays correct as the bar grows (status text changes,\n // finish CTA appears).\n var stickyBar = document.querySelector('[data-draw-sticky]');\n function scrollIntoFocus(el) {\n if (!el) return;\n var rect = el.getBoundingClientRect();\n var stickyH = stickyBar ? stickyBar.getBoundingClientRect().height : 80;\n var safeTop = stickyH + 8;\n var safeBottom = window.innerHeight - 40;\n if (rect.top >= safeTop && rect.bottom <= safeBottom) return;\n var target = stickyH + 24;\n window.scrollBy({ top: rect.top - target, behavior: 'smooth' });\n }\n\n function setPlayBtn(icon, label) {\n if (!startBtn) return;\n var iconEl = startBtn.querySelector('.draw-btn-icon');\n var labelEl = startBtn.querySelector('.draw-btn-label');\n if (iconEl) iconEl.textContent = icon;\n if (labelEl) labelEl.textContent = label;\n }\n\n function markSeen() {\n document.cookie = COOKIE;\n if (finishCta) finishCta.classList.remove('hidden');\n }\n\n function updateMuteUi() {\n if (!muteBtn) return;\n var iconEl = muteBtn.querySelector('.draw-btn-icon');\n var labelEl = muteBtn.querySelector('.draw-btn-label');\n if (iconEl) iconEl.textContent = soundOn ? '🔊' : '🔇';\n if (labelEl) labelEl.textContent = soundOn ? 'Sound on' : 'Muted';\n muteBtn.setAttribute('aria-pressed', soundOn ? 'true' : 'false');\n }\n\n async function revealCard(card) {\n scrollIntoFocus(card);\n card.classList.add('drawing');\n var who = card.dataset.contestantName || '';\n var label = card.dataset.potLabel || ('Pot ' + card.dataset.pot);\n setStatus(who + ' — ' + label + '…');\n await sleep(REVEAL_ANTICIPATION_MS);\n if (cancelled) return;\n play(kickAudio);\n card.classList.remove('drawing');\n card.classList.add('revealed');\n await sleep(REVEAL_HOLD_MS);\n }\n\n async function revealSection(section, count) {\n for (var p = 1; p <= count; p++) {\n if (cancelled) break;\n var intro = document.getElementById('pot-intro-' + section + '-' + p);\n if (intro) {\n scrollIntoFocus(intro);\n intro.classList.add('active');\n var label = intro.dataset.potLabel || ('Pot ' + p);\n setStatus(label);\n play(whistleAudio);\n await sleep(POT_INTRO_MS);\n intro.classList.remove('active');\n }\n var cards = document.querySelectorAll(\n '[data-section=\"' + section + '\"][data-pot=\"' + p + '\"].card'\n );\n for (var i = 0; i < cards.length; i++) {\n if (cancelled) break;\n await revealCard(cards[i]);\n }\n if (!cancelled) await sleep(BETWEEN_POTS_MS);\n }\n }\n\n async function revealAll() {\n if (playing) return;\n playing = true;\n cancelled = false;\n startBtn.disabled = true;\n setPlayBtn('⏸', 'Drawing…');\n if (finishCta) finishCta.classList.add('hidden');\n\n await revealSection('teams', 4);\n if (!cancelled) {\n setStatus('And now — the strikers');\n await sleep(BETWEEN_SECTIONS_MS);\n }\n await revealSection('forwards', 2);\n\n playing = false;\n startBtn.disabled = false;\n setPlayBtn('↻', 'Replay');\n setStatus('Draw complete 🎉');\n if (!cancelled) play(cheerAudio);\n markSeen();\n }\n\n function skip() {\n cancelled = true;\n try { cheerAudio.pause(); } catch (_) {}\n document.querySelectorAll('.card').forEach(function(c) {\n c.classList.remove('drawing');\n c.classList.add('revealed');\n });\n playing = false;\n startBtn.disabled = false;\n setPlayBtn('↻', 'Replay');\n setStatus('All teams and forwards revealed');\n markSeen();\n }\n\n function resetCards() {\n cancelled = true;\n try { cheerAudio.pause(); cheerAudio.currentTime = 0; } catch (_) {}\n document.querySelectorAll('.card').forEach(function(c) {\n c.classList.remove('revealed');\n c.classList.remove('drawing');\n });\n }\n\n startBtn.addEventListener('click', function() {\n if (playing) return;\n resetCards();\n setTimeout(revealAll, 100);\n });\n skipBtn.addEventListener('click', skip);\n if (muteBtn) {\n muteBtn.addEventListener('click', function() {\n soundOn = !soundOn;\n if (!soundOn) {\n try { kickAudio.pause(); whistleAudio.pause(); cheerAudio.pause(); } catch (_) {}\n }\n updateMuteUi();\n });\n updateMuteUi();\n }\n})();\n`.trim();\n\nconst DRAW_STYLES = `\n .card {\n transition: transform 0.4s ease, box-shadow 0.4s ease;\n }\n .card .card-placeholder { opacity: 1; transition: opacity 0.3s; }\n .card .card-team {\n opacity: 0; transform: scale(0.88);\n transition: opacity 0.45s ease, transform 0.45s ease;\n pointer-events: none;\n }\n .card.drawing {\n transform: scale(1.04);\n box-shadow: 0 12px 36px -8px rgba(15, 23, 42, 0.25);\n animation: drawPulse 0.55s ease-in-out infinite alternate;\n }\n .card.drawing .card-placeholder { animation: placeholderBounce 0.6s ease-in-out infinite alternate; }\n .card.revealed .card-placeholder { opacity: 0; }\n .card.revealed .card-team { opacity: 1; transform: scale(1); }\n .card.revealed { animation: none; transform: scale(1); }\n @keyframes drawPulse {\n from { box-shadow: 0 6px 20px -4px rgba(15, 23, 42, 0.15); }\n to { box-shadow: 0 16px 40px -6px rgba(15, 23, 42, 0.35); }\n }\n @keyframes placeholderBounce {\n from { transform: translateY(0); }\n to { transform: translateY(-3px); }\n }\n .pot-intro {\n opacity: 0; transform: translateY(-8px); pointer-events: none;\n transition: opacity 0.4s ease, transform 0.4s ease;\n }\n .pot-intro.active { opacity: 1; transform: translateY(0); }\n`.trim();\n\nexport function DrawPage({\n teamPots,\n forwardsPots,\n teamsSeed,\n forwardsSeed,\n}: {\n teamPots: Pot[];\n forwardsPots: ForwardPot[];\n teamsSeed: number;\n forwardsSeed: number;\n}) {\n return (\n

Diff · v18