[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69423e928f8c819199f881ce4776efd0","versionInt","title","Comp In A Box (preview)","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\n// Simple speech helper\nfunction speak(text) {\n if (typeof window === \"undefined\") return;\n if (!(\"speechSynthesis\" in window)) return;\n const utter = new SpeechSynthesisUtterance(text);\n window.speechSynthesis.cancel();\n window.speechSynthesis.speak(utter);\n}\n\nfunction formatTime(seconds) {\n const safe = Math.max(0, Math.floor(seconds || 0));\n const mins = Math.floor(safe / 60);\n const secs = safe % 60;\n return `${mins.toString().padStart(2, \"0\")}:${secs.toString().padStart(2, \"0\")}`;\n}\n\nconst PHASES = {\n PRECLIMB: \"preclimb\",\n CLIMB: \"climb\",\n SCORE: \"score\",\n REST: \"rest\",\n DONE: \"done\",\n};\n\nfunction phaseLabel(phase) {\n switch (phase) {\n case PHASES.PRECLIMB:\n return \"Pre-Climb\";\n case PHASES.CLIMB:\n return \"Climbing\";\n case PHASES.SCORE:\n return \"Scoring\";\n case PHASES.REST:\n return \"Rest\";\n case PHASES.DONE:\n return \"Done\";\n default:\n return String(phase || \"\");\n }\n}\n\nconst HOLD_ORDER = [\"start\", \"five\", \"ten\", \"fifteen\", \"twenty\", \"twentyFive\"];\nconst HOLD_LABELS = {\n start: \"S\",\n five: \"5\",\n ten: \"10\",\n fifteen: \"15\",\n twenty: \"20\",\n twentyFive: \"25\",\n};\n\nconst SCORE_CHOICES = [0, 5, 10, 15, 20, 25];\nconst MAX_ATTEMPTS = 10;\nconst ATTEMPT_PENALTY_PER_ATTEMPT = 0.01;\n\nfunction clampInt(n, min, max) {\n const x = Number.isFinite(Number(n)) ? Math.floor(Number(n)) : 0;\n return Math.max(min, Math.min(max, x));\n}\n\nfunction computeBoulderEffective(score, attempts) {\n const s = clampInt(score, 0, 25);\n const a = clampInt(attempts, 0, MAX_ATTEMPTS);\n const eff = s - a * ATTEMPT_PENALTY_PER_ATTEMPT;\n return eff < 0 ? 0 : Number(eff.toFixed(2));\n}\n\nfunction computeTotal(scores, attempts) {\n let sum = 0;\n for (let i = 0; i < 4; i++) sum += computeBoulderEffective(scores[i] || 0, attempts[i] || 0);\n return Number(sum.toFixed(2));\n}\n\n// Share code helpers (base64 of URI-encoded JSON)\nfunction toShareCode(obj) {\n const json = JSON.stringify(obj);\n const uri = encodeURIComponent(json);\n return btoa(uri);\n}\n\nfunction fromShareCode(code) {\n const uri = atob(String(code || \"\").trim());\n const json = decodeURIComponent(uri);\n return JSON.parse(json);\n}\n\n// Minimal self-tests (no framework here)\n(function runSelfTests() {\n try {\n console.assert(formatTime(0) === \"00:00\", \"formatTime 0\");\n console.assert(formatTime(65) === \"01:05\", \"formatTime 65\");\n console.assert(computeBoulderEffective(25, 10) === 24.9, \"penalty max\");\n const sample = { a: 1, name: \"tilted earth\" };\n const back = fromShareCode(toShareCode(sample));\n console.assert(back.a === 1 && back.name === \"tilted earth\", \"share encode/decode\");\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn(\"Self-tests failed:\", e);\n }\n})();\n\nconst initialTemplates = [];\n\nexport default function App() {\n const [screen, setScreen] = useState(\"home\");\n const [templates, setTemplates] = useState(initialTemplates);\n const [activeTemplate, setActiveTemplate] = useState(null);\n const [playerName, setPlayerName] = useState(\"\");\n const [liveConfig, setLiveConfig] = useState(null);\n\n useEffect(() => {\n try {\n const stored = localStorage.getItem(\"compTemplates\");\n if (stored) setTemplates(JSON.parse(stored));\n } catch {}\n }, []);\n\n useEffect(() => {\n try {\n localStorage.setItem(\"compTemplates\", JSON.stringify(templates));\n } catch {}\n }, [templates]);\n\n const globalLeaderboard = useMemo(() => {\n const sessions = [];\n templates.forEach((t) => {\n (t.sessions || []).forEach((s) => sessions.push({ ...s, templateName: t.name }));\n });\n sessions.sort((a, b) => (b.totalScore || 0) - (a.totalScore || 0));\n return sessions.slice(0, 10);\n }, [templates]);\n\n const handleTemplateCreated = (template) => {\n setTemplates((prev) => [...prev, template]);\n setActiveTemplate(template);\n setScreen(\"run-new-template\");\n };\n\n const handleSessionSaved = (templateId, session) => {\n setTemplates((prev) =>\n prev.map((t) => {\n if (t.id !== templateId) return t;\n return { ...t, sessions: [...(t.sessions || []), session] };\n })\n );\n };\n\n const handleImportShareCode = (code) => {\n const payload = fromShareCode(code);\n if (!payload || !payload.template) throw new Error(\"Invalid share code\");\n\n const importedTemplate = {\n ...payload.template,\n id: `t-import-${Date.now()}`,\n createdAt: new Date().toISOString(),\n sessions: payload.template.sessions || [],\n };\n\n setTemplates((prev) => [...prev, importedTemplate]);\n setActiveTemplate(importedTemplate);\n setScreen(\"run-shared\");\n };\n\n return (\n \n \n

Comp in a Box

4-boulder mini comps. Share a code. Chase the ghost.

\n\n {screen === \"home\" && (\n setScreen(\"setup\")}\n onStartLive={() => setScreen(\"live-setup\")}\n onRunShared={(t) => {\n setActiveTemplate(t);\n setScreen(\"run-shared\");\n }}\n onImportShareCode={handleImportShareCode}\n onClearLeaderboard={() => {\n setTemplates((prev) => prev.map((t) => ({ ...t, sessions: [] })));\n }}\n onClearTemplates={() => {\n setTemplates([]);\n setActiveTemplate(null);\n }}\n />\n )}\n\n {screen === \"setup\" && (\n setScreen(\"home\")}\n onTemplateCreated={handleTemplateCreated}\n playerName={playerName}\n setPlayerName={setPlayerName}\n />\n )}\n\n {screen === \"run-new-template\" && activeTemplate && (\n setScreen(\"home\")}\n onDone={(session) => {\n if (session) handleSessionSaved(activeTemplate.id, session);\n setScreen(\"home\");\n }}\n />\n )}\n\n {screen === \"run-shared\" && activeTemplate && (\n setScreen(\"home\")}\n onDone={(session) => {\n if (session && !session.__start) handleSessionSaved(activeTemplate.id, session);\n setScreen(\"home\");\n }}\n />\n )}\n\n {screen === \"live-setup\" && (\n setScreen(\"home\")}\n onStart={(cfg) => {\n setLiveConfig(cfg);\n setScreen(\"live-run\");\n }}\n />\n )}\n\n {screen === \"live-run\" && liveConfig && (\n {\n setLiveConfig(null);\n setScreen(\"home\");\n }}\n />\n )}\n \n \n );\n}\n\nfunction HomeScreen({\n templates,\n globalLeaderboard,\n onStartNew,\n onStartLive,\n onRunShared,\n onImportShareCode,\n onClearLeaderboard,\n onClearTemplates,\n}) {\n const [selected, setSelected] = useState(\"\");\n const [shareCode, setShareCode] = useState(\"\");\n const [importErr, setImportErr] = useState(\"\");\n\n const template = templates.find((t) => t.id === selected) || null;\n\n return (\n

\n \n \n\n

\n setSelected(e.target.value)}\n >\n \n {templates.map((t) => (\n \n ))}\n \n template && onRunShared(template)}\n type=\"button\"\n >\n Run\n \n

