// Avatar Picker — Gacha / Summon mechanic. // Egg idle → click → shake → crack → avatar pop + star burst → re-roll or confirm. const { useState, useEffect, useRef } = React; const { X, RefreshCw, Check, Sparkles } = LucideReact; /* ── Egg SVG ────────────────────────────────────────────────── */ const EggSVG = ({ phase }) => ( ); /* ── Star Burst ─────────────────────────────────────────────── */ const STAR_EMOJIS = ["✨", "⭐", "🌟", "✨", "⭐", "🌟", "✨", "⭐"]; const StarBurst = ({ seed }) => (

{STAR_EMOJIS.map((emoji, i) => { const angle = (i / STAR_EMOJIS.length) * 360 - 90; const rad = angle * Math.PI / 180; const dist = 82; const tx = Math.round(Math.cos(rad) * dist); const ty = Math.round(Math.sin(rad) * dist); return (

{emoji}

); })}

); /* ── Avatar Picker ──────────────────────────────────────────── */ const AvatarPicker = ({ open, currentId, onSelect, onClose }) => { // phase: "idle" | "shaking" | "cracking" | "revealed" const [phase, setPhase] = useState("idle"); const [revealedId, setRevealedId] = useState(null); const [rollCount, setRollCount] = useState(0); const [showStars, setShowStars] = useState(false); const [starSeed, setStarSeed] = useState(0); const lastIdRef = useRef(null); const busyRef = useRef(false); // Reset when modal opens useEffect(() => { if (open) { setPhase("idle"); setRevealedId(null); setRollCount(0); setShowStars(false); busyRef.current = false; lastIdRef.current = null; } }, [open]); // ESC to close useEffect(() => { const onKey = (e) => { if (e.key === "Escape" && open) onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; const summon = () => { if (busyRef.current) return; busyRef.current = true; setShowStars(false); setPhase("shaking"); setTimeout(() => setPhase("cracking"), 620); setTimeout(() => { // Pick random, avoid same as last roll const pool = (window.AVATARS || []).filter(a => a.id !== lastIdRef.current); const chosen = (pool.length ? pool : window.AVATARS)[Math.floor(Math.random() * (pool.length || 1))]; lastIdRef.current = chosen?.id ?? "bunny"; setRevealedId(chosen?.id ?? "bunny"); setRollCount(c => c + 1); setPhase("revealed"); setShowStars(true); setStarSeed(s => s + 1); setTimeout(() => setShowStars(false), 1400); busyRef.current = false; }, 1050); }; const revealedAvatar = (window.AVATARS || []).find(a => a.id === revealedId); const eggAnimStyle = { idle: "egg-bob 2.6s ease-in-out infinite", shaking: "egg-shake 0.62s ease-in-out", cracking: "egg-crack 0.38s ease-in-out", revealed: "none", }[phase]; return (

e.stopPropagation()} style={{ borderRadius: "32px", boxShadow: "0 30px 80px -20px rgba(27,26,23,0.28), 0 0 0 1px rgba(27,26,23,0.05)" }} > {/* ── Header ── */}

{phase === "revealed" ? rollCount === 1 ? "ได้ตัวแรก!" : `ลองครั้งที่ ${rollCount}` : "Summon มาสคอท"}

{/* ── Main ── */}

{phase !== "revealed" ? ( /* ── Egg state ── */ <>

{phase === "idle" ? "แตะไข่เพื่อ Summon มาสคอท!" : "กำลัง Summon..."}

{phase === "idle" ? "มีมาสคอต 12 ตัวให้สุ่ม ✨" : "โผล่ออกมาแล้ว..."}

) : ( /* ── Revealed state ── */ <>

{showStars && }

{revealedAvatar?.name ?? "—"}

{rollCount === 1 ? "ได้เลยในครั้งแรก!" : `Summon ไปแล้ว ${rollCount} ครั้ง`}

)}

{/* ── Footer ── */}

{phase === "revealed" ? ( <> ) : ( )}

); }; window.AvatarPicker = AvatarPicker;