{/* Ambient particles */} {[...Array(8)].map((_, i) => (

))} {/* EXPANDED INTEREST OVERLAY */} {expanded && (

handleInterestTap(null)}>

e.stopPropagation()}>

{expanded?.emoji ?? '✨'}

{expanded?.label ?? 'Interest'}

{expanded?.desc ?? ''}

XP: {expanded?.xp ?? 0}/100

{/* Reaction buttons */}

{['🔥', '💜', '⭐', '🎉'].map(em => { const rKey = (expanded?.id ?? 0) + '_' + em; const count = reactions?.[rKey] ?? 0; return ( ); })}

tap outside to close

)} {/* HEADER ZONE */}

UNSW

VibeCanvas ✨

{(memberList || []).slice(0, 5).map((m, i) => (

0 ? -10 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, zIndex: 5 - i }}> {!m?.avatarUrl && (m?.displayName ?? '?').charAt(0).toUpperCase()}

))} {(memberList || []).length > 1 && ( {(memberList || []).length} vibing )}

{/* ZONE 1: VIBE ORB */}

{/* Orbiting interest spheres */}

{(interests || []).map((interest, i) => { const angle = (i * 60) * (Math.PI / 180); const radius = 115; const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; const isTapped = local.tapFeedback === interest?.id; return (

handleInterestTap(interest?.id)} style={{ position: 'absolute', width: 52, height: 52, borderRadius: '50%', background: `radial-gradient(circle at 30% 30%, ${interest?.color ?? '#7C4DFF'}cc, ${interest?.color ?? '#7C4DFF'}44)`, border: `2px solid ${interest?.color ?? '#7C4DFF'}88`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, cursor: 'pointer', left: `calc(50% + ${x}px - 26px)`, top: `calc(50% + ${y}px - 26px)`, animation: `float ${2.5 + i * 0.3}s ease-in-out infinite`, animationDelay: `${i * 0.2}s`, transform: isTapped ? 'scale(1.3)' : 'scale(1)', transition: baseTransition, boxShadow: `0 0 20px ${interest?.color ?? '#7C4DFF'}44`, zIndex: 10 }} > {interest?.emoji ?? '✨'}

); })} {/* Central Orb */}

setLocal(l => ({ ...l, orbPressed: true }))} onMouseUp={() => { setLocal(l => ({ ...l, orbPressed: false })); handleOrbTap(); }} onMouseLeave={() => setLocal(l => ({ ...l, orbPressed: false }))} onTouchStart={() => setLocal(l => ({ ...l, orbPressed: true }))} onTouchEnd={() => { setLocal(l => ({ ...l, orbPressed: false })); handleOrbTap(); }} style={{ width: orbSize, height: orbSize, borderRadius: '50%', background: moodGradients[currentMood] ?? moodGradients.creative, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', position: 'relative', zIndex: 20, transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', animation: local.orbBurst ? 'orbBurst 0.6s ease' : 'pulse 3s ease-in-out infinite', boxShadow: `0 0 60px ${(expanded?.color ?? '#7C4DFF')}44, inset 0 0 40px rgba(255,255,255,0.1)` }} >

{moodEmojis[currentMood] ?? '🎨'}

{currentMood}

⚡ {vibeOrb?.energy ?? 85}%

{/* Mood selector */}

{(moods || []).map(m => ( ))}

tapped {vibeOrb?.pulseCount ?? 0} times • tap the orb!

{/* ZONE 2: VIBE WALL */}

💬 Vibe Wall {(vibeWall || []).length} vibes

{/* Input */}

setLocal(l => ({ ...l, newVibe: e.target.value }))} onKeyDown={e => e.key === 'Enter' && handlePostVibe()} placeholder="Drop a vibe... ✨" style={{ flex: 1, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 16, padding: '12px 16px', fontSize: 15, color: '#fff', outline: 'none', fontFamily: 'inherit', minHeight: 48 }} />

{/* Messages */}

{(vibeWall || []).map((vibe, i) => { const v = vibe ?? {}; return (

{v.author ?? 'Anonymous'} {v.ts ? Math.max(0, Math.floor((Date.now() - v.ts) / 60000)) + 'm ago' : ''}

{v.text ?? ''}

); })} {(vibeWall || []).length === 0 && (

No vibes yet... be the first! 🌟

)}

); }