/* ============================================================
HUD — altitude axis, hero multiplier, wager/MOON, boost gauge.
Exports window.AltAxis, window.HeroMult, window.WagerChip,
window.BoostGauge, window.ControlButtons, window.BalancePill
============================================================ */
(function () {
const { useState, useEffect, useRef } = React;
const E = window.Engine;
/* ---- canonical count-up hook (eases value -> target). Shared by overlays + HUD. ---- */
window.useCountUp = function useCountUp(target, run, ms = 1100) {
const [val, setVal] = useState(0);
useEffect(() => {
if (!run) { setVal(0); return; }
let raf; const t0 = performance.now();
const step = (now) => {
const p = Math.min(1, (now - t0) / ms);
const e = 1 - Math.pow(1 - p, 3);
setVal(target * e);
if (p < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [target, run, ms]);
return val;
};
/* ---- right-edge altitude axis (trading-chart style) ---- */
window.AltAxis = function AltAxis({ mult, altKm, speed }) {
// ticks: show checkpoints near the current window of multiplier
const ticks = E.CHECKPOINTS.filter(c => c.m <= Math.max(2.2, mult * 1.6) + 0.3 && c.m >= mult - 0.8);
const lo = mult - 0.8, hi = Math.max(2.2, mult * 1.6) + 0.3;
const yFor = (m) => 100 - ((m - lo) / (hi - lo)) * 100; // 0 top .. 100 bottom
const a = E.fmtAlt(altKm);
return (
{ticks.map((c, i) => (
{c.m.toFixed(2)}x
))}
ALT
{a.num} {a.unit}
▲ {speed.toFixed(2)}x/s
);
};
/* ---- hero multiplier in the sky ---- */
window.HeroMult = function HeroMult({ mult, moon, capLabel, pulse }) {
const col = E.multColor(mult);
return (
{E.fmtMult(mult)}x
{capLabel || ' '}
{E.fmtMoonFull(moon)} MOON
);
};
/* ---- wager chip ---- */
window.WagerChip = function WagerChip({ wagerSol }) {
return (
YOUR WAGER
{wagerSol.toFixed(2)} SOL
1 SOL = 800,000 MOON
);
};
window.BalancePill = function BalancePill({ balance, targetRef }) {
return (
{E.fmtMoon(balance)}
);
};
function SolMark() {
return (
);
}
/* ---- boost gauge ---- */
window.BoostGauge = function BoostGauge({ power, cadence, greenTimeMs, hot, inGreen }) {
const B = E.BOOST;
const pct = Math.min(100, power);
return (
{cadence}
{greenTimeMs > 0 &&
+{(greenTimeMs / 1000).toFixed(2)}s
}
);
};
/* ---- checkpoint payout burst (floats up at major landmarks) ---- */
window.CheckpointBurst = function CheckpointBurst({ burst }) {
if (!burst) return null;
return (
+{E.fmtMoon(burst.amount)}
{burst.label}
);
};
/* ---- boost + eject buttons ---- */
window.ControlButtons = function ControlButtons({ onBoost, onEject, flying, rippleKey }) {
return (
);
};
})();