function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, members, openProfile, share, pickAndUploadPhoto }) { const appData = isMultiplayer ? sharedData : data; const saveData = isMultiplayer ? setSharedData : setData; const writePatch = useCallback((patch) => { if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData(patch); } else { setData({ ...(data || {}), ...patch }); } }, [isMultiplayer, patchSharedData, setData, data]); const STARTER_DEMO_PINGS = [ { id: 'demo-1', location: 'Student Union North', status: 'Free energy drinks promo line is moving FAST! ⚡️', emoji: '🚨', createdAt: Date.now() - 120000, isDemo: true, reactions: { '🏃‍♀️': ['user-x', 'user-y'], '🔥': ['user-z'] }, _user: { id: 'demo-u1', displayName: 'NeonRider', handle: 'neon', profileImageUrl: '' } }, { id: 'demo-2', location: 'Main Library - Floor 3', status: 'Found a whole pod of empty desks by the windows.', emoji: '🤫', createdAt: Date.now() - 300000, isDemo: true, reactions: { '👍': ['user-a'] }, _user: { id: 'demo-u2', displayName: 'CyberStudy', handle: 'study', profileImageUrl: '' } }, { id: 'demo-3', location: 'Campus Coffee Hub', status: 'Espresso machine is DOWN. Do not come here!! 😭', emoji: '☕', createdAt: Date.now() - 900000, isDemo: true, reactions: { '👎': ['user-1', 'user-2', 'user-3'] }, _user: { id: 'demo-u3', displayName: 'GlitchGirl', handle: 'glitch', profileImageUrl: '' } } ]; const [composerOpen, setComposerOpen] = useState(false); const [formLocation, setFormLocation] = useState(''); const [formStatus, setFormStatus] = useState(''); const [formEmoji, setFormEmoji] = useState('📍'); const [formPhotoUrl, setFormPhotoUrl] = useState(null); const [uploading, setUploading] = useState(false); const [newPingId, setNewPingId] = useState(null); const [poppingReactions, setPoppingReactions] = useState({}); const inputRef = useRef(null); const playDing = useCallback(() => { try { const AC = window.AudioContext || window.webkitAudioContext; if (!AC) return; const ctx = new AC(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.connect(gain); gain.connect(ctx.destination); osc.type = 'sine'; osc.frequency.setValueAtTime(880, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(440, ctx.currentTime + 0.1); gain.gain.setValueAtTime(0.3, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3); osc.start(); osc.stop(ctx.currentTime + 0.3); } catch (e) { console.log('Audio blocked'); } }, []); const pings = useMemo(() => { const all = appData?.pings?.length ? appData.pings : STARTER_DEMO_PINGS; return [...all].sort((a, b) => (b._timestamp || b.createdAt) - (a._timestamp || a.createdAt)); }, [appData?.pings]); const handleAddPing = () => { if (!formLocation.trim() || !formStatus.trim()) return; const id = String(Date.now()); const basePing = { id, location: formLocation.trim(), status: formStatus.trim(), emoji: formEmoji, photoUrl: formPhotoUrl, reactions: {}, isDemo: false, _user: { id: user.id, displayName: user.displayName || user.name || 'Anonymous', handle: user.handle, profileImageUrl: user.profileImageUrl || user.avatarUrl }, _timestamp: Date.now(), createdAt: Date.now() }; if (isMultiplayer && typeof pushToSharedArray === 'function') { pushToSharedArray('pings', basePing); } else { const currentPings = appData?.pings?.length ? appData.pings : STARTER_DEMO_PINGS; const withoutDemo = (currentPings || []).filter(p => !p.isDemo); writePatch({ pings: [basePing, ...withoutDemo] }); } playDing(); setNewPingId(id); setTimeout(() => setNewPingId(null), 3000); setFormLocation(''); setFormStatus(''); setFormPhotoUrl(null); setFormEmoji('📍'); setComposerOpen(false); inputRef.current?.blur(); }; const attachPhoto = async () => { if (!pickAndUploadPhoto) return; setUploading(true); try { const res = await pickAndUploadPhoto({ target: 'shared', visibility: 'public' }); if (!res.cancelled) { setFormPhotoUrl(res.publicUrl); } } catch (e) { console.error(e); } finally { setUploading(false); } }; const toggleReaction = (pingId, emoji) => { const currentPings = appData?.pings?.length ? appData.pings : STARTER_DEMO_PINGS; const updatedPings = (currentPings || []).map(p => { if (p.id !== pingId) return p; const userIds = p.reactions?.[emoji] || []; const hasReacted = (userIds || []).includes(user.id); const newUsers = hasReacted ? (userIds || []).filter(id => id !== user.id) : [...userIds, user.id]; return { ...p, reactions: { ...p.reactions, [emoji]: newUsers } }; }); // Remove demo elements if a real user interacts with them to persist them as real const persistedPings = (updatedPings || []).map(p => p.id === pingId ? { ...p, isDemo: false } : p); writePatch({ pings: persistedPings }); // Animation trigger const popKey = `${pingId}_${emoji}`; setPoppingReactions(prev => ({ ...prev, [popKey]: true })); setTimeout(() => setPoppingReactions(prev => ({ ...prev, [popKey]: false })), 300); }; const availableEmojis = ['👍', '👎', '🔥', '🚨', '🏃‍♀️', '👀']; return (