Update main.js

main.js

@@ -1,31 +1,11 @@
 document.addEventListener('DOMContentLoaded', () => {
-  // --- SETTINGS MODAL LOGIC ---
-
-// Listen for a click on the main settings gear icon
-settingsBtn.addEventListener('click', () => {
-    settingsModal.classList.remove('hidden');
-});
-
-// Listen for a click on the "X" button inside the modal
-closeSettingsModal.addEventListener('click', () => {
-    settingsModal.classList.add('hidden');
-});
-
-// Bonus: Also close the modal if the user clicks on the dark background overlay
-settingsModal.addEventListener('click', (event) => {
-    // Check if the click was on the dark background itself, not the white modal content
-    if (event.target === settingsModal) {
-        settingsModal.classList.add('hidden');
-    }
-});
     // --- CONFIGURATION ---
     const config = {
-        // IMPORTANT: Paste your full and correct Cloudflare Worker URL here
-        backendUrl: 'https://ar-city-explorer-backend.aiagents.workers.dev'
+        backendUrl: 'https://ar-city-explorer-backend.aiagents.workers.dev' // Ensure this is your correct URL
     };
 
     // --- GLOBAL STATE ---
-    let poisData = []; // This will hold all our landmark data from the backend
+    let poisData = [];
     let arActive = false;
 
     // --- DOM ELEMENT SELECTORS ---
@@ -40,12 +20,12 @@ settingsModal.addEventListener('click', (event) => {
     const objectDescription = document.getElementById('objectDescription');
     const objectImage = document.getElementById('objectImage');
     const closeObjectModal = document.getElementById('closeObjectModal');
-  // Add these to your existing list of selectors
+    // Selectors for the Settings Modal
     const settingsBtn = document.getElementById('settingsBtn');
     const settingsModal = document.getElementById('settingsModal');
     const closeSettingsModal = document.getElementById('closeSettingsModal');
 
-    // --- CORE FUNCTIONS ---
+    // --- CORE FUNCTIONS (for AR and Data) ---
 
     function toggleARView(showAR) {
         arActive = showAR;
@@ -53,7 +33,6 @@ settingsModal.addEventListener('click', (event) => {
             normalView.classList.add('hidden');
             arViewport.classList.remove('hidden');
             arToggle.innerHTML = '<i class="fas fa-times mr-1"></i> Exit AR';
-            // Fetch data only if it hasn't been fetched yet
             if (poisData.length === 0) {
                 fetchPoisAndCreateAREntities();
             }
@@ -65,73 +44,41 @@ settingsModal.addEventListener('click', (event) => {
     }
 
     function fetchPoisAndCreateAREntities() {
-        console.log('Fetching POIs from backend...');
         fetch(`${config.backendUrl}/api/pois`)
             .then(response => {
                 if (!response.ok) throw new Error(`Network error: ${response.statusText}`);
                 return response.json();
             })
             .then(pois => {
-                console.log('POIs received:', pois);
-                poisData = pois; // Store the data globally
+                poisData = pois;
                 const scene = document.querySelector('a-scene');
                 if (!scene) return console.error('A-Frame scene not found!');
-
                 pois.forEach(poi => {
                     const entity = document.createElement('a-entity');
-                    entity.setAttribute('gps-new-entity-place', {
-                        latitude: poi.latitude,
-                        longitude: poi.longitude
-                    });
-
+                    entity.setAttribute('gps-new-entity-place', { latitude: poi.latitude, longitude: poi.longitude });
                     const box = document.createElement('a-box');
                     box.setAttribute('material', 'color: red; opacity: 0.7;');
                     box.setAttribute('scale', '10 10 10');
                     box.setAttribute('position', '0 5 0');
-                    box.setAttribute('data-poi-id', poi.id); // Set ID for click detection
+                    box.setAttribute('data-poi-id', poi.id);
                     entity.appendChild(box);
-
                     const text = document.createElement('a-text');
                     text.setAttribute('value', poi.name);
                     text.setAttribute('look-at', '[gps-new-camera]');
                     text.setAttribute('scale', '50 50 50');
                     text.setAttribute('position', '0 15 0');
                     entity.appendChild(text);
-                    
                     scene.appendChild(entity);
                 });
             })
             .catch(error => {
-    // --- NEW ON-SCREEN DEBUGGING CATCH BLOCK ---
-    console.error('Failed to load POIs:', error); // Keep original console log
-
-    const debugLog = document.getElementById('debug-log');
-
-    // Make the error box visible and print all error details inside it
-    debugLog.style.display = 'block';
-    debugLog.textContent = `
-        A critical error occurred.
-
-        Error Name: 
-        ${error.name}
-
-        Error Message: 
-        ${error.message}
-
-        This usually happens for one of two reasons:
-        1. The 'backendUrl' in main.js has a typo.
-        2. Your browser is blocking the request for security reasons (CORS policy).
-
-        Full Technical Details:
-        ${error.stack}
-    `;
-
-    // Switch back to the normal view so we can see the error box
-    toggleARView(false); 
-});
+                console.error('Failed to load POIs:', error);
+                alert('Could not load city data. Check connection and backend URL.');
+                toggleARView(false);
+            });
     }
 
-    // --- MODAL AND UI FUNCTIONS ---
+    // --- UI FUNCTIONS (Modals, Chat, Search) ---
     
     function showObjectInfo(poiId) {
         const poi = poisData.find(p => p.id === poiId);
@@ -161,17 +108,11 @@ settingsModal.addEventListener('click', (event) => {
         if (!searchTerm) return;
         addUserMessage(searchTerm);
         userInput.value = '';
-
-        if (poisData.length === 0) {
-            addAIMessage("I'm still loading location data. Please try again in a moment.");
-            return;
-        }
-
+        if (poisData.length === 0) return addAIMessage("Location data is still loading. Please try again in a moment.");
         const results = poisData.filter(poi =>
             poi.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
             (poi.description && poi.description.toLowerCase().includes(searchTerm.toLowerCase()))
         );
-
         if (results.length > 0) {
             let response = `I found ${results.length} result(s):<ul>`;
             results.forEach(poi => { response += `<li class="mt-2 list-disc list-inside">${poi.name}</li>`; });
@@ -184,8 +125,10 @@ settingsModal.addEventListener('click', (event) => {
     
     // --- EVENT LISTENERS ---
     
+    // AR Mode Toggle
     arToggle.addEventListener('click', () => toggleARView(!arActive));
 
+    // Clicking on AR objects
     document.querySelector('a-scene').addEventListener('click', (event) => {
         if (event.target.hasAttribute('data-poi-id')) {
             const poiId = parseInt(event.target.getAttribute('data-poi-id'), 10);
@@ -193,13 +136,29 @@ settingsModal.addEventListener('click', (event) => {
         }
     });
 
+    // Info Modal Close Button
     closeObjectModal.addEventListener('click', () => objectModal.classList.add('hidden'));
     
+    // Search Bar
     sendBtn.addEventListener('click', handleSearch);
     userInput.addEventListener('keypress', (e) => {
         if (e.key === 'Enter') handleSearch();
     });
 
-    // Initial fetch of data so the search bar works immediately
+    // Settings Modal Open/Close
+    settingsBtn.addEventListener('click', () => {
+        settingsModal.classList.remove('hidden');
+    });
+    closeSettingsModal.addEventListener('click', () => {
+        settingsModal.classList.add('hidden');
+    });
+    settingsModal.addEventListener('click', (event) => {
+        if (event.target === settingsModal) {
+            settingsModal.classList.add('hidden');
+        }
+    });
+
+    // --- INITIALIZATION ---
+    // Fetch data as soon as the app loads
     fetchPoisAndCreateAREntities();
 });