/* AcquiCup — core screens: MatchCard, Dashboard, Calendar */
const { useState, useEffect, useRef, useMemo } = React;
/* Safety-risk tone for an outcome's points, mirroring the tiers used on the
dashboards: ≤20 = favourite (low risk), ≤45 = mid, >45 = upset (high risk).
`c` is a readable text/border colour, `soft` a tinted fill for the selected
slip cell. Uses --gold (not raw --brand-yellow) for the high-risk text so it
stays legible. */
function riskTone(pts) {
const p = Number(pts) || 0;
if (p <= 20) return { c: "var(--brand-navy)", soft: "color-mix(in srgb, var(--brand-navy) 12%, var(--surface-2))" };
if (p <= 45) return { c: "var(--brand-blue)", soft: "color-mix(in srgb, var(--brand-blue) 16%, var(--surface-2))" };
return { c: "var(--gold)", soft: "color-mix(in srgb, var(--brand-yellow) 22%, var(--surface-2))" };
}
/* ---- odds buckets (the betting-slip signature moment) ---- */
function OddsRow({ match, picked, size = "" }) {
const cells = [[T(match.home).name + " wins", "home"], ["Draw", "draw"], [T(match.away).name + " wins", "away"]];
return (
{cells.map(([lab, key]) => {
const on = picked === key;
// The selected cell takes the colour of its own safety-risk tier.
const tone = on ? riskTone(match.points[key]) : null;
return (
{lab}{match.points[key]}
);
})}
);
}
/* Compact vertical score dial for editing a prediction in place on a match
card: ▲ / number / ▼, sized to sit inside the narrow center column. */
function ScoreDial({ label, value, onChange }) {
const set = (v) => onChange(Math.max(0, Math.min(15, v)));
const empty = value === "" || value == null;
const dialBtn = { width: 40, height: 16, padding: 0, border: "none", background: "transparent",
cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-soft)" };
return (
{empty ? "–" : value}
);
}
function MatchCard({ match, pred, onOpen, onSave, onX2, onRemoveX2, x2On, x2Remaining }) {
const tz = useTimezone();
const settled = match.status === "finished";
const live = match.status === "live";
const locked = match.status === "locked" || live || settled;
const ven = V(match.venue);
// Knockout fixtures whose participants are still placeholders ("Winner Match 73",
// "2nd Group A" — imported with an empty iso) have no real teams yet, so they
// can't be predicted or priced. Treat them as "to be determined".
const tbd = isTbd(match);
const editable = !locked && !tbd && typeof onSave === "function";
const cta = settled ? "View result" : tbd ? "Details" : locked ? "Locked" : pred ? "Edit prediction" : "Predict";
const earned = settled && pred && pred.earned ? pred.earned.total : null;
// Tier the earned badge by prediction quality: exact scoreline → navy, correct
// outcome → electric blue, a miss → yellow.
const predRight = settled && pred ? outcomeOf(pred.home, pred.away) === outcomeOf(match.homeScore, match.awayScore) : false;
const predExact = !!(settled && pred && pred.earned && pred.earned.isExact);
// Inline prediction edit state. Cards default to a 0–0 scoreline that is NOT
// recorded until the player hits "Save pick" — until then the match counts as
// un-predicted. Once saved, the card shows "Saved" and only an edited score
// reveals an "Update pick" button. Hooks are unconditional (used if editable).
const hasPick = pred && pred.home != null;
const seedH = hasPick ? pred.home : 0;
const seedA = hasPick ? pred.away : 0;
const [eHome, setEHome] = useState(seedH);
const [eAway, setEAway] = useState(seedA);
const [saving, setSaving] = useState(false);
// Re-sync from the saved prediction when it changes (detail-page edit, our own
// optimistic save landing, or a rejected save rolling back).
useEffect(() => { setEHome(seedH); setEAway(seedA); }, [match.id, seedH, seedA]);
const dirty = String(eHome) !== String(seedH) || String(eAway) !== String(seedA);
const canSave = eHome !== "" && eAway !== "";
// A 0–0 default with no saved pick still needs saving; a saved pick only needs
// saving once edited.
const needsSave = !hasPick || dirty;
// Highlight the odds cell for the current pick — the unsaved edit while editing.
const picked = editable ? outcomeOf(eHome, eAway) : (pred ? outcomeOf(pred.home, pred.away) : null);
const canX2 = editable && typeof onX2 === "function";
const x2Used = !x2On && (x2Remaining ?? 0) <= 0; // both bonuses spent elsewhere
// Max points if this exact pick lands: outcome + exact bonus, doubled when X2
// is active on this match.
const maxPotential = canSave ? potential(match, { home: eHome, away: eAway }) * (x2On ? 2 : 1) : 0;
async function doSave() {
if (!canSave || saving) return;
setSaving(true);
try { await onSave(match.id, { home: +eHome, away: +eAway }); }
finally { setSaving(false); }
}
// Status drives a color-coded accent stripe + header tint so a card's state reads
// at a glance: live (orange) / finished (green) / locked / needs-pick (red, an
// editable upcoming match with no saved prediction) / upcoming (blue).
const needsPick = editable && !hasPick;
const statusKey = tbd ? "tbd" : live ? "live" : settled ? "finished" : locked ? "locked" : needsPick ? "needspick" : "upcoming";
return (
{/* center: result / live score, or the editable "your pick" dials — over the "X" cell */}
{(settled || live) ? (
{match.homeScore}:{match.awayScore}
{/* the player's own prediction, beneath the actual score — tinted
green/red once finished to show if the outcome was called right */}
{hasPick && (() => {
const right = settled && outcomeOf(pred.home, pred.away) === result;
const tone = !settled ? "var(--ink)" : right ? "var(--pos-tx)" : "var(--neg-tx)";
return (
your pick
{pred.home}–{pred.away}
{settled && (right
?
: )}
);
})()}
) : editable ? (
:
{hasPick && !dirty ? "saved" : "your pick"}
) : hasPick ? (
{pred.home}–{pred.away}your pick
) : (
vs
)}
{/* away — column 3, over the "2" cell */}
{T(match.away).name}
);
})()}
{tbd
?
Teams to be determined — odds open once the bracket resolves
: }
{editable ? (
<>
{/* maximum potential for the current pick (doubled when X2 is on here) */}
);
}
/* ---- bulk prediction actions ----------------------------------------------
Two toolbar buttons shared by the dashboard and the calendar:
• Auto-fill — seed every still-editable, not-yet-predicted upcoming match
from one strategy (reuses the sign-up STRATEGY_OPTIONS minus 'myself').
• Clear all — remove every prediction on a still-editable match.
Both delegate to the App-level store.applyStrategy / store.clearPredictions,
which hit the batch endpoints then re-bootstrap. A local modal is used because
app.jsx's `Modal` is private to its own (per-file) Babel script scope. */
function BulkModal({ children, onClose, width = 420 }) {
return (
);
}
// Per-strategy accent for the option's icon chip — same colored-chip language as
// the dashboard StatBox/KPI tiles: aggressive = risk red, safe = steady green,
// random = chaos gold. Falls back to the app accent for anything unmapped.
const STRATEGY_TONE = { aggressive: "var(--neg-tx)", safe: "var(--pos-tx)", random: "var(--gold)" };
// StrategyPicker — the shared body of the "Auto predict / Auto-fill" modal, used
// by BOTH the dashboard hero CTA and the calendar toolbar so the design lives in
// one place. Mirrors the app's confirm-modal layout (icon-chip header → title +
// subtitle → selectable radio cards → ghost/primary footer), matching the X2 and
// Clear-all dialogs. `verb`/`busyLabel` let each caller keep its own copy.
function StrategyPicker({ count, strategy, setStrategy, options, busy, onCancel, onApply,
title = "Auto predict all matches", verb = "Predict", busyLabel = "Predicting…" }) {
const matchWord = count === 1 ? "match" : "matches";
return (
{title}
Pick a strategy for the {count} upcoming {matchWord} you haven't predicted yet.
Your saved picks stay untouched — you can edit any filled score before it locks.
{options.map((o) => {
const on = strategy === o.id;
const tone = STRATEGY_TONE[o.id] || "var(--accent)";
return (
);
})}
);
}
function PredictionBulkActions({ store }) {
const A = window.ACQ;
const [picking, setPicking] = useState(false); // strategy-picker modal
const [confirming, setConfirming] = useState(false); // clear-all confirm modal
const [strategy, setStrategy] = useState("safe");
const [busy, setBusy] = useState(false);
// Strategy choices minus the blank-slate 'myself' (nothing to fill).
const options = (window.STRATEGY_OPTIONS || []).filter((o) => o.id !== "myself");
// Counts mirror the calendar's "missing" tab and the dashboard KPI: upcoming
// matches with no saved pick (auto-fill also needs real teams — placeholder
// knockouts can't be priced). These are status-based on purpose; the server's
// isMatchEditable adds a kickoff-time check we don't replicate client-side, so
// a just-kicked-off-but-still-"upcoming" match can be counted here yet skipped
// by the server. That's fine — the server is authoritative and the post-action
// toast reports the real applied/cleared count.
const upcoming = A.MATCHES.filter((m) => m.status === "upcoming");
const fillN = upcoming.filter((m) => !store.predictions[m.id] && !isTbd(m)).length;
const clearN = upcoming.filter((m) => store.predictions[m.id]).length;
// No upcoming matches at all → nothing to act on; render nothing.
if (upcoming.length === 0) return null;
async function doApply() {
if (busy) return;
setBusy(true);
try { await store.applyStrategy(strategy); setPicking(false); }
finally { setBusy(false); }
}
async function doClear() {
if (busy) return;
setBusy(true);
try { await store.clearPredictions(); setConfirming(false); }
finally { setBusy(false); }
}
return (
{picking && (
{ if (!busy) setPicking(false); }} width={440}>
setPicking(false)} onApply={doApply}
title="Auto-fill your predictions" verb="Fill" busyLabel="Filling…" />
)}
{confirming && (
{ if (!busy) setConfirming(false); }} width={400}>
Clear all predictions?
This removes your {clearN} prediction{clearN === 1 ? "" : "s"} on upcoming matches.
Picks on matches that have already started or finished are kept — you can re-predict any match before it locks.
)}
);
}
// Live "time to kickoff" pill for the next upcoming match. Ticks every second and
// derives the kickoff instant the same way the match cards / lock do (matchInstant in
// the SOURCE zone) so it counts down to the exact moment predictions freeze. Renders
// nothing once the match has started (or the kickoff is unparseable).
function NextMatchCountdown({ match }) {
const [now, setNow] = useState(() => Date.now());
useEffect(() => {
const t = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(t);
}, []);
const ms = matchInstant(match && match.date, match && match.time, matchSourceTz());
if (ms == null) return null;
const diff = ms - now;
if (diff <= 0) return null;
const s = Math.floor(diff / 1000);
const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600);
const m = Math.floor((s % 3600) / 60), sec = s % 60;
const text = d > 0 ? `${d}d ${h}h ${m}m` : h > 0 ? `${h}h ${m}m ${sec}s` : `${m}m ${sec}s`;
return (
{text}to kickoff
);
}
/* ----------------------------- DASHBOARD ----------------------------- */
function Dashboard({ store, go, openMatch }) {
const me = store.me;
const A = window.ACQ;
const tz = useTimezone();
const [showAllPoints, setShowAllPoints] = useState(false);
const [showAllUpcoming, setShowAllUpcoming] = useState(false);
// "Auto predict all matches" hero action — strategy picker + busy state. Mirrors
// PredictionBulkActions' auto-fill, but reachable straight from the dashboard.
const [autoPicking, setAutoPicking] = useState(false);
const [autoStrategy, setAutoStrategy] = useState("safe");
const [autoBusy, setAutoBusy] = useState(false);
const autoOptions = (window.STRATEGY_OPTIONS || []).filter((o) => o.id !== "myself");
// Exclude placeholder knockout fixtures (empty-iso TBD teams) — they can't be
// predicted or priced ("Teams to be determined"), so they don't belong in the
// hero, the next-matches grid, or the upcoming count.
const upcoming = A.MATCHES.filter((m) => m.status === "upcoming" && !isTbd(m));
const myCo = A.COMPANY_RANK.find((c) => c.id === me.company);
// Soonest upcoming match whose kickoff is still in the future — drives the hero
// countdown. Sort by the same kickoff instant the lock uses (not payload order).
const nowMs = Date.now();
const nextMatch = upcoming
.map((m) => ({ m, ms: matchInstant(m.date, m.time, matchSourceTz()) }))
.filter((x) => x.ms != null && x.ms > nowMs)
.sort((a, b) => a.ms - b.ms)
.map((x) => x.m)[0];
// Upcoming, predictable matches with no pick yet — mirrors the calendar's "Missing
// predictions" tab; surfaces the red catch-up CTA when there's still work to do.
const missingN = upcoming.filter((m) => !store.predictions[m.id]).length;
// Upcoming, predictable matches that already have a pick — mirrors the calendar's
// "Saved Predictions" tab count. Once nothing is missing, the hero swaps the
// auto-predict CTA for a "Change my predictions" link into that tab.
const savedN = upcoming.filter((m) => store.predictions[m.id]).length;
async function doAutoApply() {
if (autoBusy) return;
setAutoBusy(true);
try { await store.applyStrategy(autoStrategy); setAutoPicking(false); }
finally { setAutoBusy(false); }
}
// Top-5 leaderboards, with the current user / their company appended (behind a
// "⋯" gap row) when they fall outside the top 5 — so "me" is always on screen.
const sortedUsers = [...A.USERS].sort((a, b) => a.rank - b.rank);
const sortedCos = [...A.COMPANY_RANK].sort((a, b) => a.rank - b.rank);
const topWithMe = (sorted, isMe, n = 5) => {
const rows = sorted.slice(0, n).map((r) => ({ r }));
const idx = sorted.findIndex(isMe);
if (idx >= n) rows.push({ gap: true }, { r: sorted[idx] });
return rows;
};
// Dashboard leaderboards show the top 5 (the full board lives behind the
// "Full" button); "me" is always appended.
const LB_COLLAPSED = 5;
const playerRows = topWithMe(sortedUsers, (u) => u.you, LB_COLLAPSED);
const companyRows = topWithMe(sortedCos, (c) => c.id === me.company, LB_COLLAPSED);
// My stats: split SETTLED predictions into exact / good (right outcome, not
// exact) / wrong (outcome missed). Percentages are of settled predictions —
// a prediction is settled once its match has finished (`earned` is present).
const settled = Object.values(A.MY_PREDICTIONS || {}).filter((p) => p && p.earned).length;
// Buckets are a strict partition of `settled` (exact + good + wrong === settled). `good` is
// a first-class server stat (right outcome that scored, NOT exact), NOT `correct - exacts`:
// a 0-odds exact counts in `exacts` but not in `correct`, so subtracting would push a genuine
// good prediction into "wrong". (`?? ` keeps an older payload without `good` from breaking.)
const exactN = me.exacts;
const goodN = me.good ?? Math.max(0, me.correct - me.exacts);
const wrongN = Math.max(0, settled - exactN - goodN);
// Earned points by accuracy bucket — summed from each settled pick's scored
// `total` (includes any X2 doubling). Wrong picks score 0, so all of `me.points`
// comes from exact + good; we surface that split beside the counts in the legend.
let exactPts = 0, goodPts = 0;
Object.values(A.MY_PREDICTIONS || {}).forEach((p) => {
if (!p || !p.earned) return;
const t = Number(p.earned.total) || 0;
if (p.earned.isExact) exactPts += t;
else if (p.earned.outcome > 0) goodPts += t;
});
const statRows = [
{ label: "Exact score", short: "Exact", value: exactN, pts: exactPts, color: "var(--brand-navy)" },
{ label: "Good prediction", short: "Good", value: goodN, pts: goodPts, color: "var(--brand-blue)" },
{ label: "Wrong prediction", short: "Wrong", value: wrongN, pts: 0, color: "var(--brand-yellow)" },
];
// matchById — join each settled pick to its match so we can read the odds of the
// outcome it backed (used by the risk profile below).
const matchById = {};
A.MATCHES.forEach((m) => { matchById[m.id] = m; });
// Safety rate (computed from risk tiers, then inverted for display): the SAME settled
// predictions split by how risky each bet was, read off the odds of the outcome backed
// (per-match outcome points ≈ decimal-odds × 10, see src/odds.js) — the bigger the
// points, the longer the shot you took. Buckets: low ≤20 (a favourite, decimal < ~2.0 →
// HIGH safety), medium 21–45, high >45 (a long shot / bold draw → LOW safety). Each tier
// tracks its pick count `n` AND the points those picks earned (`pts`, summed from the
// scored `total`). Same `settled` denominator as the accuracy bar; a finished match is
// always priced (backfillEstimatedOdds), so `safetyTotal` tracks `settled` and the
// `pts===0` guard is only defensive (an unpriced match isn't "low risk").
const risk = { low: { n: 0, pts: 0 }, med: { n: 0, pts: 0 }, high: { n: 0, pts: 0 } };
Object.entries(A.MY_PREDICTIONS || {}).forEach(([mid, p]) => {
if (!p || !p.earned) return;
const m = matchById[mid];
if (!m || !m.points) return;
const outcome = p.home > p.away ? "home" : p.home < p.away ? "away" : "draw";
const pts = Number(m.points[outcome]) || 0;
if (!pts) return;
const tier = pts <= 20 ? risk.low : pts <= 45 ? risk.med : risk.high;
tier.n += 1;
tier.pts += Number(p.earned.total) || 0;
});
const safetyTotal = risk.low.n + risk.med.n + risk.high.n;
// Safety framing — the inverse of risk: a LOW-risk pick (favourite) is HIGH safety, a
// long shot is LOW safety. Brand palette, high → low safety: navy → electric blue →
// yellow (the same three anchors as the accuracy bar, read as a safe → bold ramp).
const safetyRows = [
{ label: "High safety", short: "High", value: risk.low.n, pts: risk.low.pts, color: "var(--brand-navy)" },
{ label: "Medium safety", short: "Med", value: risk.med.n, pts: risk.med.pts, color: "var(--brand-blue)" },
{ label: "Low safety", short: "Low", value: risk.high.n, pts: risk.high.pts, color: "var(--brand-yellow)" },
];
// Recent points table rows — ALL settled predictions (match finished + scored),
// joined to the match so we can render flags, kick-off + phase, the pick, the
// actual score, and a quality-coded points badge (exact / right outcome / miss).
// Recent-first, mirroring the server's ACTIVITY sort (match date then time, desc).
const recentPoints = Object.entries(A.MY_PREDICTIONS || {})
.map(([mid, pred]) => {
const match = matchById[mid];
if (!match || !pred || !pred.earned) return null;
const right = outcomeOf(pred.home, pred.away) === outcomeOf(match.homeScore, match.awayScore);
const exact = !!pred.earned.isExact;
return { match, pred, pts: pred.earned.total, right, exact };
})
.filter(Boolean)
.sort((a, b) => {
if (a.match.date !== b.match.date) return a.match.date < b.match.date ? 1 : -1;
const at = a.match.time || "", bt = b.match.time || "";
return at < bt ? 1 : at > bt ? -1 : 0;
});
const visiblePoints = showAllPoints ? recentPoints : recentPoints.slice(0, 5);
const KPI = ({ label, value, sub, accent, icon }) => (
{label}
{icon && }
{value}
{sub && {sub}}
);
// Highlighted headline stat (total points / player rank / company rank): a
// colored accent bar + icon chip, the big number, and the movement arrow.
// `accuracy` (Total points only) renders a compact % bar beside the number.
const StatBox = ({ label, value, sub, icon, color, movement, accuracy }) => (
{label}
{movement != null && }
{value}
{accuracy && (
Accuracy{accuracy.pct}%
{/* segmented track mirroring the "My stats" bar: navy=Exact, blue=Good,
yellow=Wrong, 2px gaps between adjacent segments */}
);
// StatBar (the shared proportional stat bar + segment-aligned legend used by both
// My-stats bars) now lives in components.jsx so the public profile can reuse it.
return (
You're #{me.rank} of {A.USERS.length} players with {me.points} points.
{/* Countdown pill + the two action buttons share one stretch column so
all three render at an identical width and height. */}
{nextMatch && }
{missingN > 0 ? (
<>
) : savedN > 0 ? (
// Everything's predicted — point the user at the Saved Predictions tab
// to review/edit their picks before kickoff locks them.
) : null}
{/* "Auto predict all matches" strategy picker — same flow as the calendar's
auto-fill, but launched from the hero CTA. */}
{autoPicking && (
{ if (!autoBusy) setAutoPicking(false); }} width={440}>
setAutoPicking(false)} onApply={doAutoApply}
title="Auto predict all matches" verb="Predict" busyLabel="Predicting…" />
)}
{/* highlighted headline stats */}
{/* secondary KPIs — sit directly under the headline stats */}
{/* my stats — one card, two proportional bars: Accuracy rate (exact / good / wrong)
and Safety rate (high / medium / low by the odds backed). Each segment shows its
share, the number of predictions, and the points those picks earned. */}
Accuracy rateHow your settled picks scored — exact score, right outcome, or missed
{/* 2 — safety rate: settled picks split by the odds of the outcome backed
(high safety = favourite ≤20 pts, medium 21–45, low = long shot >45);
brand ramp navy → blue → yellow */}
Safety rateHow safe your bets were — by the odds of the outcome you backed
{/* The points-by-type / points-by-safety donuts now live on the player's
own profile page (alongside the rank charts), reached via the "View
more stats" button below — keeping the dashboard's stats card light. */}
}
{/* recent points — single-column table, centred: match (with flags) ·
prediction · score · points · kick-off · phase. The betting-relevant
columns lead so on a narrow phone they read without horizontal scroll,
and the lower-priority kick-off/phase metadata trails to the right (the
kick-off stays on a single row). Points badge colour-coded like the
match card (navy = exact, blue = right outcome, amber = miss). Shows the 5
most recent by default with a "Show more" toggle for the rest. */}
);
}
/* ----------------------------- CALENDAR ----------------------------- */
function Calendar({ store, openMatch }) {
const A = window.ACQ;
// A dashboard CTA can ask the calendar to open on a specific tab (e.g. "Predict next
// matches" → Upcoming). Consume the one-shot hint so a later plain visit defaults to All.
const [tab, setTab] = useState(() => { const t = window.__calInitialTab; window.__calInitialTab = null; return t || "all"; });
// Stored match dates are UTC ("YYYY-MM-DD"), so anchor "today" in UTC too.
const todayStr = new Date().toISOString().slice(0, 10);
const tabs = [
["all", "All Matches"], ["missing", "Missing predictions"], ["saved", "Saved Predictions"],
["upcoming", "Upcoming"], ["finished", "Finished"], ["today", "Today"],
];
const list = A.MATCHES.filter((m) => {
// Hide placeholder knockout fixtures (no real teams yet) — "Teams to be determined".
if (isTbd(m)) return false;
const p = store.predictions[m.id];
switch (tab) {
case "all": return true;
case "missing": return m.status === "upcoming" && !p && !isTbd(m);
case "saved": return m.status === "upcoming" && !!p;
case "upcoming": return m.status === "upcoming" || m.status === "locked";
case "finished": return m.status === "finished";
case "today": return m.date === todayStr;
default: return true;
}
});
// group by date
const byDate = {};
list.forEach((m) => { (byDate[m.date] = byDate[m.date] || []).push(m); });
const dates = Object.keys(byDate).sort();
return (
} />
{tabs.map(([id, lab]) => )}
{dates.length === 0 &&
No matches in this view.
}
{dates.map((d) => (
{fmtDay(d)}{byDate[d].length} matches
{byDate[d].map((m) => )}
))}
);
}
Object.assign(window, { MatchCard, OddsRow, Dashboard, Calendar, PredictionBulkActions });