// Main app — F1 Apex Optimizer
(function(){
const { TEAMS, DRIVERS, CONSTRUCTORS, SCORING, SESSIONS, DRIVER_BY_NUM, RACE } = window.F1DATA;
const { findTopLineups, driverPoints, constructorPoints } = window.F1OPT;
const STORAGE_KEY = "f1apex_state_v12_mal";
const ANALYSIS_CACHE_KEY_VERSIONED = "f1apex_analysis_mal_v1";
const fmt$ = n => "$" + Math.round(n).toLocaleString();
// Clean up older schema versions on boot — keeps localStorage tidy and prevents
// accidental hydration from incompatible shapes (including state from prior race weekends).
(function cleanupOldStorage() {
const obsolete = [
"f1apex_state_v1", "f1apex_state_v2", "f1apex_state_v3", "f1apex_state_v4_can", "f1apex_state_v5_mon", "f1apex_state_v6_bar", "f1apex_state_v7_aut", "f1apex_state_v8_sil", "f1apex_state_v9_bel", "f1apex_state_v10_ned", "f1apex_state_v11_aze",
"f1opt_state_v1", "f1opt_state_v2",
"f1apex_analysis_v1", "f1apex_analysis_mon_v1", "f1apex_analysis_bar_v1", "f1apex_analysis_aut_v1", "f1apex_analysis_sil_v1", "f1apex_analysis_bel_v1", "f1apex_analysis_ned_v1", "f1apex_analysis_aze_v1", // prior race-weekend caches
];
obsolete.forEach(k => { try { if (localStorage.getItem(k)) localStorage.removeItem(k); } catch (e) {} });
})();
// ===========================================================
// Default state
// ===========================================================
function makeInitialLevers() {
// Default: every driver finishes where they started. The user runs Step ⓪
// Session Analysis and imports a projection to set the predicted finish.
// Race-specific opinion overrides intentionally removed.
const o = {};
for (const d of DRIVERS) {
o[d.id] = {
finish: d.start,
lapsLed: 0,
fastestLap: false,
classified: true,
lock: false,
exclude: false,
};
}
return o;
}
function makeInitialConState() {
const o = {};
for (const c of CONSTRUCTORS) o[c.team] = { lock: false, exclude: false };
return o;
}
function loadPersisted() {
try {
const raw = localStorage.getItem(STORAGE_KEY);
if (!raw) return null;
const s = JSON.parse(raw);
return (s && typeof s === "object") ? s : null;
} catch (e) { return null; }
}
function persist(state) {
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch (e) {}
}
// ===========================================================
// Driver chip
// ===========================================================
function DriverChip({ driver, levers, dragging, onMouseDown, onTogglePanel, panelOpen, deltaTint }) {
const team = TEAMS[driver.team];
const lever = levers[driver.id];
const pts = driverPoints(driver, levers);
const isDnf = !lever.classified;
// Delta tint: pass "up" / "down" / null. Strong if |delta| ≥ 4.
const delta = driver.start - lever.finish;
let deltaClass = "";
if (deltaTint === "up" && delta > 0) deltaClass = "chip-up " + (delta >= 4 ? "chip-up-strong " : "");
else if (deltaTint === "down" && delta < 0) deltaClass = "chip-down " + (-delta >= 4 ? "chip-down-strong " : "");
else if (deltaTint === "auto") {
if (delta > 0) deltaClass = "chip-up " + (delta >= 4 ? "chip-up-strong " : "");
else if (delta < 0) deltaClass = "chip-down " + (-delta >= 4 ? "chip-down-strong " : "");
}
return (
{lever.fastestLap &&
FL
}
{isDnf &&
DNF
}
{String(driver.num).padStart(2,"0")}
{driver.name}
{team.short}
{fmt$(driver.salary)}
= 30 ? "hot" : pts >= 18 ? "warm" : "")}>{pts.toFixed(1)}
PTS
{ e.stopPropagation(); onTogglePanel(); }} title="Levers">
);
}
// ===========================================================
// Step nav bar — sticky breadcrumb that highlights the active section.
// ===========================================================
function StepNavBar({ activeStep, steps, onClick }) {
return (
FLOW
{steps.map((s, i) => (
onClick(s.target)}
title={s.desc}>
{s.done && i !== activeStep ? "✓" : s.num}
{s.label}
{i < steps.length - 1 &&
))}
);
}
// ===========================================================
// Lever panel — read-only breakdown + lock / exclude only.
// Laps led, fastest lap, and DNF live in the Race Inputs section (Step 2).
// ===========================================================
function LeverPanel({ driver, levers, onChange, onClose }) {
const team = TEAMS[driver.team];
const lever = levers[driver.id];
const finIdx = Math.max(1, Math.min(22, lever.finish)) - 1;
const posPts = SCORING.positionPoints[finIdx] || 0;
const placeDiff = (driver.start - lever.finish) * SCORING.placeDiffPerPos;
const lapsPts = (lever.lapsLed || 0) * SCORING.lapsLedPerLap;
const flPts = lever.fastestLap ? SCORING.fastestLapBonus : 0;
const clsPts = lever.classified ? SCORING.classifiedBonus : 0;
const teammate = DRIVERS.find(dd => dd.team === driver.team && dd.id !== driver.id);
const tFinish = teammate ? levers[teammate.id].finish : null;
const beat = (teammate && lever.finish < tFinish) ? SCORING.defeatedTeammateBonus : 0;
const total = posPts + placeDiff + lapsPts + flPts + clsPts + beat;
return (
e.stopPropagation()}>
LEVERS · {driver.first} {driver.name}
×
Lock in lineup
Exclude from pool
POINTS BREAKDOWN · finish P{lever.finish}
P{lever.finish} position pts
{posPts.toFixed(1)}
Place diff (P{driver.start}→P{lever.finish})
0 ? "pos" : placeDiff < 0 ? "neg" : "")}>
{placeDiff > 0 ? "+" : ""}{placeDiff.toFixed(1)}
{lever.lapsLed > 0 && (
{lever.lapsLed} laps led × 0.25 +{lapsPts.toFixed(2)}
)}
{flPts > 0 && (
Fastest lap +{flPts}
)}
{clsPts > 0 && (
Classified +{clsPts}
)}
{beat > 0 && teammate && (
Beat teammate ({teammate.name} P{tFinish}) +{beat}
)}
TOTAL {total.toFixed(1)}
{driver.fppr != null && (
CSV FPPR (reference) {driver.fppr.toFixed(2)}
)}
P{lever.finish}
{driver.name}
FL
onChange({ classified: !lever.classified })}
title="Did not finish (unclassified)">
DNF
);
}
// ===========================================================
// Projection methods — see research notes for citations.
// Each takes the per-driver session ranks + FP1 fastest-lap times and
// returns { [driverId]: score } where lower = better predicted finish.
// ===========================================================
function _randn() { // Box-Muller standard normal
const u = Math.random() || 1e-9, v = Math.random() || 1e-9;
return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
}
function _weightedRank(ranks, w) {
const wSum = (w.quali + w.sq + w.sprint + w.fp1) || 1;
const out = {};
for (const d of DRIVERS) {
out[d.id] = (w.quali * ranks.q[d.id] + w.sq * ranks.sq[d.id] + w.sprint * ranks.sp[d.id] + w.fp1 * ranks.fp[d.id]) / wSum;
}
return out;
}
// Hunter MM fit for Plackett–Luce (Annals of Statistics 2004).
// `orders` = list of permutations of driver IDs (ascending rank).
function _fitPlackettLuce(orders, ids, iters = 60) {
const lambda = {}; ids.forEach(d => lambda[d] = 1);
for (let it = 0; it < iters; it++) {
const w = {}; const denom = {};
ids.forEach(d => { w[d] = 0; denom[d] = 0; });
for (const order of orders) {
const n = order.length;
// sumFrom[k] = Σ_{j≥k} λ_{order[j]}
const sumFrom = new Array(n + 1).fill(0);
for (let k = n - 1; k >= 0; k--) sumFrom[k] = sumFrom[k + 1] + lambda[order[k]];
// w_i = times driver finished above last (i.e. index < n-1 always; we count appearances)
for (let r = 0; r < n - 1; r++) w[order[r]] += 1;
// d_i = Σ_{k ≤ rank_i} 1 / Σ_{j≥k} λ_j
for (let r = 0; r < n; r++) {
for (let k = 0; k <= r; k++) {
if (sumFrom[k] > 0) denom[order[r]] += 1 / sumFrom[k];
}
}
}
const next = {};
let sum = 0;
for (const d of ids) {
next[d] = denom[d] > 0 ? (w[d] || 1e-6) / denom[d] : 1e-6;
sum += next[d];
}
for (const d of ids) lambda[d] = next[d] / sum * ids.length;
}
return lambda;
}
// Sample Plackett–Luce order via the exponential-race trick (Yellott 1977).
// Repeated N times with team-correlated log-normal noise → mean rank per driver.
function _monteCarloAvgRank(lambda, ids, teamOf, opts = {}) {
const N = opts.N || 6000;
const sigD = opts.sigD ?? 0.4;
const sigT = opts.sigT ?? 0.7;
const dnfP = opts.dnf ?? 0.05;
const teams = [...new Set(ids.map(d => teamOf[d]))];
const sumPos = {}; ids.forEach(d => sumPos[d] = 0);
for (let sim = 0; sim < N; sim++) {
const tNoise = {};
teams.forEach(t => tNoise[t] = _randn() * sigT);
const e = ids.map(d => {
if (Math.random() < dnfP) {
return { d, e: 1e9 + Math.random() }; // DNFs land at the tail
}
const lam = lambda[d] * Math.exp(tNoise[teamOf[d]] + _randn() * sigD);
return { d, e: -Math.log(Math.random() || 1e-12) / Math.max(lam, 1e-9) };
});
e.sort((a, b) => a.e - b.e);
e.forEach((x, idx) => sumPos[x.d] += idx + 1);
}
const out = {}; ids.forEach(d => out[d] = sumPos[d] / N);
return out;
}
// Distributional Monte Carlo — returns per-driver position probability distribution
// plus win/podium/top-10/DNF rates. Per-driver DNF prior optional (scales by grid
// position when not provided: P1-5 ~4%, P6-10 ~6%, P11-15 ~8%, P16+ ~12%).
function _monteCarloFull(lambda, ids, teamOf, opts = {}) {
const N = opts.N || 12000;
const sigD = opts.sigD ?? 0.4;
const sigT = opts.sigT ?? 0.7;
const dnfPrior = opts.dnfPrior || {};
const teams = [...new Set(ids.map(d => teamOf[d]))];
const posCount = {}; ids.forEach(d => posCount[d] = new Array(22).fill(0));
const dnfCount = {}; ids.forEach(d => dnfCount[d] = 0);
for (let sim = 0; sim < N; sim++) {
const tNoise = {};
teams.forEach(t => tNoise[t] = _randn() * sigT);
const survivors = [];
const dnfs = [];
for (const d of ids) {
const dnf = dnfPrior[d] ?? 0.05;
if (Math.random() < dnf) { dnfs.push(d); dnfCount[d]++; }
else survivors.push(d);
}
const e = survivors.map(d => {
const lam = lambda[d] * Math.exp(tNoise[teamOf[d]] + _randn() * sigD);
return { d, e: -Math.log(Math.random() || 1e-12) / Math.max(lam, 1e-9) };
});
e.sort((a, b) => a.e - b.e);
e.forEach((x, idx) => posCount[x.d][idx]++);
// DNFs land randomly in the tail
const sLen = survivors.length;
const shuffled = dnfs.slice();
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
shuffled.forEach((d, idx) => {
const slot = sLen + idx;
if (slot < 22) posCount[d][slot]++;
});
}
const stats = {};
for (const d of ids) {
const counts = posCount[d];
const avgRank = counts.reduce((s, c, i) => s + (i + 1) * c, 0) / N;
const winPct = counts[0] / N;
const podiumPct = (counts[0] + counts[1] + counts[2]) / N;
const top10Pct = counts.slice(0, 10).reduce((a, b) => a + b, 0) / N;
const dnfPct = dnfCount[d] / N;
let modeIdx = 0, modeMax = -1;
counts.forEach((c, i) => { if (c > modeMax) { modeMax = c; modeIdx = i; } });
stats[d] = {
avgRank, winPct, podiumPct, top10Pct, dnfPct,
modeRank: modeIdx + 1,
probs: counts.map(c => c / N),
};
}
return stats;
}
// Pace-based λ from FP1 lap times (Fry/Brighton/Fanzon "time-rank duality" 2024).
function _pacePL(lapTimes, ids) {
const valid = ids.map(d => lapTimes[d]).filter(t => t != null && t > 0);
if (valid.length < 5) {
const out = {}; ids.forEach((d, i) => out[d] = i + 1);
return out;
}
const mean = valid.reduce((a, b) => a + b, 0) / valid.length;
const std = Math.sqrt(valid.reduce((s, t) => s + (t - mean) ** 2, 0) / valid.length) || 1;
const lambda = {};
ids.forEach(d => {
const t = lapTimes[d];
lambda[d] = t != null ? Math.exp(-3 * ((t - mean) / std)) : 1e-3;
});
return lambda;
}
// Convert a {driver: λ} or {driver: avg_position} dict to a projection rank.
function _scoresToRanks(scores, ids, ascending) {
const sorted = [...ids].sort((a, b) => ascending ? scores[a] - scores[b] : scores[b] - scores[a]);
const out = {};
sorted.forEach((d, i) => out[d] = i + 1);
return out;
}
// Per-driver DNF prior scaled by grid position. Front-runners are mechanically
// safer (better cars) and statistically less crash-prone.
function _dnfPriorByGrid() {
const out = {};
for (const d of (window.F1DATA?.DRIVERS || [])) {
if (d.start <= 5) out[d.id] = 0.04;
else if (d.start <= 10) out[d.id] = 0.06;
else if (d.start <= 15) out[d.id] = 0.08;
else out[d.id] = 0.12;
}
return out;
}
// Run all 6 projection methods + a distributional MC, return aggregated forecast.
// `levers` is the user's curated prediction (used for "expected pts" via the DK formula).
function _buildForecast({ ranks, lapTimes, levers, drivers, teams }) {
const ids = drivers.map(d => d.id);
const teamOf = {}; drivers.forEach(d => teamOf[d.id] = d.team);
// Method ranks (lower = better)
const blend = _scoresToRanks(_weightedRank(ranks, { quali: 30, sq: 20, sprint: 40, fp1: 10 }), ids, true);
const qmirror = _scoresToRanks(ranks.q, ids, true);
const qblend = _scoresToRanks(_weightedRank(ranks, { quali: 1.56, sq: 0.38, sprint: 0.37, fp1: 0.29 }), ids, true);
const sortedByRank = (rd) => [...ids].sort((a, b) => rd[a] - rd[b]);
const plLambda = _fitPlackettLuce(
[sortedByRank(ranks.q), sortedByRank(ranks.sq), sortedByRank(ranks.sp), sortedByRank(ranks.fp)],
ids
);
const pl = _scoresToRanks(plLambda, ids, false);
const pace = _scoresToRanks(_pacePL(lapTimes, ids), ids, false);
// MC: baseline λ from Q-blended → exponential curve. Use per-driver DNF prior.
const baseQB = _weightedRank(ranks, { quali: 1.56, sq: 0.38, sprint: 0.37, fp1: 0.29 });
const lambda = {}; ids.forEach(id => lambda[id] = Math.exp(-(baseQB[id] - 11) * 0.18));
const dnfPrior = _dnfPriorByGrid();
const mcStats = _monteCarloFull(lambda, ids, teamOf, { N: 15000, dnfPrior });
const mc = {};
ids.forEach(id => mc[id] = Math.round(mcStats[id].avgRank));
const methodRanks = { blend, qmirror, qblend, pl, pace, mc };
// Per-driver aggregation
const perDriver = {};
for (const d of drivers) {
const ranksByMethod = {
blend: methodRanks.blend[d.id],
qmirror: methodRanks.qmirror[d.id],
qblend: methodRanks.qblend[d.id],
pl: methodRanks.pl[d.id],
pace: methodRanks.pace[d.id],
mc: methodRanks.mc[d.id],
};
const arr = Object.values(ranksByMethod);
const meanRank = arr.reduce((a, b) => a + b, 0) / arr.length;
const variance = arr.reduce((s, r) => s + (r - meanRank) ** 2, 0) / arr.length;
const stdRank = Math.sqrt(variance);
perDriver[d.id] = {
driver: d,
ranksByMethod,
meanRank, stdRank,
mc: mcStats[d.id],
userFinish: levers[d.id]?.finish ?? d.start,
expectedPts: window.F1OPT.driverPoints(d, levers),
};
}
// Sort by user's predicted finish (their authoritative call) for the main list.
const ranked = drivers.map(d => perDriver[d.id])
.sort((a, b) => a.userFinish - b.userFinish)
.map((p, i) => ({ ...p, displayRank: i + 1 }));
// Ensemble agreement: average pairwise rank distance, normalized to [0, 1] where 1 = full agreement.
const allStds = drivers.map(d => perDriver[d.id].stdRank);
const meanStd = allStds.reduce((a, b) => a + b, 0) / allStds.length;
const agreement = Math.max(0, Math.min(1, 1 - meanStd / 6)); // 6 = arbitrary scale
const mostContested = [...drivers].map(d => perDriver[d.id])
.sort((a, b) => b.stdRank - a.stdRank)[0];
const mostAgreed = [...drivers].map(d => perDriver[d.id])
.sort((a, b) => a.stdRank - b.stdRank)[0];
return { ranked, perDriver, methodRanks, agreement, mostContested, mostAgreed };
}
const PROJECTION_METHODS = [
{ id: "blend", label: "Weighted Blend", short: "BLEND", desc: "Weighted-rank average of all 4 sessions. Tune the sliders to bias toward whichever signal you trust." },
{ id: "qmirror", label: "Q-Mirror", short: "Q ONLY", desc: "Use the qualifying grid as the projection. Pole→P1, P22→P22. Highest single-signal raw accuracy in published lit (ρ≈0.76 with finish, pole win-rate 43–70%)." },
{ id: "qblend", label: "Q-Blended", short: "QBLEND", desc: "Ordinal-logit weights from arXiv 2507.10966 (2025). Q=1.56 dominates FP3/SQ=0.38 / FP2/Sprint=0.37 / FP1=0.29." },
{ id: "pl", label: "Plackett–Luce", short: "PL MLE", desc: "Hunter MM fit (Annals of Statistics 2004) of latent skill λᵢ to all 4 observed session orders. Sort by λ descending." },
{ id: "pace", label: "Pace-based", short: "PACE", desc: "λᵢ = exp(−3·z(FP1 fastest lap)) per Fry/Brighton/Fanzon \"time-rank duality\" (2024)." },
{ id: "mc", label: "Monte Carlo", short: "MC SIM", desc: "15,000 PL sims on top of Q-blended baseline with team-correlated noise (σ_t=0.7, σ_d=0.4) and grid-scaled DNF prior. Best for distributional metrics." },
];
// ===========================================================
// Session Analysis (Step ⓪) — fetches FP1 / Sprint Quali / Sprint / Quali
// from the OpenF1 API, computes a weighted-rank projection, and offers
// a one-click import to the predicted-finish grid below.
// ===========================================================
// Versioned per race weekend so cached session data doesn't leak across races.
const ANALYSIS_CACHE_KEY = ANALYSIS_CACHE_KEY_VERSIONED;
function formatRelativeTime(ts) {
if (!ts) return "—";
const diff = Date.now() - ts;
const s = Math.floor(diff / 1000);
if (s < 60) return `${s}s ago`;
const m = Math.floor(s / 60);
if (m < 60) return `${m}m ago`;
const h = Math.floor(m / 60);
if (h < 24) return `${h}h ago`;
return new Date(ts).toLocaleString();
}
function SessionAnalysis({ levers, setLevers }) {
const [data, setData] = React.useState(() => {
try { return JSON.parse(localStorage.getItem(ANALYSIS_CACHE_KEY) || "null"); } catch (e) { return null; }
});
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null);
const [weights, setWeights] = React.useState({ quali: 30, sq: 20, sprint: 40, fp1: 10 });
const [collapsed, setCollapsed] = React.useState(false);
const [method, setMethod] = React.useState("blend");
const fetchAll = async () => {
setLoading(true);
setError(null);
// OpenF1 caps at 3 requests/second. Fetch sequentially with a small spacing
// and retry once on a rate-limit response.
const sleep = ms => new Promise(r => setTimeout(r, ms));
const fetchJson = async (url, attempt = 0) => {
const res = await fetch(url);
const body = await res.json();
if (!Array.isArray(body) && body && body.error) {
if (attempt < 2) { await sleep(800); return fetchJson(url, attempt + 1); }
throw new Error(body.error + (body.detail ? ` (${body.detail})` : ""));
}
return body;
};
try {
const quali = await fetchJson(`https://api.openf1.org/v1/session_result?session_key=${SESSIONS.quali}`);
await sleep(350);
const sq = await fetchJson(`https://api.openf1.org/v1/session_result?session_key=${SESSIONS.sq}`);
await sleep(350);
const sprint = await fetchJson(`https://api.openf1.org/v1/session_result?session_key=${SESSIONS.sprint}`);
await sleep(350);
const fp1Laps = await fetchJson(`https://api.openf1.org/v1/laps?session_key=${SESSIONS.fp1}`);
// Reduce laps → fastest lap per driver (filter out unrealistic times)
const fp1Best = {};
for (const l of fp1Laps) {
const n = l.driver_number, dur = l.lap_duration;
if (!n || !dur || dur < 80 || dur > 110) continue;
if (fp1Best[n] == null || dur < fp1Best[n]) fp1Best[n] = dur;
}
const fp1Ranked = Object.entries(fp1Best)
.sort((a, b) => a[1] - b[1])
.map(([n, t], i) => ({ driver_number: +n, position: i + 1, lap: t }));
const next = { quali, sq, sprint, fp1: fp1Ranked, fetchedAt: Date.now() };
setData(next);
try { localStorage.setItem(ANALYSIS_CACHE_KEY, JSON.stringify(next)); } catch (e) {}
window.dispatchEvent(new CustomEvent("f1apex:analysisLoaded"));
} catch (e) {
setError(e.message || String(e));
}
setLoading(false);
};
React.useEffect(() => { if (!data) fetchAll(); }, []);
// Build per-driver row: ranks across all 4 sessions + projection from selected method
const rows = React.useMemo(() => {
if (!data) return [];
const rankFor = (arr, key = "position") => {
const m = {};
if (!Array.isArray(arr)) return m;
for (const r of arr) {
const id = DRIVER_BY_NUM[r.driver_number];
if (id && r[key] != null) m[id] = r[key];
}
return m;
};
// OpenF1 occasionally returns position=null for drivers promoted through a
// knockout without a clean lap (Hadjar). Fall back to verified grid `start`.
const qR = rankFor(data.quali);
for (const d of DRIVERS) if (qR[d.id] == null) qR[d.id] = d.start;
const sqR = rankFor(data.sq);
const spR = rankFor(data.sprint);
const fp1R = rankFor(data.fp1);
// Fill missing ranks (DNF / no time) with P22 so the math has a number.
for (const d of DRIVERS) {
if (sqR[d.id] == null) sqR[d.id] = 22;
if (spR[d.id] == null) spR[d.id] = 22;
if (fp1R[d.id] == null) fp1R[d.id] = 22;
}
const ranks = { q: qR, sq: sqR, sp: spR, fp: fp1R };
const lapTimes = {};
if (Array.isArray(data.fp1)) for (const r of data.fp1) {
const id = DRIVER_BY_NUM[r.driver_number];
if (id && r.lap != null) lapTimes[id] = r.lap;
}
const ids = DRIVERS.map(d => d.id);
const teamOf = {}; DRIVERS.forEach(d => teamOf[d.id] = d.team);
let scoreMap; // {id: numeric score, lower = better}
let scoreLabel = "SCORE";
if (method === "blend") {
scoreMap = _weightedRank(ranks, weights);
} else if (method === "qmirror") {
scoreMap = {};
ids.forEach(id => scoreMap[id] = qR[id]);
scoreLabel = "Q";
} else if (method === "qblend") {
scoreMap = _weightedRank(ranks, { quali: 1.56, sq: 0.38, sprint: 0.37, fp1: 0.29 });
} else if (method === "pl") {
const sortedByRank = (rd) => [...ids].sort((a, b) => rd[a] - rd[b]);
const orders = [sortedByRank(qR), sortedByRank(sqR), sortedByRank(spR), sortedByRank(fp1R)];
const lambda = _fitPlackettLuce(orders, ids);
// Higher λ = better, so flip sign for "lower = better" convention
scoreMap = {}; ids.forEach(id => scoreMap[id] = -Math.log(Math.max(lambda[id], 1e-9)));
scoreLabel = "−log λ";
} else if (method === "pace") {
const lambda = _pacePL(lapTimes, ids);
scoreMap = {}; ids.forEach(id => scoreMap[id] = -Math.log(Math.max(lambda[id], 1e-9)));
scoreLabel = "−log λ";
} else if (method === "mc") {
// Base λ from Q-blended ranks → exp curve
const base = _weightedRank(ranks, { quali: 1.56, sq: 0.38, sprint: 0.37, fp1: 0.29 });
const lambda = {};
ids.forEach(id => lambda[id] = Math.exp(-(base[id] - 11) * 0.18));
scoreMap = _monteCarloAvgRank(lambda, ids, teamOf);
scoreLabel = "AVG POS";
}
return DRIVERS.map(d => {
return {
driver: d, q: qR[d.id], sq: sqR[d.id], sp: spR[d.id], fp: fp1R[d.id],
score: scoreMap[d.id],
};
}).sort((a, b) => a.score - b.score)
.map((r, i) => ({ ...r, projected: i + 1, scoreLabel }));
}, [data, weights, method]);
const importToGrid = () => {
if (!rows.length) return;
setLevers(prev => {
const next = { ...prev };
for (const r of rows) {
next[r.driver.id] = { ...prev[r.driver.id], finish: r.projected };
}
return next;
});
};
const setW = (k, v) => setWeights(w => ({ ...w, [k]: Math.max(0, Math.min(100, +v || 0)) }));
return (
⓪
SESSION ANALYSIS
live OpenF1 data · weighted rank → predicted finish
{loading ? "FETCHING…" : data ? "REFRESH" : "FETCH"}
{data && (
setCollapsed(c => !c)}>
{collapsed ? "EXPAND" : "COLLAPSE"}
)}
{error && (
⚠ {error}
RETRY
)}
{data && !collapsed && (
30 * 60 * 1000 ? "stale" : "")} />
OpenF1 · {data.quali?.length || 0} drivers · fetched {formatRelativeTime(data.fetchedAt)}
·
FP1 · SQ · SPRINT · QUALI all loaded
)}
{!collapsed && data && (
<>
PROJECTION MODEL
{PROJECTION_METHODS.map(m => (
setMethod(m.id)}
title={m.desc}>
{m.short}
))}
{PROJECTION_METHODS.find(m => m.id === method)?.desc}
{method === "blend" ? (
{[
["quali", RACE.sessionLabels.quali, RACE.sessionLabelsSub.quali],
["sq", RACE.sessionLabels.sq, RACE.sessionLabelsSub.sq],
["sprint", RACE.sessionLabels.sprint, RACE.sessionLabelsSub.sprint],
["fp1", RACE.sessionLabels.fp1, RACE.sessionLabelsSub.fp1],
].map(([k, label, sub]) => (
{label}{sub}
setW(k, e.target.value)} />
{weights[k]}%
))}
) : (
FIXED FORMULA
This template uses a published model — sliders disabled. Switch to BLEND for tunable weights.
)}
↓ IMPORT TO PREDICTED FINISH
PROJ
DRIVER
TEAM
{RACE.sessionLabelsShort.quali}
{RACE.sessionLabelsShort.sq}
{RACE.sessionLabelsShort.sprint}
{RACE.sessionLabelsShort.fp1}
{rows[0]?.scoreLabel || "SCORE"}
{rows.map(r => {
const t = TEAMS[r.driver.team];
return (
P{r.projected}
{t.short}
{r.q}
{r.sq}
{r.sp}
{r.fp}
{r.score != null ? r.score.toFixed(2) : "—"}
);
})}
)}
);
}
// ===========================================================
// MAIN APP
// ===========================================================
function App() {
const persisted = React.useMemo(() => loadPersisted(), []);
const [levers, setLevers] = React.useState(() => persisted?.levers || makeInitialLevers());
const [conState, setConState] = React.useState(() => persisted?.conState || makeInitialConState());
const [salaryCap, setSalaryCap] = React.useState(() => persisted?.salaryCap || 50000);
const [topN, setTopN] = React.useState(() => persisted?.topN || 25);
const [openPanel, setOpenPanel] = React.useState(null);
const [drag, setDrag] = React.useState(null);
const [results, setResults] = React.useState(null);
const [running, setRunning] = React.useState(false);
const [view, setView] = React.useState("grid");
const dragRef = React.useRef(null);
dragRef.current = drag;
React.useEffect(() => { persist({ levers, conState, salaryCap, topN }); }, [levers, conState, salaryCap, topN]);
const updateLever = (id, patch) => setLevers(prev => ({ ...prev, [id]: { ...prev[id], ...patch } }));
const updateConState = (team, patch) => setConState(prev => ({ ...prev, [team]: { ...prev[team], ...patch } }));
// Set fastest lap on a single driver — clears it from everyone else.
const setFastestLap = (id) => setLevers(prev => {
const next = {};
const target = !prev[id].fastestLap;
for (const d of DRIVERS) {
next[d.id] = { ...prev[d.id], fastestLap: d.id === id ? target : false };
}
return next;
});
// Auto-fill laps-led + fastest-lap based on empirical 2022-2024 ground-effect-era data.
//
// Two key findings from the research:
// 1. Laps-led correlates with START position more than FINISH (ρ −0.62 vs −0.55).
// A driver who starts pole but DNFs at lap 50 still led 50 laps. We blend 65%
// start / 35% finish.
// 2. FL goes to the race winner ~36% of races (modal outcome). For a deterministic
// single-pick auto-fill, winner is the right answer. User can manually re-assign
// via the Step 2 panel for "punt FL" scenarios.
//
// Per-rank share array is sourced from STATS F1 season totals (2022-2024) cross-
// referenced with WDC standings. Sums to 1.0 across all 22 ranks.
const autoFillRaceInputs = () => {
const TOTAL_LAPS = RACE.totalLaps; // race-specific
const SHARE = [
0.520, 0.165, 0.095, 0.060, 0.045,
0.030, 0.020, 0.015, 0.012, 0.010,
0.008, 0.006, 0.004, 0.003, 0.002,
0.002, 0.001, 0.001, 0.001, 0.000,
0.000, 0.000,
];
const startWeight = 0.65;
const finishWeight = 0.35;
const ordered = [...DRIVERS].sort((a, b) => levers[a.id].finish - levers[b.id].finish);
const winnerId = ordered[0]?.id;
// Blended per-driver share: 65% from start position, 35% from finish position.
const rawShare = {};
for (const d of DRIVERS) {
const sIdx = Math.min(21, Math.max(0, d.start - 1));
const fIdx = Math.min(21, Math.max(0, levers[d.id].finish - 1));
rawShare[d.id] = startWeight * SHARE[sIdx] + finishWeight * SHARE[fIdx];
}
// Normalize and convert to integer lap counts.
const total = Object.values(rawShare).reduce((a, b) => a + b, 0) || 1;
const laps = {};
let assigned = 0;
for (const d of DRIVERS) {
laps[d.id] = Math.round((rawShare[d.id] / total) * TOTAL_LAPS);
assigned += laps[d.id];
}
// Reconcile rounding error onto the projected winner.
if (winnerId) laps[winnerId] = Math.max(0, laps[winnerId] + (TOTAL_LAPS - assigned));
setLevers(prev => {
const next = {};
for (const d of DRIVERS) {
next[d.id] = { ...prev[d.id], lapsLed: laps[d.id], fastestLap: d.id === winnerId };
}
return next;
});
};
const onChipMouseDown = (e, driverId) => {
if (e.button !== 0) return;
if (e.target.closest(".chip-gear")) return;
e.preventDefault();
const rect = e.currentTarget.getBoundingClientRect();
setDrag({
driverId,
x: e.clientX, y: e.clientY,
ox: e.clientX - rect.left, oy: e.clientY - rect.top,
w: rect.width, h: rect.height,
hoverPos: null
});
};
React.useEffect(() => {
if (!drag) return;
const onMove = (e) => {
const slot = document.elementFromPoint(e.clientX, e.clientY)?.closest("[data-finish-slot]");
const hoverPos = slot ? +slot.dataset.finishSlot : null;
setDrag(d => d ? { ...d, x: e.clientX, y: e.clientY, hoverPos } : d);
};
const onUp = () => {
const cur = dragRef.current;
if (cur && cur.hoverPos != null) {
const newPos = cur.hoverPos;
// Shift-style reorder (NOT swap): drivers between source and target slide
// toward the source by one position to make room.
setLevers(prev => {
const oldPos = prev[cur.driverId].finish;
if (oldPos === newPos) return prev;
const byFinish = {};
for (const d of DRIVERS) byFinish[prev[d.id].finish] = d.id;
const next = { ...prev };
if (oldPos > newPos) {
// Moving up: drivers in [newPos, oldPos-1] shift down by 1
for (let p = oldPos - 1; p >= newPos; p--) {
const dId = byFinish[p];
if (dId) next[dId] = { ...prev[dId], finish: p + 1 };
}
} else {
// Moving down: drivers in [oldPos+1, newPos] shift up by 1
for (let p = oldPos + 1; p <= newPos; p++) {
const dId = byFinish[p];
if (dId) next[dId] = { ...prev[dId], finish: p - 1 };
}
}
next[cur.driverId] = { ...prev[cur.driverId], finish: newPos };
return next;
});
}
setDrag(null);
};
window.addEventListener("mousemove", onMove);
window.addEventListener("mouseup", onUp);
return () => {
window.removeEventListener("mousemove", onMove);
window.removeEventListener("mouseup", onUp);
};
}, [drag != null]);
const execute = () => {
setRunning(true);
setView("results");
setTimeout(() => {
const r = findTopLineups({ levers, conState, salaryCap, topN });
setResults(r);
setRunning(false);
}, 350);
};
const resetFinish = () => {
setLevers(prev => {
const n = { ...prev };
for (const d of DRIVERS) n[d.id] = { ...prev[d.id], finish: d.start };
return n;
});
};
const totalDelta = DRIVERS.reduce((s, d) => s + Math.abs(d.start - levers[d.id].finish), 0);
return (
{view === "grid" && (
)}
{view === "forecast" && (
setView("grid")} />
)}
{view === "results" && (
setView("grid")}
/>
)}
{drag && (() => {
const driver = DRIVERS.find(d => d.id === drag.driverId);
return (
{}} onTogglePanel={() => {}}
/>
);
})()}
);
}
// ===========================================================
// HEADER
// ===========================================================
function Header({ view, setView, hasResults }) {
return (
);
}
// ===========================================================
// GRID VIEW
// ===========================================================
function GridView(props) {
const {
levers, updateLever, setLevers, setFastestLap, autoFillRaceInputs,
conState, updateConState,
openPanel, setOpenPanel, onChipMouseDown,
drag, salaryCap, setSalaryCap, topN, setTopN,
execute, resetFinish, totalDelta
} = props;
const startSorted = [...DRIVERS].sort((a, b) => a.start - b.start);
const driverByFinish = {};
for (const d of DRIVERS) driverByFinish[levers[d.id].finish] = d;
// ============== STEP NAV STATE ==============
const [activeStep, setActiveStep] = React.useState(0);
const [analysisTick, setAnalysisTick] = React.useState(0);
React.useEffect(() => {
const handler = () => setAnalysisTick(t => t + 1);
window.addEventListener("f1apex:analysisLoaded", handler);
return () => window.removeEventListener("f1apex:analysisLoaded", handler);
}, []);
React.useEffect(() => {
const sels = [".session-analysis", ".grid-cols", ".race-inputs", ".con-strip"];
const els = sels.map(s => document.querySelector(s)).filter(Boolean);
if (!els.length) return;
const obs = new IntersectionObserver((entries) => {
// Pick the entry closest to the top that's intersecting
const visible = entries.filter(e => e.isIntersecting)
.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
if (visible.length) {
const idx = sels.indexOf("." + visible[0].target.className.split(" ")[0]);
if (idx >= 0) setActiveStep(idx);
}
}, { rootMargin: "-30% 0px -55% 0px", threshold: 0 });
els.forEach(el => obs.observe(el));
return () => obs.disconnect();
}, []);
// Done-state heuristics for step indicators
const stepDone = {
0: false, // session analysis: needs API data — set below from SessionAnalysis result
1: DRIVERS.some(d => levers[d.id].finish !== d.start),
2: DRIVERS.some(d => levers[d.id].lapsLed > 0 || levers[d.id].fastestLap || !levers[d.id].classified),
3: true, // constructor pool is auto-inferred so always "done"
};
const stepNavSteps = [
{ num: "0", label: "ANALYSIS", target: ".session-analysis", done: !!localStorage.getItem(ANALYSIS_CACHE_KEY), desc: "Live OpenF1 weekend signals + projection templates" },
{ num: "1", label: "FINISH ORDER", target: ".grid-cols", done: stepDone[1], desc: "Drag drivers to set the predicted finishing order" },
{ num: "2", label: "RACE INPUTS", target: ".race-inputs", done: stepDone[2], desc: "Laps led · fastest lap · DNFs" },
{ num: "3", label: "CONSTRUCTORS", target: ".con-strip", done: stepDone[3], desc: "Auto-fired bonuses · lock or exclude" },
];
const scrollToStep = (sel) => {
const el = document.querySelector(sel);
if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
};
const startRefs = React.useRef({});
const finRefs = React.useRef({});
const containerRef = React.useRef(null);
const [tick, setTick] = React.useState(0);
React.useEffect(() => {
const onResize = () => setTick(t => t + 1);
window.addEventListener("resize", onResize);
const ro = new ResizeObserver(onResize);
if (containerRef.current) ro.observe(containerRef.current);
return () => { window.removeEventListener("resize", onResize); ro.disconnect(); };
}, []);
React.useEffect(() => { setTick(t => t + 1); }, [levers, drag]);
const lines = React.useMemo(() => {
if (!containerRef.current) return [];
const cb = containerRef.current.getBoundingClientRect();
const out = [];
for (const d of DRIVERS) {
const sEl = startRefs.current[d.id];
const fEl = finRefs.current[levers[d.id].finish];
if (!sEl || !fEl) continue;
const sR = sEl.getBoundingClientRect();
const fR = fEl.getBoundingClientRect();
const x1 = sR.right - cb.left;
const y1 = sR.top + sR.height / 2 - cb.top;
const x2 = fR.left - cb.left;
const y2 = fR.top + fR.height / 2 - cb.top;
out.push({ id: d.id, color: TEAMS[d.team].color, x1, y1, x2, y2, delta: d.start - levers[d.id].finish });
}
return out;
}, [levers, tick]);
// Race inputs sort = predicted finish order
const finishOrdered = [...DRIVERS].sort((a, b) => levers[a.id].finish - levers[b.id].finish);
const totalLapsLed = DRIVERS.reduce((s, d) => s + (levers[d.id].lapsLed || 0), 0);
const flDriver = DRIVERS.find(d => levers[d.id].fastestLap);
const dnfCount = DRIVERS.filter(d => !levers[d.id].classified).length;
return (
{lines.map(l => {
const cx1 = l.x1 + (l.x2 - l.x1) * 0.5;
const path = `M ${l.x1} ${l.y1} C ${cx1} ${l.y1} ${cx1} ${l.y2} ${l.x2} ${l.y2}`;
const isMoved = l.delta !== 0;
return (
①
SET PREDICTED FINISH ORDER
drag drivers in the right column · everyone else slides into place
official qualifying result
{startSorted.map(d => (
startRefs.current[d.id] = el}>
{String(d.start).padStart(2, "0")}
{d.start <= 3 &&
}
onChipMouseDown(e, d.id)}
onTogglePanel={() => setOpenPanel(openPanel === d.id ? null : d.id)}
panelOpen={openPanel === d.id}
/>
))}
{Array.from({ length: 22 }).map((_, i) => {
const pos = i + 1;
const d = DRIVERS.find(dd => dd.start === pos);
const moved = d && (levers[d.id].finish !== d.start);
const delta = d ? d.start - levers[d.id].finish : 0;
return (
{moved && (
0 ? "pos" : "neg")}>
{delta > 0 ? "▲" : "▼"} {Math.abs(delta)}
)}
);
})}
PREDICTED FINISH
drag drivers to reorder · reset
{Array.from({ length: 22 }).map((_, i) => {
const pos = i + 1;
const d = driverByFinish[pos];
const isHover = drag && drag.hoverPos === pos;
return (
finRefs.current[pos] = el}
data-finish-slot={pos}>
{String(pos).padStart(2, "0")}
{pos <= 3 &&
}
{d ? (
onChipMouseDown(e, d.id)}
onTogglePanel={() => setOpenPanel(openPanel === d.id ? null : d.id)}
panelOpen={openPanel === d.id}
deltaTint="auto"
/>
) : (
drop driver
)}
{openPanel && d && openPanel === d.id && (
updateLever(d.id, p)}
onClose={() => setOpenPanel(null)} />
)}
);
})}
{/* ============== STEP 2 — RACE INPUTS ============== */}
②
ASSIGN RACE INPUTS
set laps led + fastest lap + DNFs · everything else is auto-inferred from the finish order
LAPS ASSIGNED
{totalLapsLed} / {RACE.totalLaps}
{totalLapsLed === RACE.totalLaps ? "✓ FULL RACE" : totalLapsLed < RACE.totalLaps ? `${RACE.totalLaps - totalLapsLed} UNASSIGNED` : `+${totalLapsLed - RACE.totalLaps} OVER`}
FASTEST LAP {flDriver ? flDriver.name : "— none —"}
DNFs {dnfCount}
⚡ AUTO-FILL FROM FINISH ORDER
{finishOrdered.map(d => (
updateLever(d.id, p)}
onSetFastestLap={() => setFastestLap(d.id)}
/>
))}
{/* ============== CONSTRUCTORS ============== */}
③
CONSTRUCTOR POOL
bonuses auto-fire from finish order · use lock / exclude to bias the optimizer
{CONSTRUCTORS.map(c => {
const t = TEAMS[c.team];
const cs = conState[c.team];
const teamDrvs = DRIVERS.filter(d => d.team === c.team)
.sort((a, b) => levers[a.id].finish - levers[b.id].finish);
const allClassified = teamDrvs.every(d => levers[d.id].classified);
const allTop10 = teamDrvs.every(d => levers[d.id].finish <= 10);
const allPodium = teamDrvs.every(d => levers[d.id].finish <= 3);
const pts = constructorPoints(c, levers);
return (
{t.short}
{fmt$(c.salary)} · {pts.toFixed(1)} PTS
{teamDrvs.map(d => {
const lev = levers[d.id];
const posClass = lev.finish <= 3 ? "podium" : lev.finish <= 10 ? "top10" : "";
return (
{d.name}
P{lev.finish}
{!lev.classified ? "DNF" : lev.fastestLap ? "FL" : ""}
);
})}
BC +2
T10 +5
POD +3
updateConState(c.team, { lock: !cs.lock, exclude: false })}>LOCK
updateConState(c.team, { exclude: !cs.exclude, lock: false })}>EXC
);
})}
{/* ============== EXECUTE ============== */}
TOTAL Δ POSITIONS
{totalDelta}
▶ EXECUTE OPTIMIZER
);
}
// ===========================================================
// RACE FORECAST VIEW — full-screen multi-sim outcome visualization
// Combines: ensemble of 6 projection methods (consensus rank + disagreement),
// 15k Monte Carlo distribution (win/podium/top10/DNF probabilities),
// and the user's curated finish prediction (expected DK points).
// ===========================================================
const FORECAST_METHODS = [
{ id: "blend", short: "BLEND", full: "Weighted Blend" },
{ id: "qmirror", short: "Q", full: "Q-Mirror" },
{ id: "qblend", short: "QB", full: "Q-Blended" },
{ id: "pl", short: "PL", full: "Plackett-Luce" },
{ id: "pace", short: "PACE", full: "Pace-based" },
{ id: "mc", short: "MC", full: "Monte Carlo" },
];
function ForecastView({ levers, onBack }) {
const [analysisData, setAnalysisData] = React.useState(() => {
try { return JSON.parse(localStorage.getItem(ANALYSIS_CACHE_KEY) || "null"); } catch (e) { return null; }
});
React.useEffect(() => {
const handler = () => {
try { setAnalysisData(JSON.parse(localStorage.getItem(ANALYSIS_CACHE_KEY) || "null")); } catch (e) {}
};
window.addEventListener("f1apex:analysisLoaded", handler);
return () => window.removeEventListener("f1apex:analysisLoaded", handler);
}, []);
const forecast = React.useMemo(() => {
if (!analysisData) return null;
// Build ranks dict from cached session results
const rankFor = (arr, key = "position") => {
const m = {};
if (!Array.isArray(arr)) return m;
for (const r of arr) {
const id = DRIVER_BY_NUM[r.driver_number];
if (id && r[key] != null) m[id] = r[key];
}
return m;
};
const qR = rankFor(analysisData.quali);
for (const d of DRIVERS) if (qR[d.id] == null) qR[d.id] = d.start;
const sqR = rankFor(analysisData.sq);
const spR = rankFor(analysisData.sprint);
const fp1R = rankFor(analysisData.fp1);
for (const d of DRIVERS) {
if (sqR[d.id] == null) sqR[d.id] = 22;
if (spR[d.id] == null) spR[d.id] = 22;
if (fp1R[d.id] == null) fp1R[d.id] = 22;
}
const ranks = { q: qR, sq: sqR, sp: spR, fp: fp1R };
const lapTimes = {};
if (Array.isArray(analysisData.fp1)) for (const r of analysisData.fp1) {
const id = DRIVER_BY_NUM[r.driver_number];
if (id && r.lap != null) lapTimes[id] = r.lap;
}
return _buildForecast({ ranks, lapTimes, levers, drivers: DRIVERS, teams: TEAMS });
}, [analysisData, levers]);
if (!forecast) {
return (
NO SESSION DATA
Visit ① GRID & INPUTS first to fetch FP1 / Sprint / Quali sessions from OpenF1.
← BACK TO GRID
);
}
// Constructor outlook
const conOutlook = CONSTRUCTORS.map(c => {
const t = TEAMS[c.team];
const teamDrvs = DRIVERS.filter(d => d.team === c.team);
const ensembleAvg = teamDrvs.reduce((s, d) => s + forecast.perDriver[d.id].meanRank, 0) / teamDrvs.length;
const podiumPct = teamDrvs.reduce((s, d) => s + forecast.perDriver[d.id].mc.podiumPct, 0) / teamDrvs.length;
const winSum = teamDrvs.reduce((s, d) => s + forecast.perDriver[d.id].mc.winPct, 0);
return { team: c.team, name: t.short, color: t.color, logo: t.logo, ensembleAvg, podiumPct, winSum };
}).sort((a, b) => a.ensembleAvg - b.ensembleAvg);
return (
RACE FORECAST · MULTI-SIM ENSEMBLE
{RACE.name.toUpperCase()} {RACE.year}
6 projection models · 15,000 Monte Carlo simulations · {DRIVERS.length} drivers · {RACE.totalLaps} laps
{(forecast.agreement * 100).toFixed(0)}%
ENSEMBLE AGREEMENT
{forecast.mostContested.driver.name.slice(0, 8).toUpperCase()}
MOST CONTESTED · ±{forecast.mostContested.stdRank.toFixed(1)}
{forecast.mostAgreed.driver.name.slice(0, 8).toUpperCase()}
STRONGEST CONSENSUS · ±{forecast.mostAgreed.stdRank.toFixed(1)}
PREDICTED FINISH
{forecast.ranked.map(p =>
MODEL COMPARISON · WHICH MODEL PUTS EACH DRIVER WHERE
DRIVER
BLEND
{RACE.sessionLabelsShort.quali}
QB
PL
PACE
MC
±σ
{forecast.ranked.map(p => {
const t = TEAMS[p.driver.team];
return (
{FORECAST_METHODS.map(m => {
const r = p.ranksByMethod[m.id];
const consensus = Math.round(p.meanRank);
const dev = Math.abs(r - consensus);
const cls = dev <= 1 ? "ok" : dev <= 3 ? "warn" : "bad";
return {r} ;
})}
{p.stdRank.toFixed(1)}
);
})}
CONSTRUCTOR OUTLOOK
{conOutlook.map(c => (
{c.name}
avg P{c.ensembleAvg.toFixed(1)}
{(c.podiumPct * 100).toFixed(0)}% pod
))}
);
}
function DriverForecastCard({ entry }) {
const { driver, userFinish, meanRank, stdRank, mc, expectedPts, displayRank } = entry;
const team = TEAMS[driver.team];
const ensembleDelta = Math.round(meanRank) - userFinish;
return (
P{userFinish}
{driver.name}
{team.short}
{expectedPts.toFixed(1)}
PROJ DK PTS
ENSEMBLE P{meanRank.toFixed(1)} ±{stdRank.toFixed(1)}
{ensembleDelta !== 0 && (
{ensembleDelta < 0 ? "▲" : "▼"} {Math.abs(ensembleDelta)} vs your call
)}
);
}
function ProbBar({ label, value, color, inverted }) {
const pct = (value * 100).toFixed(value < 0.1 ? 1 : 0);
return (
);
}
// ===========================================================
// RESULTS VIEW
// ===========================================================
function ResultsView({ results, running, salaryCap, onBack }) {
const [resView, setResView] = React.useState("table");
const [sortKey, setSortKey] = React.useState("pts");
const [sortDir, setSortDir] = React.useState("desc");
const [pSortKey, setPSortKey] = React.useState("count");
const [pSortDir, setPSortDir] = React.useState("desc");
const [cSortKey, setCSortKey] = React.useState("count");
const [cSortDir, setCSortDir] = React.useState("desc");
const rows = React.useMemo(() => {
if (!results || !results.kept) return [];
return results.kept.map((lu, i) => {
const cptDriver = DRIVERS.find(d => d.id === lu.captain.id);
const flexAll = [...lu.lockedFlex, ...lu.flex];
const conTeam = TEAMS[lu.constructor.team];
const value = lu.totalSalary > 0 ? (lu.totalSalary / lu.totalPts) : 0;
const ptsPer1k = lu.totalSalary > 0 ? (lu.totalPts / (lu.totalSalary / 1000)) : 0;
const leftover = salaryCap - lu.totalSalary;
return {
idx: i, rank: i + 1, lu,
captain: cptDriver.name, captainTeam: cptDriver.team,
flex: flexAll.map(f => DRIVERS.find(d => d.id === f.id).name).join(" · "),
constructor: conTeam.short,
salary: lu.totalSalary, pts: lu.totalPts,
value, ptsPer1k, leftover,
};
});
}, [results, salaryCap]);
const sortedRows = React.useMemo(() => {
const arr = [...rows];
arr.sort((a, b) => {
let av = a[sortKey], bv = b[sortKey];
if (typeof av === "string") { av = av.toLowerCase(); bv = bv.toLowerCase(); }
if (av < bv) return sortDir === "asc" ? -1 : 1;
if (av > bv) return sortDir === "asc" ? 1 : -1;
return 0;
});
return arr;
}, [rows, sortKey, sortDir]);
const playerStats = React.useMemo(() => {
if (!results || !results.kept) return [];
const m = new Map();
for (const d of DRIVERS) m.set(d.id, { driver: d, count: 0, cptCount: 0, sumPts: 0, sumSal: 0, raw: null });
results.kept.forEach(lu => {
const cptId = lu.captain.id;
const cptObj = m.get(cptId);
cptObj.count++; cptObj.cptCount++;
cptObj.sumPts += lu.captain.pts * SCORING.captainMult;
cptObj.sumSal += lu.captain.salary * SCORING.captainMult;
cptObj.raw = lu.captain;
[...lu.lockedFlex, ...lu.flex].forEach(f => {
const o = m.get(f.id);
o.count++; o.sumPts += f.pts; o.sumSal += f.salary; o.raw = f;
});
});
const total = results.kept.length;
return [...m.values()]
.filter(o => o.count > 0)
.map(o => ({
id: o.driver.id, name: o.driver.name, team: o.driver.team, salary: o.driver.salary,
pts: o.raw ? o.raw.pts : 0,
count: o.count, exposure: o.count / total,
cptCount: o.cptCount, cptExposure: o.cptCount / total,
avgPts: o.sumPts / o.count,
ptsPer1k: o.driver.salary > 0 ? (o.raw.pts / (o.driver.salary / 1000)) : 0,
}));
}, [results]);
const conStats = React.useMemo(() => {
if (!results || !results.kept) return [];
const m = new Map();
for (const c of CONSTRUCTORS) m.set(c.team, { team: c.team, salary: c.salary, count: 0, sumPts: 0, raw: null });
results.kept.forEach(lu => {
const o = m.get(lu.constructor.team);
o.count++; o.sumPts += lu.constructor.pts; o.raw = lu.constructor;
});
const total = results.kept.length;
return [...m.values()]
.filter(o => o.count > 0)
.map(o => ({
team: o.team, name: TEAMS[o.team].short, color: TEAMS[o.team].color, logo: TEAMS[o.team].logo,
salary: o.salary, pts: o.raw ? o.raw.pts : 0,
count: o.count, exposure: o.count / total,
ptsPer1k: o.salary > 0 ? ((o.raw ? o.raw.pts : 0) / (o.salary / 1000)) : 0,
}));
}, [results]);
const sortBy = (arr, k, dir) => {
const a = [...arr];
a.sort((x, y) => {
let av = x[k], bv = y[k];
if (typeof av === "string") { av = av.toLowerCase(); bv = bv.toLowerCase(); }
if (av < bv) return dir === "asc" ? -1 : 1;
if (av > bv) return dir === "asc" ? 1 : -1;
return 0;
});
return a;
};
const sortedPlayers = React.useMemo(() => sortBy(playerStats, pSortKey, pSortDir), [playerStats, pSortKey, pSortDir]);
const sortedCons = React.useMemo(() => sortBy(conStats, cSortKey, cSortDir), [conStats, cSortKey, cSortDir]);
if (running) {
return (
SOLVING LINEUP COMBINATIONS…
enumerating captain × constructor × flex permutations
);
}
if (!results || !results.kept || results.kept.length === 0) {
return (
NO VALID LINEUPS
{results?.error || "Check salary cap, locks/excludes, and team-rule conflicts."}
← BACK TO GRID
);
}
const onSort = (k) => {
if (sortKey === k) setSortDir(d => d === "asc" ? "desc" : "asc");
else { setSortKey(k); setSortDir(k === "value" ? "asc" : "desc"); }
};
const toggleSort = (cur, dir, setK, setD, k, defaultDir = "desc") => {
if (cur === k) setD(dir === "asc" ? "desc" : "asc");
else { setK(k); setD(defaultDir); }
};
const SortHead = ({ k, children, align }) => (
onSort(k)} className={"sortable " + (align === "right" ? "r" : "")}>
{children}
{sortKey === k ? (sortDir === "asc" ? "▲" : "▼") : ""}
);
return (
← BACK TO GRID
setResView("table")}>LINEUPS
setResView("players")}>DRIVERS
setResView("cons")}>CONSTRUCTORS
setResView("cards")}>CARDS
EVALUATED {results.evaluated.toLocaleString()}
RETURNED {results.kept.length}
CAP {fmt$(salaryCap)}
{resView === "table" ? (
#
CAPTAIN
FLEX (4)
CONSTRUCTOR
SALARY
LEFT
PROJ PTS
PTS/$1K
$/PT
{sortedRows.map(r => {
const cptT = TEAMS[r.captainTeam];
return (
{String(r.rank).padStart(2, "0")}
{r.flex}
{r.constructor}
{fmt$(r.salary)}
{fmt$(r.leftover)}
{r.pts.toFixed(1)}
{r.ptsPer1k.toFixed(2)}
${r.value.toFixed(0)}
);
})}
) : resView === "players" ? (
toggleSort(pSortKey, pSortDir, setPSortKey, setPSortDir, "name", "asc")} className="sortable">DRIVER {pSortKey==="name"?(pSortDir==="asc"?"▲":"▼"):""}
TEAM
toggleSort(pSortKey, pSortDir, setPSortKey, setPSortDir, "salary")} className="sortable r">SALARY {pSortKey==="salary"?(pSortDir==="asc"?"▲":"▼"):""}
toggleSort(pSortKey, pSortDir, setPSortKey, setPSortDir, "pts")} className="sortable r">PROJ PTS {pSortKey==="pts"?(pSortDir==="asc"?"▲":"▼"):""}
toggleSort(pSortKey, pSortDir, setPSortKey, setPSortDir, "ptsPer1k")} className="sortable r">PTS/$1K {pSortKey==="ptsPer1k"?(pSortDir==="asc"?"▲":"▼"):""}
toggleSort(pSortKey, pSortDir, setPSortKey, setPSortDir, "count")} className="sortable r">LINEUPS {pSortKey==="count"?(pSortDir==="asc"?"▲":"▼"):""}
toggleSort(pSortKey, pSortDir, setPSortKey, setPSortDir, "exposure")} className="sortable r">EXPOSURE {pSortKey==="exposure"?(pSortDir==="asc"?"▲":"▼"):""}
toggleSort(pSortKey, pSortDir, setPSortKey, setPSortDir, "cptCount")} className="sortable r">CAPT × {pSortKey==="cptCount"?(pSortDir==="asc"?"▲":"▼"):""}
{sortedPlayers.map(p => {
const t = TEAMS[p.team];
return (
{t.short}
{fmt$(p.salary)}
{p.pts.toFixed(1)}
{p.ptsPer1k.toFixed(2)}
{p.count}
{(p.exposure*100).toFixed(0)}%
{p.cptCount > 0 ? p.cptCount : — }
);
})}
) : resView === "cons" ? (
toggleSort(cSortKey, cSortDir, setCSortKey, setCSortDir, "name", "asc")} className="sortable">CONSTRUCTOR {cSortKey==="name"?(cSortDir==="asc"?"▲":"▼"):""}
toggleSort(cSortKey, cSortDir, setCSortKey, setCSortDir, "salary")} className="sortable r">SALARY {cSortKey==="salary"?(cSortDir==="asc"?"▲":"▼"):""}
toggleSort(cSortKey, cSortDir, setCSortKey, setCSortDir, "pts")} className="sortable r">PROJ PTS {cSortKey==="pts"?(cSortDir==="asc"?"▲":"▼"):""}
toggleSort(cSortKey, cSortDir, setCSortKey, setCSortDir, "ptsPer1k")} className="sortable r">PTS/$1K {cSortKey==="ptsPer1k"?(cSortDir==="asc"?"▲":"▼"):""}
toggleSort(cSortKey, cSortDir, setCSortKey, setCSortDir, "count")} className="sortable r">LINEUPS {cSortKey==="count"?(cSortDir==="asc"?"▲":"▼"):""}
toggleSort(cSortKey, cSortDir, setCSortKey, setCSortDir, "exposure")} className="sortable r">EXPOSURE {cSortKey==="exposure"?(cSortDir==="asc"?"▲":"▼"):""}
{sortedCons.map(c => (
{fmt$(c.salary)}
{c.pts.toFixed(1)}
{c.ptsPer1k.toFixed(2)}
{c.count}
{(c.exposure*100).toFixed(0)}%
))}
) : (
{results.kept.map((lu, i) =>
)}
);
}
function LineupCard({ lineup, rank, salaryCap }) {
const cpt = lineup.captain;
const cptDriver = DRIVERS.find(d => d.id === cpt.id);
const flexDrivers = [...lineup.lockedFlex, ...lineup.flex].map(f => DRIVERS.find(d => d.id === f.id));
const con = lineup.constructor;
const conTeam = TEAMS[con.team];
const salaryPct = lineup.totalSalary / salaryCap;
return (
{String(rank).padStart(2, "0")}
RANK
{fmt$(lineup.totalSalary)} / {fmt$(salaryCap)} · {(salaryPct * 100).toFixed(1)}%
{lineup.totalPts.toFixed(1)}
PROJ PTS
);
}
function SlotCard({ kind, driver, team, salary, pts }) {
if (kind === "CON") {
return (
CONSTRUCTOR
{team.short}
{fmt$(salary)} {pts.toFixed(1)}
);
}
const t = TEAMS[driver.team];
const isCpt = kind === "CPT";
return (
{isCpt ? "CAPTAIN · 1.5×" : "DRIVER"}
{driver.name}
{t.short}
{fmt$(salary)} {pts.toFixed(1)}
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(