// ─── RACE ANALYSIS (2/2) — tyre strategy + the section under the round results ─────────────── const fraCss = ` .fra{background:#000;border-bottom:1px solid ${COLORS.hairline};padding:64px clamp(18px,4vw,56px) 80px;overflow:clip} .fra-in{position:relative;z-index:1;max-width:1500px;margin:0 auto;display:grid;gap:28px} .fra-tex{position:sticky;top:0;z-index:0;height:100vh;margin:-64px calc(-1 * clamp(18px,4vw,56px)) calc(64px - 100vh);pointer-events:none;background:url("assets/textures/checker-flag.jpg") center/cover;opacity:var(--fd-tex-op,.05);will-change:transform} .fra-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px} .fra-k{font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.3em;text-transform:uppercase;color:${COLORS.red}} .fra-h{margin:14px 0 0;font:900 clamp(36px,4.6vw,64px)/.92 'Archivo',sans-serif;letter-spacing:-.03em;text-transform:uppercase;color:${COLORS.text}} .fra-sub{margin-top:12px;max-width:560px;font:400 15px/1.55 'Archivo',sans-serif;color:${COLORS.textMute}} .fra-acts{display:flex;flex-wrap:wrap;gap:10px} .fra-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font:800 13px/1 'Archivo',sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:15px 22px;background:${COLORS.red};color:#fff;text-decoration:none} .fra-btn:hover{background:#ff1a12;color:#fff} .fra-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.28)} .fra-btn.ghost:hover{border-color:#fff} .fra-btn .tri{width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent} .fra-panel{border:1px solid ${COLORS.hairline};background:rgba(255,255,255,.015);padding:22px clamp(14px,2vw,26px) 24px;min-width:0} .fra-ph{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:18px} .fra-pt{font:900 22px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:${COLORS.text}} .fra-tabs{display:inline-flex;gap:2px;padding:3px;border:1px solid rgba(243,241,236,.16);border-radius:999px} .fra-tab{all:unset;cursor:pointer;font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:999px;color:${COLORS.textDim}} .fra-tab:hover{color:${COLORS.text}} .fra-tab[aria-pressed="true"]{background:${COLORS.red};color:#fff} .fra-cap{margin-left:auto;font:500 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:${COLORS.textMute}} .fra-cap b{color:${COLORS.text}} .fra-tick{font:500 12px 'JetBrains Mono',monospace;fill:${COLORS.textDim}} .fra-end{font:700 12px 'Archivo Narrow','Archivo',sans-serif;text-transform:uppercase;letter-spacing:.02em} .fra-tip{position:absolute;pointer-events:none;display:grid;gap:3px;min-width:170px;padding:9px 12px;background:rgba(8,8,10,.94);border:1px solid rgba(255,255,255,.18);font:500 12px/1.35 'JetBrains Mono',monospace;color:${COLORS.textMute};z-index:2} .fra-tip b{font:800 14px/1.1 'Archivo',sans-serif;text-transform:uppercase} .fra-leg{display:flex;align-items:stretch;gap:8px;margin-top:16px;min-width:0} .fra-sel{min-width:0;max-width:100%} .fra-leg>.fra-chip.all{flex:0 0 auto;justify-content:center;padding:0 14px;max-width:96px;white-space:normal;text-align:center;line-height:1.2} .fra-lgrid{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px} .fra-mc{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:6px;padding:7px 8px 8px;min-width:0;border:1px solid ${COLORS.hairline};background:rgba(255,255,255,.02);transition:border-color .15s,background .15s} .fra-mc:hover,.fra-mc:focus-visible{border-color:rgba(255,255,255,.45)} .fra-mc[aria-pressed="true"]{border-color:#fff;background:rgba(255,255,255,.08)} .fra-mc img,.fra-mc .gh{display:block;width:100%;height:26px;object-fit:contain;image-rendering:pixelated} .fra-mc .gh{background:rgba(255,255,255,.12);-webkit-mask:url("assets/al-car.png") center/contain no-repeat;mask:url("assets/al-car.png") center/contain no-repeat} .fra-mc .ln{display:flex;align-items:center;gap:6px;min-width:0;font:700 12px/1 'Archivo Narrow','Archivo',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:${COLORS.text}} .fra-mc .ln i{flex:0 0 auto;width:9px;height:9px;border-radius:50%} .fra-mc .ln i.dash{background:transparent!important;box-shadow:inset 0 0 0 2px var(--c)} .fra-mc .ln em{flex:0 0 auto;font-style:normal;font:900 12px/1 'Archivo',sans-serif;color:${COLORS.textMute};font-variant-numeric:tabular-nums} .fra-mc .ln span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:1000px){.fra-lgrid{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:4px}.fra-mc{flex:0 0 108px}} .fra-chip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid ${COLORS.hairline};font:700 12px/1 'Archivo Narrow','Archivo',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:${COLORS.text}} .fra-chip[aria-pressed="true"]{border-color:#fff} .fra-chip i{display:block;width:18px;height:0;border-top:3px solid} .fra-ty{display:grid;gap:5px} .fra-row{display:grid;grid-template-columns:28px 48px minmax(76px,150px) minmax(0,1fr) 78px;align-items:center;gap:10px;cursor:default;transition:opacity .15s} .fra-row .p{font:900 15px/1 'Archivo',sans-serif;color:${COLORS.textMute};text-align:right;font-variant-numeric:tabular-nums} .fra-row .n{font:800 14px/1 'Archivo',sans-serif;text-transform:uppercase;color:${COLORS.text};white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fra-row .g{font:500 12px/1 'JetBrains Mono',monospace;color:${COLORS.textMute};text-align:right;font-variant-numeric:tabular-nums} .fra-row img{width:46px;height:auto;display:block} .fra-track{position:relative;height:22px} .fra-st{position:absolute;top:0;bottom:0;display:grid;place-items:center;font:800 11px/1 'Archivo',sans-serif;border-right:2px solid #000;box-sizing:border-box;overflow:hidden} .fra-axis{position:relative;height:18px;font:500 12px/1 'JetBrains Mono',monospace;color:${COLORS.textDim}} .fra-axis span{position:absolute;transform:translateX(-50%)} .fra-grid{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.06)} .fra-wx{height:12px;border:1px solid ${COLORS.hairline}} .fra-keys{display:flex;flex-wrap:wrap;gap:8px 16px;margin-left:auto;font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:${COLORS.textMute}} .fra-keys span{display:inline-flex;align-items:center;gap:6px} .fra-keys i{display:inline-block;width:12px;height:12px} .fra-note{font:500 12px/1.6 'JetBrains Mono',monospace;letter-spacing:.04em;color:${COLORS.textDim}} `; function FRATyres({ S, drv, foc = [] }) { const L = S.cars[0].done,pct = (l) => Math.max(0, Math.min(L, l)) / L * 100; const ticks = [];const xs = L > 30 ? 5 : L > 14 ? 2 : 1;for (let n = xs; n <= L; n += xs) ticks.push(n); const used = [...new Set(S.cars.flatMap((c) => c.stints.map((s) => s.c)).filter(Boolean))].sort((a, b) => 'SMHIW'.indexOf(a) - 'SMHIW'.indexOf(b)); const wxStops = S.wx.filter((_, i) => i % 3 === 0).map((w) => `rgba(47,127,216,${Math.min(0.95, w.wet * 1.4 + w.rain * 0.5).toFixed(2)}) ${pct(w.l).toFixed(2)}%`); const wetAny = S.wx.some((w) => w.wet > 0.02 || w.rain > 0); return (
Lap
{ticks.map((n) => {n})}
{wetAny &&
Track wet
1 ? `linear-gradient(90deg, ${wxStops.join(', ')})` : 'none' }} title="Track wetness from the replay (darker = wetter)">
} {S.cars.map((c) => { const d = drv[c.id]; return (
{c.dnf ? '—' : c.pos} {d.car ? : } {d.label}
{ticks.map((n) => )} {c.stints.map((s, i) => {const t = FRA_TYRE[s.c] || ['#444', '#fff', '?'],w = pct(s.to) - pct(s.from),pit = c.pits.find((p) => Math.abs(p.at - s.to) < 0.08); return {w > 3.2 ? s.c : ''};})} {c.pits.filter((p) => !p.tyres).map((p, i) => )}
{c.dnf ? 'DNF' : c.pos === 1 ? fraFmt(c.time) : typeof c.gap === 'string' ? c.gap : '+' + c.gap.toFixed(3)}
); })}
); } function FDRaceAnalysis({ ctx }) { const _rl = typeof useReplayList === 'function' ? useReplayList() : window.UR2D_REPLAYS || []; const here = _rl.filter((x) => x.session !== 'sprint' && x.calSeason === ctx.calSeason && x.calRound === ctx.round); const r = here.find((x) => x.league === ctx.league) || null; const st = useReplayStats(r); const box = React.useRef(null); React.useEffect(() => {// deep link from the Replays page: bring the analysis into view once it's drawn if (!window.__fdScrollAnalysis || st.status !== 'ready' || !box.current) return; window.__fdScrollAnalysis = false; const navH = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--fd-nav-h')) || 72; setTimeout(() => window.scrollTo({ top: box.current.getBoundingClientRect().top + window.scrollY - navH, behavior: 'smooth' }), 120); }, [st.status]); const [mode, setMode] = React.useState('gap'); const [pin, setPin] = React.useState([]); const drv = React.useMemo(() => st.data ? fraIdentify(st.data, ctx) : null, [st.data, ctx.league, ctx.season, ctx.rdt, ctx.std]); const lgPick = here.length && ctx.setLeague ? {here.slice().sort((a, b) => ['ul', 'hl', 'jl', 'al'].indexOf(a.league) - ['ul', 'hl', 'jl', 'al'].indexOf(b.league)).map((x) => {const L = LEAGUES.find((l) => l.id === x.league) || {};return ;})} : null; if (!r) return here.length && ctx.setLeague ?
◆ Race analysis + replayAvailable for this round in{lgPick}
: null; const S = st.data,foc = pin; const pick = (id, jump) => {setPin(pin.includes(id) ? pin.filter((x) => x !== id) : [...pin, id]);if (jump && box.current) {const navH = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--fd-nav-h')) || 72;window.scrollTo({ top: box.current.getBoundingClientRect().top + window.scrollY - navH, behavior: 'smooth' });}}; const selCars = S ? pin.map((id) => S.cars.find((c) => c.id === id)).filter(Boolean) : []; const panel = (title, extra, body) =>
{title}{extra}
{body}
; const openReplay = () => {if (window.fdGo) window.fdGo('replay/' + r.id);else window.location.hash = 'replay/' + r.id;}; const fl = S && S.fastest && S.cars.find((c) => c.id === S.fastest.id); const m = mode === 'wet' && !(S && S.wet) ? 'gap' : mode; return (
◆ Race analysis · from the replay

RACE ANALYTICS

Every lap of the race, worked out from the car positions in Bituko's replay.
{here.length > 1 &&
{lgPick}
}
Full page ↗
{!S ?
{st.status === 'error' ? 'Couldn’t read the replay data.' : 'Reading the replay…'}
:
{S.cars.map((c) => {const d = drv[c.id];return ;})}
{selCars.length === 1 && } {selCars.length > 1 &&
{selCars.map((c) => pick(c.id)} />)}
}
Race trace {[['gap', 'Gap'], ['pos', 'Positions'], ['laps', 'Lap times'], ...(S.wet ? [['wet', 'Wet pace']] : [])].map(([k, l]) => )} {m === 'gap' ? 'Gap to the winner’s average pace · up = ahead' : m === 'pos' ? 'Running order at the end of every lap' : m === 'wet' ? 'Average clean lap on a wet track · fastest first' : fl ? Fastest lap {drv[fl.id].label} {fraFmt(S.fastest.t)} · L{S.fastest.lap} : ''}
{m === 'wet' ? : }
{panel('Lap times', Every lap, coloured by how far off the fastest lap it was, pick(id)} />)} {typeof FRALapCompare === 'function' && S.tele && } {panel('Stint analysis', {selCars.length ? selCars.map((c) => drv[c.id].label).join(' · ') : 'Pace against tyre age, every stint'}, )}
Tyre strategy {['S', 'M', 'H', 'I', 'W'].filter((k) => S.cars.some((c) => c.stints.some((s) => s.c === k))).map((k) => {FRA_TYRE[k][2]})}
{!selCars.length && panel('Driver summaries', Click a driver to focus the whole page on them, pick(id, true)} />)}
Lap times and gaps come from each car’s progress around the lap, so they can differ by a few tenths from the official timing. Blue shading = wet track.{S.wet ? ' A lap counts as wet once the track averaged 5% wetness or more across it — already enough to cost slick tyres seconds a lap.' : ''}
}
); } Object.assign(window, { FDRaceAnalysis });