STRATEGY · #{car.no}{carClass ? ` · ${carClass.short}` : ""}
{isElectric ? "ENERGY" : "FUEL"}
{isElectric ? `${Math.round(car.fuel)}%` : `${car.fuel.toFixed(1)} kg`} ~{lapsLeft} laps
TYRE WEAR · {car.tire}
70 ? "#C8102E" : tireWear > 45 ? "#C9A24A" : "#7DC383" }}/>
{car.tire_age} laps · cliff @ ~{cliffLap}
{isElectric ? "ATTACK MODE" : "PIT WINDOW"}
{isElectric ? "ARMED" : "L52"} {!isElectric && → L58}
{isElectric ? `4× 35kW BOOST AVAIL.` : `UNDERCUT THREAT: P${car.pos+1}`}
);
}
function PitLog() {
const log = window.APEX_DATA.PIT_LOG;
return (
{log.map((p, i) => (
L{p.lap}
#{p.no}
{p.team}
{p.action}
2.55 ? "bad" : ""}`}>{p.duration.toFixed(2)}s
{p.notes}
))}
);
}
function TopBar({ track, trackEvent, trackId, onTrackChange, raceState, classId, onClassChange }) {
const [open, setOpen] = React.useState(false);
const [classOpen, setClassOpen] = React.useState(false);
const carClass = window.CAR_CLASSES[classId];
const w = track.weather;
return (
▲
APEX
SERIES · COMPANION
{trackEvent.round} · {trackEvent.date}
{trackEvent.event}
{classOpen && (
SELECT CLASS · {window.CAR_CLASS_LIST.length}
{window.CAR_CLASS_LIST.map(id => {
const c = window.CAR_CLASSES[id];
const active = id === classId;
return (
);
})}
)}
{open && (
SELECT CIRCUIT · {window.TRACK_LIST.length}
{window.TRACK_LIST.map(id => {
const t = window.TRACKS[id];
const ev = window.TRACK_EVENTS[id];
const active = id === trackId;
return (
);
})}
)}
AIR{w.air_c}°
TRACK{w.track_c}°
WIND{w.wind_kph} kph
COND{w.condition}
FASTEST LAP
{raceState.fastest_lap.time}
#{raceState.fastest_lap.car} {raceState.fastest_lap.driver} · L{raceState.fastest_lap.lap}
);
}
// Stylized helmet portrait — driver "photo" rendered as a livery-painted helmet
function HelmetPortrait({ car, size = 200 }) {
const h = car.helmet || { primary: car.livery.primary, secondary: car.livery.secondary, visor: "#0B0B0B" };
const id = `helm-${car.no}`;
return (
);
}
// Stylized crew portrait — silhouette with team color
function CrewPortrait({ name, accent, kind, size = 88 }) {
const id = `crew-${name.replace(/\s+/g, "-")}`;
return (
);
}
// Driver tab — the cockpit experience. POV up top, then live driver-load metrics
// (heart rate, g-force, brake pressure) derived from telemetry, then radio handle
// + signature line, with full bio/crew tucked into a collapsible ABOUT section.
function DriverProfile({ car, onZoomPhoto, carClass, cars, track, raceProgress, sample }) {
if (!car) return null;
const [aboutOpen, setAboutOpen] = useStateP(false);
const accent = car.livery.accent === "#FFFFFF" ? car.livery.primary : car.livery.accent;
// Pull live telemetry sample so the load metrics tick with the rest of the app.
const tele = useMemoP(() => window.APEX_DATA.generateTelemetry(car.no), [car.no]);
const cur = tele.length ? tele[sample % 100] : { speed: 0, throttle: 0, brake: 0 };
const [minSpd, maxSpd] = (carClass && carClass.speedRange) || [80, 310];
const speedKph = Math.round(minSpd + ((cur.speed - 80) / (310 - 80)) * (maxSpd - minSpd));
// Estimated lateral g — peaks during corners (low throttle + some brake or coast).
// Scale: 0..5g typical for open-wheel. We approximate cornering load from how
// far speed has dropped below max (i.e. driver is committed to a corner).
const speedRatio = Math.min(1, Math.max(0, (cur.speed - 80) / (310 - 80)));
const cornerLoad = Math.max(0, 1 - speedRatio) * (cur.throttle < 60 ? 1 : 0.4);
const gLateral = (1.2 + cornerLoad * 3.6).toFixed(1); // 1.2g cruising → ~4.8g peak
const gLong = (cur.brake / 100 * 4.5 + cur.throttle / 100 * 1.6).toFixed(1);
// Estimated heart rate: ~145 baseline, climbs with brake intensity & corner load.
// Real APEX/F1 drivers run 160-190bpm during a stint.
const hr = Math.round(148 + cur.brake * 0.28 + cornerLoad * 22);
// Steering input — rough proxy: high during corners, low on straights.
const steerDeg = Math.round(cornerLoad * 110 + (cur.brake > 40 ? 18 : 0));
// Famous corner notes lifted from track data — the visceral driver intelligence.
const corkscrewNote = "5.5-storey blind drop. Brake on the dirt patch.";
const handleMatch = car.bio && car.bio.match(/known on the radio as ['"]([^'"]+)['"]/i);
const radioHandle = handleMatch ? handleMatch[1] : null;
// Pull a single visceral sentence out of the bio for the headline quote.
const bioSentences = car.bio ? car.bio.split(/(?<=[.!?])\s+/) : [];
const signatureLine = bioSentences.find(s => /aggressive|smooth|cool|surgical|methodical|brilliant|fastest|famous|wins|cult|quiet/i.test(s)) || bioSentences[1] || bioSentences[0] || "";
return (
IN THE COCKPIT · #{car.no}
{car.name}
{car.team} · {car.country} · AGE {car.age}
{/* Big POV view — fan's window into the driver's perspective */}
{window.DriverView && (
)}
{/* Driver load — the physical demand right now */}
{/* Radio handle + signature line — what announcers say about them */}
{radioHandle && (
RADIO HANDLE
“{radioHandle}”
)}
{signatureLine}
{/* Corkscrew driver notes — Laguna-specific */}
{track.id === "laguna_seca" && (
SIGNATURE CORNER · TURN 8
THE CORKSCREW
{corkscrewNote}
APPROACH~210 KPH
EXIT~95 KPH
DROP17.5 M
)}
{/* About — collapsed by default to keep the experience focused */}
{aboutOpen && (
CREW
CREW CHIEF
{car.crew_chief}
{car.crew_chief_bio}
RACE ENGINEER
{car.race_engineer}
{car.race_engineer_bio}
)}
);
}
// Compact bar-stat for driver load metrics
function DrLoadStat({ label, value, unit, max, fillColor, pulse }) {
const pct = Math.min(100, (parseFloat(value) / max) * 100);
return (
);
}
Object.assign(window, { Leaderboard, FocusedCar, Telemetry, StrategyPanel, PitLog, TopBar, LiveryCard, PhotoCard, PhotoLightbox, DriverProfile, HelmetPortrait, CrewPortrait });