// ════════════════════════════════════════════════════════════════════════════ // UR2D STANDINGS — "TIMING WALL" v2 // One composition, two zones sharing rows: // LEFT — championship ladder: pos / team / driver / # / points, with a // team-coloured points bar (relative to leader) + gap-to-leader. // RIGHT — race matrix: ONE cell per round. Race finish is the hero number, // quali sits small in the corner. Podiums = metal plates, pole = purple. // Column headers carry the track minimap + country code (broadcast wall). // Data wiring identical to v1: useStandings + useRaceResults + getCalendar. // Mounted by "Standings Grid v2.html". Loads after ur2d-pages.jsx. // ════════════════════════════════════════════════════════════════════════════ const SG2_METAL = { 1: { bg: 'linear-gradient(135deg, #E8C55A 0%, #C9A227 60%, #A8861D 100%)', flat: '#C9A227', ink: '#0b0b0d' }, 2: { bg: 'linear-gradient(135deg, #E4E8EE 0%, #C7CBD1 60%, #A9AEB6 100%)', flat: '#C7CBD1', ink: '#0b0b0d' }, 3: { bg: 'linear-gradient(135deg, #D69A55 0%, #C0813E 60%, #9E6830 100%)', flat: '#C0813E', ink: '#0b0b0d' }, }; const SG2_POLE = '#B25FFF'; const sg2Norm = (s) => String(s || '').trim().toLowerCase().replace(/\s+/g, ' '); // ── Split: dedicated quali cell ─────────────────────────────────────────────── const SG2QCell = ({ q }) => { const hasQ = typeof q === 'number' && q > 0; const pole = hasQ && q === 1; return (
{pole && } {hasQ ? q : '—'}
); }; // ── Split: dedicated race-finish cell (optional in-cell points) ─────────────── const SG2RCell = ({ r, p, showPts }) => { const hasR = typeof r === 'number' && r > 0; const metal = hasR ? SG2_METAL[r] : null; const hasP = showPts && typeof p === 'number'; return (
{hasR ? r : '—'} {hasP && {p}}
); }; // ── Split: dedicated per-race points cell (column mode) — inherits the R cell's // podium metal so gold/silver/bronze reads as one block across R + Pts ─────── const SG2PCell = ({ p, r }) => { const hasP = typeof p === 'number'; const hasR = typeof r === 'number' && r > 0; const metal = hasR ? SG2_METAL[r] : null; return (
{hasP ? p : '—'}
); }; // ── Split: sprint-finish cell (HL only) — secondary to the feature race: a // muted number with a subtle metal tint + accent bar for a sprint podium ───── const SG2SCell = ({ s }) => { const hasS = typeof s === 'number' && s > 0; const metal = hasS ? SG2_METAL[s] : null; return (
{metal && } {hasS ? s : '—'}
); }; // ── Constructor cell: weekend points total (hero) + best car finish ────────── const SG2CCell = ({ pts, pos }) => { const has = typeof pts === 'number'; const scored = has && pts > 0; const metal = scored && pos && SG2_METAL[pos] ? SG2_METAL[pos] : null; return (
{has ? pts : '—'} {scored && pos != null && P{pos}}
); }; // ── Compact controls (season + league) ─────────────────────────────────────── const SG2Controls = ({ league, setLeague, seasons, activeId, setSeasonId }) => { const H = 38; return (
▼
{LEAGUES.map((Lg, i) => { const active = league === Lg.id; return ( ); })}
); }; // ── PAGE ───────────────────────────────────────────────────────────────────── const URStandingsWall = ({ league, setLeague, racePoints = 'off', onBack }) => { const split = true; const [view, setView] = React.useState('drivers'); const showPtsCol = racePoints === 'column'; const showPtsInCell = racePoints === 'incell'; const L = LEAGUE_BY_ID[league]; const seasons = getSeasons(league); const [seasonId, setSeasonId] = useSharedSeason(league); const activeId = seasons.some((s) => s.id === seasonId) ? seasonId : defaultDataSeasonId(seasons); const data = useStandings(league, activeId); const label = data.season && data.season.label; const results = useRaceResults(league, label); const teamByShort = {}; (data.teams || []).forEach((t) => { teamByShort[t.short] = t; }); // roster fallback: most recent team raced for (independents / emergency reserves) const seasonRoster = typeof getRoster !== 'undefined' ? getRoster(league, activeId) : null; const recentTeamFor = (name) => { if (!seasonRoster) return null; const who = typeof resolvePerson !== 'undefined' ? resolvePerson(name) : null; const handle = who ? who.handle : null; const stints = (seasonRoster.stints || []).filter((s) => s.driver === handle || rosterNorm(s.driver) === rosterNorm(name)); for (let i = stints.length - 1; i >= 0; i--) { if (teamByShort[stints[i].team]) return teamByShort[stints[i].team]; } return null; }; // driver → round → {q, s, r, p} const numRaces = (data.season && data.season.numRaces) || 10; const hasSprints = !!(data.season && data.season.hasSprints); const teamBased = !!(data.teams && data.teams.length); const isCon = view === 'constructors' && teamBased; const perRaceCols = isCon ? 1 : split ? (2 + (hasSprints ? 1 : 0) + (showPtsCol ? 1 : 0)) : 1; const byDriver = {}; Object.entries(results).forEach(([round, list]) => { list.forEach((res) => { const key = sg2Norm(res.name); (byDriver[key] || (byDriver[key] = {}))[round] = { q: res.quali, s: res.sprint, r: res.finish, p: res.points }; }); }); // race headers — code + minimap via the position-aligned shared calendar. // Calendars roll forward with the leagues (index N of UR2D_CALENDARS aligns with // index N of every league's seasons[]), so resolve by the selected season's INDEX — // NOT by label: HL/JL/AL labels (S21, S22A…) never match the UL-labelled calendar // array and would wrongly fall back to the current in-progress schedule. const calSeasons = typeof getCalendarSeasons !== 'undefined' ? getCalendarSeasons() : []; const seasonIdx = seasons.filter((s) => !s.dbOnly).findIndex((s) => s.id === activeId); // dbOnly archive seasons aren't calendar-aligned const calLabel = (seasonIdx >= 0 && calSeasons[seasonIdx]) ? calSeasons[seasonIdx].id : label; const cal = getCalendar(league, calLabel); const races = []; for (let n = 1; n <= numRaces; n++) { const r = (cal.races || []).find((x) => x.round === n); races.push({ round: n, code: r ? (UR_GP_LOC3[r.grandPrix] || null) : null, minimap: r ? ((r.minimap || UR_GP_MINIMAP[r.grandPrix]) || null) : null, raced: Object.prototype.hasOwnProperty.call(results, n) || Object.prototype.hasOwnProperty.call(results, String(n)), }); } const drivers = (data.drivers || []).slice(0, 18); const leaderPts = drivers.length ? Math.max(1, drivers[0].pts) : 1; // ── Constructors: each weekend's team points total, straight from the store ── // (Leaderboard's constructor block; these reconcile exactly with the season total.) const conRounds = typeof useConstructorRounds !== 'undefined' ? useConstructorRounds(league, label) : {}; const conRows = isCon ? (data.teams || []).slice().sort((a, b) => (a.pos || 99) - (b.pos || 99)).map((t, i) => ({ ...t, pos: t.pos || i + 1, rounds: conRounds[t.short] || {} })) : []; const conHasRounds = isCon && conRows.some((t) => Object.keys(t.rounds).length); // A round counts as run once any constructor scored in it — keeps the cells from // sitting on dashes while the (separate) race-results fetch is still in flight. const conRacedRounds = new Set(); conRows.forEach((t) => Object.entries(t.rounds).forEach(([rn, c]) => { if (c.pts > 0) conRacedRounds.add(Number(rn)); })); // ── Image export (copy / download) ────────────────────────────────────── const racedRounds = races.filter((r) => r.raced).map((r) => r.round); const lastRound = racedRounds.length ? Math.max.apply(null, racedRounds) : 0; const [busy, setBusy] = React.useState(false); const [copied, setCopied] = React.useState(false); const captureName = () => `${(L.short || 'UR')}_${String(activeId || '').replace(/[^\w-]/g, '')}_R${lastRound}${isCon ? '_CON' : ''}.png`; const doCapture = async (mode) => { if (busy || typeof html2canvas === 'undefined') return; const table = document.querySelector('.sg2-table'); const redbar = document.querySelector('.sg2-redbar'); if (!table) return; setBusy(true); document.body.classList.add('sg2-capturing'); let wrap = null; try { // let the class apply before rasterising await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))); const fullWidth = table.scrollWidth; // build an offscreen wrapper: red divider bar + full table, unclipped by the scroll viewport wrap = document.createElement('div'); wrap.style.position = 'fixed'; wrap.style.left = '-99999px'; wrap.style.top = '0'; wrap.style.background = COLORS.slate; wrap.style.width = fullWidth + 'px'; if (redbar) { const bar = redbar.cloneNode(true); bar.style.margin = '0'; bar.style.width = '100%'; bar.style.boxSizing = 'border-box'; wrap.appendChild(bar); } const tableClone = table.cloneNode(true); tableClone.style.width = fullWidth + 'px'; tableClone.style.minWidth = fullWidth + 'px'; wrap.appendChild(tableClone); document.body.appendChild(wrap); const canvas = await html2canvas(wrap, { backgroundColor: COLORS.slate, scale: 2, logging: false, useCORS: true }); const name = captureName(); const blob = await new Promise((res) => canvas.toBlob(res, 'image/png')); if (mode === 'copy' && navigator.clipboard && window.ClipboardItem) { try { await navigator.clipboard.write([new window.ClipboardItem({ 'image/png': blob })]); setCopied(true); setTimeout(() => setCopied(false), 1600); } catch (e) { triggerDownload(blob, name); } } else { triggerDownload(blob, name); } } catch (e) { console.error('capture failed', e); } finally { if (wrap && wrap.parentNode) wrap.parentNode.removeChild(wrap); document.body.classList.remove('sg2-capturing'); setBusy(false); } }; const triggerDownload = (blob, name) => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = name; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 1500); }; // sticky geometry — single source of truth for the 5 frozen left columns const LW = { pos: 42, team: 46, name: isCon ? 262 : 182, num: isCon ? 0 : 34, pts: 80 }; const LEFT_W = LW.pos + LW.team + LW.name + LW.num + LW.pts; const LEFTS = { pos: 0, team: LW.pos, name: LW.pos + LW.team, num: LW.pos + LW.team + LW.name, pts: LW.pos + LW.team + LW.name + LW.num }; const headBorder = '1px solid rgba(255,255,255,0.14)'; return (
{/* ── Functional top bar ────────────────────────────────────── */}
{teamBased &&
{[['drivers', 'Drivers'], ['constructors', 'Constructors']].map(([id, lbl], i) => { const active = (view === 'constructors' ? 'constructors' : 'drivers') === id; return ( ); })}
} {onBack ? ( ) : ( Grid v1 ← Back )}
{/* ── Wall ──────────────────────────────────────────────────── */} {data.status === 'loading' && !drivers.length ?
{[0, 1, 2].map((i) => )}
Loading live data…
: !drivers.length ?
◆ {L.short}

Standings coming soon

:
{races.map((rc) => { if (!split || isCon) return ; const cols = []; if (hasSprints) cols.push(); cols.push(); if (showPtsCol) cols.push(); return cols; })} {/* Row A — branding + subtle round numbers */} {races.map((rc) => ( ))} {/* Row B — track minimaps (left block is covered by the branding rowSpan) */} {races.map((rc) => ( ))} {isCon ? conRows.map((t) => { const isP1 = t.pos === 1; const rowBg = isP1 ? 'rgba(226,6,0,0.12)' : 'rgba(255,255,255,0.02)'; const stickyBg = `linear-gradient(${rowBg}, ${rowBg}), ${COLORS.slate}`; const gap = (conRows[0] ? conRows[0].pts : 0) - t.pts; const cellBorder = '1px solid rgba(255,255,255,0.05)'; return ( {races.map((rc) => { const c = ((rc.raced || conRacedRounds.has(rc.round)) && t.rounds[rc.round]) || {}; return ; })} ); }) : drivers.map((d) => { const isP1 = d.pos === 1; const rounds = byDriver[sg2Norm(d.name)] || {}; const team = teamByShort[d.team] || recentTeamFor(d.name); const tColor = team ? team.color : COLORS.textDim; const rowBg = isP1 ? 'rgba(226,6,0,0.12)' : 'rgba(255,255,255,0.02)'; const stickyBg = `linear-gradient(${rowBg}, ${rowBg}), ${COLORS.slate}`; const gap = drivers[0].pts - d.pts; const cellBorder = '1px solid rgba(255,255,255,0.05)'; return ( {races.map((rc) => { const cell = rounds[rc.round] || rounds[String(rc.round)] || {}; if (!split) return ; const parts = []; if (hasSprints) parts.push(); parts.push(); if (showPtsCol) parts.push(); return parts; })} ); })}
{L.short}
{L.name} · {activeId || ''}
POS {isCon ? 'Constructor' : 'Driver'} {isCon ? '' : '#'} Pts
R{rc.round}
{rc.minimap ? : ·} {rc.code || 'TBA'} {split && !isCon &&
Q {hasSprints && S} R {showPtsCol && PTS}
}
{t.pos} {UR_TEAM_LOGO[t.short] && {t.short}}
{t.name || t.short}
{t.pts} {!isP1 && gap > 0 && −{gap}}
{d.pos} {team && UR_TEAM_LOGO[team.short] && {team.short}}
{d.name}
{d.carNumber != null ? d.carNumber : ''} {d.pts} {!isP1 && gap > 0 && −{gap}}
{/* legend — quiet, single line */}
{isCon ? (conHasRounds ? 'Big = weekend points · small = best car finish' : 'Per-round constructor points unavailable for this season') : split ? (hasSprints ? 'Q = grid · S = sprint · R = feature' : 'Q = grid · R = race finish') : 'Big = race finish · small = grid'} {[1, 2, 3].map((p) => ( {p === 1 ? 'Win' : p === 2 ? '2nd' : '3rd'} ))} Pole
}
); }; Object.assign(window, { URStandingsWall, SG2QCell, SG2RCell, SG2PCell, SG2SCell, SG2CCell });