Update main.js

main.js

@@ -1,19 +1,18 @@
 document.addEventListener('DOMContentLoaded', () => {
     // --- CONFIGURATION ---
     const config = {
-        backendUrl: 'https://ar-city-explorer-backend.aiagents.workers.dev' // Ensure this is your correct URL
+        backendUrl: 'https://ar-city-explorer-backend.aiagents.workers.dev' // This is the user's provided URL
     };
 
     // --- GLOBAL STATE ---
     let poisData = [];
     let arActive = false;
-  // Add this object to hold our settings
     let userSettings = {
-    showHistorical: true,
-    showMenus: true,
-    showNavigation: false,
-    voiceResponses: true
-};
+        showHistorical: true,
+        showMenus: true,
+        showNavigation: false,
+        voiceResponses: true
+    };
 
     // --- DOM ELEMENT SELECTORS ---
     const arToggle = document.getElementById('arToggle');
@@ -27,14 +26,11 @@ document.addEventListener('DOMContentLoaded', () => {
     const objectDescription = document.getElementById('objectDescription');
     const objectImage = document.getElementById('objectImage');
     const closeObjectModal = document.getElementById('closeObjectModal');
-    // Selectors for the Settings Modal
     const settingsBtn = document.getElementById('settingsBtn');
-    console.log('The settings button element is:', settingsBtn); // <-- ADD THIS LINE
     const settingsModal = document.getElementById('settingsModal');
     const closeSettingsModal = document.getElementById('closeSettingsModal');
 
-
-    // --- CORE FUNCTIONS (for AR and Data) ---
+    // --- CORE & UI FUNCTIONS ---
 
     function toggleARView(showAR) {
         arActive = showAR;
@@ -86,8 +82,6 @@ document.addEventListener('DOMContentLoaded', () => {
                 toggleARView(false);
             });
     }
-
-    // --- UI FUNCTIONS (Modals, Chat, Search) ---
     
     function showObjectInfo(poiId) {
         const poi = poisData.find(p => p.id === poiId);
@@ -113,87 +107,63 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function handleSearch() {
-    const searchTerm = userInput.value.trim();
-    if (!searchTerm) return;
-
-    addUserMessage(searchTerm);
-    userInput.value = '';
-
-    // Keywords to help decide if this is a local search
-    const searchKeywords = ['search', 'find', 'show', 'where is', 'landmark', 'park', 'beach', 'hollywood', 'map', 'navigate'];
-
-    // Check if the user's message contains any of our local search keywords
-    const isLocalSearch = searchKeywords.some(keyword => searchTerm.toLowerCase().includes(keyword));
-
-    if (isLocalSearch) {
-        // --- LOGIC FOR LOCAL SEARCH (same as before) ---
-        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 responseMessage = `I found ${results.length} local result(s):<ul>`;
-            results.forEach(poi => { responseMessage += `<li class="mt-2 list-disc list-inside">${poi.name}</li>`; });
-            responseMessage += "</ul>";
-            addAIMessage(responseMessage);
-        } else {
-            addAIMessage(`Sorry, I couldn't find any local places matching "${searchTerm}".`);
-        }
-
-    } else {
-        // --- NEW LOGIC: ASK THE GEMINI AI ---
-        // 1. Show a temporary "thinking" message for better UX
-        addAIMessage("AI is thinking...");
-
-        // 2. Call your backend's new "/api/ask" endpoint
-        fetch(`${config.backendUrl}/api/ask`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ prompt: searchTerm }) // Send the user's message
-        })
-        .then(response => {
-            if (!response.ok) {
-                throw new Error('Network response was not ok');
-            }
-            return response.json();
-        })
-        .then(data => {
-            // 3. Find the "AI is thinking..." message and replace its content with the real response
-            const chatContainer = aiAssistant.querySelector('.flex-col');
-            const thinkingMessage = Array.from(chatContainer.querySelectorAll('.assistant-message')).pop();
-            
-            if (thinkingMessage && thinkingMessage.textContent.includes("AI is thinking...")) {
-                thinkingMessage.querySelector('p').innerHTML = data.response.replace(/\n/g, '<br>'); // Update the message and format newlines
+        const searchTerm = userInput.value.trim();
+        if (!searchTerm) return;
+        addUserMessage(searchTerm);
+        userInput.value = '';
+        const searchKeywords = ['search', 'find', 'show', 'where is', 'landmark', 'park', 'beach', 'hollywood', 'map', 'navigate'];
+        const isLocalSearch = searchKeywords.some(keyword => searchTerm.toLowerCase().includes(keyword));
+        if (isLocalSearch) {
+            if (poisData.length === 0) return addAIMessage("Location data is still loading...");
+            const results = poisData.filter(poi =>
+                poi.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                (poi.description && poi.description.toLowerCase().includes(searchTerm.toLowerCase()))
+            );
+            if (results.length > 0) {
+                let responseMessage = `I found ${results.length} local result(s):<ul>`;
+                results.forEach(poi => { responseMessage += `<li class="mt-2 list-disc list-inside">${poi.name}</li>`; });
+                responseMessage += "</ul>";
+                addAIMessage(responseMessage);
             } else {
-                addAIMessage(data.response.replace(/\n/g, '<br>')); // Fallback: just add a new message
+                addAIMessage(`Sorry, I couldn't find any local places matching "${searchTerm}".`);
             }
-        })
-        .catch(error => {
-            console.error('Error asking AI:', error);
-            // 4. If there was an error, replace the "thinking" message with an error message
-            const chatContainer = aiAssistant.querySelector('.flex-col');
-            const thinkingMessage = Array.from(chatContainer.querySelectorAll('.assistant-message')).pop();
+        } else {
+            addAIMessage("AI is thinking...");
+            fetch(`${config.backendUrl}/api/ask`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt: searchTerm })
+            })
+            .then(response => {
+                if (!response.ok) throw new Error('Network response was not ok');
+                return response.json();
+            })
+            .then(data => {
+                const chatContainer = aiAssistant.querySelector('.flex-col');
+                const thinkingMessage = Array.from(chatContainer.querySelectorAll('.assistant-message')).pop();
+                if (thinkingMessage && thinkingMessage.textContent.includes("AI is thinking...")) {
+                    thinkingMessage.querySelector('p').innerHTML = data.response.replace(/\n/g, '<br>');
+                } else {
+                    addAIMessage(data.response.replace(/\n/g, '<br>'));
+                }
+            })
+            .catch(error => {
+                console.error('Error asking AI:', error);
+                const chatContainer = aiAssistant.querySelector('.flex-col');
+                const thinkingMessage = Array.from(chatContainer.querySelectorAll('.assistant-message')).pop();
+                if (thinkingMessage && thinkingMessage.textContent.includes("AI is thinking...")) {
+                     thinkingMessage.querySelector('p').innerHTML = "Sorry, I had trouble connecting to the AI.";
+                } else {
+                    addAIMessage("Sorry, I had trouble connecting to the AI.");
+                }
+            });
+        }
+    } // <-- THIS CLOSING BRACE WAS MISSING
 
-            if (thinkingMessage && thinkingMessage.textContent.includes("AI is thinking...")) {
-                 thinkingMessage.querySelector('p').innerHTML = "Sorry, I had trouble connecting to the AI. Please try again.";
-            } else {
-                addAIMessage("Sorry, I had trouble connecting to the AI. Please try again.");
-            }
-        });
-    }
-    
     // --- 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);
