/* ============================================================
SHARED COMPONENTS — HUD, Sprites, Layout, Transitions
Enhanced: animated XP bar, streak fire, sound toggle,
warp pipe transitions, scroll progress, parallax backgrounds
============================================================ */
const { useState, useEffect, useRef, useCallback } = React;
/* ============ PIXEL SPRITES (CSS-drawn) ============ */
function PixelMario({ size = 64, running = false }) {
return (
{/* Hat */}
);
}
function PixelMushroom({ size = 48, color = "#E52521" }) {
return (
);
}
function PixelStar({ size = 36 }) {
return (
);
}
function PixelPipe({ height = 120, active = false }) {
return (
);
}
function PixelCoin({ size = 28 }) {
return
);
}
function PixelQBlock({ size = 48, hit = false }) {
return (
);
}
function PixelCloud({ size = 80 }) {
return (
);
}
function PixelGround({ width = 100 }) {
return (
);
}
/* ============ WARP PIPE TRANSITION ============ */
window._warpActive = false;
window.navigateWithWarp = function navigateWithWarp(path) {
if (window._warpActive) return;
window._warpActive = true;
SFX?.warp?.();
const overlay = document.getElementById('warp-overlay');
if (overlay) {
overlay.classList.add('active');
setTimeout(() => {
navigate(path);
setTimeout(() => {
overlay.classList.remove('active');
window._warpActive = false;
}, 400);
}, 500);
} else {
navigate(path);
window._warpActive = false;
}
};
/* ============ PARALLAX BACKGROUND ============ */
function ParallaxBG({ worldId }) {
const biomeClass = worldId ? `biome-${worldId}` : 'biome-1';
const showClouds = [1, 3].includes(worldId);
const showStars = [7, 8].includes(worldId);
const showLava = [5, 6].includes(worldId);
const showWaves = [4].includes(worldId);
return (
<>
{showClouds &&
}
{showStars &&
}
{showLava &&
}
{showWaves &&
}
);
}
/* ============ SCROLL PROGRESS BAR ============ */
function ScrollProgress() {
const [progress, setProgress] = useState(0);
useEffect(() => {
const onScroll = () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
setProgress(docHeight > 0 ? Math.min(100, (scrollTop / docHeight) * 100) : 0);
};
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
/* ============ HUD (Enhanced) ============ */
function HUD({ onSearch, onShortcuts }) {
const state = useAppState();
const [flash, setFlash] = useState(null);
const [soundOn, setSoundOn] = useState(state.settings?.sound !== false);
const prev = useRef({ xp: state.player.xp, coins: state.player.coins });
const xpPercent = Math.min(100, (state.player.xp / state.player.xpToNext) * 100);
useEffect(() => {
if (state.player.coins > prev.current.coins) {
setFlash('coins');
SFX?.coin?.();
setTimeout(() => setFlash(null), 1200);
}
if (state.player.xp > prev.current.xp) {
setFlash('xp');
SFX?.powerUp?.();
setTimeout(() => setFlash(null), 1200);
}
prev.current = { xp: state.player.xp, coins: state.player.coins };
}, [state.player.xp, state.player.coins]);
const toggleSound = () => {
const newVal = !soundOn;
setSoundOn(newVal);
AppStore.set(s => ({ ...s, settings: { ...s.settings, sound: newVal } }));
if (newVal) SFX?.click?.();
};
return (
{ SFX?.click?.(); navigateWithWarp('/map'); }}>
⭐ SADW
🏆
LVL {String(state.player.level).padStart(2, '0')}
{state.player.streak > 0 && (
🔥
{state.player.streak}
)}
{ SFX?.click?.(); navigateWithWarp('/profile'); }} style={{ cursor: 'pointer' }}>
👤
{state.player.username}
🔍
⌨️
{soundOn ? '🔊' : '🔇'}
{ if (confirm('Reset all progress?')) { AppStore.reset(); navigate('/'); } }}
style={{
background: 'transparent', border: '2px solid var(--hud-accent)',
color: 'var(--hud-accent)', padding: '6px 10px',
fontFamily: 'var(--font-pixel)', fontSize: 9,
cursor: 'pointer', letterSpacing: '0.05em'
}}>⟲
);
}
/* ============ Nav pill ============ */
function NavPill({ children }) {
return (
{children}
);
}
function NavBtn({ to, label, icon, current }) {
const active = current === to;
return (
{ SFX?.click?.(); navigateWithWarp(to); }} style={{
padding: '10px 16px', fontFamily: 'var(--font-pixel)', fontSize: 10,
background: active ? 'var(--accent-2)' : 'var(--card-bg)',
color: active ? '#000' : 'var(--text)',
border: '3px solid var(--card-border)',
cursor: 'pointer', letterSpacing: '0.05em',
display: 'flex', alignItems: 'center', gap: 6,
boxShadow: active ? '4px 4px 0 #000' : 'none'
}}>
{icon}
{label}
);
}
/* ============ WARP OVERLAY (rendered in App) ============ */
function WarpOverlay() {
return (
);
}
/* Export globals */
Object.assign(window, {
PixelMario, PixelMushroom, PixelStar, PixelPipe, PixelCoin,
PixelBrick, PixelQBlock, PixelCloud, PixelGround,
HUD, NavPill, NavBtn, WarpOverlay, ParallaxBG, ScrollProgress,
navigateWithWarp
});