[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_472":473,"_474":475},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"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",199,"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/MatchPage.tsx","latestPath","fileId","ef2b0636-65d2-11f1-9bab-1607ee4eb77e","name","MatchPage.tsx","fileType","script","content","// Match detail page: header card, score-prediction form, and prediction\n// rankings. One contestant = one prediction per match (resubmitting before\n// kickoff overwrites). Rankings are computed from the match's current score —\n// provisional while live, final at FT.\n//\n// The page works with no client JS (the form is a plain PRG POST). When JS is\n// on, a small enhancement (SAVE_SCRIPT) saves the prediction in place without a\n// reload and focuses the \"Next →\" button so you can walk the open fixtures in\n// kickoff order. The contestant you pick is remembered in a cookie (set by the\n// POST handler) and pre-filled here, so you only ever choose your name once.\n\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { MatchRow, PredictionRow, TeamRow } from \"../db.ts\";\nimport type { MatchNav, MatchPageData } from \"../queries.ts\";\nimport { CONTESTANT_BY_ID, CONTESTANTS } from \"../lib/contestants.ts\";\nimport { fmtCountdownTime } from \"../lib/time.ts\";\nimport { rankPredictions, type RankedPrediction } from \"../lib/prediction_scoring.ts\";\nimport { StatusPill } from \"./MatchCard.tsx\";\nimport { penaltyText } from \"../lib/knockout.ts\";\n\n// Prediction rules live in lib/predictions.ts (shared with the data layer);\n// re-exported here so existing importers of this module keep working.\nexport { predictionsOpen, SCORE_MAX, SCORE_MIN } from \"../lib/predictions.ts\";\nimport { predictionsOpen, SCORE_MAX, SCORE_MIN } from \"../lib/predictions.ts\";\n\nconst ERROR_TEXT: Record = {\n contestant: \"Pick who you are from the list.\",\n score: `Scores must be whole numbers from ${SCORE_MIN} to ${SCORE_MAX}.`,\n locked: \"Predictions are locked for this match.\",\n};\n\n// Progressive enhancement: intercept the prediction form, POST it via fetch\n// (so the server replies with JSON instead of a redirect), and update the page\n// in place — confirmation, heading, your row in the list, and focus on Next.\n// On any failure it falls back to a normal full-page submit. No template\n// literals here so the outer JSX string never interpolates it.\nconst SAVE_SCRIPT = `\n(function () {\n var form = document.getElementById('predict-form');\n if (!form) return;\n var statusEl = document.getElementById('predict-status');\n var headingEl = document.getElementById('predict-heading');\n var nextWrap = document.getElementById('predict-next');\n var okCls = 'mt-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700';\n var errCls = 'mt-3 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700';\n form.addEventListener('submit', function (e) {\n e.preventDefault();\n var btn = form.querySelector('button[type=submit]');\n if (btn) btn.disabled = true;\n var body = new URLSearchParams(new FormData(form)).toString();\n fetch(form.action, {\n method: 'POST',\n headers: { 'X-Requested-With': 'fetch', 'Content-Type': 'application/x-www-form-urlencoded' },\n body: body\n }).then(function (r) {\n return r.json().then(function (j) { return { ok: r.ok, body: j }; });\n }).then(function (res) {\n if (btn) btn.disabled = false;\n if (res.body && res.body.ok) {\n var line = res.body.score1 + '\\\\u2013' + res.body.score2;\n if (statusEl) { statusEl.textContent = 'Saved \\\\u2713 ' + line; statusEl.className = okCls; statusEl.style.display = ''; }\n if (headingEl) headingEl.textContent = 'Update your prediction';\n var cell = document.querySelector('[data-pred-row=\"' + res.body.contestantId + '\"] .js-pred-score');\n if (cell) cell.textContent = line;\n if (nextWrap) {\n var a = nextWrap.querySelector('a[data-next]');\n if (a) { a.classList.add('ring-2', 'ring-emerald-300'); a.focus(); }\n }\n } else {\n var code = res.body && res.body.error;\n var msg = code === 'score' ? 'Scores must be whole numbers from 0 to 20.'\n : code === 'contestant' ? 'Pick who you are from the list.'\n : code === 'locked' ? 'Predictions are locked for this match.'\n : 'Something went wrong \\\\u2014 try again.';\n if (statusEl) { statusEl.textContent = msg; statusEl.className = errCls; statusEl.style.display = ''; }\n }\n }).catch(function () { form.submit(); });\n });\n})();\n`.trim();\n\nfunction ContestantChip({ contestantId }: { contestantId: string }) {\n const c = CONTESTANT_BY_ID[contestantId];\n if (!c) return null;\n return (\n \n {c.name}\n \n );\n}\n\n// Mobile stacks flag above a wrapping name (a 1fr column on a phone is too\n// narrow for \"South Africa\" beside a flag); sm+ lays out flag-inside, name-out.\nfunction TeamSide({ team, placeholder, align }: {\n team: TeamRow | null;\n placeholder: string | null;\n align: \"left\" | \"right\";\n}) {\n return (\n \n {team?.flag ?? \"❓\"}\n

{team?.name ?? placeholder ?? \"TBD\"}

\n {team &&

FIFA #{team.fifa_rank}

}\n

\n \n );\n}\n\n// Walk between fixtures still open for a prediction, in kickoff order. The Next\n// link is the primary action after a save; SAVE_SCRIPT focuses it in place.\nfunction FixtureStepper({ nav }: { nav: MatchNav }) {\n if (nav.prevId == null && nav.nextId == null) return null;\n const center = nav.position != null\n ? <>Match {nav.position} of {nav.total} to predict\n : <>{nav.total} fixture{nav.total === 1 ? \"\" : \"s\"} open to predict;\n const prevCls = \"px-3 py-2 rounded-lg text-sm font-semibold transition-colors text-slate-600 hover:bg-slate-100\";\n const nextCls = \"px-4 py-2 rounded-lg text-sm font-semibold bg-emerald-600 hover:bg-emerald-700 text-white transition-colors\";\n const offCls = \"px-3 py-2 rounded-lg text-sm font-semibold text-slate-300 cursor-default\";\n return (\n

