/* AcquiCup — prediction detail (score entry, X2 bonus, potential points) */
const { useState, useEffect, useRef, useMemo } = React;
// Re-render once when `targetMs` is reached so a time-based lock can flip live —
// a SINGLE timeout at the kickoff instant, not a perpetual interval. Returns "now"
// in ms. No tick is scheduled for a kickoff already passed or more than 24h out
// (the user won't sit on the page that long — a reload refreshes it). Used so the
// prediction form freezes the moment a match starts, matching the server lock.
function useNowUntil(targetMs) {
const [now, setNow] = useState(() => Date.now());
useEffect(() => {
if (targetMs == null) return;
const delay = targetMs - Date.now();
if (delay <= 0 || delay > 86400000) return;
const id = setTimeout(() => setNow(Date.now()), delay + 250);
return () => clearTimeout(id);
}, [targetMs]);
return now;
}
function Stepper({ value, onChange, disabled }) {
const set = (v) => !disabled && onChange(Math.max(0, Math.min(15, v)));
return (
{value === "" || value == null ? "–" : value}
);
}
function BreakLine({ label, value, on, doubled }) {
return (
{label}
{on ? "+" + value : "—"}{doubled && on ? ×2 : null}
);
}
function PredictionDetail({ match, store, back, save, openX2, removeX2 }) {
const tz = useTimezone();
const A = window.ACQ;
const existing = store.predictions[match.id] || {};
const settled = match.status === "finished";
// A knockout fixture with placeholder participants (empty iso, e.g. "Winner
// Match 73") has no real teams yet — not predictable until the bracket resolves.
const tbd = isTbd(match);
// Mirror the server's matchLock.isMatchEditable: a pick freezes BOTH when the
// status leaves "upcoming" AND once the stored kickoff instant has passed. Status
// alone is unsafe — nothing flips it automatically, so between real kickoff and the
// next sync/admin status change a match sits in "upcoming" past its start. matchInstant()
// is the client mirror of the server's kickoffTimestamp (interpreted in the source zone);
// useNowUntil re-renders at kickoff so the form locks live without a refresh.
const kickoffMs = matchInstant(match.date, match.time, matchSourceTz());
const now = useNowUntil(kickoffMs);
const started = kickoffMs != null && now >= kickoffMs;
const editable = match.status === "upcoming" && !tbd && !started;
const hasPick = existing.home != null;
// Default to a 0–0 scoreline. It is NOT recorded until "Save pick" is pressed.
const [home, setHome] = useState(hasPick ? existing.home : 0);
const [away, setAway] = useState(hasPick ? existing.away : 0);
const x2MatchIds = store.x2MatchIds || [];
const x2Here = x2MatchIds.includes(match.id);
const x2Remaining = Math.max(0, 2 - x2MatchIds.length);
const x2Used = !x2Here && x2Remaining <= 0; // both bonuses spent elsewhere
const outcome = outcomeOf(home, away);
const ven = V(match.venue);
// potential breakdown if this EXACT scoreline happens (outcome points + exact reward)
const outcomePts = outcome ? match.points[outcome] : 0;
const exactPts = outcome ? exactBonus(match, outcome) : 0;
const subtotal = outcomePts + exactPts;
const total = x2Here ? subtotal * 2 : subtotal;
// Label reflects the exact-score mode: a ×N multiplier (default) or a flat +bonus.
const exactLabel = match.exactScoreMode === "add"
? "Exact score bonus"
: `Exact score (×${match.exactScoreMultiplier || 2})`;
// A 0–0 default with no saved pick still needs saving; a saved pick only once edited.
const dirty = !hasPick || +home !== existing.home || +away !== existing.away;
const canSave = home !== "" && away !== "";
function doSave() {
save(match.id, { home: +home, away: +away });
// Stay on the detail page so the "Saved" confirmation shows; the Back button
// returns to the matches list.
}
return (
Prediction lockedThis match started before you submitted a prediction. No points — but no penalty either.
;
}
// Finished → the settled `earned` breakdown; in play → the server's provisional
// `live` breakdown, scored against the score as it stands right now.
const inPlay = match.status === "live";
const e = settled ? pred.earned : inPlay ? pred.live : null;
if (!e) {
return
{inPlay ? "Match in play — prediction locked" : "Prediction locked"}Your {pred.home}–{pred.away} is in. Points settle when the match finishes.
;
}
return (
{inPlay && }
{inPlay ? `Live · if it ends ${match.homeScore}–${match.awayScore}` : "Your result"}
0} doubled={x2Here} />
{inPlay && Provisional — your points move with the score and settle at full time.}
);
}
/* Every player's pick on a revealed (live/finished) match — the table behind the
match-card "Details"/"View result" button. Fetched on open from
GET /api/matches/:id/predictions (the server refuses pre-kickoff, so pending bets
never leak); names/companies/AI flags are joined from the USERS list already in
window.ACQ. Collapsed view = the top 10 rows PLUS every AI bot and the viewer's own
row wherever they sit (with ··· gap markers); "Show all" expands to the full field. */
function MatchPredictionsCard({ match, store }) {
const A = window.ACQ;
const [rows, setRows] = useState(null); // null = loading
const [err, setErr] = useState(null);
const [expanded, setExpanded] = useState(false);
const inPlay = match.status === "live";
useEffect(() => {
let on = true;
setRows(null); setErr(null);
API.getMatchPredictions(match.id)
.then((r) => { if (on) setRows((r && r.predictions) || []); })
.catch((e) => { if (on) setErr((e && e.error) || "Could not load predictions."); });
return () => { on = false; };
// Re-fetch when the public score moves so live provisional points stay current.
}, [match.id, match.status, match.homeScore, match.awayScore]);
// Server rows carry only the pick + points keyed by userId — join the display
// identity (name, company, AI badge, `you`) from the bootstrap USERS list.
const byId = useMemo(() => {
const m = {};
(A.USERS || []).forEach((u) => { m[u.id] = u; });
return m;
}, [A.USERS]);
const all = useMemo(
() => (rows || []).map((r) => ({ ...r, u: byId[r.userId] })).filter((r) => r.u),
[rows, byId]
);
const TOP_N = 10;
// The server sorts best-first, so position = array index. Collapsed keeps top 10 + AI + me.
const visible = expanded ? all : all.filter((r, i) => i < TOP_N || r.u.isAi || r.u.you);
const hidden = all.length - visible.length;
const posOf = useMemo(() => { const m = {}; all.forEach((r, i) => { m[r.userId] = i + 1; }); return m; }, [all]);
return (
{inPlay && }
All predictions{rows ? ` · ${all.length} player${all.length === 1 ? "" : "s"}` : ""}
{inPlay && Provisional — points move with the score}