/* speedometer.jsx * Porsche Taycan inspired arc-multi-ring tach. * * Layout (270° sweep from 7 o'clock to 5 o'clock): * outer ring — major tick marks + numerals (0, 50, 100, 150, 200+) * middle ring — minor tick marks (every 10) * colored arc — current value sweep (cool → warm) * needle — long thin pointer with counterweight stub, hub pin * progress ring — case completion sweeps around the outermost rim * * Needle uses a damped spring (Hooke + critical damping) integrated each frame * so changes in target value cause a real overshoot + settle. */ const { useEffect, useRef, useState } = React; const SPEEDO_MAX = 100; const SPEEDO_START_ANGLE = 135; // degrees, 0 at top, +CW. 135 = 7-ish o'clock const SPEEDO_END_ANGLE = 405; // 405 = 360 + 45 → 5-ish o'clock const SPEEDO_SWEEP = SPEEDO_END_ANGLE - SPEEDO_START_ANGLE; // 270° function polar(cx, cy, r, angleDeg) { const a = (angleDeg - 90) * Math.PI / 180; return [cx + r * Math.cos(a), cy + r * Math.sin(a)]; } function arcPath(cx, cy, r, startDeg, endDeg) { const [x0, y0] = polar(cx, cy, r, startDeg); const [x1, y1] = polar(cx, cy, r, endDeg); const large = Math.abs(endDeg - startDeg) > 180 ? 1 : 0; const sweep = endDeg > startDeg ? 1 : 0; return `M ${x0.toFixed(2)} ${y0.toFixed(2)} A ${r} ${r} 0 ${large} ${sweep} ${x1.toFixed(2)} ${y1.toFixed(2)}`; } function valueToAngle(v) { const t = Math.max(0, Math.min(1, v / SPEEDO_MAX)); return SPEEDO_START_ANGLE + t * SPEEDO_SWEEP; } /* Damped spring hook — pos chases target with overshoot. */ function useDampedNeedle(target, { stiffness = 80, damping = 9 } = {}) { const [pos, setPos] = useState(target); const posRef = useRef(target); const velRef = useRef(0); const timerRef = useRef(0); const lastRef = useRef(performance.now()); const targetRef = useRef(target); useEffect(() => { targetRef.current = target; }, [target]); useEffect(() => { const tick = () => { const t = performance.now(); const dt = Math.min(0.04, (t - lastRef.current) / 1000); lastRef.current = t; const x = posRef.current; const v = velRef.current; const k = stiffness; const c = damping; const a = -k * (x - targetRef.current) - c * v; const nv = v + a * dt; const nx = x + nv * dt; posRef.current = nx; velRef.current = nv; setPos(nx); timerRef.current = setTimeout(tick, 24); }; timerRef.current = setTimeout(tick, 24); return () => clearTimeout(timerRef.current); }, [stiffness, damping]); return pos; } function Speedometer({ tokenRate, totalCases, completedCases, paused }) { const targetAngle = valueToAngle(tokenRate); const liveAngle = useDampedNeedle(targetAngle, paused ? { stiffness: 4, damping: 1.6 } : { stiffness: 80, damping: 8 }); // Slight idle jitter (engine vibration) when not in big motion const [jitter, setJitter] = useState(0); useEffect(() => { let timer; const tick = () => { setJitter((Math.random() - 0.5) * (paused ? 0.4 : 1.2)); timer = setTimeout(tick, 50); }; timer = setTimeout(tick, 50); return () => clearTimeout(timer); }, [paused]); const finalAngle = liveAngle + jitter * 0.5; // Geometry const SIZE = 560; const cx = SIZE / 2; const cy = SIZE / 2; const rOuter = 240; // tick ring const rMajor = 224; // major label radius const rMid = 206; // minor tick ring const rArc = 180; // colored sweep arc const rFace = 158; // inner face boundary const rNeedle = 180; const rHub = 22; // Major + minor ticks const majorTicks = []; const numMajor = 5; // 0, 20, 40, 60, 80, 100 for (let i = 0; i <= numMajor; i++) { const v = (i / numMajor) * SPEEDO_MAX; const ang = valueToAngle(v); const [x0, y0] = polar(cx, cy, rOuter, ang); const [x1, y1] = polar(cx, cy, rOuter - 18, ang); const [lx, ly] = polar(cx, cy, rMajor - 24, ang); const inRed = v >= 80; majorTicks.push({ x0, y0, x1, y1, lx, ly, label: v.toFixed(0), key: `M${i}`, inRed }); } const minorTicks = []; for (let i = 0; i <= 100; i++) { if (i % 10 === 0) continue; const v = (i / 100) * SPEEDO_MAX; const ang = valueToAngle(v); const [x0, y0] = polar(cx, cy, rMid, ang); const [x1, y1] = polar(cx, cy, rMid - 10, ang); minorTicks.push({ x0, y0, x1, y1, key: `m${i}`, mid: i % 5 === 0 }); } // Color arc (cool → warm) under needle path const valueArc = arcPath(cx, cy, rArc, SPEEDO_START_ANGLE, Math.max(SPEEDO_START_ANGLE + 0.5, finalAngle)); const valueArcBg = arcPath(cx, cy, rArc, SPEEDO_START_ANGLE, SPEEDO_END_ANGLE); // Red zone arc at top const redArc = arcPath(cx, cy, rArc, valueToAngle(80), SPEEDO_END_ANGLE); // Case progression sweeps the outermost rim const progFrac = totalCases > 0 ? completedCases / totalCases : 0; const progArc = arcPath( cx, cy, rOuter + 14, SPEEDO_START_ANGLE, SPEEDO_START_ANGLE + progFrac * SPEEDO_SWEEP + 0.01 ); const progArcBg = arcPath(cx, cy, rOuter + 14, SPEEDO_START_ANGLE, SPEEDO_END_ANGLE); // Needle const [nx, ny] = polar(cx, cy, rNeedle, finalAngle); const [tailX, tailY] = polar(cx, cy, -30, finalAngle); // Tick-mark color for red zone return ( {/* Outer chrome ring */} {/* Progress ring (case completion sweep) */} {/* Face fill */} {/* Color sweep + bg track */} {/* Minor ticks */} {minorTicks.map((t) => ( ))} {/* Major ticks + labels */} {majorTicks.map((t) => ( {t.label} ))} {/* Inner secondary ring */} {/* "TOKENS / SECOND" rim caption */} TOKENS · SECOND {/* Needle */} {/* Hub */} ); } Object.assign(window, { Speedometer, SPEEDO_MAX });