@@ -201,16 +171,13 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    // 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();
     });
 
-    // Settings Modal Open/Close
     settingsBtn.addEventListener('click', () => {
         settingsModal.classList.remove('hidden');
     });
@@ -222,40 +189,21 @@ document.addEventListener('DOMContentLoaded', () => {
             settingsModal.classList.add('hidden');
         }
     });
-  // --- Settings Toggles Functionality ---
-// Select all checkboxes that have a "data-setting" attribute
-const settingToggles = settingsModal.querySelectorAll('input[data-setting]');
-
-settingToggles.forEach(toggle => {
-    // On page load, set the checkbox's state from our userSettings object
-    const settingName = toggle.dataset.setting;
-    if (userSettings[settingName] !== undefined) {
-        toggle.checked = userSettings[settingName];
-    }
-
-    // Add a listener that fires whenever a toggle is changed
-    toggle.addEventListener('change', (event) => {
-        const changedSettingName = event.target.dataset.setting;
-        const newValue = event.target.checked;
-        
-        // Update our settings object with the new value
-        userSettings[changedSettingName] = newValue;
-        
-        // For debugging, log the entire updated settings object to the console
-        // --- Replace the console.log line with this: ---
 
-const debugLog = document.getElementById('debug-log');
-// Display the updated settings in our on-screen box
-debugLog.textContent = 'Settings Updated:\n\n' + JSON.stringify(userSettings, null, 2);
-
-// Make the box green to show it was a successful update
-debugLog.style.borderColor = '#4F8A10';
-debugLog.style.color = '#4F8A10';
-debugLog.style.backgroundColor = '#DFF2BF';
+    const settingToggles = settingsModal.querySelectorAll('input[data-setting]');
+    settingToggles.forEach(toggle => {
+        const settingName = toggle.dataset.setting;
+        if (userSettings[settingName] !== undefined) {
+            toggle.checked = userSettings[settingName];
+        }
+        toggle.addEventListener('change', (event) => {
+            const changedSettingName = event.target.dataset.setting;
+            userSettings[changedSettingName] = event.target.checked;
+            console.log('Settings updated:', userSettings);
+        });
     });
-});
 
     // --- INITIALIZATION ---
-    // Fetch data as soon as the app loads
     fetchPoisAndCreateAREntities();
-});
+
+}); // <-- THIS CLOSING BRACE AND PARENTHESIS WERE MISSING