{/* SKILL TREE PANEL */}

⚡ Skill Tree

{(skills || []).map((skill, i) => { const pct = Math.min(100, ((skill?.xp ?? 0) / (skill?.maxXp ?? 1)) * 100); const isAnimating = localState.animatingSkill === skill.name; const relatedQuests = (quests || []).filter(q => q.skill === skill.name); return (

tapSkill(skill.name)} style={{ ...neumorphBase, padding: 20, marginBottom: 16, transform: isAnimating ? 'scale(1.04)' : (localState.mountAnim ? 'translateX(0)' : 'translateX(60px)'), opacity: localState.mountAnim ? 1 : 0, transition: `all 0.4s cubic-bezier(0.4, 0, 0.2, 1) ${i * 0.08}s`, cursor: 'pointer' }}>

{skill?.emoji ?? '⭐'}

{skill?.name ?? 'Skill'}

Level {skill?.level ?? 1} • {skill?.xp ?? 0}/{skill?.maxXp ?? 100} XP

{isAnimating && 🆙}

{isAnimating && (relatedQuests || []).length > 0 && (

{(relatedQuests || []).map(q => (

{q?.emoji ?? '📋'} {q?.title ?? 'Quest'}

))}

)}

); })}

{/* MAIN CONTENT */}

{/* HEADER */}

UNSW · SideQuest

{user?.name ?? 'Adventurer'}

{/* HERO XP BAR */}

🏆

Level {userLevel}

{totalXp} XP earned

{(quests || []).filter(q => q.status === 'complete').length}/{(quests || []).length}

Quests Done

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

{i === 0 ? '👑' : '🎮'} {m?.displayName ?? 'Player'}

))}

{/* QUEST GRID */}

{(quests || []).map((quest, i) => { const isExpanded = expanded === quest.id; const catColor = categoryColors[quest?.category] ?? '#667eea'; return (

toggleExpand(quest.id)} style={{ ...neumorphBase, padding: 18, gridColumn: isExpanded ? '1 / -1' : 'auto', cursor: 'pointer', transform: isExpanded ? 'scale(1.02)' : (localState.mountAnim ? 'scale(1)' : 'scale(0.9)'), opacity: localState.mountAnim ? 1 : 0, transition: `all 0.4s cubic-bezier(0.4, 0, 0.2, 1) ${i * 0.06}s`, position: 'relative', overflow: 'hidden' }}> {quest?.status === 'complete' && (

✓ DONE

)}

{quest?.emoji ?? '📋'}

{quest?.title ?? 'Quest'}

{quest?.category ?? 'General'}

⚡ {quest?.xp ?? 0} XP

{isExpanded && (

{quest?.desc ?? ''}

{/* Clips */}

Clips & Media

{(quest?.clips ?? []).map((clip, ci) => (

{clip}

))}

{/* Reactions */}

{['fire', 'star', 'heart'].map(type => { const emojiMap = { fire: '🔥', star: '⭐', heart: '❤️' }; const reacted = localState.reactedQuests?.[`${quest.id}-${type}`]; return ( ); })}

)}

); })}

{/* ACTIVE QUESTS BANNER */} {(quests || []).filter(q => q.status === 'active').length > 0 && (

🎯 Active Quests

{(quests || []).filter(q => q.status === 'active').map(q => (

toggleExpand(q.id)} style={{ ...neumorphInset, padding: 14, marginBottom: 8, borderRadius: 14, display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', transition: 'all 0.2s ease' }}> {q?.emoji ?? '📋'}

{q?.title ?? 'Quest'}

⚡ {q?.xp ?? 0} XP • In Progress

→

))}

)}

); }