\n\n

Run from Share Code

\n {\n setImportErr(\"\");\n setShareCode(e.target.value);\n }}\n />\n {importErr &&

{importErr}

}\n {\n try {\n onImportShareCode(shareCode);\n setShareCode(\"\");\n setImportErr(\"\");\n } catch {\n setImportErr(\"That code looks cursed. Try a different one.\");\n }\n }}\n type=\"button\"\n >\n Import & Run\n \n

Heads up: share codes include images (big).

\n\n

Global Leaderboard

\n onClearLeaderboard && onClearLeaderboard()}\n type=\"button\"\n disabled={globalLeaderboard.length === 0}\n >\n Clear leaderboard\n \n

\n {globalLeaderboard.length === 0 ? (\n

No sessions yet.

\n ) : (\n

\n \n {i + 1}. {s.playerName} – {s.totalScore}\n \n {s.templateName}\n

\n )}\n

\n\n

Saved Comps

\n {\n onClearTemplates && onClearTemplates();\n setSelected(\"\");\n }}\n type=\"button\"\n disabled={templates.length === 0}\n >\n Clear comps\n \n

This removes saved comp templates on this device.

\n );\n}\n\nfunction BoulderImage({ imageUrl, holds, onClick, clickable }) {\n if (!imageUrl) return null;\n return (\n \n $\"Boulder\"$ \n {holds &&\n Object.entries(holds).map(([k, p]) =>\n p ? (\n \n {HOLD_LABELS[k]}\n \n ) : null\n )}\n \n );\n}\n\nfunction SetupWizard({ onCancel, onTemplateCreated, playerName, setPlayerName }) {\n const [gymName, setGymName] = useState(\"\");\n const [boulders, setBoulders] = useState(\n [0, 1, 2, 3].map((i) => ({\n id: `b${i}`,\n index: i + 1,\n name: `Boulder ${i + 1}`,\n imageUrl: \"\",\n holds: { start: null, five: null, ten: null, fifteen: null, twenty: null, twentyFive: null },\n }))\n );\n\n const ready = (b) =>\n !!(\n b &&\n b.holds &&\n b.holds.start &&\n b.holds.twentyFive &&\n (b.holds.five || b.holds.ten || b.holds.fifteen || b.holds.twenty)\n );\n\n const allReady = boulders.every(ready);\n\n const setHold = (i, e) => {\n const r = e.currentTarget.getBoundingClientRect();\n const x = (e.clientX - r.left) / r.width;\n const y = (e.clientY - r.top) / r.height;\n setBoulders((prev) => {\n const c = [...prev];\n const h = { ...c[i].holds };\n const k = HOLD_ORDER.find((key) => !h[key]);\n if (!k) return prev;\n h[k] = { x, y };\n c[i] = { ...c[i], holds: h };\n return c;\n });\n };\n\n const setImage = (i, e) => {\n const f = e.target.files && e.target.files[0];\n if (!f) return;\n const r = new FileReader();\n r.onload = (ev) =>\n setBoulders((p) => {\n const c = [...p];\n c[i] = { ...c[i], imageUrl: String(ev.target.result) };\n return c;\n });\n r.readAsDataURL(f);\n };\n\n const resetHolds = (i) => {\n setBoulders((p) => {\n const c = [...p];\n c[i] = {\n ...c[i],\n holds: { start: null, five: null, ten: null, fifteen: null, twenty: null, twentyFive: null },\n };\n return c;\n });\n };\n\n const create = () => {\n if (!playerName || !allReady) return;\n onTemplateCreated({\n id: `t-${Date.now()}`,\n name: `${gymName || \"My Comp\"} – ${new Date().toLocaleDateString()} – Set by ${playerName}`,\n gymName,\n createdBy: playerName,\n createdAt: new Date().toISOString(),\n boulders,\n sessions: [],\n });\n };\n\n return (\n

\n \n

Setup New Comp

\n \n

\n\n setPlayerName(e.target.value)}\n />\n setGymName(e.target.value)}\n />\n\n

Add 4 boulder photos and click holds in order: S - 5 - 10 - 15 - 20 - 25.

\n\n {boulders.map((b, i) => (\n

\n {\n const v = e.target.value;\n setBoulders((p) => {\n const c = [...p];\n c[i] = { ...c[i], name: v };\n return c;\n });\n }}\n placeholder={`Boulder ${i + 1} name (optional)`}\n />\n \n {ready(b) ? \"Ready\" : \"Not ready\"}\n \n

\n\n setImage(i, e)} />\n\n {b.imageUrl ? (\n <>\n setHold(i, e)} clickable />\n

\n Holds set: {Object.values(b.holds).filter(Boolean).length} / 6\n \n

\n \n ) : null}\n

\n ))}\n\n \n Create Template & Start\n \n

\n );\n}\n\nfunction SharedCompRunner({ template, onCancel, onDone }) {\n const [name, setName] = useState(\"\");\n const leaderboard = useMemo(() => {\n const list = (template.sessions || []).slice();\n list.sort((a, b) => (b.totalScore || 0) - (a.totalScore || 0));\n return list;\n }, [template.sessions]);\n\n return (\n

Run Shared Comp

\n \n

\n\n

Template

{template.name}

\n\n

Leaderboard

\n {leaderboard.length === 0 ? (\n

No runs yet. Set the bar.

\n ) : (\n

\n \n {(i === 0 ? \"🥇 \" : i === 1 ? \"🥈 \" : i === 2 ? \"🥉 \" : \"\")}\n {i + 1}. {s.playerName}\n \n {s.totalScore}\n

\n )}\n

\n\n setName(e.target.value)}\n />\n\n {name.trim() ? (\n onDone(session)}\n />\n ) : (\n {}}\n type=\"button\"\n >\n Enter your name to start\n \n )}\n

\n );\n}\n\nfunction CompRunner({ template, playerName, onDone, mode, onHome }) {\n const [idx, setIdx] = useState(0);\n const [phase, setPhase] = useState(PHASES.PRECLIMB);\n const [timeLeft, setTimeLeft] = useState(10);\n\n const [scores, setScores] = useState([0, 0, 0, 0]);\n const [attempts, setAttempts] = useState([0, 0, 0, 0]);\n\n const [shareCode, setShareCode] = useState(\"\");\n const [doneSession, setDoneSession] = useState(null);\n\n const [showConfirmHome, setShowConfirmHome] = useState(false);\n const [showResume, setShowResume] = useState(false);\n\n const resumeCheckedRef = useRef(false);\n\n const currentBoulder = template.boulders[idx];\n\n const draftKey = useMemo(() => {\n const pn = (playerName || \"Unknown\").trim() || \"Unknown\";\n return `compDraft:${template.id}:${pn}`;\n }, [template.id, playerName]);\n\n const tickEnabled = phase !== PHASES.SCORE && phase !== PHASES.DONE;\n\n const hasAnyProgress = useMemo(() => {\n if (phase === PHASES.DONE) return false;\n if (idx > 0) return true;\n if (phase !== PHASES.PRECLIMB) return true;\n if (scores.some((s) => (s || 0) !== 0)) return true;\n if (attempts.some((a) => (a || 0) !== 0)) return true;\n return false;\n }, [idx, phase, scores, attempts]);\n\n const saveDraft = () => {\n if (mode !== \"new\") return;\n if (!hasAnyProgress) return;\n try {\n const payload = {\n v: 1,\n templateId: template.id,\n playerName: (playerName || \"Unknown\").trim() || \"Unknown\",\n updatedAt: new Date().toISOString(),\n state: { idx, phase, timeLeft, scores, attempts },\n };\n localStorage.setItem(draftKey, JSON.stringify(payload));\n } catch {}\n };\n\n const clearDraft = () => {\n try {\n localStorage.removeItem(draftKey);\n } catch {}\n };\n\n // Load draft prompt (new comps only)\n useEffect(() => {\n if (mode !== \"new\") return;\n if (resumeCheckedRef.current) return;\n resumeCheckedRef.current = true;\n\n try {\n const raw = localStorage.getItem(draftKey);\n if (!raw) return;\n const parsed = JSON.parse(raw);\n if (!parsed || !parsed.state) return;\n setShowResume(true);\n } catch {}\n }, [draftKey, mode]);\n\n // Auto-save draft (new comps only)\n useEffect(() => {\n if (mode !== \"new\") return;\n if (!hasAnyProgress) return;\n if (phase === PHASES.DONE) return;\n saveDraft();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [mode, hasAnyProgress, idx, phase, timeLeft, scores, attempts]);\n\n // ticking timer + auto-advance\n useEffect(() => {\n if (!tickEnabled) return;\n if (timeLeft <= 0) {\n advance();\n return;\n }\n const t = setInterval(() => setTimeLeft((v) => v - 1), 1000);\n return () => clearInterval(t);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [tickEnabled, timeLeft, phase, idx]);\n\n // voice cues\n useEffect(() => {\n if (phase === PHASES.PRECLIMB) {\n if (timeLeft <= 5 && timeLeft > 0) speak(String(timeLeft));\n if (timeLeft === 0) speak(`${playerName || \"Climber\"}, you may begin climbing.`);\n }\n if (phase === PHASES.CLIMB) {\n if (timeLeft === 60) speak(\"One minute warning.\");\n if (timeLeft <= 10 && timeLeft > 0) speak(String(timeLeft));\n if (timeLeft === 0) speak(\"Time. Stop climbing.\");\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [phase, timeLeft]);\n\n const startPhase = (nextPhase) => {\n setPhase(nextPhase);\n if (nextPhase === PHASES.PRECLIMB) setTimeLeft(10);\n if (nextPhase === PHASES.CLIMB) setTimeLeft(4 * 60);\n if (nextPhase === PHASES.REST) setTimeLeft(4 * 60);\n if (nextPhase === PHASES.SCORE) setTimeLeft(0);\n };\n\n const advance = () => {\n if (phase === PHASES.PRECLIMB) {\n startPhase(PHASES.CLIMB);\n return;\n }\n\n if (phase === PHASES.CLIMB) {\n startPhase(PHASES.SCORE);\n return;\n }\n\n if (phase === PHASES.REST) {\n const nextIdx = Math.min(3, idx + 1);\n setIdx(nextIdx);\n startPhase(PHASES.PRECLIMB);\n return;\n }\n\n if (phase === PHASES.SCORE) {\n if (idx === 3) {\n finish();\n } else {\n startPhase(PHASES.REST);\n }\n }\n };\n\n const finish = () => {\n const totalScore = computeTotal(scores, attempts);\n const session = {\n id: `s-${Date.now()}`,\n templateId: template.id,\n templateName: template.name,\n playerName: playerName || \"Unknown\",\n date: new Date().toISOString(),\n scores,\n attempts,\n totalScore,\n };\n\n // finished -> clear draft\n clearDraft();\n\n if (mode === \"new\") {\n const payload = {\n v: 1,\n template: {\n name: template.name,\n gymName: template.gymName || \"\",\n createdBy: template.createdBy || \"\",\n createdAt: template.createdAt || \"\",\n boulders: template.boulders,\n sessions: [],\n },\n };\n setShareCode(toShareCode(payload));\n } else {\n setShareCode(\"\");\n }\n\n setDoneSession(session);\n setPhase(PHASES.DONE);\n };\n\n const totalSoFar = useMemo(() => computeTotal(scores, attempts), [scores, attempts]);\n\n const handleHomeClick = () => {\n // Only confirm during active climb (per request)\n if (phase === PHASES.CLIMB) {\n setShowConfirmHome(true);\n return;\n }\n // otherwise just leave (but save if progress)\n saveDraft();\n if (onHome) onHome();\n };\n\n return (\n

\n {/* Resume modal */}\n {showResume && mode === \"new\" ? (\n

Resume your last run?

We found saved progress for this comp.

\n {\n clearDraft();\n setShowResume(false);\n }}\n type=\"button\"\n >\n Start fresh\n \n {\n try {\n const raw = localStorage.getItem(draftKey);\n const parsed = raw ? JSON.parse(raw) : null;\n const st = parsed && parsed.state;\n if (st) {\n setIdx(clampInt(st.idx, 0, 3));\n setPhase(st.phase || PHASES.PRECLIMB);\n setTimeLeft(clampInt(st.timeLeft, 0, 24 * 60));\n setScores(Array.isArray(st.scores) ? st.scores.slice(0, 4) : [0, 0, 0, 0]);\n setAttempts(Array.isArray(st.attempts) ? st.attempts.slice(0, 4) : [0, 0, 0, 0]);\n }\n } catch {}\n setShowResume(false);\n }}\n type=\"button\"\n >\n Resume\n \n

\n ) : null}\n\n {/* Confirm home modal (active climb only) */}\n {showConfirmHome ? (\n

Are you sure?

If you leave now, we’ll auto-save so you can resume later.

\n setShowConfirmHome(false)}\n type=\"button\"\n >\n Stay\n \n {\n saveDraft();\n setShowConfirmHome(false);\n if (onHome) onHome();\n }}\n type=\"button\"\n >\n Leave\n \n

\n ) : null}\n\n

