const placePage = (spot) => { if (spot?.website) return spot.website; const query = [spot?.name, spot?.location, 'San Francisco'].filter(Boolean).join(' '); return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`; }; const FOOD_BOUNDS = { south: 37.7505, west: -122.4408, north: 37.8018, east: -122.3923 }; const MAP_BOUNDS = { south: 37.708, west: -122.522, north: 37.833, east: -122.354 }; const OCCASION_FILTERS = [ { id: 'all', label: 'All' }, { id: 'dates', label: 'Dates' }, { id: 'catchups', label: 'Catchups' }, { id: 'coffee-chats', label: 'Coffee chats' }, { id: 'lunch', label: 'Lunch' }, { id: 'matcha', label: 'Matcha' } ]; const NIGHT_OCCASION_FILTER = { id: 'late-night', label: 'Late night' }; const OCCASION_LABELS = { all: 'All SF', dates: 'Dates', 'late-night': 'Late night', catchups: 'Catchups', 'coffee-chats': 'Coffee chats', lunch: 'Lunch', matcha: 'Matcha' }; const OCCASION_COLORS = { dates: '#FF4D6D', 'late-night': '#312E81', catchups: '#FF7A18', 'coffee-chats': '#7C3AED', lunch: '#00A676', matcha: '#2F9E44' }; const FOOD_SPOTS = [ { id: 'equator-soma', name: 'Equator Coffees SoMa', website: 'https://www.equatorcoffees.com/blogs/cafes/soma', emoji: '☕', type: 'Coffee', occasion: 'coffee-chats', occasions: ['coffee-chats', 'catchups'], precinct: 'SoMa', location: '222 2nd St', lat: 37.7866, lng: -122.3986, color: '#7C3AED', desc: 'Downtown-friendly specialty coffee with enough polish for a manager coffee chat and enough space to decompress between office days.', bestFor: 'a quick intern-to-mentor coffee chat near Salesforce Park' }, { id: 'saint-frank-mira', name: 'Saint Frank Mira', website: 'https://www.saintfrankcoffee.com/pages/our-locations', emoji: '☕', type: 'Coffee', occasion: 'coffee-chats', occasions: ['coffee-chats', 'catchups'], precinct: 'Rincon Hill', location: '120 Folsom St', lat: 37.7901, lng: -122.3928, color: '#8B5CF6', desc: 'A clean, calm downtown coffee stop with serious espresso and an easy walk from Embarcadero, Rincon Hill, and FiDi offices.', bestFor: 'the “can I pick your brain?” chat that should feel low-pressure' }, { id: 'sightglass-soma', name: 'Sightglass SoMa', website: 'https://sightglasscoffee.com/pages/sightglass-san-francisco-soma', emoji: '🏭', type: 'Coffee roaster', occasion: 'coffee-chats', occasions: ['coffee-chats', 'catchups', 'dates'], precinct: 'SoMa', location: '270 7th St', lat: 37.7767, lng: -122.4083, color: '#6D28D9', desc: 'A big roastery cafe with visual drama, good coffee, and just enough bustle to make an awkward first meetup less awkward.', bestFor: 'a coffee chat that needs a little SF texture' }, { id: 'paper-son-fidi', name: 'Paper Son FiDi', website: 'https://papersoncoffee.com/', emoji: '🍊', type: 'Coffee + matcha', occasion: 'coffee-chats', occasions: ['coffee-chats', 'matcha', 'catchups'], precinct: 'FiDi', location: '303 2nd St N102', lat: 37.7846, lng: -122.3947, color: '#F97316', desc: 'A modern downtown coffee counter with playful Asian American flavors, matcha, and a short-workday rhythm made for interns.', bestFor: 'a weekday caffeine run before the calendar eats the afternoon' }, { id: 'the-mill', name: 'The Mill', website: 'https://www.themillsf.com/location', emoji: '🍞', type: 'Toast + coffee', occasion: 'catchups', occasions: ['catchups', 'coffee-chats', 'dates'], precinct: 'NoPa', location: '736 Divisadero St', lat: 37.7764, lng: -122.4376, color: '#D97706', desc: 'Toast, coffee, fresh bread, and sunny Divisadero energy. No laptop sprawl needed; just meet, talk, and maybe split something with jam.', bestFor: 'a weekend catchup when everyone finally escaped downtown' }, { id: 'asha-tea-house', name: 'Asha Tea House SF', website: 'https://ashateahouse.com/pages/locations', emoji: '🍵', type: 'Tea', occasion: 'matcha', occasions: ['matcha', 'coffee-chats', 'catchups'], precinct: 'FiDi', location: '17 Kearny St', lat: 37.7885, lng: -122.4036, color: '#2F9E44', desc: 'A focused tea stop with matcha and loose-leaf options, close enough to downtown offices for a calmer alternative to coffee.', bestFor: 'the coffee chat for people who do not actually want coffee' }, { id: 'stonemill-matcha', name: 'Stonemill Matcha', website: 'https://www.toasttab.com/local/order/stonemill-matcha', emoji: '🍵', type: 'Matcha cafe', occasion: 'matcha', occasions: ['matcha', 'dates', 'lunch'], precinct: 'Mission', location: '561 Valencia St', lat: 37.7644, lng: -122.4219, color: '#16A34A', desc: 'Mission matcha with Japanese cafe food, pastries, and enough style to make a normal afternoon feel like a tiny field trip.', bestFor: 'a matcha date that can turn into a Valencia stroll' }, { id: 'matcha-cafe-maiko', name: 'Matcha Cafe Maiko', website: 'https://www.matchacafe-maiko.com/eng/', emoji: '🍦', type: 'Matcha sweets', occasion: 'matcha', occasions: ['matcha', 'dates'], precinct: 'Japantown', location: '1581 Webster St #175', lat: 37.7852, lng: -122.4316, color: '#22C55E', desc: 'Japantown matcha soft serve, floats, parfaits, and sweet little rewards after a long week of onboarding docs.', bestFor: 'a low-stakes hang in Japantown with built-in dessert' }, { id: 'maruwu-seicha', name: 'Maruwu Seicha', website: 'https://www.sfjapantown.org/directory-jpndirectory/listing/maruwu-seicha/', emoji: '🍵', type: 'Japanese tea', occasion: 'matcha', occasions: ['matcha', 'dates'], precinct: 'Japantown', location: '1737 Post St #368', lat: 37.7855, lng: -122.4304, color: '#15803D', desc: 'A Japantown tea-and-dessert stop built around matcha drinks, soft serve, and browsing the mall with your group after.', bestFor: 'matcha people who want the whole Japantown side quest' }, { id: 'souvla-mission', name: 'Souvla Mission', website: 'https://www.souvla.com/location/souvla-the-mission/', emoji: '🥙', type: 'Greek', occasion: 'lunch', occasions: ['lunch', 'dates'], precinct: 'Mission', location: '758 Valencia St', lat: 37.7608, lng: -122.4217, color: '#00A676', desc: 'Fast-fine Greek salads, sandwiches, fries, and frozen yogurt on Valencia. Easy enough for a group, nice enough for a real plan.', bestFor: 'an intern lunch that will not turn into a 90-minute negotiation' }, { id: 'senor-sisig-ferry', name: 'Señor Sisig Ferry Building', website: 'https://www.senorsisig.com/locations/', emoji: '🌯', type: 'Filipino fusion', occasion: 'lunch', occasions: ['lunch', 'catchups'], precinct: 'Embarcadero', location: '1 Ferry Building Suite 41', lat: 37.7956, lng: -122.3934, color: '#F59E0B', desc: 'Bay-born sisig burritos and bowls in the Ferry Building, perfect when half the group wants a view and the other half wants speed.', bestFor: 'a waterfront lunch between intern events' }, { id: 'orens-hummus', name: "Oren's Hummus", website: 'https://orenshummus.com/locations/', emoji: '🧆', type: 'Mediterranean', occasion: 'lunch', occasions: ['lunch', 'catchups'], precinct: 'Yerba Buena', location: '71 3rd St', lat: 37.7862, lng: -122.4024, color: '#14B8A6', desc: 'Hummus, pita, bowls, skewers, and a central downtown address that works when everyone is coming from different offices.', bestFor: 'a dependable group lunch near Market Street' }, { id: 'dumpling-home', name: 'Dumpling Home', website: 'https://www.dumplinghome.com/', emoji: '🥟', type: 'Dumplings', occasion: 'lunch', occasions: ['lunch', 'dates', 'catchups'], precinct: 'Hayes Valley', location: '298 Gough St', lat: 37.7767, lng: -122.4226, color: '#EF4444', desc: 'Soup dumplings, noodles, and shareable comfort food in Hayes Valley, close to Civic Center and after-work plans.', bestFor: 'when the group chat says “dumplings?” and everyone instantly agrees' }, { id: 'tartine-manufactory', name: 'Tartine Manufactory', website: 'https://tartinebakery.com/sanfrancisco/manufactory', emoji: '🥐', type: 'Bakery + cafe', occasion: 'catchups', occasions: ['catchups', 'lunch', 'dates', 'coffee-chats'], precinct: 'Mission', location: '595 Alabama St', lat: 37.7629, lng: -122.4117, color: '#FB923C', desc: 'Pastries, bread, lunch, dinner, and enough Mission industrial charm to make a catchup feel planned without feeling formal.', bestFor: 'a “we should actually catch up” meal with excellent pastry backup' }, { id: 'foreign-cinema', name: 'Foreign Cinema', website: 'https://foreigncinema.com/', emoji: '🎬', type: 'Cal-Med', occasion: 'dates', occasions: ['dates'], precinct: 'Mission', location: '2534 Mission St', lat: 37.7565, lng: -122.4190, color: '#FF4D6D', desc: 'A classic Mission dinner-and-film courtyard pick for interns ready to graduate from “coffee?” to an actual evening plan.', bestFor: 'a date night with a built-in conversation starter' }, { id: 'che-fico', name: 'Che Fico', website: 'https://www.chefico.com/', emoji: '🍝', type: 'Italian', occasion: 'dates', occasions: ['dates'], precinct: 'NoPa', location: '838 Divisadero St', lat: 37.7779, lng: -122.4380, color: '#E11D48', desc: 'Italian-Californian dinner energy on Divisadero, with enough warmth for a date and enough buzz for a celebratory intern dinner.', bestFor: 'when the internship finally produced a reason to dress up a little' }, { id: 'cubita', name: 'Cubita', website: 'https://www.cubitasf.com/', emoji: '🌆', type: 'Cuban rooftop', occasion: 'dates', occasions: ['dates', 'catchups'], precinct: 'Mission', location: '2516 Mission St', lat: 37.7569, lng: -122.4191, color: '#EC4899', desc: 'A Cuban-inspired rooftop in the Mission with sunset skyline views, cocktails, and enough color to rescue a midweek slump.', bestFor: 'a rooftop date or catchup when the fog decides to cooperate' }, { id: 'el-farolito-mission', name: 'El Farolito Mission', website: 'https://elfarolitosf.com/', emoji: '🌯', type: 'Taqueria', occasion: 'late-night', occasions: ['late-night'], precinct: 'Mission', location: '2779 Mission St', lat: 37.7521, lng: -122.4186, color: '#312E81', lateNightOnly: true, desc: 'A Mission institution for super burritos, tacos, and post-plan comfort food when everyone suddenly remembers dinner was five hours ago.', bestFor: 'the late Muni burrito run after a long intern social' }, { id: 'pinecrest-diner', name: 'Pinecrest Diner', website: 'https://pinecrestdiner.com/', emoji: '🥞', type: 'Diner', occasion: 'late-night', occasions: ['late-night'], precinct: 'Union Square', location: '401 Geary St', lat: 37.7868, lng: -122.4102, color: '#4338CA', lateNightOnly: true, desc: 'Classic downtown diner plates near Union Square, built for pancakes, burgers, and “wait, we still need food” decisions.', bestFor: 'a reliable late-night booth after a show, event, or downtown hang' }, { id: 'orphan-andys', name: "Orphan Andy's", website: 'https://orphanandys.net/', emoji: '🍔', type: 'Diner', occasion: 'late-night', occasions: ['late-night'], precinct: 'Castro', location: '3991 17th St', lat: 37.7626, lng: -122.4350, color: '#4F46E5', lateNightOnly: true, desc: 'Retro Castro comfort food with burgers, breakfast plates, and the kind of booth energy that makes a night keep going.', bestFor: 'post-dancing food when the group still has stories to debrief' }, { id: 'the-detour', name: 'The Detour', website: 'https://www.detoursf.com/', emoji: '🕹️', type: 'Arcade bar', occasion: 'late-night', occasions: ['late-night'], precinct: 'Castro / Duboce', location: '2200 Market St', lat: 37.7654, lng: -122.4319, color: '#6366F1', lateNightOnly: true, desc: 'Arcade games, food, drinks, and enough movement to keep the hang casual when nobody wants to just sit at a table.', bestFor: 'a playful late-night group stop that does not need a long plan' } ]; const RANDOMIZING_LINES = [ 'Fork roulette is weaving through the Mission fog...', 'Checking the group chat, the Muni timing, and the vibes...', 'Scanning SoMa, Japantown, Hayes, and the Mission...', 'Decision fatigue? Not on this intern cohort.', 'Finding the most SF answer within acceptable walking drama...' ]; const WINNER_LINES = [ 'The intern committee has spoken.', 'Zero overthinking required. Just go.', 'This one has strong after-standup energy.', 'SF hunger has officially been handled.', 'That is a suspiciously good pick, actually.' ]; const profileInitials = (name, handle) => { const source = (name || handle || 'Intern').trim(); const parts = source.split(/\s+/).filter(Boolean); const first = parts[0]?.[0] || 'I'; const second = (parts || []).length > 1 ? parts[1]?.[0] : ''; return `${first}${second}`.toUpperCase(); }; const viewBadge = (count) => (count > 99 ? '99+' : `${count}`); const getSanFranciscoHour = () => { try { const formatted = new Intl.DateTimeFormat('en-US', { timeZone: 'America/Los_Angeles', hour: 'numeric', hourCycle: 'h23' }).format(new Date()); return Number(formatted); } catch (error) { return new Date().getHours(); } }; const isSanFranciscoNight = () => { const hour = getSanFranciscoHour(); return hour >= 20 || hour < 5; }; function App({ data, setData, user, openProfile, isMultiplayer, sharedData, setSharedData, pushToSharedArray, members }) { const appData = isMultiplayer ? sharedData : data; const saveData = isMultiplayer ? setSharedData : setData; const spinners = appData?.spinners || []; const storedPlaceViews = appData?.placeViews || []; const mapFrameRef = useRef(null); const searchRef = useRef(null); const rouletteIntervalRef = useRef(null); const rouletteTimeoutRef = useRef(null); const confettiTimeoutRef = useRef(null); // 🎡 VISUAL SPINNING WHEEL — canvas refs + spin state const wheelCanvasRef = useRef(null); const wheelRotationRef = useRef(0); const wheelLastSliceRef = useRef(-1); const wheelAnimRef = useRef(null); const wheelSpinningRef = useRef(false); const wheelSlicesRef = useRef([]); const audioCtxRef = useRef(null); const [selectedSpot, setSelectedSpot] = useState(null); const [showPanel, setShowPanel] = useState(false); const [showList, setShowList] = useState(false); const [activeCluster, setActiveCluster] = useState(null); const [mapReady, setMapReady] = useState(false); const [search, setSearch] = useState(''); const [searchFocused, setSearchFocused] = useState(false); const [occasionFilter, setOccasionFilter] = useState('all'); const [pickedSpot, setPickedSpot] = useState(null); const [roulettePreview, setRoulettePreview] = useState(null); const [rouletteLine, setRouletteLine] = useState('Pins are live. Tap one or let intern roulette decide.'); const [isRandomizing, setIsRandomizing] = useState(false); const [showWinner, setShowWinner] = useState(false); const [highlightedPins, setHighlightedPins] = useState([]); const [hasRecordedSpin, setHasRecordedSpin] = useState(false); const [pendingPlaceViews, setPendingPlaceViews] = useState([]); const [isNightTime, setIsNightTime] = useState(() => isSanFranciscoNight()); const activeOccasionFilters = useMemo(() => { if (!isNightTime) return OCCASION_FILTERS; return [OCCASION_FILTERS[0], OCCASION_FILTERS[1], NIGHT_OCCASION_FILTER, ...(OCCASION_FILTERS || []).slice(2)]; }, [isNightTime]); const placeViews = useMemo(() => { const seen = {}; const merged = []; [...(storedPlaceViews || []), ...(pendingPlaceViews || [])].forEach((view, index) => { if (!view?.placeId) return; const key = view.id || `${view.placeId}:${view._user?.id || view._user?.handle || 'unknown'}:${view._timestamp || index}`; if (seen[key]) return; seen[key] = true; merged.push(view); }); return merged; }, [pendingPlaceViews, storedPlaceViews]); const memberProfilesById = useMemo(() => { const profiles = {}; (members || []).forEach((member) => { const id = member.id || member.handle || member.displayName; if (!id) return; profiles[id] = { id, name: member.displayName || member.handle || 'Intern', handle: member.handle, avatarUrl: member.avatarUrl }; }); const userId = user?.id || user?.handle || user?.name; if (userId) { profiles[userId] = { id: userId, name: user.name || user.handle || 'Intern', handle: user.handle, avatarUrl: user.avatarUrl }; } return profiles; }, [members, user]); const viewersByPlaceId = useMemo(() => { const byPlace = {}; (placeViews || []).forEach((view) => { const viewUser = view._user || {}; const userId = viewUser.id || viewUser.handle || viewUser.name; if (!view.placeId || !userId) return; if (!byPlace[view.placeId]) byPlace[view.placeId] = {}; const profile = memberProfilesById[userId] || {}; const current = byPlace[view.placeId][userId] || { id: userId, name: 'Intern', handle: null, avatarUrl: null, count: 0, latestAt: 0 }; byPlace[view.placeId][userId] = { ...current, name: profile.name || viewUser.name || viewUser.handle || current.name, handle: profile.handle || viewUser.handle || current.handle, avatarUrl: profile.avatarUrl || viewUser.avatarUrl || current.avatarUrl, count: current.count + 1, latestAt: Math.max(current.latestAt || 0, view._timestamp || 0) }; }); return Object.keys(byPlace || {}).reduce((result, placeId) => { result[placeId] = Object.values(byPlace[placeId]) .sort((a, b) => (b.count - a.count) || ((b.latestAt || 0) - (a.latestAt || 0))) .slice(0, 12); return result; }, {}); }, [memberProfilesById, placeViews]); const filteredSpots = useMemo(() => { const query = search.trim().toLowerCase(); const result = (FOOD_SPOTS || []).filter((spot) => { const occasionIds = spot.occasions || [spot.occasion]; if (spot.lateNightOnly && !isNightTime) return false; if (occasionFilter !== 'all' && !(occasionIds || []).includes(occasionFilter)) return false; if (!query) return true; const haystack = [ spot.name, spot.type, spot.occasion, OCCASION_LABELS[spot.occasion], ...(spot.occasions || []).map((occasion) => OCCASION_LABELS[occasion] || occasion), spot.precinct, spot.location, spot.desc, spot.bestFor ].join(' ').toLowerCase(); return (haystack || []).includes(query); }); return [...result].sort((a, b) => { const occasionRank = { dates: 0, 'late-night': 1, catchups: 2, 'coffee-chats': 3, lunch: 4, matcha: 5 }; const byOccasion = (occasionRank[a.occasion] || 9) - (occasionRank[b.occasion] || 9); if (byOccasion !== 0) return byOccasion; const byPrecinct = a.precinct.localeCompare(b.precinct); if (byPrecinct !== 0) return byPrecinct; return a.name.localeCompare(b.name); }); }, [isNightTime, occasionFilter, search]); const searchSuggestions = useMemo(() => { const query = search.trim().toLowerCase(); if (!query) return []; return (FOOD_SPOTS || []).filter((spot) => { if (spot.lateNightOnly && !isNightTime) return false; const haystack = [ spot.name, spot.type, spot.precinct, spot.location, spot.desc ].join(' ').toLowerCase(); return (haystack || []).includes(query); }).slice(0, 6); }, [isNightTime, search]); const filteredSpotsById = useMemo(() => { const next = {}; (filteredSpots || []).forEach((spot) => { next[spot.id] = spot; }); return next; }, [filteredSpots]); const clusterSpots = useMemo(() => { const ids = activeCluster?.ids || []; return (ids || []).map((id) => filteredSpotsById[id]).filter(Boolean); }, [activeCluster, filteredSpotsById]); const listSpots = activeCluster?.ids?.length ? clusterSpots : filteredSpots; const occasionCounts = useMemo(() => { const counts = { all: 0 }; (activeOccasionFilters || []).forEach((option) => { if (option.id !== 'all') counts[option.id] = 0; }); (FOOD_SPOTS || []).forEach((spot) => { if (spot.lateNightOnly && !isNightTime) return; counts.all += 1; (spot.occasions || [spot.occasion]).forEach((occasion) => { counts[occasion] = (counts[occasion] || 0) + 1; }); }); return counts; }, [activeOccasionFilters, isNightTime]); const uniqueSpinners = useMemo(() => { return [...spinners] .sort((a, b) => (b._timestamp || 0) - (a._timestamp || 0)) .slice(0, 8); }, [spinners]); // 🏙️ NEIGHBORHOOD CLUSTERS — group spots by neighborhood, respect the active filter. const precinctGroups = useMemo(() => { const groups = {}; (FOOD_SPOTS || []).forEach((spot) => { const occasionIds = spot.occasions || [spot.occasion]; if (spot.lateNightOnly && !isNightTime) return; if (occasionFilter !== 'all' && !(occasionIds || []).includes(occasionFilter)) return; if (!groups[spot.precinct]) { groups[spot.precinct] = { precinct: spot.precinct, occasion: spot.occasion, spots: [] }; } groups[spot.precinct].spots.push(spot); }); return Object.values(groups || {}).sort((a, b) => { const occasionRank = { dates: 0, 'late-night': 1, catchups: 2, 'coffee-chats': 3, lunch: 4, matcha: 5 }; const byOccasion = (occasionRank[a.occasion] || 9) - (occasionRank[b.occasion] || 9); if (byOccasion !== 0) return byOccasion; return a.precinct.localeCompare(b.precinct); }); }, [isNightTime, occasionFilter]); const clearRouletteTimers = () => { if (rouletteIntervalRef.current) { clearInterval(rouletteIntervalRef.current); rouletteIntervalRef.current = null; } if (rouletteTimeoutRef.current) { clearTimeout(rouletteTimeoutRef.current); rouletteTimeoutRef.current = null; } if (wheelAnimRef.current) { cancelAnimationFrame(wheelAnimRef.current); wheelAnimRef.current = null; } wheelSpinningRef.current = false; }; // 🔊 SFX (Web Audio synth — no assets, no bridge, works on web/iOS/Android) const ensureAudio = () => { if (!audioCtxRef.current) { try { audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)(); } catch (e) { return null; } } if (audioCtxRef.current && audioCtxRef.current.state === 'suspended') { try { audioCtxRef.current.resume(); } catch (e) {} } return audioCtxRef.current; }; const playTone = (freq, duration, type = 'sine', startGain = 0.1, freqEnd = null) => { const ctx = ensureAudio(); if (!ctx) return; const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = type; osc.frequency.setValueAtTime(freq, ctx.currentTime); if (freqEnd != null) osc.frequency.exponentialRampToValueAtTime(Math.max(1, freqEnd), ctx.currentTime + duration); gain.gain.setValueAtTime(startGain, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + duration); osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + duration); }; const wheelSfx = { tick: () => playTone(1300, 0.035, 'square', 0.06), click: () => playTone(900, 0.08, 'square', 0.14, 600), fanfare: () => { playTone(523, 0.1, 'square', 0.1); setTimeout(() => playTone(659, 0.1, 'square', 0.1), 80); setTimeout(() => playTone(784, 0.22, 'square', 0.13), 160); } }; // 🎡 CANVAS WHEEL DRAWING const drawWheel = (slices, rotation) => { const canvas = wheelCanvasRef.current; if (!canvas || !slices || (slices || []).length === 0) return; const ctx = canvas.getContext('2d'); const W = canvas.width; const H = canvas.height; const cx = W / 2; const cy = H / 2; const r = Math.min(W, H) / 2 - 14; ctx.clearRect(0, 0, W, H); ctx.save(); ctx.translate(cx, cy); ctx.rotate(rotation); const sliceAngle = (Math.PI * 2) / (slices || []).length; const palette = ['#FDB515', '#FF7A18', '#FF4D6D', '#00B8A9', '#5856D6', '#34C759', '#FFB400', '#FF6B35']; (slices || []).forEach((slice, i) => { const startAngle = i * sliceAngle; const endAngle = startAngle + sliceAngle; ctx.beginPath(); ctx.moveTo(0, 0); ctx.arc(0, 0, r, startAngle, endAngle); ctx.closePath(); ctx.fillStyle = slice.color || palette[i % (palette || []).length]; ctx.fill(); ctx.strokeStyle = 'rgba(255,255,255,0.9)'; ctx.lineWidth = 2; ctx.stroke(); // Label oriented along the slice radius ctx.save(); ctx.rotate(startAngle + sliceAngle / 2); ctx.textAlign = 'right'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#FFFFFF'; ctx.shadowColor = 'rgba(0,0,0,0.55)'; ctx.shadowBlur = 4; if ((slices || []).length <= 12) { ctx.font = 'bold 12px system-ui, sans-serif'; const label = (slice.name || '').slice(0, 14); ctx.fillText(label, r - 14, 0); } else { ctx.font = '20px sans-serif'; ctx.shadowBlur = 0; ctx.fillText(slice.emoji || '•', r - 14, 0); } ctx.restore(); }); // Center hub ctx.beginPath(); ctx.arc(0, 0, 26, 0, Math.PI * 2); ctx.fillStyle = '#FFF9EE'; ctx.fill(); ctx.strokeStyle = '#171717'; ctx.lineWidth = 3; ctx.stroke(); ctx.fillStyle = '#171717'; ctx.font = 'bold 14px system-ui, sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.shadowColor = 'transparent'; ctx.shadowBlur = 0; ctx.fillText('SF', 0, 0); ctx.restore(); // Pointer at top, pointing down into the wheel ctx.fillStyle = '#171717'; ctx.beginPath(); ctx.moveTo(cx - 14, 4); ctx.lineTo(cx + 14, 4); ctx.lineTo(cx, 30); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#FFF9EE'; ctx.lineWidth = 3; ctx.stroke(); }; // 🎡 SPIN ANIMATION — eases out over ~3.5s, ticks per slice pass, lands on a winner const startWheelSpin = (slices, onComplete) => { if (wheelSpinningRef.current || !slices || (slices || []).length === 0) return; wheelSpinningRef.current = true; wheelSlicesRef.current = slices; wheelLastSliceRef.current = -1; const winnerIndex = Math.floor(Math.random() * (slices || []).length); const sliceAngle = (Math.PI * 2) / (slices || []).length; // Land winner under the top pointer (-PI/2). Slice center angle is (i + 0.5) * sliceAngle. // Need: (winnerIndex + 0.5) * sliceAngle + rotation === -PI/2 (mod 2PI) const baseRotation = -Math.PI / 2 - (winnerIndex + 0.5) * sliceAngle; const jitter = (Math.random() - 0.5) * sliceAngle * 0.45; const fullSpins = 5 + Math.floor(Math.random() * 3); // Always spin forward from current const startRot = wheelRotationRef.current; const target = baseRotation + jitter + fullSpins * Math.PI * 2; // Normalize so target > startRot let finalRotation = target; while (finalRotation < startRot + Math.PI * 4) finalRotation += Math.PI * 2; const duration = 3500; const startTime = Date.now(); const tick = () => { const elapsed = Date.now() - startTime; const t = Math.min(1, elapsed / duration); const eased = 1 - Math.pow(1 - t, 4); // easeOutQuart wheelRotationRef.current = startRot + (finalRotation - startRot) * eased; // Tick on slice pass const norm = ((wheelRotationRef.current % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2); const currentSlice = Math.floor(((Math.PI * 2 - ((norm + Math.PI / 2) % (Math.PI * 2))) / sliceAngle)) % (slices || []).length; if (currentSlice !== wheelLastSliceRef.current && t < 0.96) { wheelLastSliceRef.current = currentSlice; wheelSfx.tick(); } drawWheel(slices, wheelRotationRef.current); if (t < 1) { wheelAnimRef.current = requestAnimationFrame(tick); } else { wheelSpinningRef.current = false; wheelAnimRef.current = null; wheelSfx.click(); setTimeout(() => wheelSfx.fanfare(), 180); if (typeof onComplete === 'function') onComplete(slices[winnerIndex]); } }; wheelAnimRef.current = requestAnimationFrame(tick); }; const recordSpinner = () => { if (hasRecordedSpin || !user || (!saveData && !(isMultiplayer && pushToSharedArray))) return; const alreadySpun = (spinners || []).some((spinner) => spinner.id === user.id); if (alreadySpun) { setHasRecordedSpin(true); return; } const newSpinner = { id: user.id, displayName: user.displayName || user.name, handle: user.handle, profileImageUrl: user.avatarUrl, _timestamp: Date.now() }; if (isMultiplayer && pushToSharedArray) { pushToSharedArray('spinners', newSpinner); } else { saveData({ ...(appData || {}), spinners: [...spinners, newSpinner] }); } setHasRecordedSpin(true); }; const recordPlaceView = (spot) => { if (!spot?.id || !user) return; const viewerId = user.id || user.handle || user.name; if (!viewerId) return; const viewEvent = { id: `view-${spot.id}-${viewerId}-${Date.now()}-${Math.floor(Math.random() * 100000)}`, placeId: spot.id, _user: { id: viewerId, name: user.name || user.handle || 'Intern', handle: user.handle, avatarUrl: user.avatarUrl }, _timestamp: Date.now() }; setPendingPlaceViews((current) => [...(current || []), viewEvent].slice(-120)); if (isMultiplayer && pushToSharedArray) { pushToSharedArray('placeViews', viewEvent); } else if (saveData) { saveData({ ...(appData || {}), placeViews: [...(storedPlaceViews || []), viewEvent] }); } }; const spotlightSpot = (spot, options) => { if (!spot) return; const nextOptions = options || {}; setSelectedSpot(spot); setShowList(false); setActiveCluster(null); if (nextOptions.openPanel) { recordPlaceView(spot); setShowPanel(true); } if (nextOptions.closeWinner) setShowWinner(false); }; const handleSuggestionPick = (spot) => { setOccasionFilter('all'); setSearch(''); setSearchFocused(false); spotlightSpot(spot, { openPanel: true }); }; // Spin a custom set of slices through the visual wheel. // Used by `randomizeLunch` (all filtered) and `randomizePrecinct` (single neighborhood). const spinSlices = (slices) => { if (wheelSpinningRef.current || !slices || (slices || []).length === 0) return; clearRouletteTimers(); recordSpinner(); setActiveCluster(null); setShowList(false); setShowPanel(false); setShowWinner(true); setPickedSpot(null); setSelectedSpot(null); setRoulettePreview(slices[0] || null); setRouletteLine(RANDOMIZING_LINES[Math.floor(Math.random() * (RANDOMIZING_LINES || []).length)]); setIsRandomizing(true); // Defer one frame so the canvas mounts inside the modal before we start drawing requestAnimationFrame(() => { requestAnimationFrame(() => { // Initial draw at current rotation so the wheel appears before spin drawWheel(slices, wheelRotationRef.current); startWheelSpin(slices, (winner) => { setPickedSpot(winner); setRoulettePreview(winner); setSelectedSpot(winner); setRouletteLine(WINNER_LINES[Math.floor(Math.random() * (WINNER_LINES || []).length)]); setIsRandomizing(false); }); }); }); }; const randomizeLunch = () => { if ((filteredSpots || []).length === 0) return; spinSlices(filteredSpots); }; const randomizePrecinct = (precinct) => { const group = (precinctGroups || []).find((g) => g.precinct === precinct); if (!group || (group.spots || []).length === 0) return; spinSlices(group.spots); }; useEffect(() => { const refreshNightTime = () => setIsNightTime(isSanFranciscoNight()); refreshNightTime(); const intervalId = setInterval(refreshNightTime, 60000); return () => clearInterval(intervalId); }, []); useEffect(() => { if (isNightTime) return; if (occasionFilter === 'late-night') { setOccasionFilter('all'); } if (selectedSpot?.lateNightOnly) { setSelectedSpot(null); setPickedSpot(null); setRoulettePreview(null); setShowPanel(false); setShowWinner(false); } }, [isNightTime, occasionFilter, selectedSpot]); useEffect(() => { if (!user?.id) { setHasRecordedSpin(false); return; } setHasRecordedSpin((spinners || []).some((spinner) => spinner.id === user.id)); }, [spinners, user]); useEffect(() => { return () => { clearRouletteTimers(); if (confettiTimeoutRef.current) clearTimeout(confettiTimeoutRef.current); }; }, []); useEffect(() => { if (!pickedSpot?.id) return; setHighlightedPins([pickedSpot.id]); if (confettiTimeoutRef.current) clearTimeout(confettiTimeoutRef.current); confettiTimeoutRef.current = setTimeout(() => { setHighlightedPins((current) => (current || []).filter((id) => id !== pickedSpot.id)); }, 4500); }, [pickedSpot]); useEffect(() => { if (!activeCluster?.ids?.length) return; const visibleIds = new Set((filteredSpots || []).map((spot) => spot.id)); const nextIds = (activeCluster.ids || []).filter((id) => visibleIds.has(id)); if ((nextIds || []).length === (activeCluster.ids || []).length) return; if ((nextIds || []).length === 0) { setActiveCluster(null); setShowList(false); return; } setActiveCluster((prev) => (prev ? { ...prev, ids: nextIds } : prev)); }, [activeCluster, filteredSpots]); useEffect(() => { const iframe = mapFrameRef.current; if (!iframe?.contentWindow || !mapReady) return; iframe.contentWindow.postMessage( { type: 'render', pins: (filteredSpots || []).map((spot) => ({ id: spot.id, lat: spot.lat, lng: spot.lng, emoji: spot.emoji, name: spot.name, precinct: spot.precinct, color: spot.color, zone: spot.occasion, isHighlighted: (highlightedPins || []).includes(spot.id) })), focusPinId: selectedSpot?.id || pickedSpot?.id || null, fitToPins: !(selectedSpot?.id || pickedSpot?.id) }, '*' ); }, [filteredSpots, highlightedPins, mapReady, pickedSpot, selectedSpot]); useEffect(() => { const handleMessage = (event) => { const message = event?.data; if (!message || typeof message !== 'object') return; if (message.type === 'pin-click') { const nextSpot = (FOOD_SPOTS || []).find((spot) => spot.id === message.id); if (!nextSpot) return; if (nextSpot.lateNightOnly && !isNightTime) return; setShowWinner(false); spotlightSpot(nextSpot, { openPanel: true }); } if (message.type === 'cluster-click') { const ids = Array.isArray(message.ids) ? (message.ids || []).filter(Boolean) : []; if (!(ids || []).length) return; setShowWinner(false); setShowPanel(false); setActiveCluster({ ids, emojis: Array.isArray(message.emojis) ? (message.emojis || []).filter(Boolean) : [] }); setShowList(true); } }; window.addEventListener('message', handleMessage); return () => window.removeEventListener('message', handleMessage); }, [isNightTime, spotlightSpot]); const hasActiveFilters = occasionFilter !== 'all' || search.trim(); const currentPreview = roulettePreview || pickedSpot; const activeFilterLabel = occasionFilter === 'all' ? 'SF intern picks' : OCCASION_LABELS[occasionFilter]; const listTitle = activeCluster?.ids?.length ? 'Same map cluster' : 'Visible SF spots'; const selectedSpotViewers = selectedSpot ? (viewersByPlaceId[selectedSpot.id] || []) : []; const MAP_HTML = `