// screens.jsx — Intro, Draft (two wheels + shortlist), Squad review, Sim, Result.
// Globals: React, Wheel, TEAMS, TEAM_BY_ID, YEARS, SLOTS, GROUP_SLOTS,
// pickSlotKey, tierOf, teamRatings, percentile, simSeason, perfectOdds, fetchShortlist.
const { useState, useRef, useEffect } = React;
const TIER_HEX = { elite: 'var(--accent)', great: '#38bdf8', good: '#7c93ab', avg: '#5b6b7d', bad: '#46586b' };
const tcol = (ovr) => TIER_HEX[tierOf(ovr).key];
// ── atoms ─────────────────────────────────────────────────────
function TeamBadge({ team, size = 42 }) {
if (!team) return null;
return (
{team.abbr.toUpperCase()}
);
}
function Mono({ children, style }) {
return {children}
;
}
function Btn({ children, onClick, primary, ghost, disabled, style }) {
return (
!disabled && (e.currentTarget.style.transform = 'scale(0.975)')}
onMouseUp={e => (e.currentTarget.style.transform = 'scale(1)')}
onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
>{children}
);
}
function Bar({ value, color }) {
return ;
}
// headshot with a clean jersey/initials fallback on the team color
function Avatar({ player, size = 46 }) {
const [err, setErr] = useState(false);
const team = TEAM_BY_ID[player.teamId];
const bg = team ? team.color : '#1f2b38';
const common = { width: size, height: size, borderRadius: '50%', flexShrink: 0, objectFit: 'cover', border: '1.5px solid rgba(255,255,255,0.12)' };
if (player.headshot && !err) {
return
{player.jersey ?? player.name[0]}
);
}
// ── 1. INTRO ──────────────────────────────────────────────────
function IntroScreen({ onStart, dataReady, dataError }) {
return (
Spin · Draft · Simulate
17– 0
Build the Perfect Season
Spin for a franchise. Spin for a season, 1999 to now. Draft one star from
that exact team-year — then do it ten more times. Lock your eleven and find
out if your all-era roster can run the table.
{[['11', 'picks'], ['32×27', 'team-years'], ['17–0', 'goal']].map(([n, l]) => (
3 ? 26 : 38, lineHeight: 1, color: 'var(--accent)', whiteSpace: 'nowrap' }}>{n}
{l}
))}
{dataError && (
{dataError}
)}
{dataReady ? 'Start Drafting →' : (dataError ? 'Fix data & refresh' : 'Loading players…')}
);
}
// ── 2. DRAFT ──────────────────────────────────────────────────
function DraftScreen({ onDone, accent, dataError }) {
const [squad, setSquad] = useState({});
const [phase, setPhase] = useState('idle'); // idle | spinning | loading | choosing
const [team, setTeam] = useState(null);
const [year, setYear] = useState(null);
const [shortlist, setShortlist] = useState(null);
const [fetchError, setFetchError] = useState(null);
const [years, setYears] = useState(() => (window.YEARS?.length ? window.YEARS : YEARS));
const [validPicks, setValidPicks] = useState(() =>
(typeof getValidDraftPicks === 'function' ? getValidDraftPicks() : [])
);
const [skipsLeft, setSkipsLeft] = useState(1);
const teamRef = useRef(null), yearRef = useRef(null);
const pending = useRef(null), restCount = useRef(0);
const fetchGen = useRef(0);
const autoSpinAfterPick = useRef(false);
useEffect(() => {
if (typeof loadSpinnerIndex !== 'function') return;
loadSpinnerIndex().then((idx) => {
if (idx?.years?.length) setYears(idx.years.map(Number));
if (typeof getValidDraftPicks === 'function') setValidPicks(getValidDraftPicks());
}).catch(() => {});
}, []);
useEffect(() => {
if (!autoSpinAfterPick.current || phase !== 'idle' || dataError || !validPicks.length) return;
autoSpinAfterPick.current = false;
const t = setTimeout(() => spin(), 80);
return () => clearTimeout(t);
}, [phase, dataError, validPicks.length]);
const filled = Object.keys(squad).length;
const wheelSize = typeof window !== 'undefined' && window.innerWidth >= 720 ? 200 : 168;
function resetToWheels() {
fetchGen.current += 1;
setTeam(null);
setYear(null);
setShortlist(null);
setFetchError(null);
setPhase('idle');
}
function skipSpin() {
if (skipsLeft <= 0) return;
setSkipsLeft(0);
autoSpinAfterPick.current = true;
resetToWheels();
}
function spin() {
if (phase !== 'idle' || dataError || !validPicks.length) return;
const pick = validPicks[Math.floor(Math.random() * validPicks.length)];
if (!pick?.team) return;
pending.current = { team: pick.team, year: pick.year };
restCount.current = 0;
fetchGen.current += 1;
setTeam(null);
setYear(null);
setShortlist(null);
setFetchError(null);
setPhase('spinning');
teamRef.current?.spinTo(pick.teamIndex, 4);
yearRef.current?.spinTo(pick.yearIndex, 4);
}
function onRest() {
restCount.current += 1;
if (restCount.current < 2) return;
const pick = pending.current;
if (!pick?.team || pick.year == null) return;
const { team: pickedTeam, year: pickedYear } = pick;
const gen = ++fetchGen.current;
setTeam(pickedTeam);
setYear(pickedYear);
setPhase('loading');
setFetchError(null);
setShortlist(null);
fetchShortlist(pickedTeam.id, pickedYear)
.then((res) => {
if (gen !== fetchGen.current) return;
const players = res.players || [];
if (!players.length) {
resetToWheels();
return;
}
setShortlist(players);
setPhase('choosing');
})
.catch(() => {
if (gen !== fetchGen.current) return;
setFetchError('Failed to load players for this team-year.');
setShortlist([]);
setPhase('choosing');
});
}
function pick(p) {
const slotKey = pickSlotKey(squad, p);
if (!slotKey || !team || year == null) return;
const ns = { ...squad, [slotKey]: { ...p, fromTeam: team, fromYear: year } };
setSquad(ns);
if (Object.keys(ns).length >= SLOTS.length) { onDone(ns); return; }
autoSpinAfterPick.current = true;
resetToWheels();
}
const showPickList = (phase === 'loading' || phase === 'choosing') && team != null && year != null;
return (
{/* progress — stays fixed while player list scrolls */}
The Draft
{filled} / {SLOTS.length} locked
{SLOTS.map(s => {
const sel = squad[s.key];
return (
{s.label}
{sel && {sel.ovr} }
);
})}
{!showPickList ? (
// ── wheels + spin ──
{filled === 0 ? 'Draw a team-season' : `${SLOTS.length - filled} ${SLOTS.length - filled === 1 ? 'slot' : 'slots'} to fill`}
Spin both wheels, then steal one of their stars.
t.color}
hub={(idx) => idx == null
? ?
: {TEAMS[idx].abbr.toUpperCase()} } />
(y % 5 === 0 ? '#33475c' : (i % 2 ? '#1c2733' : '#243240'))}
hub={(idx) => {idx == null ? '?' : years[idx]} } />
{phase === 'spinning' ? 'Spinning…' : (filled === 0 ? 'Spin Both →' : 'Spin Again →')}
) : (
// ── team banner (fixed) + scrollable shortlist ──
{team &&
}
{team ? team.name : 'Loading…'}
{year} Season · pick one
{String(year).slice(2)}
{phase === 'loading'
? [0, 1, 2, 3].map(i =>
)
: fetchError
?
{fetchError}
: (shortlist || []).map(p => {
const slotOpen = !!pickSlotKey(squad, p);
return
slotOpen && pick(p)} />;
})}
{skipsLeft > 0 && (
↺ Skip · Spin Again (1 left)
)}
)}
!disabled && (e.currentTarget.style.transform = 'scale(0.985)')}
onMouseUp={e => (e.currentTarget.style.transform = 'scale(1)')}
onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
>
{p.name}
{p.pos}
{p.stat}
Roster Locked
Your All-Era Squad
{[['OVR', rt.ovr, 'var(--accent)'], ['OFF', rt.off, '#38bdf8'], ['DEF', rt.def, '#fb7185']].map(([l, v, c]) => (
))}
Modeled odds of 17–0
{oddsLabel}
vs. a brutal
{SLOTS.map(s => {
const p = squad[s.key]; if (!p) return null;
const t = p.fromTeam;
return (
{s.label}
{p.name}
{t ? `${t.name} ’${String(p.fromYear).slice(2)}` : ''} · {p.pos}
{p.ovr}
);
})}
New Draft
Sim Season →
);
}
// ── 4. SIM ────────────────────────────────────────────────────
function SimScreen({ season, onDone }) {
const [n, setN] = useState(0);
useEffect(() => {
if (n >= season.games.length) { const t = setTimeout(onDone, 720); return () => clearTimeout(t); }
const t = setTimeout(() => setN(n + 1), n === 0 ? 320 : 230);
return () => clearTimeout(t);
}, [n]);
const shown = season.games.slice(0, n);
const w = shown.filter(g => g.win).length, l = shown.length - w;
const live = shown.length ? shown[shown.length - 1] : null;
return (
Simulating · Regular Season
{w}
–
{l}
{shown.length}/17
{shown.slice().reverse().map(g => (
W{g.wk}
{g.abbr}
{g.win ? 'W' : 'L'}
))}
);
}
// ── 5. RESULT ─────────────────────────────────────────────────
function GlobalStatsPanel({ season, globalStats }) {
if (!globalStats || !globalStats.totalSeasons) {
return (
Global stats unavailable — run via serve_app.py to track results across players.
);
}
const rows = globalStats.distribution || [];
const mine = rows.find((row) => row.wins === season.wins);
const topRows = rows.filter((row) => row.pct >= 0.1 || row.wins === season.wins).slice(0, 8);
return (
Global results · {globalStats.totalSeasons.toLocaleString()} seasons
{mine && (
Your {season.wins}–{season.losses} · {mine.pct.toFixed(1)}% of all players
)}
{topRows.map((row) => {
const highlight = row.wins === season.wins;
return (
{row.wins}-{row.losses}
{row.pct.toFixed(1)}%
);
})}
);
}
function ResultScreen({ season, onRestart }) {
const { wins, losses, perfect } = season;
const [globalStats, setGlobalStats] = React.useState(null);
const [shareUrl, setShareUrl] = React.useState(null);
const [shareLoading, setShareLoading] = React.useState(true);
React.useEffect(() => {
let cancelled = false;
(async () => {
const stats =
typeof recordSeasonResult === "function"
? await recordSeasonResult(season)
: typeof fetchGlobalStats === "function"
? await fetchGlobalStats()
: null;
if (!cancelled) setGlobalStats(stats);
})();
return () => {
cancelled = true;
};
}, [season.recordId]);
React.useEffect(() => {
let cancelled = false;
setShareLoading(true);
setShareUrl(null);
(async () => {
const link =
typeof createSeasonShare === "function"
? await createSeasonShare(season)
: null;
if (!cancelled) {
setShareUrl(link?.url || null);
setShareLoading(false);
}
})();
return () => {
cancelled = true;
};
}, [season.recordId]);
return (
{perfect &&
}
{perfect ? 'Perfection Achieved' : 'Final · Regular Season'}
{wins}– {losses}
{perfect ? '🏆 17–0 · Immortal' : (season.message || verdict(wins))}
Game Log
{season.games.map(g => (
{g.win ? 'W' : 'L'}
{g.abbr}
))}
{season.strengthPercentile != null && (
DEBUG · weighted {season.rosterStrength} ({season.strengthPercentile}th pct) · avg OVR {season.averageOvr} · strength range ~550–1080
)}
Run It Back →
(e.currentTarget.style.transform = 'scale(0.98)')}
onMouseUp={(e) => (e.currentTarget.style.transform = 'scale(1)')}
onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
>
{children}
);
}
function WhatsAppIcon({ size = 22 }) {
return (
);
}
function FacebookIcon({ size = 22 }) {
return (
);
}
function ShareScorePanel({ season, shareUrl, shareLoading }) {
const [status, setStatus] = useState(null);
const canNative = typeof navigator !== 'undefined' && !!navigator.share;
const ready = !!shareUrl && !shareLoading;
useEffect(() => {
if (!status) return undefined;
const t = setTimeout(() => setStatus(null), 2800);
return () => clearTimeout(t);
}, [status]);
async function runShare(fn) {
if (!ready) return;
const res = await fn(season, shareUrl);
if (res?.cancelled) return;
if (res?.ok) setStatus(res.method === 'copy' ? 'Copied link!' : 'Shared!');
else setStatus('Could not share — try Copy');
}
async function copyLink() {
if (!shareUrl) return;
try {
await navigator.clipboard.writeText(shareUrl);
setStatus('Link copied!');
} catch {
setStatus('Could not copy link');
}
}
return (
Share your squad
{shareLoading && (
Creating share link…
)}
{!shareLoading && !shareUrl && (
Share link unavailable (storage not configured).
)}
{ready && (
{shareUrl}
)}
runShare(canNative ? shareScoreNative : copyShareText)}
style={{ marginBottom: 8 }}
>
{canNative ? 'Share link →' : 'Copy share text →'}
shareToX(season, shareUrl)} label="Share on X">𝕏
shareToWhatsApp(season, shareUrl)}
label="Share on WhatsApp"
style={{ background: '#25D366', borderColor: '#25D366', color: '#fff' }}
>
shareToFacebook(season, shareUrl)}
label="Share on Facebook"
style={{ background: '#1877F2', borderColor: '#1877F2', color: '#fff' }}
>
runShare(copyShareText)} label="Copy share text">Copy
{ready && (
Copy link only
)}
{status && (
{status}
)}
);
}
// ── SHARE PAGE (/share/:id) ───────────────────────────────────
function SharePageScreen({ shareId, onPlay }) {
const [data, setData] = useState(null);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
let cancelled = false;
setLoading(true);
setError(false);
(async () => {
await (typeof loadSpinnerIndex === 'function' ? loadSpinnerIndex() : Promise.resolve());
const payload =
typeof fetchSeasonShare === 'function'
? await fetchSeasonShare(shareId)
: null;
if (cancelled) return;
if (!payload) {
setError(true);
setData(null);
} else {
setData(payload);
const title = payload.perfect
? '17–0 squad · Can you go 17-0?'
: `${payload.wins}–${payload.losses} squad · Can you go 17-0?`;
document.title = title;
}
setLoading(false);
})();
return () => {
cancelled = true;
document.title = 'Can you go 17-0?';
};
}, [shareId]);
if (loading) {
return (
Loading squad…
);
}
if (error || !data?.squad) {
return (
Share not found
This link may have expired
Shared squads are kept for 90 days. Start a new run and share again.
Play →
);
}
const { wins, losses, perfect, squad } = data;
const headline = perfect
? '🏆 17–0 · Immortal'
: (data.message || verdict(wins));
return (
Shared squad
{wins}– {losses}
{headline}
Roster
{SLOTS.map((s) => {
const p = squad[s.key];
if (!p) return null;
const t = p.fromTeam;
return (
{s.label}
{p.name}
{t ? `${t.name} ’${String(p.fromYear).slice(2)}` : ''} · {p.pos}
{p.ovr}
);
})}
Build your squad →
);
}
function Confetti() {
const cols = ['#ff7a3d', '#38bdf8', '#fbbf24', '#fff'];
return
{Array.from({ length: 36 }, (_, i) => i).map(i => (
))}