{children}

); const NeuButton = ({ children, onClick, active, style }) => { const [pressed, setPressed] = useState(false); return ( ); }; const ProgressBar = ({ percent }) => (

); const AvatarGroup = ({ ids }) => { // If empty or undefined, show nothing if (!ids || (ids || []).length === 0) return null; // Find member objects for these IDs const activeMembers = (memberList || []).filter(m => (ids || []).includes(m.id)); return (

{(activeMembers || []).map((m, i) => (

{!m.avatarUrl && (m.displayName?.[0] || '👤')}

))}

); }; // 🎉 CONFETTI OVERLAY const Confetti = () => (

{Array.from({ length: 50 }).map((_, i) => (

{['🎉', '✨', '🦁', '🌟'][Math.floor(Math.random() * 4)]}

))}

); return (

{showConfetti && } {/* HEADER */}

Side Quest 🦁

{(memberList || []).length > 1 ? `${memberList.length} questers active` : 'Your personal quest log'}

openProfile(user.handle)} style={{ width: 44, height: 44, borderRadius: '50%', background: user.avatarUrl ? `url(${user.avatarUrl}) center/cover` : '#ddd', boxShadow: `${THEME.darkShadow}, ${THEME.lightShadow}`, border: `2px solid ${THEME.bg}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}> {!user.avatarUrl && '👤'}

{/* TABS */}

setActiveTab('active')} style={{ flex: 1 }}> Active setActiveTab('create')} style={{ flex: 1 }}> Spark ✨

{/* ACTIVE QUESTS */} {activeTab === 'active' && (

{(quests ?? []).map(quest => (

{quest.emoji} {quest.title}

{quest.completed && 🏆}

PROGRESS

{quest.progress}%

{(quest.stages ?? []).map((stage, idx) => { const isDone = stage.completedBy?.includes(user.id); const isLast = idx === (quest.stages || []).length - 1; const hasOthers = stage.completedBy?.length > 0 && !isDone; return (

toggleStage(quest.id, stage.id)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, borderRadius: 12, background: isDone ? 'rgba(0,0,0,0.02)' : 'transparent', cursor: 'pointer', userSelect: 'none' }} >

{isDone && '✓'}

{stage.text}

); })}

))} {/* BADGE GALLERY PREVIEW */}

Badges

{(badges ?? []).map(badge => (

{badge.emoji}

{badge.name}

))}

)} {/* CREATE QUEST FORM */} {activeTab === 'create' && (

Design a New Quest

QUEST TITLE setNewQuestTitle(e.target.value)} placeholder="e.g. Master React in 7 days" style={{ width: '100%', padding: 12, borderRadius: 12, border: 'none', background: THEME.bg, boxShadow: THEME.pressed, fontSize: 16, color: THEME.text, outline: 'none', boxSizing: 'border-box' }} />

STAGES {(newQuestStages || []).map((stage, i) => ( { const newStages = [...newQuestStages]; newStages[i] = e.target.value; setNewQuestStages(newStages); }} placeholder={`Step ${i + 1}`} style={{ width: '100%', padding: 12, borderRadius: 12, border: 'none', background: THEME.bg, boxShadow: THEME.pressed, fontSize: 16, color: THEME.text, outline: 'none', marginBottom: 12, boxSizing: 'border-box' }} /> ))}

Launch Quest 🚀

)} {/* FLOATING ACTION BUTTON / SHARE */} {isMultiplayer && (

)}

); }