function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, members }) { const appData = isMultiplayer ? sharedData : data; const saveData = isMultiplayer ? setSharedData : setData; const memberList = (isMultiplayer && members?.length) ? members : [{ id: user?.id ?? 'solo', displayName: user?.name ?? 'Maestro', avatarUrl: user?.avatarUrl, role: 'owner' }]; const defaultData = { mode: 'orchestra', momentIndex: 0, confettiPieces: [], reactions: {}, tapCount: 0 }; const state = appData ?? defaultData; const mode = state?.mode ?? 'orchestra'; const momentIndex = state?.momentIndex ?? 0; const reactions = state?.reactions ?? {}; const tapCount = state?.tapCount ?? 0; const [localConfetti, setLocalConfetti] = useState([]); const [animKey, setAnimKey] = useState(0); const [glowPulse, setGlowPulse] = useState(false); const [touchStart, setTouchStart] = useState(null); const [cardFlip, setCardFlip] = useState(false); useEffect(() => { if (!appData) saveData(defaultData); }, []); const orchestraMoments = [ { title: 'UNSW Orchestra Season Opener', emoji: '🎻', year: '2024', detail: 'First chair, first night, pure magic', color: '#FFD700' }, { title: 'Symphony No. 9 Performance', emoji: '🎼', year: '2024', detail: 'Beethoven under the stars at UNSW', color: '#C0C0C0' }, { title: 'Chamber Music Showcase', emoji: '🎶', year: '2024', detail: 'Intimate melodies, standing ovation', color: '#B87333' }, { title: 'Winter Gala Concert', emoji: '✨', year: '2025', detail: 'Art Deco stage, golden acoustics', color: '#FFD700' } ]; const plantMoments = [ { title: 'First Plant Harmony', emoji: '🌱', year: '2023', detail: 'A fern sang its first note through sensors', color: '#7CFC00' }, { title: 'Botanical Symphony', emoji: '🌿', year: '2024', detail: 'Five plants, one ethereal chord', color: '#00FA9A' }, { title: 'Moonlight Bloom Session', emoji: '🌸', year: '2024', detail: 'Night-blooming jasmine created ambient waves', color: '#FFB7C5' }, { title: 'Bio-Rhythm Orchestra', emoji: '🌳', year: '2025', detail: 'Where nature meets neural networks', color: '#98FB98' } ]; const moments = mode === 'orchestra' ? orchestraMoments : plantMoments; const currentMoment = moments?.[momentIndex % (moments || []).length] ?? moments[0]; const spawnConfetti = () => { const pieces = Array.from({ length: 20 }, (_, i) => ({ id: Date.now() + i, x: Math.random() * 100, delay: Math.random() * 0.5, color: mode === 'orchestra' ? ['#FFD700', '#C0C0C0', '#B87333', '#FFFFFF'][Math.floor(Math.random() * 4)] : ['#7CFC00', '#00FA9A', '#FFB7C5', '#98FB98'][Math.floor(Math.random() * 4)], size: Math.random() * 8 + 4, rotation: Math.random() * 360 })); setLocalConfetti(pieces); setTimeout(() => setLocalConfetti([]), 2000); }; const switchMode = (newMode) => { setAnimKey(k => k + 1); setGlowPulse(true); setTimeout(() => setGlowPulse(false), 600); spawnConfetti(); setCardFlip(false); saveData({ ...state, mode: newMode, momentIndex: 0, tapCount: (tapCount ?? 0) + 1 }); }; const handleSwipe = (direction) => { const len = (moments || []).length; const newIdx = direction === 'left' ? (momentIndex + 1) % len : (momentIndex - 1 + len) % len; setAnimKey(k => k + 1); spawnConfetti(); setCardFlip(false); saveData({ ...state, momentIndex: newIdx, tapCount: (tapCount ?? 0) + 1 }); }; const handleTouchStart = (e) => { const touch = e?.touches?.[0]; if (touch) setTouchStart(touch.clientX); }; const handleTouchEnd = (e) => { const touch = e?.changedTouches?.[0]; if (touch && touchStart !== null) { const diff = touch.clientX - touchStart; if (Math.abs(diff) > 50) handleSwipe(diff < 0 ? 'left' : 'right'); setTouchStart(null); } }; const addReaction = (emoji) => { const key = `${mode}-${momentIndex}`; const prev = reactions?.[key] ?? 0; saveData({ ...state, reactions: { ...reactions, [key]: prev + 1 }, tapCount: (tapCount ?? 0) + 1 }); }; const reactionCount = reactions?.[`${mode}-${momentIndex}`] ?? 0; const isOrch = mode === 'orchestra'; const bg = isOrch ? 'linear-gradient(160deg, #0a0a1a 0%, #1a1020 30%, #2a1530 60%, #0a0a1a 100%)' : 'linear-gradient(160deg, #0a1a0a 0%, #0a2018 30%, #081a10 60%, #0a1a0a 100%)'; const accent = isOrch ? '#FFD700' : '#00FA9A'; const accent2 = isOrch ? '#C0C0C0' : '#7CFC00'; const styleTag = ` @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;600&display=swap'); @keyframes fadeSlideUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } } @keyframes confettiFall { 0% { transform:translateY(-20px) rotate(0deg); opacity:1; } 100% { transform:translateY(100vh) rotate(720deg); opacity:0; } } @keyframes shimmer { 0%,100% { opacity:0.3; } 50% { opacity:1; } } @keyframes pulseGlow { 0%,100% { box-shadow:0 0 20px ${accent}44; } 50% { box-shadow:0 0 60px ${accent}88; } } @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } } @keyframes sparkle { 0%,100% { opacity:0.2; transform:scale(0.8); } 50% { opacity:1; transform:scale(1.2); } } @keyframes cardEnter { from { opacity:0; transform:scale(0.85) rotateY(10deg); } to { opacity:1; transform:scale(1) rotateY(0deg); } } @keyframes flipIn { from { transform:rotateY(90deg); opacity:0; } to { transform:rotateY(0deg); opacity:1; } } @keyframes borderDance { 0% { border-color: ${accent}88; } 50% { border-color: ${accent}; } 100% { border-color: ${accent}88; } } `; return (