// Apex — chart + telemetry card components
// Globals consumed from window: RACE_META, DRIVERS, ORDER, STATE, LAP_HISTORY,
// TIRE_DEG, degAt, PIT_LOSS_S, MICROSECTORS, WEATHER_FORECAST, PIT_WINDOW
const { useState, useEffect, useRef, useMemo } = React;
// ──────────────────────────────────────────────────────────────
// Primitives
// ──────────────────────────────────────────────────────────────
function Card({ title, kicker, right, children, className = "", padded = true }) {
return (
{(title || right) && (
)}
{children}
);
}
function Kpi({ label, value, unit, accent, mono = true }) {
return (
{label}
{value}{unit && {unit} }
);
}
function Pill({ children, tone = "neutral" }) {
return {children} ;
}
function CompoundDot({ compound, size = 10 }) {
const c = TIRE_DEG[compound]?.color || "#888";
return (
);
}
// ──────────────────────────────────────────────────────────────
// Lap chart — gap to leader over laps for top-N drivers
// ──────────────────────────────────────────────────────────────
function LapChart({ focusDriver = "LEC", height = 240 }) {
const top = ORDER.slice(0, 6);
const width = 760;
const padL = 36, padR = 12, padT = 14, padB = 24;
const maxLap = RACE_META.currentLap;
const maxGap = Math.max(...top.map(c => Math.max(...LAP_HISTORY[c]))) * 1.1;
const x = (lap) => padL + ((lap - 1) / (maxLap - 1)) * (width - padL - padR);
const y = (gap) => padT + (gap / maxGap) * (height - padT - padB);
const gridLaps = [1, 5, 10, 15, 20, 25, 30].filter(l => l <= maxLap);
const gridGaps = [0, 10, 20, 30, 40].filter(g => g < maxGap);
return (
{/* grid */}
{gridGaps.map(g => (
{g === 0 ? "LEADER" : `+${g}s`}
))}
{gridLaps.map(l => (
L{l}
))}
{/* safety car zone */}
SC
{/* current lap line */}
{code}
);
})}
);
}
// ──────────────────────────────────────────────────────────────
// Tire degradation — predicted lap time delta over remaining laps
// ──────────────────────────────────────────────────────────────
function TireDegChart({ driver = "LEC", height = 200 }) {
const state = STATE[driver];
const compound = state.compound;
const startAge = state.tireAge;
const projectionLaps = 22;
const width = 540;
const padL = 38, padR = 14, padT = 14, padB = 24;
const points = Array.from({ length: projectionLaps }, (_, i) => {
const age = startAge + i;
return { age, lap: RACE_META.currentLap + i, delta: degAt(compound, age) };
});
const maxDelta = Math.max(...points.map(p => p.delta)) * 1.05;
const x = (i) => padL + (i / (projectionLaps - 1)) * (width - padL - padR);
const y = (d) => padT + (d / maxDelta) * (height - padT - padB);
const path = points.map((p, i) => `${i === 0 ? "M" : "L"} ${x(i)} ${y(p.delta)}`).join(" ");
const cliffStart = TIRE_DEG[compound].cliffStart;
const cliffIdx = points.findIndex(p => p.age >= cliffStart);
return (
{/* grid */}
{[0, 0.5, 1.0, 1.5, 2.0].filter(v => v < maxDelta).map(v => (
{v === 0 ? "0" : `+${v.toFixed(1)}s`}
))}
{/* x-axis labels */}
{[0, 5, 10, 15, 20].map(i => (
L{RACE_META.currentLap + i}
))}
{/* cliff zone */}
{cliffIdx > 0 && (
<>
CLIFF
)}
{/* pit window */}
NOW
);
}
// ──────────────────────────────────────────────────────────────
// Pit window strip — visual window 30→50
// ──────────────────────────────────────────────────────────────
function PitWindowStrip() {
const startLap = 30, endLap = 50;
const total = endLap - startLap;
const pos = (lap) => `${((lap - startLap) / total) * 100}%`;
return (
{[30, 35, 40, 45, 50].map(l => (
L{l}
))}
);
}
// ──────────────────────────────────────────────────────────────
// Mini-sector bar — 24 micro-sectors, delta LEC vs PIA
// ──────────────────────────────────────────────────────────────
function MicroSectors() {
const max = 90;
return (
{MICROSECTORS.map((d, i) => {
const mag = Math.min(1, Math.abs(d) / max);
const isLoss = d > 0;
return (
);
})}
S1 S2 S3
);
}
// ──────────────────────────────────────────────────────────────
// Standings rail
// ──────────────────────────────────────────────────────────────
function Standings({ focusDriver, onFocus }) {
return (
POS DRV GAP INT TIRE LAST
{ORDER.map(code => {
const d = DRIVERS.find(x => x.code === code);
const s = STATE[code];
const isFocus = code === focusDriver;
return (
onFocus(code)}>
{s.pos}
{code}
{s.pos === 1 ? "LEADER" : `+${s.gap.toFixed(3)}`}
{s.pos === 1 ? "—" : `+${s.interval.toFixed(3)}`}
{s.tireAge}
{formatLapTime(s.lastLap)}
);
})}
);
}
function formatLapTime(s) {
const m = Math.floor(s / 60);
const sec = (s - m * 60).toFixed(3);
return `${m}:${sec.padStart(6, "0")}`;
}
// ──────────────────────────────────────────────────────────────
// Weather forecast strip
// ──────────────────────────────────────────────────────────────
function WeatherStrip() {
const w = WEATHER_FORECAST.slice(0, 16);
return (
{w.map((p, i) => (
L{p.lap}
))}
);
}
// ──────────────────────────────────────────────────────────────
// Track map — minimal Monaco abstract
// ──────────────────────────────────────────────────────────────
function TrackMap({ focusDriver }) {
// Schematic monaco-ish path
const d = "M 20 80 L 60 30 L 140 25 Q 170 25 175 50 L 190 90 Q 195 110 175 120 L 110 130 Q 80 130 70 110 L 55 95 Q 40 90 35 100 L 25 105 Z";
// Driver positions along path 0..1
const positions = [0.05, 0.10, 0.16, 0.22, 0.35, 0.41, 0.55, 0.66, 0.74, 0.83];
// Helper to sample point along path
const pathRef = useRef(null);
const [pts, setPts] = useState([]);
useEffect(() => {
if (!pathRef.current) return;
const len = pathRef.current.getTotalLength();
setPts(positions.map(t => pathRef.current.getPointAtLength(t * len)));
}, []);
return (
S/F
{/* drivers */}
{pts.map((p, i) => {
const code = ORDER[i];
const drv = DRIVERS.find(x => x.code === code);
const isFocus = code === focusDriver;
return (
{code}
)}
);
})}
);
}
Object.assign(window, {
Card, Kpi, Pill, CompoundDot,
LapChart, TireDegChart, PitWindowStrip, MicroSectors,
Standings, WeatherStrip, TrackMap, formatLapTime,
});