// UR2D — Home v2: live standings wall, road ahead, league ladder, footer. // Loaded after ur2d-home2-hero.jsx. // ─── shared section header ─────────────────────────────────────────────────── const UR2SectionHead = ({ kicker, title, accent, right }) => (
◆ {kicker}

{title}

{right || null}
); // ─── STANDINGS WALL — four leagues side by side, live from the sheets ──────── const UR2_STATUS_CHIP = { ready: { label: 'Live', color: '#22c55e' }, loading: { label: 'Sync', color: '#FFD300' }, error: { label: 'Cached', color: '#FF7A1A' }, empty: { label: 'TBA', color: '#6c6c75' } }; // livery path for a driver's team, e.g. assets/UL S25 Liveries/UL_S25_ONE.png const ur2LiveryFor = (leagueShort, label, teamShort) => (leagueShort && label && teamShort) ? `assets/${leagueShort} ${label} Liveries/${leagueShort}_${label}_${teamShort}.png` : null; // one starting-grid slot — the car livery is the hero, position numeral behind it const UR2GridSlot = ({ d, pos, accent, livery, flag, teamColor, offset }) => (
{/* ghost position numeral */} {pos} {/* car */}
{livery ? { e.target.style.display = 'none'; }} style={{ maxHeight: '100%', maxWidth: '100%', width: 'auto', objectFit: 'contain', imageRendering: 'pixelated', filter: 'drop-shadow(0 8px 10px rgba(0,0,0,0.55))' }} /> : }
{/* driver id */}
{d.name} {flag && } {d.team ? {d.team} : null}
); const UR2StandingsCol = ({ league }) => { const L = LEAGUE_BY_ID[league]; const sid = defaultDataSeasonId(league); const data = useStandings(league, sid); const chip = UR2_STATUS_CHIP[data.status] || UR2_STATUS_CHIP.empty; const rows = (data.drivers || []).slice(0, 3); const label = data.season ? data.season.label : null; const maxPts = rows[0] ? Math.max(rows[0].pts, 1) : 1; const teamColor = (short) => { const t = (data.teams || []).find((x) => x.short === short); return (t && t.color) || L.accent; }; const flagOf = (name) => (typeof getRosterCountry === 'function' ? getRosterCountry(name) : null); const gridOffset = [18, 0, 0]; // P1 indented, P2-P3 flush return (
{/* header — league title */}
{L.short} {L.name} {label || '—'} {chip.label}
{rows.length === 0 ? (
{data.status === 'loading' ? 'Syncing standings…' : 'Season pending — the grid forms soon'}
) : ( {/* drivers at the front — top-3 cars in a staggered starting grid */}
Drivers at the front {rows.map((d, i) => ( ))}
{/* standings — top 3, beneath the liveries */}
{rows.map((d, i) => (
{String(d.pos ?? i + 1).padStart(2, '0')} {d.name} {d.team ? {d.team} : null} {d.pts}
))}
)}
); }; const UR2StandingsWall = ({ kicker, title, onFullStandings }) => (
LIVE
Drivers at the front } right={onFullStandings ? : Full standings → } />
{LEAGUES.map((L) => )}
); // ─── ROAD AHEAD — S25 calendar rail ────────────────────────────────────────── const UR2_HOME_MINIMAP = { 'Japanese Grand Prix': 'assets/minimaps/sm/suzuka.png', 'Belgian Grand Prix': 'assets/minimaps/sm/spa.png', 'Qatar Grand Prix': 'assets/minimaps/sm/qatar.png', 'South African Grand Prix': 'assets/minimaps/sm/southafrica.png', 'Spanish Grand Prix': 'assets/minimaps/sm/spain.png', 'Ukrainian Grand Prix': 'assets/minimaps/sm/ukraine.png', 'German Grand Prix': 'assets/minimaps/sm/germany.png', 'Indonesian Grand Prix': 'assets/minimaps/sm/batavia.png', 'Slovakian Grand Prix': 'assets/minimaps/sm/fatra.png', 'British Grand Prix': 'assets/minimaps/sm/britain.png', 'Malaysian Grand Prix': 'assets/minimaps/sm/malaysia.png', 'Welsh Grand Prix': 'assets/minimaps/sm/wales.png', 'French Grand Prix': 'assets/minimaps/sm/lutetia.png' }; // Country flag per grand prix (flagcdn ISO) — used as a faint tile background. const UR2_HOME_FLAG = { 'French Grand Prix': 'fr', 'Japanese Grand Prix': 'jp', 'Belgian Grand Prix': 'be', 'Swedish Grand Prix': 'se', 'Dutch Grand Prix': 'nl', 'Italian Grand Prix': 'it', 'Gold Coast Grand Prix': 'au-qld', 'Sapporo International Grand Prix': 'jp-01', 'Canadian Grand Prix': 'ca', 'Australian Grand Prix': 'au', 'Arcana East Flanders Grand Prix': 'be-vov', 'Qatar Grand Prix': 'qa', 'South African Grand Prix': 'za', 'Spanish Grand Prix': 'es', 'Ukrainian Grand Prix': 'ua', 'German Grand Prix': 'de', 'Indonesian Grand Prix': 'id', 'Slovakian Grand Prix': 'sk', 'British Grand Prix': 'gb', 'Malaysian Grand Prix': 'my', 'Welsh Grand Prix': 'gb-wls', 'Russian Grand Prix': 'ru', 'United States Grand Prix': 'us', 'Romanian Grand Prix': 'ro', 'Canarian Grand Prix': 'ic', 'Monaco Grand Prix': 'mc' }; const UR2RoundCard = ({ race, winner }) => { const isNext = race.status === 'next'; const isDone = race.status === 'done'; const isTba = !race.date; const map = race.minimap || UR2_HOME_MINIMAP[race.grandPrix] || null; const flag = UR2_HOME_FLAG[race.grandPrix] || null; return (
{flag && !isTba && (
)}
{String(race.round).padStart(2, '0')} {isNext ? 'Next' : isDone ? 'Done' : isTba ? 'TBA' : 'Soon'}
{map ? {race.track} : ◇}
{isTba ? 'To be announced' : race.track}
{isTba ? '· · ·' : `${race.grandPrix !== 'TBA' ? race.grandPrix + ' · ' : ''}${ur2FmtDate(race.date)}`}
{isDone && winner && (
Win · {winner}
)}
); }; const UR2RoadAhead = ({ onOpenCalendar }) => { const cal = getCalendar('ul'); const results = typeof useRaceResults === 'function' ? useRaceResults('ul', cal.season) : {}; const breakAfter = UR2D_CALENDAR.midSeasonBreakAfter || null; const winnerOf = (round) => { const rr = results && results[round]; return rr && rr[0] ? rr[0].name : null; }; const done = cal.races.filter((r) => r.status === 'done').length; // Start the rail at the most recent race (last completed; falls back to the next round). const railRef = React.useRef(null); const focusRef = React.useRef(null); const focusRound = (() => { const doneRaces = cal.races.filter((r) => r.status === 'done'); if (doneRaces.length) return doneRaces[doneRaces.length - 1].round; const next = cal.races.find((r) => r.status === 'next'); return next ? next.round : null; })(); React.useEffect(() => { if (railRef.current && focusRef.current) railRef.current.scrollLeft = Math.max(0, focusRef.current.offsetLeft - 44); }, []); return (
The road ahead.} right={
Rounds complete
{done}/{cal.races.length}
{onOpenCalendar ? : null}
} />
{cal.races.map((race, i) => ( {breakAfter === race.round && i < cal.races.length - 1 && (
Mid-season break
)} ))}
); }; // ─── LADDER — how the four leagues stack, plus the join CTA ────────────────── const UR2_LADDER = [ { id: 'ul', num: '01', line: 'The summit. Ten rounds, nine constructors, the sharpest field in UR2D.', meta: '10 rounds · Constructors · Invitation by promotion' }, { id: 'hl', num: '02', line: 'The proving ground — the only tier that races a full sprint format.', meta: '10 rounds · Sprint weekends · Constructors' }, { id: 'jl', num: '03', line: 'Half-season championships that come at you twice as fast.', meta: '5 rounds · A/B half-seasons · Constructors' }, { id: 'al', num: '04', line: 'Where everyone starts. No teams, no pressure — just you and the track.', meta: '5 rounds · A/B half-seasons · Solo drivers' } ]; const UR2Ladder = () => (
Start in Apprentice.
Finish in Ultimate.} />
{UR2_LADDER.map((row) => { const L = LEAGUE_BY_ID[row.id]; return (
{row.num} {L.short} {L.name} {L.tier} {row.line} {row.meta}
); })}
Every driver on the UL grid started at the bottom rung. Join the grid — Discord →
); // ─── FOOTER — slim ─────────────────────────────────────────────────────────── const UR2Footer = () => ( ); Object.assign(window, { UR2StandingsWall, UR2RoadAhead, UR2Ladder, UR2Footer, UR2SectionHead });