/* global React, ReactDOM, TopNav, Hero, Cast, Game, Manifesto, BrandWheel, Spring, FooterBar, SkyDecor,
playWheek, TweaksPanel, TweakSection, TweakToggle, TweakRadio, TweakColor, useTweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"mode": "day",
"sound": true,
"hero": "capy",
"cursor": "sparkle"
}/*EDITMODE-END*/;
function App() {
const [t, setT] = useTweaks(TWEAK_DEFAULTS);
// apply mode to
React.useEffect(() => {
document.documentElement.setAttribute('data-mode', t.mode);
}, [t.mode]);
const onSqueak = React.useCallback((opts) => {
if (t.sound) playWheek(opts);
}, [t.sound]);
const jump = (id) => {
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
const toggleMode = React.useCallback(() => {
setT('mode', t.mode === 'day' ? 'night' : 'day');
}, [t.mode]);
return (
<>
setT('mode', v)}
/>
setT('sound', v)} />
setT('hero', v)}
/>
setT('cursor', v)}
/>
);
}
/* =========================================================================
* Cursor trail
* ========================================================================= */
function CursorTrail({ kind }) {
const [bits, setBits] = React.useState([]);
const lastRef = React.useRef(0);
React.useEffect(() => {
if (kind === 'none') return;
const onMove = (e) => {
const now = Date.now();
if (now - lastRef.current < 50) return;
lastRef.current = now;
const id = now + Math.random();
setBits(b => [...b, { id, x: e.clientX, y: e.clientY }]);
setTimeout(() => setBits(b => b.filter(it => it.id !== id)), 700);
};
window.addEventListener('mousemove', onMove);
return () => window.removeEventListener('mousemove', onMove);
}, [kind]);
if (kind === 'none') return null;
const symbol = kind === 'sparkle' ? '✦' : kind === 'leaf' ? '✿' : '🍊';
const color = kind === 'sparkle' ? 'var(--orange)' : kind === 'leaf' ? 'var(--green)' : 'var(--orange)';
return (
{bits.map(b => (
{symbol}
))}