const foodPage = (slug) => `https://www.unsw.edu.au/estate/food-retail/explore/${slug}`; const FOOD_BOUNDS = { south: -33.9216, west: 151.2253, north: -33.9146, east: 151.2362 }; const MAP_BOUNDS = { south: -33.9238, west: 151.2232, north: -33.9129, east: 151.2386 }; const CAMPUS_FILTERS = [ { id: 'all', label: 'All' }, { id: 'upper', label: 'Upper' }, { id: 'middle', label: 'Middle' }, { id: 'lower', label: 'Lower' } ]; const CAMPUS_LABELS = { all: 'All Campus', upper: 'Upper Campus', middle: 'Middle Campus', lower: 'Lower Campus' }; const ZONE_COLORS = { upper: '#FF7A18', middle: '#FF4D6D', lower: '#00B8A9' }; const FOOD_SPOTS = [ { id: 'boost-juice', name: 'Boost Juice', slug: 'boost-juice', emoji: '🥤', type: 'Smoothies', campus: 'upper', precinct: 'Morven Brown', location: 'Morven Brown Building (C20)', lat: -33.917003, lng: 151.232426, color: '#FF8A3D', desc: 'Juices, smoothies and quick snack fuel on the lower ground floor of Morven Brown.', bestFor: 'the “I have twelve minutes before class” reset' }, { id: 'caffe-brioso', name: 'Caffé Brioso', slug: 'caffe-brioso', emoji: '☕', type: 'Coffee', campus: 'upper', precinct: 'Mathews Arcade', location: 'E24a Mathews Arcade / Morven Brown cart', lat: -33.91712, lng: 151.233999, color: '#F97316', desc: 'Specialty coffee, pastries and grab-and-go lunch energy tucked into the Mathews arcade zone.', bestFor: 'locking in before a tutorial or surviving a lab' }, { id: 'coffee-on-campus', name: 'Coffee on Campus', slug: 'coffee-on-campus', emoji: '🥪', type: 'Cafe', campus: 'middle', precinct: 'Ainsworth', location: 'Ainsworth Building', lat: -33.918459, lng: 151.231161, color: '#4F46E5', desc: 'A reliable Ainsworth staple for sandwiches, wraps, salads, hot food and caffeine.', bestFor: 'the dependable all-rounder lunch' }, { id: 'gradueat', name: 'Gradueat', slug: 'gradueat', emoji: '🍳', type: 'Brekkie', campus: 'upper', precinct: 'Mathews Food Court', location: 'Mathews Food Court (F23)', lat: -33.917243, lng: 151.234656, color: '#FDB515', desc: 'Cafe food, snacks and drinks right in Mathews Food Court for a quick upper-campus top-up.', bestFor: 'breakfast at 8am or breakfast at 1pm, no judgement' }, { id: 'guzman-y-gomez', name: 'Guzman y Gomez', slug: 'guzman-y-gomez', emoji: '🌮', type: 'Mexican', campus: 'lower', precinct: 'University Terraces', location: 'University Terraces (B8)', lat: -33.915423, lng: 151.227996, color: '#FFD23F', desc: 'Fresh-made burritos, bowls and tacos down at University Terraces.', bestFor: 'when lower campus cravings demand a proper feed' }, { id: 'home-ground', name: 'Home Ground', slug: 'home-ground-kiosk', emoji: '🍱', type: 'Japanese', campus: 'middle', precinct: 'Village Green', location: 'Village Green', lat: -33.918015, lng: 151.228624, color: '#22C55E', desc: 'Allpress coffee, Japanese-style dishes and gourmet grab-and-go near the Village Green.', bestFor: 'a lunch break that accidentally becomes a campus hang' }, { id: 'kebab-delight', name: 'Kebab Delight', slug: 'kebab-delight', emoji: '🥙', type: 'Kebab', campus: 'upper', precinct: 'Mathews Food Court', location: 'Mathews Food Court (F23)', lat: -33.917144, lng: 151.234289, color: '#EF4444', desc: 'Kebabs, skewers and hearty Middle Eastern plates in the Mathews cluster.', bestFor: 'a filling lunch before the afternoon slump hits' }, { id: 'laksa-delight', name: 'Laksa Delight', slug: 'laksa-delight', emoji: '🍜', type: 'Malaysian', campus: 'upper', precinct: 'Mathews Food Court', location: 'Mathews Food Court (F23)', lat: -33.917324, lng: 151.234003, color: '#F59E0B', desc: 'A long-running Mathews favourite for warming noodle soups and fast hot meals.', bestFor: 'cold-weather laksa therapy between classes' }, { id: 'mamak-village', name: 'Mamak Village', slug: 'mamak-village', emoji: '🍛', type: 'Malaysian', campus: 'lower', precinct: 'University Terraces', location: 'University Terraces (B8)', lat: -33.915533, lng: 151.227713, color: '#F97316', desc: 'Casual Malaysian comfort food with indoor and outdoor seating at University Terraces.', bestFor: 'a sit-down lower campus comfort meal' }, { id: 'nene-chicken', name: 'NeNe Chicken', slug: 'nene-chicken', emoji: '🍗', type: 'Korean', campus: 'middle', precinct: 'Quadrangle', location: 'Quadrangle Building (E15)', lat: -33.917212, lng: 151.230602, color: '#FB7185', desc: 'Bold Korean fried chicken energy tucked into the Quad Food Court zone.', bestFor: 'when your group chat wants something loud, crispy and satisfying' }, { id: 'papparich', name: 'PappaRich', slug: 'pappa-rich', emoji: '🥢', type: 'Malaysian', campus: 'middle', precinct: 'Quadrangle', location: 'Quadrangle Building (E15)', lat: -33.917279, lng: 151.230603, color: '#EC4899', desc: 'Malaysian classics like nasi lemak, roti canai and curry laksa in the Quad precinct.', bestFor: 'the “let’s actually eat properly” lunch mission' }, { id: 'plume-cafe', name: 'Plume Café', slug: 'plume-cafe', emoji: '📚', type: 'Cafe', campus: 'middle', precinct: 'Bookshop', location: 'UNSW Bookshop / Quadrangle (E15)', lat: -33.916928, lng: 151.230234, color: '#8B5CF6', desc: 'Seasonal cafe plates and a polished coffee stop hidden inside the UNSW Bookshop.', bestFor: 'the “study date but make it lunch” vibe' }, { id: 'sharetea', name: 'Sharetea', slug: 'sharetea', emoji: '🧋', type: 'Boba', campus: 'lower', precinct: 'University Terraces', location: 'University Terraces (B8)', lat: -33.91567, lng: 151.227803, color: '#06B6D4', desc: 'Bubble tea and snack energy at University Terraces for when the lecture reward is immediate.', bestFor: 'post-class sugar and caffeine diplomacy' }, { id: 'soul-origin', name: 'Soul Origin', slug: 'soul-origin', emoji: '🥗', type: 'Healthy', campus: 'middle', precinct: 'Quadrangle', location: 'Quadrangle Building (E15)', lat: -33.91718, lng: 151.230582, color: '#10B981', desc: 'Fresh salads, sandwiches, coffee and wholesome breakfast options in the Quad.', bestFor: 'a cleaner lunch when your week needs damage control' }, { id: 'southern-wok', name: 'Southern Wok', slug: 'southern-wok', emoji: '🥡', type: 'Chinese', campus: 'upper', precinct: 'Morven Brown', location: 'Morven Brown Building (C20)', lat: -33.916799, lng: 151.23292, color: '#F43F5E', desc: 'Casual Chinese and wider Asian dishes with dine-in or takeaway flexibility.', bestFor: 'a big hot plate when the day feels too long' }, { id: 'stellini-pasta', name: 'Stellini Pasta', slug: 'stellini-pasta-bar', emoji: '🍝', type: 'Italian', campus: 'lower', precinct: 'University Terraces', location: 'University Terraces (B8)', lat: -33.915676, lng: 151.227875, color: '#FB923C', desc: 'Italian takeaway pasta, salads and coffee down at University Terraces.', bestFor: 'a carbs-first lower campus decision' }, { id: 'stock-market', name: 'Stock Market', slug: 'stock-market-kitchen', emoji: '🥦', type: 'Salads', campus: 'upper', precinct: 'Mathews Food Court', location: 'Mathews Food Court (F23)', lat: -33.917358, lng: 151.234584, color: '#14B8A6', desc: 'Custom salads, pasta, soups and smoothies for the “healthy but still hungry” crowd.', bestFor: 'pretending you are in your wellness era while still getting a solid meal' }, { id: 'subway', name: 'Subway', slug: 'subway', emoji: '🥖', type: 'Sandwiches', campus: 'upper', precinct: 'Morven Brown', location: 'Morven Brown Building (C20)', lat: -33.916789, lng: 151.232677, color: '#84CC16', desc: 'Build-your-own sandwiches and salads right on upper campus.', bestFor: 'customising lunch when nobody can agree on fillings' }, { id: 'sushi-hon', name: 'Sushi Hon', slug: 'sushi-hon', emoji: '🍣', type: 'Sushi', campus: 'upper', precinct: 'Mathews Food Court', location: 'Mathews Food Court (F23)', lat: -33.917315, lng: 151.234413, color: '#38BDF8', desc: 'Grab-and-go sushi built for the sprint between one class and the next.', bestFor: 'a fast upper-campus lunch that still feels neat' }, { id: 'sushi-zoku', name: 'Sushi Zoku', slug: 'sushi-zoku', emoji: '🍱', type: 'Sushi', campus: 'middle', precinct: 'Quadrangle', location: 'Quadrangle Building (E15)', lat: -33.917307, lng: 151.230386, color: '#0EA5E9', desc: 'Nigiri, maki rolls and poke bowls in the Quad Food Court.', bestFor: 'when the tribe wants sushi and the answer is simply yes' }, { id: 'taste-baguette', name: 'Taste Baguette', slug: 'taste-baguette', emoji: '🥐', type: 'Bakery', campus: 'lower', precinct: 'Tyree', location: 'Tyree Energy Technologies Building (H6)', lat: -33.91895, lng: 151.22718, color: '#F59E0B', desc: 'French-inspired baguettes, sourdough and bakery-style lunch options inside Tyree.', bestFor: 'a quieter lower-campus stop when you want a real sandwich and a seat' }, { id: 'little-marionette', name: 'Little Marionette', slug: 'the-little-marionette', emoji: '☕', type: 'Coffee', campus: 'upper', precinct: 'Clancy', location: 'Behind Clancy Auditorium (C24)', lat: -33.917191, lng: 151.234522, color: '#A855F7', desc: 'Coffee-specialist stop behind Clancy with pastries, salads and snack fuel.', bestFor: 'an actually-good coffee before a long campus walk' }, { id: 'tropical-green', name: 'Tropical Green', slug: 'tropical-green-pho-house', emoji: '🍲', type: 'Vietnamese', campus: 'upper', precinct: 'Mathews Pavilions', location: 'Mathews Pavilions (E24)', lat: -33.917617, lng: 151.234409, color: '#06B6D4', desc: 'Pho, rolls, salads and Vietnamese comfort food from the Mathews Pavilions.', bestFor: 'a warm bowl when the weather or your timetable is being rude' }, { id: 'xs-espresso', name: 'XS Espresso', slug: 'xs-espresso', emoji: '🌯', type: 'Fusion', campus: 'upper', precinct: 'Biological Sciences', location: 'Biological Sciences Building', lat: -33.917319, lng: 151.235261, color: '#F43F5E', desc: 'A lively semi-outdoor cafe for big breakfasts, desserts and signature shakes.', bestFor: 'main-character brunch energy on campus' }, { id: 'yallah-eat', name: 'Yallah Eat', slug: 'yallah-eat', emoji: '🧆', type: 'Middle Eastern', campus: 'lower', precinct: 'University Terraces', location: 'University Terraces (B8)', lat: -33.915543, lng: 151.227932, color: '#EF4444', desc: 'Middle Eastern pitas, shawarma bowls and build-your-own lunches at the Terraces.', bestFor: 'a lower-campus pick that keeps everyone happy' } ]; const RANDOMIZING_LINES = [ 'Fork roulette is pacing from Mathews to Tyree...', 'Consulting the campus craving gods...', 'Scanning every precinct so your group chat does not have to...', 'Decision fatigue? Not on our watch...', 'Finding the most lunchable answer on campus...' ]; const WINNER_LINES = [ 'Committee meetings cancelled. Lunch has been chosen.', 'Zero overthinking required. Just go eat.', 'This one has strong between-class hero energy.', 'Campus hunger has officially been handled.', 'That is a suspiciously good pick, actually.' ]; function App({ data, setData, user, openProfile, isMultiplayer, sharedData, setSharedData, members }) { const appData = isMultiplayer ? sharedData : data; const saveData = isMultiplayer ? setSharedData : setData; const spinners = appData?.spinners || []; 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 [campusFilter, setCampusFilter] = useState('all'); const [pickedSpot, setPickedSpot] = useState(null); const [roulettePreview, setRoulettePreview] = useState(null); const [rouletteLine, setRouletteLine] = useState('Pins are live. Tap one or let lunch roulette decide.'); const [isRandomizing, setIsRandomizing] = useState(false); const [showWinner, setShowWinner] = useState(false); const [highlightedPins, setHighlightedPins] = useState([]); const [hasRecordedSpin, setHasRecordedSpin] = useState(false); const filteredSpots = useMemo(() => { const query = search.trim().toLowerCase(); const result = (FOOD_SPOTS || []).filter((spot) => { if (campusFilter !== 'all' && spot.campus !== campusFilter) return false; if (!query) return true; const haystack = [ spot.name, spot.type, spot.campus, CAMPUS_LABELS[spot.campus], spot.precinct, spot.location, spot.desc, spot.bestFor ].join(' ').toLowerCase(); return (haystack || []).includes(query); }); return [...result].sort((a, b) => { const campusRank = { upper: 0, middle: 1, lower: 2 }; const byCampus = (campusRank[a.campus] || 9) - (campusRank[b.campus] || 9); if (byCampus !== 0) return byCampus; const byPrecinct = a.precinct.localeCompare(b.precinct); if (byPrecinct !== 0) return byPrecinct; return a.name.localeCompare(b.name); }); }, [campusFilter, search]); const searchSuggestions = useMemo(() => { const query = search.trim().toLowerCase(); if (!query) return []; return (FOOD_SPOTS || []).filter((spot) => { const haystack = [ spot.name, spot.type, spot.precinct, spot.location, spot.desc ].join(' ').toLowerCase(); return (haystack || []).includes(query); }).slice(0, 6); }, [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 campusCounts = useMemo(() => { const counts = { all: (FOOD_SPOTS || []).length, upper: 0, middle: 0, lower: 0 }; (FOOD_SPOTS || []).forEach((spot) => { counts[spot.campus] = (counts[spot.campus] || 0) + 1; }); return counts; }, []); const uniqueSpinners = useMemo(() => { return [...spinners] .sort((a, b) => (b._timestamp || 0) - (a._timestamp || 0)) .slice(0, 8); }, [spinners]); // 🏛️ PRECINCT CLUSTERS — group spots by precinct, respect campus filter // Each cluster gets its own per-precinct Spin button on the home screen. const precinctGroups = useMemo(() => { const groups = {}; (FOOD_SPOTS || []).forEach((spot) => { if (campusFilter !== 'all' && spot.campus !== campusFilter) return; if (!groups[spot.precinct]) { groups[spot.precinct] = { precinct: spot.precinct, campus: spot.campus, spots: [] }; } groups[spot.precinct].spots.push(spot); }); return Object.values(groups || {}).sort((a, b) => { const campusRank = { upper: 0, middle: 1, lower: 2 }; const byCampus = (campusRank[a.campus] || 9) - (campusRank[b.campus] || 9); if (byCampus !== 0) return byCampus; return a.precinct.localeCompare(b.precinct); }); }, [campusFilter]); 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('UNSW', 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) 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() }; saveData({ ...(appData || {}), spinners: [...spinners, newSpinner] }); setHasRecordedSpin(true); }; const spotlightSpot = (spot, options) => { if (!spot) return; const nextOptions = options || {}; setSelectedSpot(spot); setShowList(false); setActiveCluster(null); if (nextOptions.openPanel) setShowPanel(true); if (nextOptions.closeWinner) setShowWinner(false); }; const handleSuggestionPick = (spot) => { setCampusFilter('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 precinct). 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(() => { 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.campus, 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; 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); }, []); const hasActiveFilters = campusFilter !== 'all' || search.trim(); const currentPreview = roulettePreview || pickedSpot; const listTitle = activeCluster?.ids?.length ? 'Same map cluster' : 'Visible food spots'; const MAP_HTML = `