function getAuthUserId(user) { const raw = user?.id ?? user?._id ?? user?.userId; if (raw === null || raw === undefined) return ''; return String(raw).trim(); } function isSignedInUser(user) { const id = getAuthUserId(user).toLowerCase(); if (!id) return false; return id !== 'anonymous' && id !== 'anon' && id !== 'guest'; } const LIVE_EVENT_TYPES = [ { key: 'match', label: 'Match', icon: '⚽' }, { key: 'game', label: 'Game', icon: '🏀' }, { key: 'race', label: 'Race', icon: '🏁' }, ]; const SPORTS = [ { key: 'football', label: 'Football', icon: '⚽' }, { key: 'basketball', label: 'Basketball', icon: '🏀' }, { key: 'cricket', label: 'Cricket', icon: '🏏' }, { key: 'rugby', label: 'Rugby', icon: '🏉' }, ]; const HEADER_SPORT_TAB_KEYS = ['football', 'basketball', 'cricket']; const VISIBLE_SPORT_KEYS = ['football', 'basketball', 'cricket']; const ADMIN_HANDLES = ['dev', 'louise', 'pasha', 'pennie', 'shakotha', 'snow']; function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, members, openProfile, share, startChat, pickAndUploadPhoto, getImageUrl, pickAndUploadAudio, getAudioUrl, uploadAudio, openAuth }) { const [isRecording, setIsRecording] = useState(false); const [playingId, setPlayingId] = useState(null); const [playProgress, setPlayProgress] = useState({}); const [playbackErrors, setPlaybackErrors] = useState({}); const [blinkOn, setBlinkOn] = useState(true); const [newNoteFlash, setNewNoteFlash] = useState(null); const [reactionBurst, setReactionBurst] = useState(null); const [showRecordPanel, setShowRecordPanel] = useState(false); const [recordingTitle, setRecordingTitle] = useState(''); const [uiNotes, setUiNotes] = useState([]); const [uiPlayerPosts, setUiPlayerPosts] = useState([]); const [playbackRate, setPlaybackRate] = useState(1.25); const [headerTab, setHeaderTab] = useState('football'); const [selectedSport, setSelectedSport] = useState('football'); const [selectedChannel, setSelectedChannel] = useState('voice'); const [activeLiveRoomId, setActiveLiveRoomId] = useState(null); const [showCreateRoomPanel, setShowCreateRoomPanel] = useState(false); const [showLiveRecordPanel, setShowLiveRecordPanel] = useState(false); const [liveRoomForm, setLiveRoomForm] = useState({ title: '', eventLabel: '', eventType: 'match' }); const [liveRecordingTitle, setLiveRecordingTitle] = useState(''); const [uiLiveRooms, setUiLiveRooms] = useState([]); const [showPlayerPostPanel, setShowPlayerPostPanel] = useState(false); const [searchOpen, setSearchOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(''); const [expandedThreadId, setExpandedThreadId] = useState(null); const [replyingTo, setReplyingTo] = useState(null); const [isMobile, setIsMobile] = useState(() => (typeof window !== 'undefined' ? window.innerWidth < 640 : false)); const [isDesktop, setIsDesktop] = useState(() => (typeof window !== 'undefined' ? window.innerWidth >= 1024 : false)); const [fabHintIndex, setFabHintIndex] = useState(0); const [fabHintVisible, setFabHintVisible] = useState(false); const [activeChallenge, setActiveChallenge] = useState(null); const [showAdminPanel, setShowAdminPanel] = useState(false); const [adminSection, setAdminSection] = useState('events'); const [adminEventForm, setAdminEventForm] = useState({ title: '', when: '', location: '', incentive: '', emoji: '📅' }); const [adminChallengeForm, setAdminChallengeForm] = useState({ title: '', subtitle: '', prize: '', badge: '🔴 ACTIVE CHALLENGE', emoji: '🏆' }); const [adminTakeSport, setAdminTakeSport] = useState('football'); const [adminChallengeSport, setAdminChallengeSport] = useState('football'); const [playerPostForm, setPlayerPostForm] = useState({ title: '', dateTime: '', location: '', playersNeeded: '', cost: '', notes: '', }); const [showRsvpIntro, setShowRsvpIntro] = useState(false); const [optimisticRsvpIds, setOptimisticRsvpIds] = useState([]); const playTimerRef = useRef(null); const navHistoryRef = useRef([]); const [navStackLen, setNavStackLen] = useState(0); const scrollRef = useRef(null); const feedSectionRef = useRef(null); const audioElementRef = useRef(null); const playbackBlobUrlRef = useRef(null); // When this component itself calls saveData (reaction, new note, etc.) // the resulting appData change must not overwrite uiNotes — the local // state is already correct. Flip this to true before any local saveData // call; the sync effect clears it after skipping one cycle. const skipNextNoteSyncRef = useRef(false); const skipNextLiveRoomsSyncRef = useRef(false); const liveRoomsRef = useRef([]); // Always-current refs so async callbacks (after awaits, timers, DOM // events) never read stale closed-over values. const appDataRef = useRef(null); const notesBySportRef = useRef({}); const challengesBySportRef = useRef({}); const playerPostsBySportRef = useRef({}); const appData = isMultiplayer ? sharedData : data; // NOTE: don't reintroduce a generic `saveData` helper here. The previous // `isMultiplayer ? setSharedData : setData` shim caused a serious bug // because callers used the callback form (saveData(prev => ({...}))) which // setSharedData does NOT accept — only setData (React useState) does. // Every save call now branches explicitly on isMultiplayer and uses // patchSharedData (additive deep-merge) in multiplayer. const visibleSportKeys = VISIBLE_SPORT_KEYS; const memberList = useMemo(() => { if (isMultiplayer && members?.length > 0) return members; return [{ id: user?.id, displayName: user?.name || 'You', handle: user?.handle, avatarUrl: user?.avatarUrl, role: 'owner' }]; }, [isMultiplayer, members, user]); const TRENDING_TOPICS_BY_SPORT = useMemo(() => ({ football: [ { id: 'tr-f1', title: 'Is Mbappe overrated?', participants: 1284, emoji: '⚽', accent: '#FF2B4D', sportKey: 'football' }, { id: 'tr-f2', title: 'Should Arsenal sack Arteta?', participants: 2107, emoji: '🔥', accent: '#FF8096', sportKey: 'football' }, { id: 'tr-f3', title: 'Haaland or Kane legacy?', participants: 1543, emoji: '⚽', accent: '#fcd34d', sportKey: 'football' }, ], basketball: [ { id: 'tr-b1', title: 'Are the Lakers done?', participants: 1102, emoji: '🏀', accent: '#FF2B4D', sportKey: 'basketball' }, { id: 'tr-b2', title: 'Jokic vs Giannis for MVP?', participants: 876, emoji: '🔥', accent: '#FF8096', sportKey: 'basketball' }, { id: 'tr-b3', title: 'Should the Celtics blow it up?', participants: 1431, emoji: '🏀', accent: '#fcd34d', sportKey: 'basketball' }, ], cricket: [ { id: 'tr-c1', title: 'Best IPL finisher?', participants: 932, emoji: '🏏', accent: '#fcd34d', sportKey: 'cricket' }, { id: 'tr-c2', title: 'Kohli still the GOAT?', participants: 1187, emoji: '🏏', accent: '#FF8096', sportKey: 'cricket' }, { id: 'tr-c3', title: 'Test cricket is dying?', participants: 764, emoji: '🔥', accent: '#86efac', sportKey: 'cricket' }, ], }), []); const DEFAULT_UPCOMING_EVENTS = useMemo(() => [ { id: 'ev-nba-finals', title: 'NBA Finals Watch Party', when: 'Sat Jun 6 · 10:30am', location: 'Sports bar near UNSW', incentive: 'Free drink for RSVPs', emoji: '🏀', sport: 'basketball', }, { id: 'ev-aus-turkey', title: 'FIFA: Australia vs Turkey', when: 'Sun Jun 14 · 2:00pm', location: 'Sports bar near UNSW', incentive: 'Free drink/food for early RSVPs', emoji: '🇦🇺', sport: 'football', }, ], []); const DEFAULT_CHALLENGES_BY_SPORT = useMemo(() => ({ football: { id: 'ch-ucl-2026', badge: '🔴 ACTIVE CHALLENGE', title: 'CHAMPIONS LEAGUE HOT TAKES', subtitle: 'PSG vs Arsenal • UCL 2026', prize: '$50', emoji: '🏆', sport: 'football', }, basketball: { id: 'ch-nba-finals-2026', badge: '🔴 ACTIVE CHALLENGE', title: 'NBA FINALS HOT TAKES', subtitle: 'Spurs vs Knicks • NBA Finals 2026', prize: '$50', emoji: '🏆', sport: 'basketball', }, cricket: null, }), []); const FAB_HINTS = useMemo(() => ({ voice: ['Drop your opinion', 'Start a debate', 'Your club needs defending'], players: ['Find your crew', 'Post a game', 'Get on the pitch'], }), []); const getSportTheme = (sportKey) => { if (sportKey === 'cricket') { return { gradient: 'linear-gradient(135deg, #22c55e 0%, #15803d 100%)', gradientSoft: 'linear-gradient(135deg, #4ade80 0%, #16a34a 100%)', shadow: '0 4px 14px rgba(34,197,94,0.45)', shadowLg: '0 12px 32px rgba(34,197,94,0.5), 0 0 40px rgba(34,197,94,0.2)', shadowHero: '0 16px 40px rgba(34,197,94,0.55), 0 0 48px rgba(34,197,94,0.25)', accent: '#86efac', accentText: '#bbf7d0', accentMuted: '#4ade80', border: 'rgba(34,197,94,0.28)', headerBorder: 'rgba(34,197,94,0.18)', bgSoft: 'linear-gradient(180deg, rgba(34,197,94,0.12) 0%, rgba(10,8,12,0.0) 100%)', bgGlow: 'rgba(34,197,94,0.10)', fabHalo: 'hu-fab-halo-green', fabGlow: 'hu-fab-glow-green', fabPillClass: 'hu-fab-pill-green', cardPlayingBorder: 'rgba(34,197,94,0.45)', cardFlashBg: 'linear-gradient(180deg, rgba(34,197,94,0.12) 0%, rgba(255,255,255,0.02) 100%)', cardPlayingShadow: '0 10px 28px rgba(34,197,94,0.22), 0 0 0 1px rgba(34,197,94,0.12)', badgeBg: 'rgba(34,197,94,0.12)', badgeBorder: 'rgba(34,197,94,0.2)', tabActiveBg: 'rgba(34,197,94,0.2)', tabActiveColor: '#86efac', threadBorder: 'rgba(34,197,94,0.2)', threadBorderLight: 'rgba(34,197,94,0.1)', reactionActiveBg: 'rgba(34,197,94,0.15)', reactionActiveBorder: 'rgba(34,197,94,0.4)', trendBorder: 'rgba(34,197,94,0.22)', trendBg: 'linear-gradient(180deg, rgba(34,197,94,0.10) 0%, rgba(15,10,18,0.85) 100%)', appBg: 'radial-gradient(1200px 700px at 0% -5%, rgba(34,197,94,0.10), transparent 50%), radial-gradient(900px 600px at 100% 0%, rgba(15,23,42,0.9), transparent 55%), linear-gradient(180deg, #080808 0%, #0a0f1e 55%, #050810 100%)', challengeBorder: 'rgba(34,197,94,0.32)', challengeBadgeBg: 'rgba(34,197,94,0.14)', challengeBadgeBorder: 'rgba(34,197,94,0.4)', challengeBadgeColor: '#86efac', challengeDot: '#22c55e', challengeCta: 'linear-gradient(135deg, #16a34a 0%, #15803d 100%)', challengeCtaShadow: '0 10px 28px rgba(34,197,94,0.45), 0 0 0 1px rgba(34,197,94,0.25)', challengeCardBg: 'radial-gradient(480px 220px at 0% 0%, rgba(34,197,94,0.18), transparent 55%), radial-gradient(360px 180px at 100% 100%, rgba(21,128,61,0.22), transparent 55%), linear-gradient(180deg, rgba(6,14,10,0.97) 0%, rgba(5,10,8,0.99) 100%)', challengeTitleGrad: 'linear-gradient(135deg, #ffffff 30%, #86efac 100%)', challengeLiveBadgeBg: 'rgba(34,197,94,0.15)', challengeLiveBadgeColor: '#86efac', challengeLiveBadgeBorder: 'rgba(34,197,94,0.35)', playerPlayingBg: 'linear-gradient(135deg, rgba(34,197,94,0.10) 0%, rgba(15,23,42,0.6) 100%)', playerPlayingBorder: 'rgba(34,197,94,0.28)', avatarGradient: 'linear-gradient(135deg, #22c55e 0%, #15803d 100%)', nestedAvatarBg: 'rgba(34,197,94,0.5)', }; } return { gradient: 'linear-gradient(135deg, #FF2B4D 0%, #CC0022 100%)', gradientSoft: 'linear-gradient(135deg, #ff6b7a 0%, #CC0022 100%)', shadow: '0 4px 14px rgba(255,43,77,0.45)', shadowLg: '0 12px 32px rgba(255,43,77,0.5), 0 0 40px rgba(255,43,77,0.2)', shadowHero: '0 16px 40px rgba(255,43,77,0.55), 0 0 48px rgba(255,43,77,0.25)', accent: '#FF8096', accentText: '#fca5a5', accentMuted: '#FF8096', border: 'rgba(255,43,77,0.28)', headerBorder: 'rgba(255,43,77,0.12)', bgSoft: 'linear-gradient(180deg, rgba(255,43,77,0.10) 0%, rgba(10,8,12,0.0) 100%)', bgGlow: 'rgba(255,43,77,0.10)', fabHalo: 'hu-fab-halo-red', fabGlow: 'hu-fab-glow-red', fabPillClass: '', cardPlayingBorder: 'rgba(255,43,77,0.4)', cardFlashBg: 'linear-gradient(180deg, rgba(255,43,77,0.12) 0%, rgba(255,255,255,0.02) 100%)', cardPlayingShadow: '0 10px 28px rgba(255,43,77,0.22), 0 0 0 1px rgba(255,43,77,0.12)', badgeBg: 'rgba(255,43,77,0.12)', badgeBorder: 'rgba(255,43,77,0.2)', tabActiveBg: 'rgba(255,43,77,0.2)', tabActiveColor: '#FF8096', threadBorder: 'rgba(255,43,77,0.2)', threadBorderLight: 'rgba(255,43,77,0.1)', reactionActiveBg: 'rgba(255,43,77,0.15)', reactionActiveBorder: 'rgba(255,43,77,0.4)', trendBorder: 'rgba(255,43,77,0.22)', trendBg: 'linear-gradient(180deg, rgba(255,43,77,0.10) 0%, rgba(15,10,18,0.85) 100%)', appBg: 'radial-gradient(1200px 700px at 0% -5%, rgba(255,43,77,0.10), transparent 50%), radial-gradient(900px 600px at 100% 0%, rgba(15,23,42,0.9), transparent 55%), linear-gradient(180deg, #080808 0%, #0a0f1e 55%, #050810 100%)', challengeBorder: 'rgba(220,38,38,0.32)', challengeBadgeBg: 'rgba(220,38,38,0.14)', challengeBadgeBorder: 'rgba(220,38,38,0.4)', challengeBadgeColor: '#f87171', challengeDot: '#ef4444', challengeCta: 'linear-gradient(135deg, #dc2626 0%, #991b1b 100%)', challengeCtaShadow: '0 10px 28px rgba(220,38,38,0.45), 0 0 0 1px rgba(220,38,38,0.25)', challengeCardBg: 'radial-gradient(480px 220px at 0% 0%, rgba(220,38,38,0.18), transparent 55%), radial-gradient(360px 180px at 100% 100%, rgba(139,0,0,0.22), transparent 55%), linear-gradient(180deg, rgba(14,6,6,0.97) 0%, rgba(10,5,5,0.99) 100%)', challengeTitleGrad: 'linear-gradient(135deg, #ffffff 30%, #fca5a5 100%)', challengeLiveBadgeBg: 'rgba(220,38,38,0.15)', challengeLiveBadgeColor: '#f87171', challengeLiveBadgeBorder: 'rgba(220,38,38,0.35)', playerPlayingBg: 'linear-gradient(135deg, rgba(255,43,77,0.10) 0%, rgba(15,23,42,0.6) 100%)', playerPlayingBorder: 'rgba(255,43,77,0.28)', avatarGradient: 'linear-gradient(135deg, #FF2B4D 0%, #CC0022 100%)', nestedAvatarBg: 'rgba(255,43,77,0.5)', }; }; const sportTheme = getSportTheme(selectedSport); const feedSportTheme = getSportTheme(selectedSport); const eventsTheme = getSportTheme('football'); const trendingTopics = (TRENDING_TOPICS_BY_SPORT[selectedSport] || TRENDING_TOPICS_BY_SPORT.football) || []; const normalizeHandle = (handle) => (handle || '').replace(/^@/, '').trim().toLowerCase(); const findChallengeById = (id, challengesMap) => { if (!id || !challengesMap) return null; for (const key of HEADER_SPORT_TAB_KEYS) { const c = challengesMap[key]; if (c?.id === id) return c; } return null; }; const closeAllPanels = () => { setShowRecordPanel(false); setShowCreateRoomPanel(false); setShowLiveRecordPanel(false); setShowPlayerPostPanel(false); setShowAdminPanel(false); setRecordingTitle(''); setReplyingTo(null); }; const syncNavStackLen = () => setNavStackLen((navHistoryRef.current || []).length); const getNavSnapshot = () => ({ headerTab, selectedSport, selectedChannel, activeLiveRoomId, activeChallengeId: activeChallenge?.id ?? null, searchOpen, }); const pushNavHistory = () => { const snap = getNavSnapshot(); const stack = navHistoryRef.current; const last = stack[(stack || []).length - 1]; if ( last && last.headerTab === snap.headerTab && last.selectedSport === snap.selectedSport && last.selectedChannel === snap.selectedChannel && last.activeLiveRoomId === snap.activeLiveRoomId && last.activeChallengeId === snap.activeChallengeId && last.searchOpen === snap.searchOpen ) { return; } navHistoryRef.current = [...(stack || []).slice(-24), snap]; syncNavStackLen(); }; const restoreNavSnapshot = (snap) => { setHeaderTab(snap.headerTab); setSelectedSport(snap.selectedSport); setSelectedChannel(snap.selectedChannel); setActiveLiveRoomId(snap.activeLiveRoomId ?? null); setActiveChallenge(findChallengeById(snap.activeChallengeId, challengesBySportRef.current)); setSearchOpen(!!snap.searchOpen); if (!snap.searchOpen) setSearchQuery(''); }; const popNavHistory = () => { const stack = navHistoryRef.current; if (!(stack || []).length) return false; const snap = stack[(stack || []).length - 1]; navHistoryRef.current = (stack || []).slice(0, -1); restoreNavSnapshot(snap); syncNavStackLen(); return true; }; const navigateToTab = (tabKey) => { if (headerTab === tabKey && selectedSport === tabKey) return; pushNavHistory(); closeAllPanels(); setActiveChallenge(null); setActiveLiveRoomId(null); setHeaderTab(tabKey); setSelectedSport(tabKey); if (scrollRef.current) scrollRef.current.scrollTop = 0; }; const navigateToChannel = (channelKey) => { if (selectedChannel === channelKey) return; pushNavHistory(); setSelectedChannel(channelKey); if (scrollRef.current) scrollRef.current.scrollTop = 0; }; const openChallenge = (challenge) => { if (activeChallenge?.id === challenge.id) return; pushNavHistory(); setActiveChallenge(challenge); }; const openLiveRoom = (roomId) => { if (activeLiveRoomId === roomId) return; pushNavHistory(); setActiveLiveRoomId(roomId); }; const overlaysOpen = !!( showRecordPanel || showCreateRoomPanel || showLiveRecordPanel || showPlayerPostPanel || showAdminPanel || activeChallenge || activeLiveRoomId || searchOpen ); const atHomeScreen = headerTab === 'football' && selectedSport === 'football' && selectedChannel === 'voice' && !overlaysOpen; const isHome = atHomeScreen && navStackLen === 0; const canGoBack = !isHome; const goHome = () => { navHistoryRef.current = []; syncNavStackLen(); closeAllPanels(); setActiveChallenge(null); setActiveLiveRoomId(null); setSearchOpen(false); setSearchQuery(''); setExpandedThreadId(null); setHeaderTab('football'); setSelectedSport('football'); setSelectedChannel('voice'); if (scrollRef.current) scrollRef.current.scrollTop = 0; }; const goBack = () => { if (showRecordPanel) { setShowRecordPanel(false); setRecordingTitle(''); setReplyingTo(null); return; } if (showLiveRecordPanel) { setShowLiveRecordPanel(false); setLiveRecordingTitle(''); return; } if (showCreateRoomPanel) { setShowCreateRoomPanel(false); return; } if (showPlayerPostPanel) { setShowPlayerPostPanel(false); return; } if (showAdminPanel) { setShowAdminPanel(false); return; } if (activeChallenge) { setActiveChallenge(null); return; } if (activeLiveRoomId) { setActiveLiveRoomId(null); setShowLiveRecordPanel(false); setLiveRecordingTitle(''); return; } if (searchOpen) { setSearchOpen(false); setSearchQuery(''); return; } if (popNavHistory()) return; if (selectedChannel !== 'voice') { setSelectedChannel('voice'); return; } if (headerTab !== 'football' || selectedSport !== 'football') { setHeaderTab('football'); setSelectedSport('football'); setActiveLiveRoomId(null); } }; const contentThemeClass = selectedSport === 'cricket' ? 'hu-theme-cricket' : ''; const layoutAppBg = getSportTheme('football').appBg; const navBtnStyle = { width: 36, height: 36, borderRadius: 999, flexShrink: 0, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: '#e5e7eb', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontFamily: 'inherit', padding: 0, }; const navBtnDisabledStyle = { ...navBtnStyle, opacity: 0.35, cursor: 'default', pointerEvents: 'none', }; const DEMO_NOTES = useMemo(() => [], []); // Additive normalize: preserves any sport keys already in sharedData even if // they are no longer in the current SPORTS list. Removing a sport from // SPORTS must NEVER drop the saved notes for that sport. const normalizeNotesBySport = useCallback((source) => { const existing = source?.notesBySport && typeof source.notesBySport === 'object' ? source.notesBySport : null; const merged = {}; if (existing) { for (const key of Object.keys(existing || {})) { merged[key] = Array.isArray(existing[key]) ? existing[key] : []; } } else { // Legacy migration: old shape stored a flat `notes` array (football). const legacyNotes = Array.isArray(source?.notes) ? (source.notes || []).filter(note => !note?.isDemo) : []; if ((legacyNotes || []).length) merged.football = legacyNotes; } for (const sport of SPORTS || []) { if (!Array.isArray(merged[sport.key])) { merged[sport.key] = []; } } return merged; }, [SPORTS]); const normalizePlayerPostsBySport = useCallback((source) => { const existing = source?.playerPostsBySport && typeof source.playerPostsBySport === 'object' ? source.playerPostsBySport : null; const merged = {}; if (existing) { for (const key of Object.keys(existing || {})) { merged[key] = Array.isArray(existing[key]) ? existing[key] : []; } } for (const sport of SPORTS || []) { if (!Array.isArray(merged[sport.key])) { merged[sport.key] = []; } } return merged; }, [SPORTS]); const normalizeUpcomingEvents = useCallback((source) => { const raw = source?.upcomingEvents; if (Array.isArray(raw) && (raw || []).length) { return raw .filter((e) => e && e.id && e.title) .map((e) => ({ id: String(e.id), title: String(e.title || ''), when: String(e.when || ''), location: String(e.location || ''), incentive: String(e.incentive || ''), emoji: String(e.emoji || '📅'), sport: typeof e.sport === 'string' && e.sport ? e.sport : null, })); } return DEFAULT_UPCOMING_EVENTS; }, [DEFAULT_UPCOMING_EVENTS]); const normalizeChallengesBySport = useCallback((source) => { const raw = source?.challengesBySport; const merged = {}; for (const key of HEADER_SPORT_TAB_KEYS) { const fromRaw = raw && typeof raw === 'object' ? raw[key] : undefined; const fromDefault = DEFAULT_CHALLENGES_BY_SPORT[key]; if (fromRaw === null) { merged[key] = null; } else if (fromRaw && typeof fromRaw === 'object' && fromRaw.id) { merged[key] = { ...(fromDefault || {}), ...fromRaw, sport: key, }; } else { merged[key] = fromDefault ?? null; } } return merged; }, [DEFAULT_CHALLENGES_BY_SPORT]); const normalizeEventRsvps = useCallback((source) => { const raw = source?.eventRsvps; if (!raw || typeof raw !== 'object') return {}; const merged = {}; for (const eventId of Object.keys(raw || {})) { const list = Array.isArray(raw[eventId]) ? raw[eventId] : []; const seen = {}; merged[eventId] = list .filter((r) => r && (r.userId || r._user?.id)) .map((r) => ({ userId: String(r.userId || r._user?.id || ''), displayName: String(r.displayName || r.name || r._user?.name || 'Guest'), handle: String(r.handle || r._user?.handle || ''), rsvpAt: typeof r.rsvpAt === 'number' ? r.rsvpAt : Date.now(), })) .filter((r) => { if (!r.userId || seen[r.userId]) return false; seen[r.userId] = true; return true; }); } return merged; }, []); const notesBySport = useMemo(() => normalizeNotesBySport(appData ?? {}), [appData, normalizeNotesBySport]); const playerPostsBySport = useMemo(() => normalizePlayerPostsBySport(appData ?? {}), [appData, normalizePlayerPostsBySport]); const upcomingEvents = useMemo(() => normalizeUpcomingEvents(appData ?? {}), [appData, normalizeUpcomingEvents]); const challengesBySport = useMemo(() => normalizeChallengesBySport(appData ?? {}), [appData, normalizeChallengesBySport]); const eventRsvps = useMemo(() => normalizeEventRsvps(appData ?? {}), [appData, normalizeEventRsvps]); const adminRsvpEntries = useMemo(() => { const titleById = {}; for (const ev of upcomingEvents || []) titleById[ev.id] = ev; const entries = []; for (const eventId of Object.keys(eventRsvps || {})) { const ev = titleById[eventId]; for (const r of eventRsvps[eventId] || []) { if (!r?.userId) continue; entries.push({ userId: r.userId, displayName: r.displayName, handle: r.handle, rsvpAt: r.rsvpAt, eventId, eventTitle: ev?.title || 'Removed event', eventEmoji: ev?.emoji || '📅', }); } } (entries || []).sort((a, b) => (b.rsvpAt || 0) - (a.rsvpAt || 0)); return entries; }, [upcomingEvents, eventRsvps]); const adminRsvpByUser = useMemo(() => { const byUser = {}; for (const entry of adminRsvpEntries) { let row = byUser[entry.userId]; if (!row) { row = { userId: entry.userId, displayName: entry.displayName, handle: entry.handle, events: [], }; byUser[entry.userId] = row; } row.events.push({ eventId: entry.eventId, eventTitle: entry.eventTitle, eventEmoji: entry.eventEmoji, rsvpAt: entry.rsvpAt, }); } const users = Object.values(byUser || {}); for (const u of users) { (u.events || []).sort((a, b) => (b.rsvpAt || 0) - (a.rsvpAt || 0)); } (users || []).sort((a, b) => (b.events[0]?.rsvpAt || 0) - (a.events[0]?.rsvpAt || 0)); return users; }, [adminRsvpEntries]); const sportChallenge = challengesBySport[selectedSport] || null; const isAdmin = (ADMIN_HANDLES || []).includes(normalizeHandle(user?.handle)); const isSignedIn = isSignedInUser(user); const authUserId = getAuthUserId(user); const sharedDataReady = !isMultiplayer || sharedData != null; const requireAuth = () => { if (isSignedIn) return true; if (typeof openAuth === 'function') { openAuth({ campusHint: 'unsw' }); } return false; }; const liveRooms = useMemo(() => { const arr = appData?.liveRooms; return Array.isArray(arr) ? arr : []; }, [appData]); const selectedSportMeta = (SPORTS || []).find(sport => sport.key === selectedSport) || SPORTS[0]; // Force the mobile single-column layout at every width: main content // (pinned challenge, events, trending) on top, "Share Your Take" FAB at the // bottom. The desktop sidebar+main chrome below is kept for future use but // not entered while this is false. const isAppDesktop = false; const activeLiveRoom = (uiLiveRooms || []).find(r => r.id === activeLiveRoomId) || null; // Keep live refs current so async code always reads the latest values. appDataRef.current = appData; notesBySportRef.current = notesBySport; challengesBySportRef.current = challengesBySport; playerPostsBySportRef.current = playerPostsBySport; liveRoomsRef.current = liveRooms; const notes = uiNotes; const playerPosts = uiPlayerPosts; ////////////////////////////////////////////////////////////////////////////////////////////////////// useEffect(() => { const interval = setInterval(() => setBlinkOn(b => !b), 600); return () => clearInterval(interval); }, []); useEffect(() => { if (headerTab === 'live') { setHeaderTab('football'); setSelectedSport('football'); return; } if (headerTab === 'football' || headerTab === 'cricket' || headerTab === 'basketball') { setSelectedSport(headerTab); } }, [headerTab]); useEffect(() => { if (!(visibleSportKeys || []).includes(selectedSport)) { setSelectedSport('football'); setHeaderTab('football'); } }, [selectedSport, visibleSportKeys]); // Once the server confirms an optimistic RSVP, drop it from the local // optimistic set so future renders reflect server truth. useEffect(() => { if (!authUserId) return; setOptimisticRsvpIds((prev) => { const next = (prev || []).filter((eventId) => { const list = (eventRsvps[eventId] || []).filter((r) => r.userId); return !(list || []).some((r) => String(r.userId) === authUserId); }); return (next || []).length === (prev || []).length ? prev : next; }); }, [eventRsvps, authUserId]); useEffect(() => { if (skipNextLiveRoomsSyncRef.current) { skipNextLiveRoomsSyncRef.current = false; return; } setUiLiveRooms(liveRooms); }, [liveRooms]); useEffect(() => { const handleResize = () => { const w = window.innerWidth; setIsMobile(w < 640); setIsDesktop(w >= 1024); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); useEffect(() => { if (audioElementRef.current) { audioElementRef.current.playbackRate = playbackRate; } }, [playbackRate]); useEffect(() => { const timers: any[] = []; const cycle = () => { setFabHintVisible(true); timers.push(setTimeout(() => { setFabHintVisible(false); timers.push(setTimeout(() => { setFabHintIndex(i => i + 1); cycle(); }, 1400)); }, 3200)); }; timers.push(setTimeout(cycle, 2200)); return () => { (timers || []).forEach(t => clearTimeout(t)); }; }, []); // useEffect(() => { // const saved = appData?.notes ?? []; // if ((saved || []).length > 0) { // setUiNotes((saved || []).filter(n => !n?.isDemo)); // } else { // setUiNotes((saved || []).length === 0 ? [] : DEMO_NOTES); // setUiNotes(DEMO_NOTES); // } // }, [appData, DEMO_NOTES]); useEffect(() => { if (skipNextNoteSyncRef.current) { skipNextNoteSyncRef.current = false; return; } const next = notesBySport[selectedSport] || []; setUiNotes((prev) => (prev === next ? prev : next)); }, [notesBySport, selectedSport]); useEffect(() => { const next = playerPostsBySport[selectedSport] || []; setUiPlayerPosts((prev) => (prev === next ? prev : next)); }, [playerPostsBySport, selectedSport]); // NOTE: do NOT seed sharedData from a useEffect on mount. // localSharedData starts as null and the real data arrives asynchronously, // so any mount-time write would race-overwrite the server with empty // defaults and permanently destroy existing notes. The normalize useMemo // already gives us valid in-memory defaults; the first real user action // (record/react/post) will persist the full object naturally. useEffect(() => { if (scrollRef.current) { scrollRef.current.scrollTop = 0; } }, [(notes || []).length]); useEffect(() => { return () => { if (playbackBlobUrlRef.current) { URL.revokeObjectURL(playbackBlobUrlRef.current); } }; }, []); // First-visit RSVP intro: web-only, dismissal persisted via per-user data. // Keyed to the featured event's id (not a plain boolean) so featuring a // new event re-prompts users who dismissed the popup for an older one. useEffect(() => { if (isMobile) return; const evs = upcomingEvents || []; const introId = (evs || []).length ? evs[(evs || []).length - 1].id : null; if (!introId || data?.rsvpIntroSeenFor === introId) return; setShowRsvpIntro(true); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); /////////////////////// const formatTime = (seconds) => { if (seconds == null || !Number.isFinite(seconds) || seconds < 0) { return "--:--"; } const m = Math.floor(seconds / 60); const s = Math.floor(seconds % 60); return `${m}:${s.toString().padStart(2, '0')}`; }; const formatTimestamp = (ts) => { if (!ts) return 'just now'; const diff = Date.now() - ts; if (diff < 60000) return 'just now'; if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`; if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`; return `${Math.floor(diff / 86400000)}d ago`; }; const handleShareEvent = (event) => { const text = `${event.title} — ${event.when} · ${event.location}. ${event.incentive}`; if (typeof share === 'function') { share({ title: event.title, text }); return; } if (typeof navigator !== 'undefined' && navigator.share) { navigator.share({ title: event.title, text }).catch(() => {}); } }; // ------------------------------------------------------------------------ // App-data write contract — every shared/local-data write MUST go through // one of these three helpers. They centralize the multiplayer/singleplayer // branch, the pre-hydration guard, and the choice between an atomic append // (pushToSharedArray) and a deep-merge patch (patchSharedData). // // writeAppMerge(patch) — object-merge write (no array keys) // appendAppArray(path, item) — atomic append to an array at path // replaceAppArray(path, nextArray) — replace an array wholesale // // Reads should go through the normalize useMemo's (notesBySport, etc.) so // a missing/null appData yields the documented defaults instead of crashes. // ------------------------------------------------------------------------ const readAtPath = (source, path) => { if (!source || typeof source !== 'object') return undefined; return path.split('.').reduce((acc, key) => (acc == null ? acc : acc[key]), source); }; const buildPatchFromPath = (path, value) => { const segments = path.split('.'); const root = {}; let cursor = root; for (let i = 0; i < (segments || []).length - 1; i++) { cursor[segments[i]] = {}; cursor = cursor[segments[i]]; } cursor[segments[(segments || []).length - 1]] = value; return root; }; const persistAppPatch = (patch) => { let nextPatch = patch; // Special-case eventRsvps so the per-event arrays still get the // accidental-wipe protection of an object-style merge against the // current snapshot. if (patch?.eventRsvps && typeof patch.eventRsvps === 'object') { const prevRsvps = (isMultiplayer ? appDataRef.current?.eventRsvps : data?.eventRsvps) || eventRsvps || {}; nextPatch = { ...patch, eventRsvps: { ...prevRsvps, ...patch.eventRsvps }, }; } if (isMultiplayer) { // Pre-hydration guard: writing while sharedData is still null risks // overwriting the server state with just this patch (effectively // wiping everything not present in the patch). Refuse and let the // user retry once data has loaded. if (sharedData == null) return false; if (typeof patchSharedData === 'function') { patchSharedData(nextPatch); return true; } // No setSharedData wholesale fallback: setSharedData REPLACES the // entire shared state with the merged object, which loses any keys // present on the server but not in our local snapshot. Refuse the // write rather than corrupt. return false; } if (setData) { setData((prev) => ({ ...(prev || {}), ...nextPatch })); return true; } return false; }; const writeAppMerge = (patch) => persistAppPatch(patch); const appendAppArray = (path, item) => { if (isMultiplayer) { if (typeof pushToSharedArray === 'function') { // Race-tolerant: server-side atomic append, safe even when // sharedData is still null. pushToSharedArray(path, item); return true; } // No atomic primitive available — fall back to a full-array replace, // which requires a hydrated base or we'd wipe everything. if (sharedData == null) return false; const existing = readAtPath(sharedData, path); const nextArray = [...(Array.isArray(existing) ? existing : []), item]; return writeAppMerge(buildPatchFromPath(path, nextArray)); } if (setData) { setData((prev) => { const segments = path.split('.'); const nextState = { ...(prev || {}) }; let cursor = nextState; for (let i = 0; i < (segments || []).length - 1; i++) { cursor[segments[i]] = { ...(cursor[segments[i]] || {}) }; cursor = cursor[segments[i]]; } const key = segments[(segments || []).length - 1]; cursor[key] = [...(Array.isArray(cursor[key]) ? cursor[key] : []), item]; return nextState; }); return true; } return false; }; const replaceAppArray = (path, nextArray) => { // Caller is responsible for building the full new array — this races // with concurrent updates. Use appendAppArray for adds. return writeAppMerge(buildPatchFromPath(path, nextArray)); }; const getEventRsvps = (eventId) => (eventRsvps[eventId] || []).filter((r) => r.userId); const isUserRsvpdForEvent = (eventId) => { if (!isSignedIn || !authUserId) return false; if ((optimisticRsvpIds || []).includes(eventId)) return true; return getEventRsvps(eventId).some((r) => String(r.userId) === authUserId); }; const persistEventRsvp = (eventId, entry) => { return appendAppArray(`eventRsvps.${eventId}`, entry); }; const handleEventRsvp = (eventId) => { if (!requireAuth()) return; if (isUserRsvpdForEvent(eventId)) return; const entry = { userId: authUserId, displayName: user?.name || user?.displayName || 'You', handle: user?.handle || '', rsvpAt: Date.now(), }; const ok = persistEventRsvp(eventId, entry); if (ok) { setOptimisticRsvpIds((prev) => ((prev || []).includes(eventId) ? prev : [...prev, eventId])); } }; const dismissRsvpIntro = () => { setShowRsvpIntro(false); const evs = upcomingEvents || []; const introId = (evs || []).length ? evs[(evs || []).length - 1].id : null; if (setData && introId) { setData((prev) => ({ ...(prev || {}), rsvpIntroSeenFor: introId })); } }; const handleRsvpIntroRsvp = (eventId) => { if (isSignedIn) { handleEventRsvp(eventId); dismissRsvpIntro(); } else if (typeof openAuth === 'function') { // Trigger UNSW auth; modal stays so the user can confirm RSVP after returning. openAuth({ campusHint: 'unsw' }); } }; const collectTakeIdsToRemove = (rootId, notesList) => { const ids = { [rootId]: true }; let grown = true; while (grown) { grown = false; for (const n of notesList || []) { if (n.replyToId && ids[n.replyToId] && !ids[n.id]) { ids[n.id] = true; grown = true; } } } return ids; }; const adminAddEvent = () => { if (!adminEventForm.title.trim()) return; const ev = { id: `ev-${Date.now()}`, title: adminEventForm.title.trim(), when: adminEventForm.when.trim() || 'TBA', location: adminEventForm.location.trim() || 'TBA', incentive: adminEventForm.incentive.trim() || '', emoji: adminEventForm.emoji || '📅', }; appendAppArray('upcomingEvents', ev); setAdminEventForm({ title: '', when: '', location: '', incentive: '', emoji: '📅' }); }; const adminRemoveEvent = (eventId) => { const nextRsvps = { ...eventRsvps }; delete nextRsvps[eventId]; writeAppMerge({ upcomingEvents: (upcomingEvents || []).filter((e) => e.id !== eventId), eventRsvps: nextRsvps, }); }; const adminSaveChallenge = () => { if (!adminChallengeForm.title.trim()) return; const existing = challengesBySport[adminChallengeSport]; const title = adminChallengeForm.title.trim(); // A changed title means a NEW challenge, so mint a fresh id. The // challenge feed filters takes by challengeId === ch.id — reusing the // old id would pull every take from the previous challenge into the // new one's feed. const isSameChallenge = existing && (existing.title || '').trim().toLowerCase() === title.toLowerCase(); const ch = { id: isSameChallenge ? existing.id : `ch-${adminChallengeSport}-${Date.now()}`, badge: adminChallengeForm.badge || '🔴 ACTIVE CHALLENGE', title, subtitle: adminChallengeForm.subtitle.trim() || '', prize: adminChallengeForm.prize.trim() || '', emoji: adminChallengeForm.emoji || '🏆', sport: adminChallengeSport, }; writeAppMerge({ challengesBySport: { [adminChallengeSport]: ch } }); if (activeChallenge?.sport === adminChallengeSport) { setActiveChallenge(ch); } }; const adminRemoveChallenge = (sportKey) => { writeAppMerge({ challengesBySport: { [sportKey]: null } }); if (activeChallenge?.sport === sportKey) setActiveChallenge(null); }; const adminDeleteTake = (noteId) => { const live = notesBySportRef.current || {}; const allNotes = Object.values(live || {}).flat(); const removeIds = collectTakeIdsToRemove(noteId, allNotes); const updated = {}; for (const key of Object.keys(live || {})) { updated[key] = (live[key] || []).filter((n) => !removeIds[n.id]); } skipNextNoteSyncRef.current = true; writeAppMerge({ notesBySport: updated }); if (selectedSport in updated) { setUiNotes(updated[selectedSport] || []); } }; const adminTakesForSport = (notesBySport[adminTakeSport] || []).filter((n) => !n.replyToId); useEffect(() => { if (!showAdminPanel || adminSection !== 'challenges') return; const cur = challengesBySport[adminChallengeSport]; setAdminChallengeForm(cur ? { title: cur.title || '', subtitle: cur.subtitle || '', prize: cur.prize || '', badge: cur.badge || '🔴 ACTIVE CHALLENGE', emoji: cur.emoji || '🏆', } : { title: '', subtitle: '', prize: '', badge: '🔴 ACTIVE CHALLENGE', emoji: '🏆' }); }, [showAdminPanel, adminSection, adminChallengeSport, challengesBySport]); const handleStartRecord = (replyTarget) => { if (!requireAuth()) return; // Only treat the arg as a reply target if it looks like a note object. // Without this guard, onClick={handleStartRecord} would pass the // SyntheticEvent and we'd accidentally tag every fresh recording as a // reply to "[object Object]". const isNote = replyTarget && typeof replyTarget === 'object' && replyTarget.id && replyTarget.authorName; setReplyingTo(isNote ? replyTarget : null); setShowRecordPanel(true); setRecordingTitle(''); }; const handleRecordAndUpload = async () => { const title = recordingTitle.trim() || "Untitled Rant"; setIsRecording(true); let result = null; try { if (typeof pickAndUploadAudio === "function") { // ✅ Production (A1Zap runtime) — uploads to S3 and returns a // persisted assetRef. result = await pickAndUploadAudio({ target: "shared", visibility: "instance_private", source: "microphone", }); } else { // Fallback recorder for environments where pickAndUploadAudio // is not wired (e.g. some preview harnesses). We still try to // persist via uploadAudio so the note survives a reload. const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const recorder = new MediaRecorder(stream); const chunks = []; recorder.ondataavailable = e => chunks.push(e.data); recorder.start(); // record 5 seconds locally await new Promise(resolve => setTimeout(resolve, 5000)); recorder.stop(); await new Promise(resolve => recorder.onstop = resolve); stream.getTracks().forEach(t => t.stop()); const blob = new Blob(chunks, { type: "audio/webm" }); if (typeof uploadAudio === "function") { result = await uploadAudio(blob, { target: "shared", visibility: "instance_private", }); } else { // True local-dev only. blob: URLs do not survive a page reload // and are not visible to other users — flag the note as // ephemeral so we can filter it on read. result = { assetId: URL.createObjectURL(blob), ephemeral: true, }; } } if (!result || result.cancelled) { // User hit Cancel on the host's recording modal. Close our sheet // so it doesn't pop back into view (with stale title text) the // moment `isRecording` flips back to false. setShowRecordPanel(false); setRecordingTitle(''); setReplyingTo(null); return; } // pickAndUploadAudio returns a flat {assetId, visibility, publicUrl?} // shape; uploadAudio returns {assetRef, ...}. Normalize both into a // stored assetRef so resolveAudio can skip the string-trap path. const resolvedAssetId = result.assetId ?? result.assetRef?.assetId ?? null; const resolvedVisibility = result.visibility ?? result.assetRef?.visibility ?? "instance_private"; const resolvedPublicUrl = result.publicUrl ?? result.assetRef?.publicUrl ?? null; const storedAssetRef = resolvedAssetId ? { assetId: resolvedAssetId, visibility: resolvedVisibility, ...(resolvedPublicUrl ? { publicUrl: resolvedPublicUrl } : {}), } : null; // Never let `undefined` reach the runtime sync — the deep-merge inside // patchSharedData/pushToSharedArray throws "Cannot read properties of // undefined (reading 'length')" when it encounters undefined where a // string/array was previously stored. Replace optional user fields // with null and only include reply/challenge keys when their values // are real strings. const newNote = { id: "note-" + Date.now() + "-" + Math.random().toString(36).substr(2, 9), title, // Real duration is captured from