// React overlay: HUD with character portraits, XP bar, level, and touch controls. const { useState, useEffect, useRef } = React; // Game listens on window keydown/keyup. Synthetic KeyboardEvents flow through the // existing input pipeline (keys[], keyOnce) unchanged. function fireKey(key, type) { window.dispatchEvent(new KeyboardEvent(type, { key, bubbles: true })); } function tapKey(key) { fireKey(key, 'keydown'); requestAnimationFrame(() => fireKey(key, 'keyup')); } function Portrait({ who, active, locked }) { const ref = useRef(null); useEffect(() => { const c = ref.current; if (!c) return; const cx = c.getContext('2d'); cx.imageSmoothingEnabled = false; cx.clearRect(0, 0, c.width, c.height); const src = window.BAKED?.[who]?.down?.[0]; if (src) { cx.drawImage(src, 0, 0, 16, 10, 0, 0, c.width, c.height * (10/16)); } if (locked) { cx.fillStyle = 'rgba(0,0,0,0.55)'; cx.fillRect(0, 0, c.width, c.height); cx.fillStyle = '#fff'; cx.font = 'bold 14px monospace'; cx.textAlign = 'center'; cx.fillText('🔒', c.width/2, c.height/2 + 5); } }); return (
{who.toUpperCase()}
); } function DPadButton({ dirKey, label, style }) { const held = useRef(false); const onDown = (e) => { e.preventDefault(); if (held.current) return; held.current = true; fireKey(dirKey, 'keydown'); }; const onUp = (e) => { e.preventDefault(); if (!held.current) return; held.current = false; fireKey(dirKey, 'keyup'); }; return ( ); } function DPad() { return (
); } function ActionBtn({ keyCode, label, sub, color }) { const onDown = (e) => { e.preventDefault(); tapKey(keyCode); }; return ( ); } function ActionPad({ inv, skating }) { return (
); } // Coin icon — drawn from baked sprite function CoinIcon({ size = 14 }) { const ref = useRef(null); useEffect(() => { const c = ref.current; if (!c) return; const cx = c.getContext('2d'); cx.imageSmoothingEnabled = false; cx.clearRect(0, 0, c.width, c.height); const src = window.BAKED && window.BAKED.coin && window.BAKED.coin[0]; if (src) cx.drawImage(src, 0, 0, 6, 6, 0, 0, c.width, c.height); }); return ; } // Shop modal — opened when player walks into corner store function ShopModal({ onClose }) { const [coins, setCoins] = useState(() => (window.__getGameState && window.__getGameState().coins) || 0); const [inv, setInv] = useState(() => (window.__getGameState && window.__getGameState().inventory) || {}); const items = window.__leviShopItems || []; useEffect(() => { const u = (e) => { setCoins(e.detail.coins); setInv(e.detail.inventory); }; window.addEventListener('shopUpdate', u); return () => window.removeEventListener('shopUpdate', u); }, []); useEffect(() => { const k = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', k); return () => window.removeEventListener('keydown', k); }, []); function buy(it){ const ok = window.__leviBuy && window.__leviBuy(it.key); if (!ok) { // visual nudge could go here } } return (
CORNER SHOP
{coins}
{items.map(it => { const owned = it.kind === 'flag' ? !!inv[it.target] : (inv[it.target] || 0); const canAfford = coins >= it.price; const disabled = (it.kind === 'flag' && owned) || !canAfford; return ( ); })}
); } function HUD() { const [s, setS] = useState(() => window.__getGameState ? window.__getGameState() : { character: 'levi', unlocked: { levi: true }, xp: 0, level: 1, need: 30, coins: 0, heat: 0, combo: { count: 0, mult: 1, timer: 0, window: 5 }, muted: false, }); const [shopOpen, setShopOpen] = useState(false); const [tapCount, setTapCount] = useState(0); const [tapTimer, setTapTimer] = useState(0); useEffect(() => { const h = (e) => setS(e.detail); window.addEventListener('gameState', h); return () => window.removeEventListener('gameState', h); }, []); useEffect(() => { const open = () => setShopOpen(true); window.addEventListener('shopOpen', open); return () => window.removeEventListener('shopOpen', open); }, []); function closeShop(){ setShopOpen(false); window.__leviCloseShop && window.__leviCloseShop(); } const pct = Math.min(1, s.xp / s.need); const heatPct = Math.min(1, (s.heat || 0) / 100); const comboTimerPct = s.combo && s.combo.count >= 2 && s.combo.window ? Math.max(0, 1 - s.combo.timer / s.combo.window) : 0; // 3-tap level number to wipe save function onLevelTap(){ const now = Date.now(); const t = tapTimer && now - tapTimer < 800 ? tapCount + 1 : 1; if (t >= 3) { if (confirm('Wipe save? You will lose all XP, coins, and unlocked characters.')) { window.__leviWipeSave && window.__leviWipeSave(); } setTapCount(0); setTapTimer(0); } else { setTapCount(t); setTapTimer(now); } } return ( <> {/* Top-right: XP + Level + Coins + Heat */}
LV {s.level} {s.coins || 0} {s.xp}/{s.need}
{/* XP bar */}
{/* Heat bar */}
0.7 ? '#ff4a2a' : '#a9b4c9' }}>HEAT
= 1 ? '#ff4a2a' : 'linear-gradient(#e24848, #8a1d1d)', transition: 'width 200ms linear', boxShadow: heatPct > 0.7 ? '0 0 6px rgba(255,80,80,0.7)' : 'none' }} />
{/* Mute toggle */}
{/* Combo badge — appears when chain ≥ 2 */} {s.combo && s.combo.count >= 2 && (
COMBO x{s.combo.count}
)} {/* Portraits */}
{ e.preventDefault(); if (s.unlocked.levi) swap('levi'); }}>
{ e.preventDefault(); if (s.unlocked.asher) swap('asher'); }}>
{s.unlocked.maya !== undefined && (
{ e.preventDefault(); if (s.unlocked.maya) swap('maya'); }}>
)}
{shopOpen && } ); } function swap(target) { const cur = window.__getGameState().character; if (cur === target) return; window.__gameTrySwap && window.__gameTrySwap(); } const root = ReactDOM.createRoot(document.getElementById('overlay-root')); root.render();