\n {nav.prevId != null\n ? ← Previous\n : ← Previous}\n {center}\n {nav.nextId != null\n ? Next →\n : Next →}\n

\n );\n}\n\nfunction PredictionForm({ match, team1, team2, you, yourPrediction, error, saved }: {\n match: MatchRow;\n team1: TeamRow;\n team2: TeamRow;\n you: string | null;\n yourPrediction: PredictionRow | null;\n error: string | null;\n saved: boolean;\n}) {\n const inputClass =\n \"num w-16 text-center text-lg font-semibold border border-slate-300 rounded-lg px-2 py-2 bg-white focus:outline-none focus:border-emerald-500\";\n const updating = yourPrediction != null;\n return (\n

\n {updating ? \"Update your prediction\" : \"Predict the score\"}\n

\n Open until kick-off. Submitting again replaces your prediction.\n

\n {error && (\n

\n {ERROR_TEXT[error] ?? \"Something went wrong — try again.\"}\n

\n )}\n {saved && !error && (\n

\n Prediction saved. Change it any time before kick-off.\n

\n )}\n \n {/* Filled in place by SAVE_SCRIPT after a JS save; hidden until then. */}\n

\n );\n}\n\nfunction PredictionScore({ p }: { p: PredictionRow }) {\n return (\n \n {p.score1}-{p.score2}\n \n );\n}\n\n// Pre-kickoff (or locked-awaiting-score): flat list, submission order. Each row\n// is tagged with its contestant so SAVE_SCRIPT can update \"your\" score in place.\nfunction PredictionList({ predictions, you }: { predictions: PredictionRow[]; you: string | null }) {\n return (\n

\n {predictions.map((p, i) => (\n \n \n {p.contestant_id === you && you}\n

\n \n {p.score1}-{p.score2}\n \n

\n ))}\n

\n );\n}\n\nfunction pointsBadge(r: RankedPrediction): { label: string; cls: string } {\n const a = r.assessment;\n if (a.exact) return { label: \"🎯 exact\", cls: \"bg-amber-100 text-amber-700\" };\n if (a.points === 2) return { label: \"✓ goal diff\", cls: \"bg-emerald-100 text-emerald-700\" };\n if (a.points === 1) return { label: \"✓ result\", cls: \"bg-slate-100 text-slate-600\" };\n return { label: \"✗\", cls: \"bg-slate-50 text-slate-400\" };\n}\n\nfunction RankedTable({ ranked, provisional, you }: { ranked: RankedPrediction[]; provisional: boolean; you: string | null }) {\n return (\n

\n {ranked.map((r, i) => {\n const badge = pointsBadge(r);\n return (\n \n

\n {r.rank}\n

\n \n \n

\n \n {badge.label}\n \n \n {r.assessment.points} pt{r.assessment.points === 1 ? \"\" : \"s\"}\n \n

\n );\n })}\n

\n );\n}\n\ntype Props = {\n data: MatchPageData;\n you: string | null;\n error: string | null;\n saved: boolean;\n};\n\nexport function MatchPage({ data, you, error, saved }: Props) {\n const { match, team1, team2, predictions, nav } = data;\n const hasTeams = team1 != null && team2 != null;\n const open = predictionsOpen(match);\n const inPlay = match.status === \"live\" || match.status === \"ht\";\n const finished = match.status === \"finished\";\n const hasScore = match.score1 != null && match.score2 != null;\n const showRanking = (inPlay || finished) && hasScore && predictions.length > 0;\n const ranked = showRanking\n ? rankPredictions(predictions, match.score1!, match.score2!)\n : [];\n const yourPrediction = you ? predictions.find((p) => p.contestant_id === you) ?? null : null;\n\n return (\n

\n \n ← All fixtures\n \n\n

\n \n {match.group_letter ? `Group ${match.group_letter}` : match.round}\n \n {match.status !== \"scheduled\"\n ? \n : {fmtCountdownTime(match.kickoff_utc)}}\n

\n \n

\n {(inPlay || finished) && hasScore\n ? <>{match.score1}-{match.score2}\n : vs}\n {finished && penaltyText(match) && (\n

\n {penaltyText(match)}\n

\n )}\n

\n \n

{match.ground}

\n\n {showRanking && (\n

\n {finished ? \"Final prediction ranking\" : \"Provisional ranking\"}\n

\n {finished\n ? \"Right result ranks above wrong; closest goal difference, then closest total goals.\"\n : `If it ends ${match.score1}-${match.score2}. Updates as the score changes.`}\n

\n \n

\n )}\n\n {open && hasTeams && (\n

\n \n

\n )}\n\n {open && }\n\n {!hasTeams && (\n

\n Predictions open once both teams are known.\n

\n )}\n\n {hasTeams && !open && !showRanking && (\n

\n Predictions are locked — kick-off has passed.\n

\n )}\n\n {open && predictions.length > 0 && (\n

\n Predictions ({predictions.length})\n

In submission order.

\n \n

\n )}\n\n {open && predictions.length === 0 && (\n

No predictions yet — get yours in first.

\n )}\n\n {!open && !showRanking && predictions.length > 0 && (\n

\n Predictions ({predictions.length})\n

\n \n

\n )}\n\n \n\n \n \n

Diff · v199