// components.jsx — logo, attract + win screens, shared chrome.
const { useState, useEffect, useRef } = React;
const GREEN = '#359652';
const GREEN_BRIGHT = '#46cf72';
// ---- weBeetle wordmark (inlined, recolorable via currentColor) ----
function Logo({ height = 70, color = '#fff' }) {
return (
);
}
// ---- mute toggle ----
function MuteButton({ muted, onToggle }) {
return (
);
}
// ---- floating prize emojis (attract background) ----
function FloatingPrizes() {
const items = React.useMemo(() => {
const e = ['✏️', '📓', '🛍️', '👕', '🏖️', '🧥'];
return Array.from({ length: 14 }, (_, i) => ({
key: i,
emoji: e[i % e.length],
left: Math.random() * 100,
size: 44 + Math.random() * 60,
dur: 9 + Math.random() * 8,
delay: -Math.random() * 16,
drift: (Math.random() * 2 - 1) * 60,
}));
}, []);
return (
{items.map((it) => (
{it.emoji}
))}
);
}
// ---- ATTRACT SCREEN ----
function AttractScreen({ onStart }) {
return (
PLINKO CHALLENGE
DROP THE
DISC
& WIN!
Every drop is a winner — guaranteed.
);
}
// ---- WIN SCREEN ----
function WinScreen({ prize, tier, onPlayAgain }) {
const epic = tier === 'epic';
const rare = tier === 'rare';
return (
{epic &&
}
{epic &&
}
{epic && (
JACKPOT!
)}
YOU WON!
{prize.emoji}
{prize.name.toUpperCase()}