/* =============================================================================
* PUBLIC TOURNAMENT RESULTS (/results) — signed-out, no account required.
* =============================================================================
* Now that the contest is closed, a newcomer who lands on the waitlist has no way to see
* how the tournament actually went: the group tables and bracket live behind the auth gate
* and the landing page's demos are hand-authored. This page fills that gap — it is the
* second half of the waitlist's thank-you CTAs ("See the results" / "World Cup 101").
*
* It renders the REAL tournament with the app's OWN screens: `computeGroupTables` +
* `GroupTable` + `KnockoutBracket` (screens-tournament.jsx) derive everything purely from
* `window.ACQ.MATCHES` + `TEAMS`, so we fetch the public results feed
* (GET /api/public/results → src/publicResults.js: teams, venues, fixtures — no players,
* picks or standings) and assign it to `window.ACQ`, exactly as the TV kiosk does. Nothing
* else is duplicated: the tables and the bracket are the same components signed-in players
* see on /standings.
*
* `window.ACQ` is restored on unmount so a partial payload can never outlive the page (the
* signed-in bootstrap would overwrite it anyway, but a signed-out visitor bouncing between
* this page and the landing shouldn't leave one behind).
*
* The shell is the shared `PublicShell` (screens-landing.jsx): one sticky topnav, one menu
* and one footer across all three pre-login surfaces, so they are indistinguishable in style
* and a visitor gets the same navigation wherever they land.
* ========================================================================= */
function Results({ onBack, onSignIn, onJoin, onResults, onWorldCup101, signupsOpen = true, season }) {
const [payload, setPayload] = React.useState(null);
const [err, setErr] = React.useState(null);
// Bumped by the error card's "Try again" — re-runs the fetch effect below, so a visitor who
// hit a cold start doesn't have to wait out the heartbeat.
const [attempt, setAttempt] = React.useState(0);
// Bumped on every (re)load so the tournament sections re-render off the new window.ACQ —
// the components read the global during render, not a prop.
const [version, setVersion] = React.useState(0);
const seasonLabel = (season && season.season) || (payload && payload.tournamentName) || "World Cup 2026";
const champion = season && season.champion;
const joinLabel = signupsOpen ? "Join the contest" : "Get notified";
const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); };
// Fetch, then keep two cadences (the kiosk's): 60s while a match is live or near kickoff
// (`active` — the same signal the kiosk and the in-app auto-refresh use), and a slow 15-min
// heartbeat otherwise. The heartbeat is what lets a page opened BEFORE kickoff notice the
// live window opening; polling only while already active would leave it on a stale scoreline
// for the whole match. A settled tournament costs four server-cached requests an hour.
React.useEffect(() => {
let live = true;
const prevAcq = window.ACQ;
let timer = null;
// Whether the last good payload was inside a live window. Tracked in the closure rather
// than read off `payload`, which this []-dep effect would only ever see as null.
let active = false;
// Always reschedule, including after a FAILURE — otherwise one cold start or moment
// offline ends the refresh for the life of the page and the scores silently freeze
// mid-match. Only an unmount (`live`) stops the loop.
const schedule = () => { if (live) timer = setTimeout(load, active ? 60000 : 900000); };
const load = () => {
API.publicResults().then((p) => {
if (!live) return;
window.ACQ = p;
setPayload(p);
setErr(null);
setVersion((v) => v + 1);
active = !!(p && p.active);
schedule();
}).catch((e) => {
if (!live) return;
setErr((e && e.error) || "We couldn't load the results just now. Please try again.");
schedule();
});
};
load();
return () => {
live = false;
if (timer) clearTimeout(timer);
window.ACQ = prevAcq;
};
// `attempt` only ever changes while the error card is up, i.e. while nothing has been
// assigned to window.ACQ yet, so the re-run captures the same untouched prevAcq.
}, [attempt]);
// SEO: swap in this page's own title + meta description while it is on screen, restored
// on unmount — the same pattern the WC101 primer uses. Crawlers that don't run JS get the
// same head server-side (src/seo.js buildResultsHtml, served for /results by the SPA
// fallback); keep these two strings in sync with RESULTS_TITLE/RESULTS_DESCRIPTION there.
React.useEffect(() => {
const meta = document.querySelector('meta[name="description"]');
const prev = { title: document.title, desc: meta && meta.getAttribute("content") };
document.title = "World Cup 2026 Results: Final Score, Group Tables and Full Bracket | AcquiCup";
if (meta) meta.setAttribute("content", "How the 2026 World Cup finished: Spain beat Argentina 1-0 after extra time on 19 July 2026. Every group table and the complete knockout bracket from the round of 32 to the final, free and without an account.");
return () => {
document.title = prev.title;
if (meta && prev.desc != null) meta.setAttribute("content", prev.desc);
};
}, []);
const A = payload;
const groupTables = React.useMemo(() => {
if (!A) return [];
return computeGroupTables(A.MATCHES.filter((m) => m.stage === "Group Stage")).filter((t) => t.group !== "—");
}, [version]);
const hasKO = !!(A && A.MATCHES.some((m) => m.stage && m.stage !== "Group Stage"));
const body = (
{/* ---------- hero (hero-card pattern, same as the WC101 primer) ---------- */}
{seasonLabel} · Final results
{champion ? champion + " won the " + seasonLabel + "." : "How the " + seasonLabel + " finished."}
Every group table and the full knockout bracket, exactly as the players saw them, on the same screens the contest ran on. No account needed.
{A && (
)}
{/* Only when there is nothing to show: a failed POLL leaves the last good tables up
(they are still real results) rather than stacking this card on top of them. */}
{err && !A && (
Results unavailable{err}
)}
{/* ---------- group stage — the app's own GroupTable, off the public feed ---------- */}
{A && (
{groupTables.length === 0 ? (
No group-stage fixtures are loaded yet.
) : (
{groupTables.map((t) => (
= 4} />
))}
)}
)}
{/* ---------- knockout bracket — the in-app component, standalone (its own head +
champion banner). No openMatch: match detail pages are for signed-in players. ---------- */}
{A && hasKO && (
{signupsOpen ? "Think you can call the next one?" : "Ready for the next one?"}
{signupsOpen
? "Predict every scoreline, double your two best shots and take on the rest of the office."
: "Predictions for the next AcquiCup open before the first kick-off. Be first in line."}
);
// The shell is the shared signed-out one (screens-landing.jsx): same topnav, same menu,
// same footer as the homepage and the World Cup 101 primer.
return (
{body}
);
}
Object.assign(window, { Results });