/* AcquiCup — public player profile page. * * A read-only view of any player, reached by clicking them on a leaderboard. It * mirrors the Dashboard (headline stats, accuracy breakdown, their predictions, * and BOTH leaderboard time-series charts) but with two deliberate differences: * 1. For OTHER players it NEVER shows still-pending picks — only REVEALED * predictions (matches that have kicked off: locked / live / finished). The * server enforces this (GET /api/users/:id omits editable upcoming picks for * other players); a player viewing their OWN profile gets every pick back, * pending ones included. The client just renders whatever it's handed. * 2. Nothing here is editable — no dials, no X2, no "your pick" wording. * * The two charts reuse the shared RankSeriesCard (Top 10 / Top 20 / Me / All / Select tabs) * and the rank series that already ship in every window.ACQ payload (USER_RANK_SERIES / * COMPANY_RANK_SERIES / RANK_DATES), so the only thing fetched per-page is the target's * revealed picks. The "Me" tab here plots the profile's subject (labelled by their name). */ const { useState, useEffect } = React; function UserPage({ store, go, userId }) { const A = window.ACQ; const tz = useTimezone(); const [data, setData] = useState(null); // { user, predictions } from the API const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [showAll, setShowAll] = useState(false); useEffect(() => { let cancelled = false; setLoading(true); setError(null); setData(null); setShowAll(false); if (!userId) { setLoading(false); setError("No player selected."); return; } API.getUser(userId) .then((d) => { if (!cancelled) { setData(d); setLoading(false); } }) .catch((e) => { if (!cancelled) { setError((e && e.error) || "Couldn't load this player."); setLoading(false); } }); return () => { cancelled = true; }; }, [userId]); // The leaderboard standings entry (rank/movement/series live here for every user). const standing = A.USERS.find((u) => u.id === userId); // Prefer the freshly-fetched profile, fall back to the standings row. const user = (data && data.user) || standing; const predictions = (data && data.predictions) || {}; const isMe = !!(user && (user.you || (store.me && user.id === store.me.id))); const coName = (id) => (A.COMPANIES.find((c) => c.id === id) || {}).name || id; const myCo = user ? A.COMPANY_RANK.find((c) => c.id === user.company) : null; // Join every revealed pick to its match (used by the stats card + the table below). const matchById = {}; A.MATCHES.forEach((m) => { matchById[m.id] = m; }); // ---- stats: SETTLED predictions split two ways, mirroring the Dashboard's "My stats" // card (Accuracy rate + Risk rate). A prediction is settled once its match has finished // (`earned` present). ---- const settled = Object.values(predictions).filter((p) => p && p.earned).length; // Accuracy: exact / good (right outcome, not exact) / wrong. exact + good are // authoritative server stats on the user row; wrong is the remainder. const exactN = user ? user.exacts : 0; const goodN = user ? (user.good ?? Math.max(0, user.correct - user.exacts)) : 0; const wrongN = Math.max(0, settled - exactN - goodN); // Points earned per accuracy bucket — summed from each settled pick's scored `total` // (includes any X2 doubling). Wrong picks score 0, so all points come from exact + good. let exactPts = 0, goodPts = 0; Object.values(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)" }, ]; // Risk: the SAME settled picks split by how risky each bet was, read off the odds of the // outcome backed (per-match outcome points ≈ decimal-odds × 10) — low ≤20 (favourite), // medium 21–45, high >45 (long shot). Each tier tracks its count and the points it earned. const risk = { low: { n: 0, pts: 0 }, med: { n: 0, pts: 0 }, high: { n: 0, pts: 0 } }; Object.entries(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 = inverse of risk: a LOW-risk pick (favourite) is HIGH safety, a long shot is LOW. 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)" }, ]; // ---- settled predictions (match finished + scored), joined to their match — the SAME // shape + layout as the Dashboard's "Recent points" table, recent-first, capped at 10. ---- const rows = Object.entries(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 visibleRows = showAll ? rows : rows.slice(0, 10); // ---- individual chart: the full board, this player's line highlighted. Fed to the shared // RankSeriesCard so it gets the same Top 10 / Top 20 / Me / All / Select tabs as the // leaderboards — here the "Me" tab is the profiled player (their first name labels it). ---- const ordered = [...A.USERS].sort((a, b) => a.rank - b.rank); const indEntities = ordered.filter((u) => A.USER_RANK_SERIES[u.id]).map((u) => ({ id: u.id, rank: u.rank, name: userName(u) })); const indBuild = (e, { highlight }) => { const u = A.USERS.find((x) => x.id === e.id) || e; return { id: u.id, label: userName(u), color: highlight ? "var(--brand-navy)" : companyColor(u.company), ranks: A.USER_RANK_SERIES[u.id], highlight, node: , }; }; // ---- company chart: every company, this player's company highlighted ---- const coRanked = [...A.COMPANY_RANK].sort((a, b) => b.avgTop3 - a.avgTop3).map((c, i) => ({ ...c, _rank: i + 1 })); const coEntities = coRanked.filter((c) => A.COMPANY_RANK_SERIES[c.id]).map((c) => ({ id: c.id, rank: c._rank, name: c.name })); const coBuild = (e, { highlight }) => { const c = A.COMPANY_RANK.find((x) => x.id === e.id) || e; return { id: c.id, label: c.shortName || (c.name || "").split(" ")[0], color: companyColor(c.id), ranks: A.COMPANY_RANK_SERIES[c.id], highlight, node: , }; }; const coLabel = (coName(user && user.company) || "").split(" ")[0] || "Company"; // Headline stat box (mirrors the Dashboard's StatBox). const StatBox = ({ label, value, sub, icon, color, movement }) => (
{label}
{movement != null && }
{value} {sub && {sub}}
); const Back = () => ( ); if (loading) { return (
Loading player…
); } if (error || !user) { return (
{error || "Player not found."}
); } return (
{/* hero — player identity + headline */}
Player profile{isMe ? " · you" : ""}

{userName(user)}{user.isAi && }

{store.openCompany && !user.isAi ? store.openCompany({ id: user.company })} title={"View " + coName(user.company)}>{coName(user.company)} : coName(user.company)}
{user.points} points · #{user.rank} of {A.USERS.length}
{/* headline stats — on mobile .dash-stats puts Total points full-width with the two ranking tiles sharing the row below (same reflow as the Dashboard KPIs) */}
{/* stats — one card, two proportional bars (Accuracy + Safety), mirroring the Dashboard's "My stats" card and reusing the shared StatBar. */}
{isMe ? "My stats" : capName(user.first) + "'s stats"} {settled ? settled + " settled prediction" + (settled === 1 ? "" : "s") : "No settled predictions yet"}
{settled === 0 ? {isMe ? "Once your matches finish, you'll see how your predictions break down here." : "Once " + capName(user.first) + "'s matches finish, you'll see how their predictions break down here."} :
{/* 1 — accuracy rate: settled picks split exact / good (right outcome) / wrong */}
Accuracy rate How {isMe ? "your" : "their"} 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 rate How safe {isMe ? "your" : "their"} bets were — by the odds of the outcome backed
{safetyTotal === 0 ? No priced bets settled yet. : }
{/* 3 + 4 — where the points came from, as two donuts: by prediction type (exact vs good — wrong scores 0 so it drops out) and by safety tier. Both chart the EARNED points (`pts`) the bars above carry, so donuts and bars stay in lock-step — exactly like the company profile's "stats" card. */}
Points by prediction type How {isMe ? "your" : "their"} points split between exact scores and right outcomes
({ label: r.label, value: r.pts, color: r.color }))} centerSub="total pts" emptyLabel="No points yet" />
Points by safety rate How {isMe ? "your" : "their"} points split across high, medium and low-safety bets
({ label: r.label, value: r.pts, color: r.color }))} centerSub="total pts" emptyLabel="No priced bets settled yet." />
}
{/* predictions — reuses the Dashboard "Recent points" table layout (match · prediction · score · points · kick-off · phase), recent-first, settled picks only, showing 10 by default with a Show-more toggle. */}
Predictions {rows.length > 0 && {rows.length} settled}
{rows.length === 0 ?
{isMe ? "No points yet — they'll appear here once your matches finish." : "No settled predictions yet — they appear here once " + capName(user.first) + "'s matches finish."}
: <>
{visibleRows.map((r) => ( ))}
Match Prediction Score Points Kick-off Phase
{T(r.match.home).code} v {T(r.match.away).code}
{r.pred.home}–{r.pred.away} {r.match.homeScore}–{r.match.awayScore} +{r.pts} {fmtMatchDate(r.match, tz)} {r.match.stage}{r.match.group ? " · " + r.match.group : ""}
{rows.length > 10 && (
)} }
{/* individual ranking over time — this player highlighted */} {/* company ranking over time — this player's company highlighted */}
); } /* AcquiCup — public company profile page. * * The company analogue of UserPage, reached by clicking a company on the leaderboard. * It mirrors that page's layout — hero, headline stats, accuracy + strategy breakdowns, * a roster (the company's equivalent of "their predictions"), and BOTH rank charts — but * aggregated across the whole squad: * 1. The company's headline stats, members and BOTH rank time-series already ship in * every window.ACQ (COMPANY_RANK + the *_RANK_SERIES), so the page renders instantly * from the bootstrap. Only the squad-wide accuracy / strategy split is fetched * (GET /api/companies/:id), because per-member settled counts aren't in the payload. * 2. Nothing here is editable; member rows link through to each player's own profile. */ function CompanyPage({ store, go, companyId }) { const A = window.ACQ; const narrow = useNarrow(820); const [data, setData] = useState(null); // { company, accuracy, risk } from the API const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { let cancelled = false; setLoading(true); setError(null); setData(null); if (!companyId) { setLoading(false); setError("No company selected."); return; } API.getCompany(companyId) .then((d) => { if (!cancelled) { setData(d); setLoading(false); } }) .catch((e) => { if (!cancelled) { setError((e && e.error) || "Couldn't load this company."); setLoading(false); } }); return () => { cancelled = true; }; }, [companyId]); // The standings row (rank/movement/members/series live here for every company). Prefer // the freshly-fetched company, fall back to the bootstrap's COMPANY_RANK entry. const standing = A.COMPANY_RANK.find((c) => c.id === companyId); const company = (data && data.company) || standing; const mine = !!(company && store.me && company.id === store.me.company); const meId = store.me && store.me.id; const members = (company && company.members) ? [...company.members].sort((a, b) => a.rank - b.rank) : []; // ---- squad "My stats": the SAME two proportional bars as the Dashboard / player profile, // aggregated server-side over all members' SETTLED picks and rendered with the shared // StatBar. (1) Accuracy rate — exact / good / wrong, each with the points it earned. ---- const accuracy = (data && data.accuracy) || { settled: 0, exact: 0, good: 0, wrong: 0, exactPts: 0, goodPts: 0 }; const settled = accuracy.settled; const statRows = [ { label: "Exact score", short: "Exact", value: accuracy.exact, pts: accuracy.exactPts, color: "var(--brand-navy)" }, { label: "Good prediction", short: "Good", value: accuracy.good, pts: accuracy.goodPts, color: "var(--brand-blue)" }, { label: "Wrong prediction", short: "Wrong", value: accuracy.wrong, pts: 0, color: "var(--brand-yellow)" }, ]; // (2) Safety rate — the same settled picks split by how safe each bet was, read off the // odds of the outcome backed (high safety = favourite ≤20 pts, medium 21–45, low >45). ---- const risk = (data && data.risk) || { low: { n: 0, pts: 0 }, med: { n: 0, pts: 0 }, high: { n: 0, pts: 0 } }; const safetyTotal = risk.low.n + risk.med.n + risk.high.n; // Safety = inverse of risk: a LOW-risk pick (favourite) is HIGH safety, a long shot is LOW. 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)" }, ]; // ---- company chart: every company, this one highlighted. Shared RankSeriesCard, so the // same Top 10 / Top 20 / All / Select tabs as the leaderboards — the single-line tab is this // company (its name labels it). ---- const coRanked = [...A.COMPANY_RANK].sort((a, b) => b.avgTop3 - a.avgTop3).map((c, i) => ({ ...c, _rank: i + 1 })); const coEntities = coRanked.filter((c) => A.COMPANY_RANK_SERIES[c.id]).map((c) => ({ id: c.id, rank: c._rank, name: c.name })); const coBuild = (e, { highlight }) => { const c = A.COMPANY_RANK.find((x) => x.id === e.id) || e; return { id: c.id, label: c.shortName || (c.name || "").split(" ")[0], color: companyColor(c.id), ranks: A.COMPANY_RANK_SERIES[c.id], highlight, node: , }; }; const coLabel = (company && company.name ? company.name : companyId || "").split(" ")[0] || "Company"; // ---- member chart: just this squad, re-ranked among themselves each matchday (1..N) so it // stays compact — the same technique as the Standings "your company" board. The "Me" tab is // the viewer's own line, shown only when they belong to this company. ---- const D = (A.RANK_DATES || []).length; const memLocal = {}; members.forEach((m) => (memLocal[m.id] = [])); for (let i = 0; i < D; i++) { const order = [...members].sort((a, b) => { const ra = (A.USER_RANK_SERIES[a.id] || [])[i]; const rb = (A.USER_RANK_SERIES[b.id] || [])[i]; return (ra == null ? Infinity : ra) - (rb == null ? Infinity : rb); }); order.forEach((m, j) => memLocal[m.id].push(j + 1)); } const memEntities = members.map((u, i) => ({ id: u.id, rank: i + 1, name: userName(u) })); const memBuild = (e, { highlight }) => { const u = A.USERS.find((x) => x.id === e.id) || members.find((m) => m.id === e.id) || e; return { id: u.id, label: userName(u), color: highlight ? "var(--brand-navy)" : companyColor(company && company.id), ranks: memLocal[u.id], highlight, node: , }; }; const memMeId = (meId && members.some((m) => m.id === meId)) ? meId : null; // Headline stat box (mirrors UserPage / the Dashboard's StatBox). const StatBox = ({ label, value, sub, icon, color, movement }) => (
{label}
{movement != null && }
{value} {sub && {sub}}
); const Back = () => ( ); if (loading && !standing) { return (
Loading company…
); } if ((error && !company) || !company) { return (
{error || "Company not found."}
); } return (
{/* hero — company identity + headline */}
Company profile{mine ? " · your company" : ""}

{company.name}{company.isHost && Host}{company.isAi && }

{company.count} player{company.count === 1 ? "" : "s"}{company.bestUser ? " · top scorer " + capName(company.bestUser.first) + " " + capName(company.bestUser.last) : ""} {company.domain && ( {company.domain} )}
{company.avgTop3} avg top 3 · #{company.rank} of {A.COMPANY_RANK.length}
{/* headline stats */}
{/* my stats — one card, two proportional bars (Accuracy rate + Safety rate) over the squad's settled picks, reusing the shared StatBar exactly like the Dashboard's "My stats" card and the player profile. */}
{mine ? "My stats" : company.name + "'s stats"} {loading ? "Loading…" : settled ? settled + " settled prediction" + (settled === 1 ? "" : "s") : "No settled predictions yet"}
{settled === 0 ? {loading ? "Crunching the squad's results…" : "Once " + company.name + "'s matches finish, you'll see how their predictions break down here."} :
{/* 1 — accuracy rate: settled picks split exact / good (right outcome) / wrong */}
Accuracy rate How the squad's 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 rate How safe the squad's bets were — by the odds of the outcome backed
{safetyTotal === 0 ? No priced bets settled yet. : }
{/* 3 + 4 — where the squad's points came from, as two donuts: by prediction type (exact vs good — wrong scores 0 so it drops out) and by safety tier. Both chart the EARNED points (`pts`) the bars above carry, so donuts and bars stay in lock-step — exactly like the Dashboard's "My stats" card. */}
Points by prediction type How the squad's points split between exact scores and right outcomes
({ label: r.label, value: r.pts, color: r.color }))} centerSub="total pts" emptyLabel="No points yet" />
Points by safety rate How the squad's points split across high, medium and low-safety bets
({ label: r.label, value: r.pts, color: r.color }))} centerSub="total pts" emptyLabel="No priced bets settled yet." />
}
{/* roster — the company's members, ranked, each linking to their own profile */}
Roster {members.length > 0 && {members.length} player{members.length === 1 ? "" : "s"}}
{members.length === 0 ?
No players on this company yet.
:
{!narrow && } {!narrow && } {!narrow && } {members.map((m) => { const you = m.id === meId; return ( store.openUser && store.openUser(m)}> {!narrow && } {!narrow && } {!narrow && } ); })}
Rank Player PointsExactCorrectAccuracy SafetyBest
{m.rank} {userName(m)}{you ? " · you" : ""} {m.isAi && } {m.points}{m.exacts}{m.correct} +{m.best}
}
{/* company ranking over time — this company highlighted */} {/* member ranking over time — this company's squad, re-ranked among themselves */}
); } Object.assign(window, { UserPage, CompanyPage });