);
}
// ─── washi tape ─────────────────────────────────────────────────
function Tape({ color = '#FFD400', tilt = -8, w = 90, top = -10, left = 16, opacity = 0.9 }) {
return (
);
}
// ─── sticker label ──────────────────────────────────────────────
function Sticker({ children, t, color, ink, tilt = -4, style = {} }) {
return (
{children}
);
}
// ─── avatar bubble ──────────────────────────────────────────────
function Avatar({ person, t, size = 56, tilt = 0, ring }) {
return (
{person?.avatar || '?'}
);
}
// ─── VS slam ────────────────────────────────────────────────────
function VsSlam({ t, size = 56, style = {} }) {
return (
VS
);
}
// ─── doodle accents ─────────────────────────────────────────────
function Squiggle({ color = '#000', w = 80, h = 14, style = {} }) {
return (
);
}
function ArrowDoodle({ color = '#000', size = 40, tilt = 10, style = {} }) {
return (
);
}
// ─── mobile detector — shared across components ─────────────────
// Reads window.__isMobile (set + maintained in app-v2.jsx) and re-renders
// when the rb-mobile-change event fires. Multiple instances safely coexist.
function useIsMobile() {
const get = () => typeof window !== 'undefined' && !!window.__isMobile;
const [m, set] = React.useState(get);
React.useEffect(() => {
const onChange = () => set(get());
window.addEventListener('rb-mobile-change', onChange);
return () => window.removeEventListener('rb-mobile-change', onChange);
}, []);
return m;
}
// ─── screen scaffold (handles status bar / home indicator padding) ──
// Desktop: padTop/padBottom are px values that clear the iOS mockup's
// fake status bar (~50px) + home indicator (~34px).
// Mobile (fullscreen): subtract those chrome heights and add the real
// env(safe-area-inset-*) so we clear the actual notch + home indicator.
// The `max(env, Npx)` floor keeps Chrome devtools emulation usable —
// emulation always returns env=0, which would otherwise glue content
// to the very edge of the viewport.
function Screen({ children, t, scroll = true, padTop = 56, padBottom = 42, bg, style = {} }) {
const isMobile = useIsMobile();
const padT = isMobile
? `calc(max(env(safe-area-inset-top, 0px), 20px) + ${Math.max(0, padTop - 56)}px)`
: padTop;
const padB = isMobile
? `calc(max(env(safe-area-inset-bottom, 0px), 12px) + ${Math.max(0, padBottom - 42)}px)`
: padBottom;
return (
{children}
);
}
// ─── top bar (back + title) ─────────────────────────────────────
function TopBar({ t, onBack, right, title, sub }) {
return (
{onBack ? (
) : }
{title ? (
{title}
{sub &&
{sub}
}
) : }
{right || }
);
}
// ─── bottom tab bar ─────────────────────────────────────────────
// On mobile we lift the bar off the home-indicator zone by adding
// env(safe-area-inset-bottom) to its bottom offset. On desktop the
// IOSDevice frame's fake home indicator sits below the scroll area
// already, so a constant 26px is correct there.
function TabBar({ t, current, go }) {
const isMobile = useIsMobile();
const tabs = [
{ id: 'home', label: 'BATTLE', icon: '🥊' },
{ id: 'friends', label: 'FRIENDS', icon: '🫂' },
{ id: 'profile', label: 'ME', icon: '🐀' },
];
return (
{tabs.map(tab => {
const active = current === tab.id;
return (
);
})}