\n \n {playerName}\n

\n\n

\n \n Boulder {idx + 1} of 4\n {mode === \"shared\" ? \" (shared)\" : \"\"}\n \n Total: {totalSoFar}\n

\n\n

\n Phase: {phaseLabel(phase)}\n \n {phase === PHASES.SCORE || phase === PHASES.DONE ? \"--:--\" : formatTime(timeLeft)}\n \n

\n\n {currentBoulder && currentBoulder.imageUrl ? (\n \n ) : (\n

No image for this boulder.

\n )}\n\n {phase === PHASES.CLIMB && (\n startPhase(PHASES.SCORE)}\n type=\"button\"\n >\n Finished Early - Go to Scoring\n \n )}\n\n {phase === PHASES.REST && (\n {\n if (idx === 3) return;\n setIdx((v) => Math.min(3, v + 1));\n startPhase(PHASES.PRECLIMB);\n }}\n type=\"button\"\n >\n Skip Rest - Next Boulder\n \n )}\n\n {phase === PHASES.SCORE && (\n

Highest hold reached:

\n {SCORE_CHOICES.map((v) => (\n \n setScores((s) => {\n const c = [...s];\n c[idx] = v;\n return c;\n })\n }\n type=\"button\"\n >\n {v}\n \n ))}\n

\n\n

Attempts (0-{MAX_ATTEMPTS}):

\n {[0, 1, 2, 3, 4, 5].map((n) => (\n \n setAttempts((a) => {\n const c = [...a];\n c[idx] = n;\n return c;\n })\n }\n type=\"button\"\n >\n {n}\n \n ))}\n

\n {[6, 7, 8, 9, 10].map((n) => (\n \n setAttempts((a) => {\n const c = [...a];\n c[idx] = n;\n return c;\n })\n }\n type=\"button\"\n >\n {n}\n \n ))}\n

\n Penalty: {ATTEMPT_PENALTY_PER_ATTEMPT} per attempt. Effective: {computeBoulderEffective(scores[idx], attempts[idx])}\n

\n\n advance()}\n type=\"button\"\n >\n Done Scoring\n \n

\n )}\n\n {phase === PHASES.DONE && doneSession && (\n

Finished

Score: {doneSession.totalScore}

\n\n {mode === \"new\" && shareCode ? (\n

Share code

\n                <button\n                  className=\"w-full mt-2 py-2 rounded-lg bg-indigo-500 text-slate-900 text-xs font-semibold\"\n                  onClick={async () => {\n                    try {\n                      await navigator.clipboard.writeText(shareCode);\n                      speak(\"Copied.\");\n                    } catch {\n                      speak(\"Could not copy.\");\n                    }\n                  }}\n                  type=\"button\"\n                >\n                  Copy Share Code\n                </button>\n              </div>\n            ) : null}\n\n            <button\n              className=\"w-full py-2 rounded-lg bg-emerald-500 text-slate-900 text-xs font-semibold\"\n              onClick={() => {\n                if (onDone) onDone(doneSession);\n              }}\n              type=\"button\"\n            >\n              Save & Exit\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// Live mode: multiplayer round-robin (each boulder, each player)\nfunction createEmptyLiveBoulder(name) {\n  return {\n    name,\n    imageUrl: \"\",\n    holds: { start: null, five: null, ten: null, fifteen: null, twenty: null, twentyFive: null },\n  };\n}\n\nfunction isBoulderConfigured(b) {\n  return !!(\n    b &&\n    b.holds &&\n    b.holds.start &&\n    b.holds.twentyFive &&\n    (b.holds.five || b.holds.ten || b.holds.fifteen || b.holds.twenty)\n  );\n}\n\nfunction LiveCompSetup({ onCancel, onStart }) {\n  const [playerNames, setPlayerNames] = useState([\"\"]);\n  const [mode, setMode] = useState(\"shared\"); // shared | custom\n\n  const [sharedBoulders, setSharedBoulders] = useState([\n    createEmptyLiveBoulder(\"Boulder 1\"),\n    createEmptyLiveBoulder(\"Boulder 2\"),\n    createEmptyLiveBoulder(\"Boulder 3\"),\n    createEmptyLiveBoulder(\"Boulder 4\"),\n  ]);\n\n  // customBoulders[playerIndex][boulderIndex]\n  const [customBoulders, setCustomBoulders] = useState([]);\n\n  useEffect(() => {\n    if (mode !== \"custom\") return;\n    setCustomBoulders((prev) => {\n      const next = playerNames.map((_, pIdx) =>\n        prev[pIdx] || [0, 1, 2, 3].map((i) => createEmptyLiveBoulder(`Boulder ${i + 1}`))\n      );\n      return next;\n    });\n  }, [mode, playerNames.length]);\n\n  const trimmedPlayers = useMemo(() => playerNames.map((n) => n.trim()).filter(Boolean), [playerNames]);\n\n  const canStart = useMemo(() => {\n    if (trimmedPlayers.length === 0) return false;\n    return true;\n  }, [trimmedPlayers.length]);\n\n  const addPlayer = () => {\n    setPlayerNames((p) => (p.length >= 8 ? p : [...p, \"\"]));\n  };\n\n  const removePlayer = (idx) => {\n    setPlayerNames((p) => (p.length <= 1 ? p : p.filter((_, i) => i !== idx)));\n    setCustomBoulders((prev) => prev.filter((_, i) => i !== idx));\n  };\n\n  const setSharedHold = (bIdx, e) => {\n    const r = e.currentTarget.getBoundingClientRect();\n    const x = (e.clientX - r.left) / r.width;\n    const y = (e.clientY - r.top) / r.height;\n\n    setSharedBoulders((prev) => {\n      const c = [...prev];\n      const b = c[bIdx];\n      const holds = { ...b.holds };\n      const k = HOLD_ORDER.find((key) => !holds[key]);\n      if (!k) return prev;\n      holds[k] = { x, y };\n      c[bIdx] = { ...b, holds };\n      return c;\n    });\n  };\n\n  const setSharedImage = (bIdx, e) => {\n    const f = e.target.files && e.target.files[0];\n    if (!f) return;\n    const r = new FileReader();\n    r.onload = (ev) =>\n      setSharedBoulders((prev) => {\n        const c = [...prev];\n        c[bIdx] = { ...c[bIdx], imageUrl: String(ev.target.result) };\n        return c;\n      });\n    r.readAsDataURL(f);\n  };\n\n  const resetSharedHolds = (bIdx) => {\n    setSharedBoulders((prev) => {\n      const c = [...prev];\n      c[bIdx] = {\n        ...c[bIdx],\n        holds: { start: null, five: null, ten: null, fifteen: null, twenty: null, twentyFive: null },\n      };\n      return c;\n    });\n  };\n\n  const setCustomHold = (pIdx, bIdx, e) => {\n    const r = e.currentTarget.getBoundingClientRect();\n    const x = (e.clientX - r.left) / r.width;\n    const y = (e.clientY - r.top) / r.height;\n\n    setCustomBoulders((prev) => {\n      const next = [...prev];\n      const row = next[pIdx] || [0, 1, 2, 3].map((i) => createEmptyLiveBoulder(`Boulder ${i + 1}`));\n      const b = row[bIdx];\n      const holds = { ...b.holds };\n      const k = HOLD_ORDER.find((key) => !holds[key]);\n      if (!k) return prev;\n      holds[k] = { x, y };\n      const newRow = [...row];\n      newRow[bIdx] = { ...b, holds };\n      next[pIdx] = newRow;\n      return next;\n    });\n  };\n\n  const setCustomImage = (pIdx, bIdx, e) => {\n    const f = e.target.files && e.target.files[0];\n    if (!f) return;\n    const r = new FileReader();\n    r.onload = (ev) =>\n      setCustomBoulders((prev) => {\n        const next = [...prev];\n        const row = next[pIdx] || [0, 1, 2, 3].map((i) => createEmptyLiveBoulder(`Boulder ${i + 1}`));\n        const newRow = [...row];\n        newRow[bIdx] = { ...newRow[bIdx], imageUrl: String(ev.target.result) };\n        next[pIdx] = newRow;\n        return next;\n      });\n    r.readAsDataURL(f);\n  };\n\n  const resetCustomHolds = (pIdx, bIdx) => {\n    setCustomBoulders((prev) => {\n      const next = [...prev];\n      const row = next[pIdx] || [0, 1, 2, 3].map((i) => createEmptyLiveBoulder(`Boulder ${i + 1}`));\n      const newRow = [...row];\n      newRow[bIdx] = {\n        ...newRow[bIdx],\n        holds: { start: null, five: null, ten: null, fifteen: null, twenty: null, twentyFive: null },\n      };\n      next[pIdx] = newRow;\n      return next;\n    });\n  };\n\n  const start = () => {\n    if (!canStart) return;\n\n    const players = trimmedPlayers.map((name, pIdx) => {\n      if (mode === \"shared\") {\n        return {\n          name,\n          boulders: sharedBoulders.map((b, i) => ({\n            ...b,\n            name: (b.name || `Boulder ${i + 1}`).trim() || `Boulder ${i + 1}`,\n          })),\n        };\n      }\n\n      const row = (customBoulders[pIdx] || [0, 1, 2, 3].map((i) => createEmptyLiveBoulder(`Boulder ${i + 1}`))).map(\n        (b, i) => ({\n          ...b,\n          name: (b.name || `Boulder ${i + 1}`).trim() || `Boulder ${i + 1}`,\n        })\n      );\n\n      return { name, boulders: row };\n    });\n\n    onStart({ players, mode, createdAt: new Date().toISOString() });\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex justify-between items-center\">\n        <button onClick={onCancel} className=\"text-xs text-slate-300 underline\" type=\"button\">\n          Home\n        </button>\n        <h2 className=\"text-lg font-semibold\">Setup Live Comp</h2>\n        <button onClick={onCancel} className=\"text-xs text-slate-400\" type=\"button\">\n          Cancel\n        </button>\n      </div>\n\n      <div className=\"space-y-2\">\n        <div className=\"text-sm font-semibold\">Players (up to 8)</div>\n        <div className=\"space-y-2\">\n          {playerNames.map((n, idx) => (\n            <div key={idx} className=\"flex items-center gap-2\">\n              <input\n                className=\"flex-1 bg-slate-800 rounded-lg p-2 text-sm\"\n                value={n}\n                onChange={(e) => {\n                  const v = e.target.value;\n                  setPlayerNames((p) => {\n                    const c = [...p];\n                    c[idx] = v;\n                    return c;\n                  });\n                }}\n                placeholder={`Player ${idx + 1}`}\n              />\n              {playerNames.length > 1 ? (\n                <button className=\"text-xs text-red-400\" onClick={() => removePlayer(idx)} type=\"button\">\n                  Remove\n                </button>\n              ) : null}\n            </div>\n          ))}\n\n          {playerNames.length < 8 ? (\n            <button className=\"text-xs text-emerald-400 underline\" onClick={addPlayer} type=\"button\">\n              Add Player\n            </button>\n          ) : null}\n        </div>\n      </div>\n\n      <div className=\"space-y-2\">\n        <div className=\"text-sm font-semibold\">Boulder Sets</div>\n        <div className=\"flex gap-2 text-xs\">\n          <button\n            className={`flex-1 py-1 rounded-lg ${mode === \"shared\" ? \"bg-emerald-500 text-slate-900\" : \"bg-slate-800\"}`}\n            onClick={() => setMode(\"shared\")}\n            type=\"button\"\n          >\n            Same 4 Boulders\n          </button>\n          <button\n            className={`flex-1 py-1 rounded-lg ${mode === \"custom\" ? \"bg-emerald-500 text-slate-900\" : \"bg-slate-800\"}`}\n            onClick={() => setMode(\"custom\")}\n            type=\"button\"\n          >\n            Custom per Player\n          </button>\n        </div>\n\n        {mode === \"shared\" ? (\n          <div className=\"space-y-3 mt-2 text-xs\">\n            {[0, 1, 2, 3].map((i) => {\n              const b = sharedBoulders[i];\n              const ready = isBoulderConfigured(b);\n              return (\n                <div key={i} className=\"border border-slate-700 rounded-lg p-2 space-y-2\">\n                  <div className=\"flex items-center justify-between gap-2\">\n                    <input\n                      className=\"flex-1 bg-slate-800 rounded-lg p-2 text-sm\"\n                      value={b.name}\n                      onChange={(e) => {\n                        const v = e.target.value;\n                        setSharedBoulders((p) => {\n                          const c = [...p];\n                          c[i] = { ...c[i], name: v };\n                          return c;\n                        });\n                      }}\n                      placeholder={`Boulder ${i + 1} name (optional)`}\n                    />\n                    <span\n                      className={\n                        \"text-[10px] px-2 py-1 rounded-md \" +\n                        (ready ? \"bg-emerald-500 text-slate-900\" : \"bg-slate-800 text-slate-300\")\n                      }\n                    >\n                      {ready ? \"Ready\" : \"Not ready\"}\n                    </span>\n                  </div>\n\n                  <input type=\"file\" accept=\"image/*\" onChange={(e) => setSharedImage(i, e)} />\n\n                  {b.imageUrl ? (\n                    <>\n                      <BoulderImage imageUrl={b.imageUrl} holds={b.holds} onClick={(e) => setSharedHold(i, e)} clickable />\n                      <div className=\"flex justify-between items-center text-[10px]\">\n                        <span>Holds set: {Object.values(b.holds).filter(Boolean).length} / 6</span>\n                        <button className=\"text-slate-300 underline\" onClick={() => resetSharedHolds(i)} type=\"button\">\n                          Reset holds\n                        </button>\n                      </div>\n                    </>\n                  ) : null}\n                </div>\n              );\n            })}\n          </div>\n        ) : (\n          <div className=\"space-y-3 mt-2 text-xs max-h-72 overflow-y-auto pr-1\">\n            {playerNames.map((nm, pIdx) => {\n              const row =\n                customBoulders[pIdx] || [0, 1, 2, 3].map((i) => createEmptyLiveBoulder(`Boulder ${i + 1}`));\n\n              return (\n                <div key={pIdx} className=\"border border-slate-700 rounded-lg p-2 space-y-2\">\n                  <div className=\"text-sm font-semibold\">{nm.trim() || `Player ${pIdx + 1}`}</div>\n\n                  {[0, 1, 2, 3].map((bIdx) => {\n                    const b = row[bIdx];\n                    const ready = isBoulderConfigured(b);\n                    return (\n                      <div key={bIdx} className=\"border border-slate-800 rounded-md p-2 space-y-2\">\n                        <div className=\"flex items-center justify-between gap-2\">\n                          <input\n                            className=\"flex-1 bg-slate-800 rounded-lg p-2 text-sm\"\n                            value={b.name}\n                            onChange={(e) => {\n                              const v = e.target.value;\n                              setCustomBoulders((prev) => {\n                                const next = [...prev];\n                                const rr =\n                                  next[pIdx] || [0, 1, 2, 3].map((i) => createEmptyLiveBoulder(`Boulder ${i + 1}`));\n                                const newRow = [...rr];\n                                newRow[bIdx] = { ...newRow[bIdx], name: v };\n                                next[pIdx] = newRow;\n                                return next;\n                              });\n                            }}\n                            placeholder={`Boulder ${bIdx + 1} name (optional)`}\n                          />\n                          <span\n                            className={\n                              \"text-[10px] px-2 py-1 rounded-md \" +\n                              (ready ? \"bg-emerald-500 text-slate-900\" : \"bg-slate-800 text-slate-300\")\n                            }\n                          >\n                            {ready ? \"Ready\" : \"Not ready\"}\n                          </span>\n                        </div>\n\n                        <input type=\"file\" accept=\"image/*\" onChange={(e) => setCustomImage(pIdx, bIdx, e)} />\n\n                        {b.imageUrl ? (\n                          <>\n                            <BoulderImage\n                              imageUrl={b.imageUrl}\n                              holds={b.holds}\n                              onClick={(e) => setCustomHold(pIdx, bIdx, e)}\n                              clickable\n                            />\n                            <div className=\"flex justify-between items-center text-[10px]\">\n                              <span>Holds set: {Object.values(b.holds).filter(Boolean).length} / 6</span>\n                              <button\n                                className=\"text-slate-300 underline\"\n                                onClick={() => resetCustomHolds(pIdx, bIdx)}\n                                type=\"button\"\n                              >\n                                Reset holds\n                              </button>\n                            </div>\n                          </>\n                        ) : null}\n                      </div>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </div>\n\n      <button\n        disabled={!canStart}\n        onClick={start}\n        className=\"w-full bg-emerald-500 text-slate-900 rounded-lg py-2 font-semibold disabled:opacity-40\"\n        type=\"button\"\n      >\n        Start Live Comp\n      </button>\n    </div>\n  );\n}\n\nfunction LiveCompRunner({ config, onHome }) {\n  const players = config.players || [];\n\n  const [playerIdx, setPlayerIdx] = useState(0);\n  const [boulderIdx, setBoulderIdx] = useState(0);\n  const [phase, setPhase] = useState(PHASES.PRECLIMB);\n  const [timeLeft, setTimeLeft] = useState(10);\n\n  const [scores, setScores] = useState(() => players.map(() => [0, 0, 0, 0]));\n  const [attempts, setAttempts] = useState(() => players.map(() => [0, 0, 0, 0]));\n\n  const [finished, setFinished] = useState(false);\n  const [results, setResults] = useState([]);\n  const [showConfirmHome, setShowConfirmHome] = useState(false);\n\n  const player = players[playerIdx];\n  const boulder = player && player.boulders ? player.boulders[boulderIdx] : null;\n\n  const tickEnabled = !finished && phase !== PHASES.SCORE && phase !== PHASES.DONE;\n\n  useEffect(() => {\n    if (!tickEnabled) return;\n    if (timeLeft <= 0) {\n      advance();\n      return;\n    }\n    const t = setInterval(() => setTimeLeft((v) => v - 1), 1000);\n    return () => clearInterval(t);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tickEnabled, timeLeft, phase, playerIdx, boulderIdx]);\n\n  useEffect(() => {\n    if (finished) return;\n    if (phase === PHASES.PRECLIMB) {\n      if (timeLeft <= 5 && timeLeft > 0) speak(String(timeLeft));\n      if (timeLeft === 0 && player) speak(`${player.name}, you may begin climbing.`);\n    }\n    if (phase === PHASES.CLIMB) {\n      if (timeLeft === 60) speak(\"One minute warning.\");\n      if (timeLeft <= 10 && timeLeft > 0) speak(String(timeLeft));\n      if (timeLeft === 0) speak(\"Time. Stop climbing.\");\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [phase, timeLeft, finished, playerIdx]);\n\n  const startPhase = (nextPhase) => {\n    setPhase(nextPhase);\n    if (nextPhase === PHASES.PRECLIMB) setTimeLeft(10);\n    if (nextPhase === PHASES.CLIMB) setTimeLeft(4 * 60);\n    if (nextPhase === PHASES.SCORE) setTimeLeft(0);\n    if (nextPhase === PHASES.DONE) setTimeLeft(0);\n  };\n\n  const advance = () => {\n    if (finished) return;\n\n    if (phase === PHASES.PRECLIMB) {\n      startPhase(PHASES.CLIMB);\n      return;\n    }\n\n    if (phase === PHASES.CLIMB) {\n      startPhase(PHASES.SCORE);\n      return;\n    }\n\n    if (phase === PHASES.SCORE) {\n      const lastPlayer = playerIdx === players.length - 1;\n      const lastBoulder = boulderIdx === 3;\n\n      if (!lastPlayer) {\n        setPlayerIdx((i) => i + 1);\n        startPhase(PHASES.PRECLIMB);\n        return;\n      }\n\n      if (!lastBoulder) {\n        setPlayerIdx(0);\n        setBoulderIdx((i) => i + 1);\n        startPhase(PHASES.PRECLIMB);\n        return;\n      }\n\n      finish();\n    }\n  };\n\n  const finish = () => {\n    const totals = players.map((p, pIdx) => {\n      const t = computeTotal(scores[pIdx] || [0, 0, 0, 0], attempts[pIdx] || [0, 0, 0, 0]);\n      return { name: p.name, total: t };\n    });\n\n    totals.sort((a, b) => b.total - a.total);\n    setResults(totals);\n    setFinished(true);\n    setPhase(PHASES.DONE);\n  };\n\n  const setScoreForCurrent = (v) => {\n    setScores((prev) => {\n      const next = prev.map((row) => [...row]);\n      next[playerIdx][boulderIdx] = v;\n      return next;\n    });\n  };\n\n  const setAttemptsForCurrent = (n) => {\n    setAttempts((prev) => {\n      const next = prev.map((row) => [...row]);\n      next[playerIdx][boulderIdx] = clampInt(n, 0, MAX_ATTEMPTS);\n      return next;\n    });\n  };\n\n  const handleHomeClick = () => {\n    if (phase === PHASES.CLIMB) {\n      setShowConfirmHome(true);\n      return;\n    }\n    if (onHome) onHome();\n  };\n\n  if (!players.length) {\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"flex justify-between items-center\">\n          <h2 className=\"text-lg font-semibold\">Live Comp</h2>\n          <button onClick={onHome} className=\"text-xs text-slate-300 underline\" type=\"button\">\n            Home\n          </button>\n        </div>\n        <div className=\"bg-slate-800 rounded-lg p-3 text-xs text-slate-300\">No players in this live comp.</div>\n      </div>\n    );\n  }\n\n  if (finished) {\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"flex justify-between items-center\">\n          <h2 className=\"text-lg font-semibold\">Live Results</h2>\n          <button onClick={onHome} className=\"text-xs text-slate-300 underline\" type=\"button\">\n            Home\n          </button>\n        </div>\n\n        <div className=\"bg-slate-800 rounded-lg p-3\">\n          <ol className=\"space-y-2 text-sm\">\n            {results.map((r, i) => (\n              <li key={r.name} className=\"flex justify-between\">\n                <span>\n                  {(i === 0 ? \"🥇 \" : i === 1 ? \"🥈 \" : i === 2 ? \"🥉 \" : \"\")}\n                  {i + 1}. {r.name}\n                </span>\n                <span>{r.total}</span>\n              </li>\n            ))}\n          </ol>\n        </div>\n\n        <button className=\"w-full bg-emerald-500 text-slate-900 rounded-lg py-2 font-semibold\" onClick={onHome} type=\"button\">\n          Back to Home\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      {showConfirmHome ? (\n        <div className=\"fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50\">\n          <div className=\"w-full max-w-md bg-slate-800 rounded-2xl p-4 space-y-3\">\n            <div className=\"text-sm font-semibold\">Are you sure?</div>\n            <div className=\"text-xs text-slate-300\">This will end the live comp run.</div>\n            <div className=\"flex gap-2\">\n              <button\n                className=\"flex-1 py-2 rounded-lg bg-slate-900 text-slate-200 text-xs font-semibold\"\n                onClick={() => setShowConfirmHome(false)}\n                type=\"button\"\n              >\n                Stay\n              </button>\n              <button\n                className=\"flex-1 py-2 rounded-lg bg-emerald-500 text-slate-900 text-xs font-semibold\"\n                onClick={() => {\n                  setShowConfirmHome(false);\n                  if (onHome) onHome();\n                }}\n                type=\"button\"\n              >\n                Leave\n              </button>\n            </div>\n          </div>\n        </div>\n      ) : null}\n\n      <div className=\"bg-slate-800 rounded-lg p-3 space-y-2\">\n        <div className=\"flex items-center justify-between\">\n          <button onClick={handleHomeClick} className=\"text-xs text-slate-300 underline\" type=\"button\">\n            Home\n          </button>\n          <span className=\"text-xs text-slate-400\">Live • {config.mode === \"custom\" ? \"Custom\" : \"Shared\"}</span>\n        </div>\n\n        <div className=\"flex justify-between text-xs\">\n          <span>\n            Boulder {boulderIdx + 1} / 4 • Climber {playerIdx + 1} / {players.length}\n          </span>\n          <span className=\"text-slate-300\">{player.name}</span>\n        </div>\n\n        <div className=\"flex justify-between items-center\">\n          <span className=\"text-xs\">Phase: {phaseLabel(phase)}</span>\n          <span className=\"text-xl font-bold tabular-nums\">\n            {phase === PHASES.SCORE || phase === PHASES.DONE ? \"--:--\" : formatTime(timeLeft)}\n          </span>\n        </div>\n\n        <div className=\"text-xs text-slate-300\">Problem: {boulder ? boulder.name : `Boulder ${boulderIdx + 1}`}</div>\n\n        {boulder && boulder.imageUrl ? (\n          <BoulderImage imageUrl={boulder.imageUrl} holds={boulder.holds} clickable={false} />\n        ) : (\n          <div className=\"text-xs text-slate-400\">No image for this boulder.</div>\n        )}\n\n        {phase === PHASES.PRECLIMB ? (\n          <button\n            className=\"w-full py-2 rounded-lg bg-indigo-500 text-slate-900 text-xs font-semibold\"\n            onClick={() => startPhase(PHASES.CLIMB)}\n            type=\"button\"\n          >\n            Skip Pre-Climb\n          </button>\n        ) : null}\n\n        {phase === PHASES.CLIMB ? (\n          <button\n            className=\"w-full py-2 rounded-lg bg-emerald-500 text-slate-900 text-xs font-semibold\"\n            onClick={() => startPhase(PHASES.SCORE)}\n            type=\"button\"\n          >\n            Finished Early - Go to Scoring\n          </button>\n        ) : null}\n\n        {phase === PHASES.SCORE ? (\n          <div className=\"space-y-3\">\n            <div>\n              <div className=\"text-xs\">Highest hold reached:</div>\n              <div className=\"grid grid-cols-3 gap-2 mt-2\">\n                {SCORE_CHOICES.map((v) => (\n                  <button\n                    key={v}\n                    className={\n                      \"py-2 rounded-lg text-sm font-semibold \" +\n                      (scores[playerIdx][boulderIdx] === v ? \"bg-emerald-500 text-slate-900\" : \"bg-slate-700\")\n                    }\n                    onClick={() => setScoreForCurrent(v)}\n                    type=\"button\"\n                  >\n                    {v}\n                  </button>\n                ))}\n              </div>\n            </div>\n\n            <div>\n              <div className=\"text-xs\">Attempts (0-{MAX_ATTEMPTS}):</div>\n              <div className=\"grid grid-cols-6 gap-2 mt-2\">\n                {[0, 1, 2, 3, 4, 5].map((n) => (\n                  <button\n                    key={n}\n                    className={\n                      \"py-2 rounded-lg text-xs font-semibold \" +\n                      (attempts[playerIdx][boulderIdx] === n ? \"bg-emerald-500 text-slate-900\" : \"bg-slate-700\")\n                    }\n                    onClick={() => setAttemptsForCurrent(n)}\n                    type=\"button\"\n                  >\n                    {n}\n                  </button>\n                ))}\n              </div>\n              <div className=\"grid grid-cols-5 gap-2 mt-2\">\n                {[6, 7, 8, 9, 10].map((n) => (\n                  <button\n                    key={n}\n                    className={\n                      \"py-2 rounded-lg text-xs font-semibold \" +\n                      (attempts[playerIdx][boulderIdx] === n ? \"bg-emerald-500 text-slate-900\" : \"bg-slate-700\")\n                    }\n                    onClick={() => setAttemptsForCurrent(n)}\n                    type=\"button\"\n                  >\n                    {n}\n                  </button>\n                ))}\n              </div>\n              <div className=\"text-[10px] text-slate-400 mt-1\">\n                Effective: {computeBoulderEffective(scores[playerIdx][boulderIdx], attempts[playerIdx][boulderIdx])}\n              </div>\n            </div>\n\n            <button\n              className=\"w-full py-2 rounded-lg bg-emerald-500 text-slate-900 text-xs font-semibold\"\n              onClick={() => advance()}\n              type=\"button\"\n            >\n              Done Scoring\n            </button>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","17400950583635888088","traceTime",1779556106645]
</article></body></html>