{auth.signedIn ? (

) : ( Have a team? )}

); } function Welcome({ state, setState, onNext, onHistory }) { // The carousel cycles every one of the 96 figures (48 nations × M/F). Each // "pass" is a Fisher-Yates shuffle of the full 96, so no figure repeats // until every other one has shown. When we near the end of a pass we append // a fresh shuffle, so the reel loops forever without a hard wrap. const ALL_PAIRS = useMemo(() => { const out = []; Object.keys(FIG_SLUG).forEach((c) => { out.push({ code: c, gender: "male" }); out.push({ code: c, gender: "female" }); }); return out; }, []); const PASS_LEN = ALL_PAIRS.length; // 96 const [deck, setDeck] = useState(() => shuffleArr(ALL_PAIRS)); const [activeIndex, setActiveIndex] = useState(0); const [playing, setPlaying] = useState(true); const [pickerOpen, setPickerOpen] = useState(false); const [query, setQuery] = useState(""); const [pickGender, setPickGender] = useState(state.gender || "male"); // Skin tone: per-gender map { male: 0|1..4, female: 0|1..4 }. // 0 = follow the nation's base default (loads the original, pre-selected // figure — its natural swatch is highlighted in the menu); 1..4 = explicit. // Each gender is INDEPENDENT — changing the Man tone does not affect the // Woman tone and vice versa. Both default to 0 (base default). const [pickTones, setPickTones] = useState(() => { if (state.tones && typeof state.tones === "object") return state.tones; // Migrate legacy single-value state.tone → male only; female stays at default. return { male: state.tone || 0, female: 0 }; }); // Derived: the active tone for the currently-selected gender. const pickTone = pickTones[pickGender] || 0; const [isMobile, setIsMobile] = useState(typeof window !== "undefined" && window.innerWidth < 640); // Autoplay always runs on entry; we only freeze when the player actively // picks a nation from the picker in this session. A persisted nation from // a prior visit doesn't stop the reel — it just colours the action stack. const [pickedInSession, setPickedInSession] = useState(false); const selectedNation = state.nation; // existing app state — country CODE // resize tracking useEffect(() => { const onResize = () => setIsMobile(window.innerWidth < 640); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); // Kickoff ticker (1Hz). Cheap — only the small top-right node re-renders // anything visible; the carousel & ghost word read other state. const [nowMs, setNowMs] = useState(() => Date.now()); useEffect(() => { const id = setInterval(() => setNowMs(Date.now()), 1000); return () => clearInterval(id); }, []); const koMs = Math.max(0, KICKOFF_MS - nowMs); const koLive = koMs === 0; const koDays = Math.floor(koMs / 86400000); const koHrs = Math.floor((koMs % 86400000) / 3600000); const koMins = Math.floor((koMs % 3600000) / 60000); const koSecs = Math.floor((koMs % 60000) / 1000); // ——— Geo-open ——— // First-visit kindness: ask /api/geo for the visitor's country and, if it's // one of the 48 playing this summer, jump the reel to start on that nation. // Cached in localStorage so a returning fan from Norway lands on Norway with // no async flash. Strictly cosmetic — autoplay continues from there, and a // user who actively picks (pickedInSession) takes over. const geoJumpedRef = useRef(false); useEffect(() => { if (geoJumpedRef.current || pickedInSession) return; const jumpTo = (code) => { if (!code) return false; const idx = deck.findIndex((it) => it.code === code); if (idx < 0) return false; geoJumpedRef.current = true; setActiveIndex(idx); return true; }; // 1) Synchronous warm-start from a previously resolved country. let cached = null; try { cached = window.localStorage.getItem("starxi.geoCode"); } catch (e) {} if (cached && jumpTo(cached)) return; // 2) Fresh fetch — ~50ms on Vercel, soft-fails everywhere else. let alive = true; fetch("/api/geo", { credentials: "omit" }) .then((r) => (r.ok ? r.json() : null)) .then((d) => { if (!alive || !d || !d.country) return; let code = ISO_TO_CODE[d.country]; // GB carries two qualified sides — England by default, Scotland when // the region header confirms it. if (d.country === "GB" && d.region && /SCT|SC/i.test(d.region)) code = "SCO"; if (!code) return; try { window.localStorage.setItem("starxi.geoCode", code); } catch (e) {} jumpTo(code); }) .catch(() => {}); return () => { alive = false; }; // Intentionally run once on mount — deck is captured fresh on first render // and contains every nation, so findIndex always resolves. // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Pre-decode the next few upcoming figures so each frame swap is paint-only // — `img.decode()` resolves once the bitmap is GPU-ready, killing the // "jump on first show" that happens when an first hits the carousel // still parsing the file. useEffect(() => { for (let k = 0; k < 6; k++) { const it = deck[activeIndex + k]; if (!it) continue; const src = figureSrc(it.code, it.gender, it.code === selectedNation ? resolveTone(it.code, it.gender, pickTone) : 0); if (!src) continue; const im = new Image(); im.decoding = "async"; im.src = src; if (im.decode) im.decode().catch(() => {}); } }, [activeIndex, deck, pickTones, selectedNation]); // When we're within half a pass of the deck's end, append a fresh shuffle // so the reel never has to wrap (and the next 96 contain every figure once). useEffect(() => { if (deck.length - activeIndex <= Math.floor(PASS_LEN / 2)) { setDeck((prev) => prev.concat(shuffleArr(ALL_PAIRS))); } }, [activeIndex, deck.length, ALL_PAIRS, PASS_LEN]); // Autoplay always runs while the user hasn't actively picked a nation in // this session — so revisits with persisted nation still feel alive. useEffect(() => { if (!playing || pickedInSession) return; const id = setInterval(() => setActiveIndex((p) => p + 1), AUTOPLAY_MS); return () => clearInterval(id); }, [playing, pickedInSession]); // When the player actively picks a nation, freeze the reel on it. If the // picked nation+gender already sits in the upcoming deck, jump to it; // otherwise append the entry and jump to the new last index. useEffect(() => { if (!pickedInSession || !selectedNation) return; const idx = deck.findIndex((d) => d.code === selectedNation && d.gender === pickGender); if (idx >= 0) { setActiveIndex(idx); } else { const appendAt = deck.length; setDeck((prev) => prev.concat([{ code: selectedNation, gender: pickGender }])); setActiveIndex(appendAt); } }, [pickedInSession, selectedNation, pickGender, deck]); // Esc closes the picker and clears the selection useEffect(() => { const onKey = (e) => { if (e.key === "Escape") { setPickerOpen(false); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); const openPicker = useCallback(() => { setQuery(""); setPickerOpen(true); }, []); const closePicker = useCallback(() => setPickerOpen(false), []); // No modular wrap — the deck is monotonically growing (a chain of shuffles). // The four named roles map directly to absolute deck indices. const center = activeIndex; const left = activeIndex - 1; const right = activeIndex + 1; const back = activeIndex + 2; // ——— GPU-only transitions ——— // We only animate properties the compositor can handle without layout/paint: // transform (translate + scale), opacity, filter. The wrapper sits at a fixed // size; each role's offset & scale is encoded entirely in `transform`. That's // the single biggest perf win — left/bottom/height animations are dropped. const TR = `transform ${DUR}ms ${EASE}, opacity ${DUR}ms ${EASE}`; // Role descriptors. Horizontal offsets are in vw so the side figures keep a // consistent "% of screen width" from centre on every aspect ratio. Vertical // tweaks are in vh. With transform-origin at bottom-centre, scaling alone // keeps the feet on the same baseline as the centre figure — no dy needed // for the sides. Blur is dropped: it's the single most expensive composited // filter; the smaller scale + opacity already reads as depth. const slots = isMobile ? { center: { dxvw: 0, dyvh: 0, s: 1.00, op: 1, z: 20 }, left: { dxvw: -28, dyvh: 0, s: 0.30, op: 0.55, z: 10 }, right: { dxvw: 28, dyvh: 0, s: 0.30, op: 0.55, z: 10 }, back: { dxvw: 0, dyvh: -6, s: 0.24, op: 0.32, z: 5 }, off: { dxvw: 0, dyvh: -10, s: 0.18, op: 0, z: 1 }, } : { center: { dxvw: 0, dyvh: 0, s: 1.00, op: 1, z: 20 }, left: { dxvw: -28, dyvh: 0, s: 0.40, op: 0.55, z: 10 }, right: { dxvw: 28, dyvh: 0, s: 0.40, op: 0.55, z: 10 }, back: { dxvw: 0, dyvh: -8, s: 0.34, op: 0.32, z: 5 }, off: { dxvw: 0, dyvh: -12, s: 0.25, op: 0, z: 1 }, }; const slotFor = (i) => i === center ? slots.center : i === left ? slots.left : i === right ? slots.right : i === back ? slots.back : slots.off; const baseStyle = { position: "absolute", left: "50%", bottom: isMobile ? "12%" : "6%", height: isMobile ? "82%" : "94%", aspectRatio: "0.6667 / 1", transformOrigin: "50% 100%", transition: TR, backfaceVisibility: "hidden", WebkitBackfaceVisibility: "hidden", }; const roleStyle = (i) => { const s = slotFor(i); // Only mark the visible-or-incoming items as will-change. Marking all 20 // would keep every figure in its own compositor layer permanently, which // is more layer-management overhead than it's worth. const active = s.op > 0; return { ...baseStyle, zIndex: s.z, opacity: s.op, transform: `translate3d(calc(-50% + ${s.dxvw}vw), ${s.dyvh}vh, 0) scale(${s.s})`, willChange: active ? "transform, opacity" : "auto", }; }; const active = deck[activeIndex] || deck[0]; const activeCode = active.code; const activeNation = window.NATIONS.find((n) => n.code === activeCode) || window.NATIONS[0]; const bg = NATION_BG[activeCode] || "#15161B"; const ghost = NATION_NICK[activeCode] || activeNation.name.toUpperCase(); const factParts = [ activeNation.group ? `GROUP ${activeNation.group}` : null, activeNation.rank ? `FIFA #${activeNation.rank}` : null, activeNation.note ? activeNation.note.toUpperCase() : null, ].filter(Boolean); // fit the ghost word to viewport width const [ghostSize, setGhostSize] = useState(180); React.useLayoutEffect(() => { const ctx = document.createElement("canvas").getContext("2d"); const fit = () => { ctx.font = "100px \"Anton\", sans-serif"; const w = ctx.measureText(ghost).width || 1; const target = window.innerWidth * 0.92; let size = 100 * target / w; size = Math.min(size, window.innerHeight * 0.46, 300); size = Math.max(size, 40); setGhostSize(size); }; fit(); const raf = requestAnimationFrame(fit); if (document.fonts && document.fonts.ready) document.fonts.ready.then(fit); window.addEventListener("resize", fit); return () => { window.removeEventListener("resize", fit); cancelAnimationFrame(raf); }; }, [ghost]); // picker — filter all 48 const filtered = useMemo(() => { const list = [...window.NATIONS].sort((a, b) => a.rank - b.rank); const q = query.trim().toLowerCase(); if (!q) return list; return list.filter((n) => n.name.toLowerCase().includes(q) || n.code.toLowerCase().includes(q)); }, [query]); const setNation = (code) => { setState((s) => ({ ...s, nation: code, gender: pickGender })); setPickedInSession(true); setPickerOpen(false); }; const setGender = (g) => { setPickGender(g); setState((s) => ({ ...s, gender: g })); }; const setTone = (t) => { setPickTones((prev) => { const next = { ...prev, [pickGender]: t }; setState((s) => ({ ...s, tones: next })); return next; }); }; return (

{/* grain */}

{/* ghost nickname — vertically centred on the viewport, behind the figure */}

{ghost}

{/* brand — top center (shared lockup; identical on every screen) */} {/* top-right: log in */} {/* carousel — every deck wrapper stays mounted so CSS transitions are never torn by mid-flight React mount/unmount. Only items within the visible window get an actual ; everything else renders an empty wrapper at "off" role (opacity 0, scale 0.25 — essentially free in the compositor). The wrapper keys are the absolute deck index, so each item keeps the same DOM node across renders. */}

{deck.map((it, i) => { const inWindow = i >= activeIndex - 2 && i <= activeIndex + 4; const src = inWindow ? figureSrc(it.code, it.gender, it.code === selectedNation ? resolveTone(it.code, it.gender, pickTone) : 0) : null; const isCenter = i === center; const slug = FIG_SLUG[it.code] + "_" + (it.gender === "female" ? "f" : "m"); const fix = src ? figureTransform(slug) : null; return (

{src && (

)}

); })}

{/* bottom-left: nation name + group/fact */}

{(activeNation.name || "").toUpperCase()}

{factParts.map((p, i) => ( {i > 0 && } {p} ))}

{/* bottom-left actions */}

{pickedInSession && selectedNation && (

{[["male","MAN"], ["female","WOMAN"]].map(([key, lbl]) => { const on = pickGender === key; return ( ); })}

{/* skin-tone swatches — only for nations with variants on disk. The swatch nearest this figure's natural skin is pre-selected and loads the original render; the others load generated variants. */} {TONE_NATIONS.has(selectedNation) && (() => { const effTone = resolveTone(selectedNation, pickGender, pickTone); return (

Skin {SKIN_TONES.map((t) => { const on = effTone === t.id; return (

); })()}

{/* left-pointing chevrons, outside the button to the right */}

)} {/* Hint: when no nation is picked yet, draw three down-chevrons above the CTA and run a soft halo pulse on the button itself. Disappears the moment the user picks a nation — the rest of the journey is self-explanatory after that. */} {!(pickedInSession && selectedNation) && ( )}

{/* picker overlay */} {pickerOpen && (

e.stopPropagation()} style={{ position: "relative", width: "min(1500px, 96%)", maxHeight: "72vh", display: "flex", flexDirection: "column", borderRadius: 22, overflow: "hidden", animation: "pickerIn 240ms cubic-bezier(0.2,0.8,0.2,1)", border: "1px solid rgba(255,255,255,0.16)", background: "rgba(17,18,23,0.97)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", boxShadow: "0 -20px 60px rgba(0,0,0,0.5)" }}>

setQuery(e.target.value)} placeholder="Search 48 nations…" style={{ flex: 1, marginRight: 10, padding: "8px 14px", borderRadius: 999, border: "1.5px solid rgba(255,255,255,0.18)", background: "rgba(255,255,255,0.06)", color: "#fff", fontSize: 13, outline: "none" }} />

{filtered.map((n) => { const isSel = n.code === selectedNation; return ( ); })}

{filtered.length === 0 && (

No nations match “{query}”.

)}

); } // Expose the nation maps so the step shell can wash the field + show the ghost // nickname on every screen, matching the landing. window.NATION_BG = NATION_BG; window.NATION_NICK = NATION_NICK; window.FIG_SLUG = FIG_SLUG; window.figureSrc = figureSrc; window.figureTransform = figureTransform; window.Welcome = Welcome;