// Driver-view "POV" — pure SVG track-from-driver perspective.
// Samples upcoming track points, transforms into car-local space (forward = +Y, right = +X),
// then projects through a simple perspective camera into screen space.
const { useEffect: useEffectDV, useState: useStateDV, useMemo: useMemoDV } = React;
function DriverView({ car, track, cars, raceProgress, sample, carClass }) {
const [pathEl, setPathEl] = useStateDV(null);
const [pathLen, setPathLen] = useStateDV(0);
const pathD = track.path;
const ccw = track.direction === "CCW";
const pathRefCb = React.useCallback((node) => {
if (node) {
setPathEl(node);
try { setPathLen(node.getTotalLength() || 0); } catch (e) { setPathLen(0); }
}
}, []);
useEffectDV(() => {
if (pathEl) {
try { setPathLen(pathEl.getTotalLength() || 0); } catch (e) { setPathLen(0); }
}
}, [pathD, pathEl]);
// Telemetry HUD
const tele = useMemoDV(() => car ? window.APEX_DATA.generateTelemetry(car.no) : [], [car && car.no]);
const cur = tele.length ? tele[sample % 100] : { speed: 0, throttle: 0, brake: 0 };
const [minSpd, maxSpd] = (carClass && carClass.speedRange) || [80, 310];
const remapSpeed = (s) => minSpd + ((s - 80) / (310 - 80)) * (maxSpd - minSpd);
const speedKph = Math.round(remapSpeed(cur.speed));
const gear = (() => {
const t = (speedKph - minSpd) / (maxSpd - minSpd);
if (t < 0.10) return 1; if (t < 0.20) return 2; if (t < 0.32) return 3;
if (t < 0.46) return 4; if (t < 0.60) return 5; if (t < 0.74) return 6;
if (t < 0.88) return 7; return 8;
})();
const Q = 0.0015;
const qProgress = Math.round(raceProgress / Q) * Q;
// Sample upcoming path. Returns array of {forward, lateral, arc} in CAR-LOCAL space.
const SAMPLES = 36;
const LOOK = 240;
const projected = useMemoDV(() => {
if (!pathLen || !pathEl) return null;
const offset = car && car._offset != null ? car._offset : 0;
const t0 = ((qProgress + offset) % 1 + 1) % 1 * pathLen;
const dir = ccw ? -1 : 1;
try {
const pNow = pathEl.getPointAtLength(t0);
const pAhead = pathEl.getPointAtLength((t0 + dir * 8 + pathLen) % pathLen);
// Heading vector (track-space) — points in driving direction
const hx = pAhead.x - pNow.x;
const hy = pAhead.y - pNow.y;
const hlen = Math.hypot(hx, hy) || 1;
const fx = hx / hlen; // forward unit
const fy = hy / hlen;
const rx = -fy; // right unit (perpendicular)
const ry = fx;
const out = [];
for (let i = 0; i < SAMPLES; i++) {
const s = (i / (SAMPLES - 1)) * LOOK;
const arc = (t0 + dir * s + pathLen) % pathLen;
const p = pathEl.getPointAtLength(arc);
const dx = p.x - pNow.x;
const dy = p.y - pNow.y;
// Project onto forward & right axes
const forward = dx * fx + dy * fy;
const lateral = dx * rx + dy * ry;
out.push({ s, forward, lateral, arc });
}
return out;
} catch (e) {
return null;
}
}, [qProgress, pathLen, pathEl, car && car.no, track.id]);
// Find next named turn within LOOK
const nextTurn = useMemoDV(() => {
if (!pathLen || !pathEl || !track.turns) return null;
const offset = car && car._offset != null ? car._offset : 0;
const t0 = ((qProgress + offset) % 1 + 1) % 1 * pathLen;
const dir = ccw ? -1 : 1;
let best = null, bestDist = Infinity;
try {
for (const turn of track.turns) {
let bestArc = 0, bestArcD = Infinity;
for (let i = 0; i < 120; i++) {
const s = (i / 120) * pathLen;
const p = pathEl.getPointAtLength(s);
const dd = (p.x - turn.x)**2 + (p.y - turn.y)**2;
if (dd < bestArcD) { bestArcD = dd; bestArc = s; }
}
let fwd = (bestArc - t0) * dir;
fwd = ((fwd % pathLen) + pathLen) % pathLen;
if (fwd > 4 && fwd < LOOK && fwd < bestDist) {
bestDist = fwd; best = { turn, dist: fwd };
}
}
} catch (e) {}
return best;
}, [qProgress, pathLen, pathEl, track.id]);
return (
);
}
function DriverViewScene({ car, track, carClass, projected, nextTurn, cur, speedKph, gear }) {
if (!car) return ACQUIRING SIGNAL…
;
const VW = 320, VH = 240;
const cx = VW / 2;
const horizonY = 96;
const accent = (carClass && carClass.accent) || car.livery.accent || "#5BB7E2";
const tint = car.livery.accent === "#FFFFFF" ? "#E8E4DC" : car.livery.accent;
// Camera: car at origin, looking down +Y. Project (lateral, forward) to screen.
const ROAD_HALF = 11;
const FOCAL = 130;
const CAM_H = 4.0;
const NEAR = 4;
const project = (lat, fwd) => {
const z = Math.max(fwd, NEAR);
const sx = cx + (lat * FOCAL) / z;
const sy = horizonY + (CAM_H * FOCAL) / z;
return { sx, sy, z };
};
// Build ribbon
let leftPts = [], rightPts = [], centerPts = [];
if (projected && projected.length) {
for (let i = 0; i < projected.length; i++) {
const s = projected[i];
if (s.forward < NEAR * 0.4) continue;
// Tangent in (lateral, forward) plane
const sNext = projected[Math.min(i + 1, projected.length - 1)];
const sPrev = projected[Math.max(i - 1, 0)];
const tx = sNext.lateral - sPrev.lateral;
const ty = sNext.forward - sPrev.forward;
const tlen = Math.hypot(tx, ty) || 1;
// perpendicular (right of travel direction)
const nx = ty / tlen;
const ny = -tx / tlen;
const L = project(s.lateral - nx * ROAD_HALF, s.forward - ny * ROAD_HALF);
const R = project(s.lateral + nx * ROAD_HALF, s.forward + ny * ROAD_HALF);
const C = project(s.lateral, s.forward);
leftPts.push(L); rightPts.push(R); centerPts.push(C);
}
}
// FALLBACK: if projection produced nothing, draw a straight perspective road
if (leftPts.length < 2) {
leftPts = []; rightPts = []; centerPts = [];
for (let i = 0; i < 24; i++) {
const fwd = NEAR + (i / 23) * 200;
leftPts.push(project(-ROAD_HALF, fwd));
rightPts.push(project(ROAD_HALF, fwd));
centerPts.push(project(0, fwd));
}
}
// Reverse so far points come first (drawn behind near points)
leftPts.reverse(); rightPts.reverse(); centerPts.reverse();
const ribbonD = `M ${leftPts[0].sx} ${leftPts[0].sy} ` +
leftPts.slice(1).map(p => `L ${p.sx} ${p.sy}`).join(" ") + " " +
rightPts.slice().reverse().map(p => `L ${p.sx} ${p.sy}`).join(" ") + " Z";
const leftEdgeD = `M ${leftPts[0].sx} ${leftPts[0].sy} ` + leftPts.slice(1).map(p => `L ${p.sx} ${p.sy}`).join(" ");
const rightEdgeD = `M ${rightPts[0].sx} ${rightPts[0].sy} ` + rightPts.slice(1).map(p => `L ${p.sx} ${p.sy}`).join(" ");
// Curb tics
const curbTics = [];
for (let i = 0; i < leftPts.length - 1; i++) {
curbTics.push({ a: leftPts[i], b: leftPts[i+1], c: i, side: "L" });
curbTics.push({ a: rightPts[i], b: rightPts[i+1], c: i, side: "R" });
}
// Center dashes
const centerSegs = [];
for (let i = 0; i < centerPts.length - 1; i += 2) {
centerSegs.push({ a: centerPts[i], b: centerPts[i+1] });
}
// Distance pylons
const distMarkers = [];
if (projected) {
// projected was built in original order, so iterate forward
let lastEmitted = -1;
for (let i = 0; i < projected.length; i++) {
const s = projected[i];
if (s.forward < NEAR) continue;
const seg = Math.floor(s.s / 30);
if (seg !== lastEmitted && seg > 0) {
lastEmitted = seg;
// find matching pt in our (reversed) arrays
const orig = projected.length - 1 - i;
const L = leftPts[orig], R = rightPts[orig];
if (L && R) distMarkers.push({ L, R, dist: seg * 30, idx: i });
}
}
}
// Hills
const farHillsD = `M -10 ${horizonY} C 30 ${horizonY-22}, 70 ${horizonY-8}, 110 ${horizonY-18} S 180 ${horizonY-30}, 220 ${horizonY-12} S 290 ${horizonY-26}, ${VW+10} ${horizonY-6} L ${VW+10} ${horizonY} Z`;
const nearHillsD = `M -10 ${horizonY} C 40 ${horizonY-10}, 90 ${horizonY-2}, 140 ${horizonY-6} S 220 ${horizonY-14}, 280 ${horizonY-2} L ${VW+10} ${horizonY} Z`;
return (
);
}
window.DriverView = DriverView;