/* Hero Route Visualization — v3. Bigger, bolder, switchable. Three distinct route options with their own tradeoffs. Keeps the Spain-map aesthetic + animated truck + waypoint activation. */ // NOTE on positioning: // - `cityAt` : 0..1 parametric position on the compound path where each city node sits // (the code snaps the city node to this exact point on the path) // - `wp.at` : parametric position where the waypoint dot sits (also snapped to path) // - `rx, ry` : top-left of the callout rectangle (hand-positioned for clarity) // Leader line goes from the snapped dot to the nearest corner of the callout rect. const ROUTES = [ { id: "profit", label: "Max profit", subtitle: "Balanced loop, four loads", badge: "€2,840", stats: { km: 1317, legs: 4, hours: 21, profit: 2840, eur_per_km: 2.16 }, compound: "M 492 332 Q 396 300, 320 268 Q 352 228, 398 196 Q 466 202, 540 222 Q 524 284, 492 332", cities: [ { code:"VLC", name:"Valencia", meta:"BASE · 01", cityAt:0.00, align:"start", base:true }, { code:"MAD", name:"Madrid", meta:"02 · 22T PALLET", cityAt:0.25, align:"end" }, { code:"ZGZ", name:"Zaragoza", meta:"03 · 18T BOX", cityAt:0.50, align:"top" }, { code:"BCN", name:"Barcelona", meta:"04 · 24T REEFER", cityAt:0.75, align:"start" }, ], waypoints: [ { kind:"REST", at:0.12, rx:296, ry:348, w:140, h:38, l1:"REST · 45 MIN", l2:"EU 561/2006" }, { kind:"FUEL", at:0.35, rx:180, ry:210, w:148, h:38, l1:"FUEL · €1.42/L", l2:"A-2 · 320 L" }, { kind:"TOLL", at:0.60, rx:448, ry:128, w:140, h:38, l1:"TOLL · AP-2", l2:"€47.10" }, ], callout: "BACK BY FRI 19:00 · +€2,840 NET", }, { id: "fast", label: "Fastest home", subtitle: "Quick triangle, three loads", badge: "14h", stats: { km: 918, legs: 3, hours: 14, profit: 1920, eur_per_km: 2.09 }, compound: "M 492 332 Q 568 280, 540 222 Q 468 206, 398 196 Q 438 268, 492 332", cities: [ { code:"VLC", name:"Valencia", meta:"BASE · 01", cityAt:0.00, align:"start", base:true }, { code:"BCN", name:"Barcelona", meta:"02 · 24T REEFER", cityAt:0.333, align:"start" }, { code:"ZGZ", name:"Zaragoza", meta:"03 · 18T BOX", cityAt:0.667, align:"top" }, ], waypoints: [ { kind:"TOLL", at:0.18, rx:594, ry:260, w:108, h:38, l1:"TOLL · AP-7", l2:"€31.40" }, { kind:"REST", at:0.52, rx:456, ry:112, w:140, h:38, l1:"REST · 45 MIN", l2:"EU 561/2006" }, { kind:"FUEL", at:0.82, rx:282, ry:308, w:148, h:38, l1:"FUEL · €1.42/L", l2:"A-23 · 210 L" }, ], callout: "BACK BY THU 11:00 · +€1,920 NET", }, { id: "short", label: "Short distance", subtitle: "Southern arc, four loads", badge: "1,140 km", stats: { km: 1140, legs: 4, hours: 18, profit: 2240, eur_per_km: 1.96 }, compound: "M 492 332 Q 440 394, 370 406 Q 262 394, 226 336 Q 278 286, 314 268 Q 398 296, 492 332", cities: [ { code:"VLC", name:"Valencia", meta:"BASE · 01", cityAt:0.00, align:"start", base:true }, { code:"MUR", name:"Murcia", meta:"02 · 20T TAUT", cityAt:0.25, align:"bottom" }, { code:"SEV", name:"Sevilla", meta:"03 · 22T BOX", cityAt:0.50, align:"end" }, { code:"MAD", name:"Madrid", meta:"04 · 18T PALLET", cityAt:0.72, align:"top" }, ], waypoints: [ { kind:"FUEL", at:0.14, rx:478, ry:412, w:148, h:38, l1:"FUEL · €1.40/L", l2:"A-7 · 280 L" }, { kind:"REST", at:0.42, rx:112, ry:420, w:140, h:38, l1:"REST · 45 MIN", l2:"EU 561/2006" }, { kind:"TOLL", at:0.76, rx:398, ry:252, w:140, h:38, l1:"TOLL · A-4", l2:"€28.60" }, ], callout: "BACK BY SAT 08:00 · +€2,240 NET", }, ]; const RouteDiagram = () => { const [routeIdx, setRouteIdx] = React.useState(0); const route = ROUTES[routeIdx]; const pathRef = React.useRef(null); const [progress, setProgress] = React.useState(0); const [dwelling, setDwelling] = React.useState(false); // reset animation when switching route React.useEffect(() => { setProgress(0); setDwelling(false); }, [routeIdx]); // animation loop React.useEffect(() => { let raf, start = 0, dwellUntil = 0, mounted = true; const LOOP_MS = 16000; const DWELL_MS = 1800; const tick = (ts) => { if (!mounted) return; if (!start) start = ts; if (dwellUntil) { if (ts >= dwellUntil) { start = ts; dwellUntil = 0; setDwelling(false); setProgress(0); } raf = requestAnimationFrame(tick); return; } const p = Math.min(1, (ts - start) / LOOP_MS); setProgress(p); if (p >= 1) { dwellUntil = ts + DWELL_MS; setDwelling(true); } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { mounted = false; cancelAnimationFrame(raf); }; }, [routeIdx]); // point lookup on current route path const ptRef = React.useRef({ x:492, y:332, angle:0, len:0 }); // positions of cities and waypoints snapped onto the path const [snaps, setSnaps] = React.useState({ cities: [], waypoints: [], len: 1 }); const [, force] = React.useReducer(x => x+1, 0); // recompute snapped positions whenever the route changes React.useEffect(() => { const el = pathRef.current; if (!el) return; const L = el.getTotalLength(); const snap = (t) => { const p = el.getPointAtLength(L * Math.max(0, Math.min(1, t))); return { x: p.x, y: p.y }; }; setSnaps({ len: L, cities: route.cities.map(c => snap(c.cityAt)), waypoints: route.waypoints.map(w => snap(w.at)), }); }, [routeIdx]); React.useEffect(() => { const el = pathRef.current; if (!el) return; const L = el.getTotalLength(); const at = L * progress; const pt = el.getPointAtLength(at); const pt2 = el.getPointAtLength(Math.min(L, at + 1)); const angle = Math.atan2(pt2.y - pt.y, pt2.x - pt.x) * 180 / Math.PI; ptRef.current = { x: pt.x, y: pt.y, angle, len: L }; force(); }, [progress, routeIdx]); const legs = route.cities.length; const activeLegIdx = Math.min(legs - 1, Math.floor(progress * legs)); const legFrac = (progress * legs) - activeLegIdx; const legFrom = route.cities[activeLegIdx]; const legTo = route.cities[(activeLegIdx + 1) % route.cities.length]; const kmDone = Math.round(route.stats.km * progress); const etaH = Math.max(0, Math.round((route.stats.km - kmDone) / (route.stats.km / route.stats.hours))); const netNow = Math.round(route.stats.profit * Math.min(1, progress * 1.03)); const hotWP = React.useCallback((at, window=0.09) => { const d = progress - at; if (d < 0 || d > window) return 0; return Math.sin((d/window) * Math.PI); }, [progress]); const reachedFlash = (atEnd) => { const d = progress - atEnd; if (Math.abs(d) > 0.04) return 0; return 1 - Math.abs(d) / 0.04; }; return (
{/* TABS */}
{ROUTES.map((r,i) => ( ))}
{/* STATS BAR */}
€{route.stats.profit.toLocaleString()}
NET PROFIT
{route.stats.km.toLocaleString()} km
DISTANCE
{route.stats.hours}h
DRIVE TIME
{route.stats.legs}
LOADS
€{route.stats.eur_per_km.toFixed(2)}
€ / KM
{/* MAP */}
{/* HUD — large, legible */} LEG {activeLegIdx + 1}/{legs} · {legFrom.code} → {legTo.code} · {kmDone.toLocaleString()} / {route.stats.km.toLocaleString()} KM {dwelling ? route.callout : `ETA ${etaH}H · NET €${netNow.toLocaleString()}`} LIVE {/* Spain peninsula — larger */} {/* Portugal hint */} {/* planned route (faint dashed baseline) — always visible underneath */} {/* driven trail — single stroke, grows with progress. Outbound legs render black; the final return leg renders green. When dwelling, progress=1 so the whole loop is "driven". */} {(() => { const L = ptRef.current.len || snaps.len || 1; const cutoff = (legs - 1) / legs; const outboundEnd = Math.min(progress, cutoff); const returnStart = Math.max(progress, cutoff); return ( <> {outboundEnd > 0 && ( )} {progress > cutoff && ( )} ); })()} {/* Waypoints — dots snapped to the road; leader goes to nearest edge of callout */} {route.waypoints.map((w, i) => { const p = snaps.waypoints[i]; if (!p) return null; const hot = hotWP(w.at); const active = hot > 0.08; // pick the leader endpoint on the callout rect closest to the road dot const lx = Math.max(w.rx, Math.min(p.x, w.rx + w.w)); const ly = p.y < w.ry ? w.ry : (p.y > w.ry + w.h ? w.ry + w.h : (Math.abs(p.x - w.rx) < Math.abs(p.x - (w.rx + w.w)) ? (p.y) : (p.y))); // simpler: snap to top or bottom edge of rect, x clamped const leaderX = Math.max(w.rx + 8, Math.min(p.x, w.rx + w.w - 8)); const leaderY = p.y < w.ry ? w.ry : w.ry + w.h; return ( {active && } {w.l1} {w.l2} ); })} {/* Cities — positioned exactly on the path so they sit on the route */} {route.cities.map((c, i) => { const p = snaps.cities[i]; if (!p) return null; const flash = i === 0 ? (dwelling ? 1 : reachedFlash(1)) : reachedFlash(i/legs); const textX = c.align === "end" ? p.x - 16 : c.align === "top" ? p.x : c.align === "bottom" ? p.x : /* start/right */ p.x + 20; const textY = c.align === "top" ? p.y - 16 : c.align === "bottom" ? p.y + 34 : p.y - 2; const metaY = c.align === "top" ? p.y - 34 : c.align === "bottom" ? p.y + 50 : p.y + 16; const anchor = c.align === "end" ? "end" : (c.align === "top" || c.align === "bottom" ? "middle" : "start"); if (c.base) { return ( {c.name} {c.meta} ); } return ( {flash > 0.1 && ( )} 0.1 ? "#1FB58A" : "#0A0A0A"}/> {c.name} {c.meta} ); })} {/* Truck — bigger so it reads at a glance */} {/* trailer */} {/* cab */} {/* windshield */} {/* headlight */} {/* Legend */} LOADED RETURN PLANNED WAYPOINT
); }; Object.assign(window, { RouteDiagram });