import React, { useState, useEffect, useRef } from 'react'; import ReactDOM from 'react-dom/client'; // Add Google Fonts const link = document.createElement('link'); link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'; link.rel = 'stylesheet'; document.head.appendChild(link); const LocationSelector = ({ onLocationSelect }) => { const [leafletLoaded, setLeafletLoaded] = useState(false); const mapRef = useRef(null); const mapInstance = useRef(null); const markerRef = useRef(null); const [selectedLocation, setSelectedLocation] = useState(null); const [showConfirmation, setShowConfirmation] = useState(false); const [locationName, setLocationName] = useState(''); useEffect(() => { // Check if Leaflet is loaded if (typeof window.L === 'undefined') { const script = document.createElement('script'); script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'; script.integrity = 'sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo='; script.crossOrigin = ''; const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'; link.integrity = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY='; link.crossOrigin = ''; document.head.appendChild(link); document.body.appendChild(script); script.onload = () => { setLeafletLoaded(true); }; return () => { document.head.removeChild(link); document.body.removeChild(script); }; } else { setLeafletLoaded(true); } }, []); useEffect(() => { if (!leafletLoaded || !mapRef.current) return; // Only initialize map if it hasn't been initialized yet if (!mapInstance.current) { mapInstance.current = window.L.map(mapRef.current, { center: [37.7749, -122.4194], // San Francisco coordinates zoom: 12, zoomControl: true }); window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(mapInstance.current); // Add initial marker for San Francisco markerRef.current = window.L.marker([37.7749, -122.4194]) .addTo(mapInstance.current) .bindPopup('San Francisco') .openPopup(); setSelectedLocation({ lat: 37.7749, lng: -122.4194 }); setLocationName('San Francisco'); mapInstance.current.on('click', async (e) => { const { lat, lng } = e.latlng; try { const response = await fetch( `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&addressdetails=1` ); const data = await response.json(); // Try to get the most relevant name for the location const name = data.address.suburb || data.address.neighbourhood || data.address.city_district || data.address.city || data.address.town || data.address.village || data.display_name.split(',')[0]; if (markerRef.current) { markerRef.current.setLatLng([lat, lng]); markerRef.current.bindPopup(name).openPopup(); } else { markerRef.current = window.L.marker([lat, lng]) .addTo(mapInstance.current) .bindPopup(name) .openPopup(); } setSelectedLocation({ lat, lng }); setLocationName(name); } catch (error) { console.error('Error fetching location name:', error); } }); } return () => { if (mapInstance.current) { mapInstance.current.remove(); mapInstance.current = null; markerRef.current = null; } }; }, [leafletLoaded]); const handleConfirmLocation = () => { if (selectedLocation) { setShowConfirmation(true); setTimeout(() => { setShowConfirmation(false); onLocationSelect({ ...selectedLocation, name: locationName }); }, 1500); } }; return (

Select Your Location

{showConfirmation && (

📍 Location set to {locationName}!

)}

); }; const App = () => { const [location, setLocation] = useState(null); const [hasSelectedLocation, setHasSelectedLocation] = useState(false); const handleLocationSelect = (newLocation) => { setLocation(newLocation); setHasSelectedLocation(true); }; if (!hasSelectedLocation) { return ; } return ; }; const Calendar = ({ userLocation }) => { const [currentDate, setCurrentDate] = useState(new Date()); const [selectedDate, setSelectedDate] = useState(null); const [calendarDays, setCalendarDays] = useState([]); const [events, setEvents] = useState([]); const [isLoadingEvents, setIsLoadingEvents] = useState(false); const [error, setError] = useState(null); const [copiedEventId, setCopiedEventId] = useState(null); // Ticketmaster API configuration const TICKETMASTER_API_KEY = window.TICKETMASTER_API_KEY || 'JGAqAU9GbPVUGKfq1GARbIs8DDHI6r4s'; const TICKETMASTER_API_BASE_URL = 'https://app.ticketmaster.com/discovery/v2/events.json'; const fetchEvents = async (date) => { setIsLoadingEvents(true); setError(null); try { const formattedDate = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(date).padStart(2, '0')}`; const params = new URLSearchParams({ apikey: TICKETMASTER_API_KEY, latlong: `${userLocation.lat},${userLocation.lng}`, radius: '50', // 50 mile radius unit: 'miles', startDateTime: `${formattedDate}T00:00:00Z`, endDateTime: `${formattedDate}T23:59:59Z`, size: 20 }); const response = await fetch(`${TICKETMASTER_API_BASE_URL}?${params}`); const data = await response.json(); if (data._embedded?.events) { setEvents(data._embedded.events); } else { setEvents([]); } } catch (err) { setError('Failed to load events. Please try again later.'); console.error('Error fetching events:', err); } finally { setIsLoadingEvents(false); } }; const handleDateSelect = (day) => { setSelectedDate(day); fetchEvents(day); }; useEffect(() => { const year = currentDate.getFullYear(); const month = currentDate.getMonth(); // Get first day of month and total days const firstDay = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate(); // Generate calendar days array const days = []; for (let i = 0; i < firstDay; i++) { days.push(null); } for (let i = 1; i <= daysInMonth; i++) { days.push(i); } setCalendarDays(days); }, [currentDate]); const months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; return (

{months[currentDate.getMonth()]} {currentDate.getFullYear()}

📍 {userLocation.name}

{weekDays.map(day => (

{day}

))}

{calendarDays.map((day, index) => (

day && handleDateSelect(day)} style={{ aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: day ? 'pointer' : 'default', background: selectedDate === day ? 'rgba(255, 255, 255, 0.3)' : day === currentDate.getDate() ? 'rgba(255, 255, 255, 0.2)' : 'rgba(255, 255, 255, 0.1)', borderRadius: '10px', color: 'white', transition: 'all 0.3s ease', border: day === currentDate.getDate() ? '2px solid rgba(255, 255, 255, 0.5)' : '1px solid rgba(255, 255, 255, 0.1)', ':hover': { transform: day ? 'scale(1.1)' : 'none', background: day ? 'rgba(255, 255, 255, 0.25)' : 'rgba(255, 255, 255, 0.1)' } }} onMouseEnter={e => { if (day) { e.currentTarget.style.transform = 'scale(1.1)'; e.currentTarget.style.background = 'rgba(255, 255, 255, 0.25)'; } }} onMouseLeave={e => { if (day) { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.background = selectedDate === day ? 'rgba(255, 255, 255, 0.3)' : day === currentDate.getDate() ? 'rgba(255, 255, 255, 0.2)' : 'rgba(255, 255, 255, 0.1)'; } }} > {day}

))}

{selectedDate && (

Events for {months[currentDate.getMonth()]} {selectedDate}

{isLoadingEvents ? (

Loading events...

) : error ? (

{error}

) : events.length === 0 ? (

No events found for this date.

) : (

{events.map((event, index) => (

{ e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.15)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)'; }} >

{event.images?.[0]?.url ? ( {event.name}

) : (

No Image

)}

{event.name}

🕒 {new Date(event.dates.start.dateTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}

📍 {event._embedded?.venues?.[0]?.name || 'Location TBA'}

{event.priceRanges && (

💰 ${event.priceRanges[0].min.toFixed(2)} - ${event.priceRanges[0].max.toFixed(2)}

)}

{copiedEventId === event.id && (

Open link in new tab

)}

))}

)}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();

Other games like this

About Event-Finder App