map WIP

app/(main)/map/page.js

@@ -127,6 +127,74 @@ export default function MapPage() {
     }
   }, []);
 
+  // Enhanced function to populate the map with clue points
+  const enhanceSvgMap = useCallback(() => {
+    if (!mapContainerRef.current) return;
+
+    // Find the SVG element inside the map container
+    const svgElement = mapContainerRef.current.querySelector("svg");
+    if (!svgElement) {
+      console.error("No SVG element found in map container");
+      setMapError(true);
+      return;
+    }
+
+    console.log("SVG element found, starting enhancement process");
+
+    // Clear out any existing map-background elements to ensure we only show one map
+    const existingMapBgs = document.querySelectorAll(
+      `.${styles["map-background"]}`
+    );
+    existingMapBgs.forEach((bg) => (bg.style.display = "none"));
+
+    // First populate the map with basic clue points
+    populateMap(svgElement)
+      .then((success) => {
+        if (success) {
+          console.log("Map populated with clue points successfully");
+
+          // Process the clues to determine which are available
+          const processedClues = clues.map((clue, index, arr) => {
+            // Find the first unfound clue's index
+            const firstUnfoundIndex = arr.findIndex((c) => !c.found);
+
+            // A clue is available if:
+            // 1. It's already found, OR
+            // 2. It's the next unfound clue in the sequence
+            const available = clue.found || index === firstUnfoundIndex;
+
+            return { ...clue, available };
+          });
+
+          // Debug info about clue statuses
+          processedClues.forEach((clue, index) => {
+            console.log(
+              `Clue ${clue.id} (index ${index}): Available: ${clue.available}, Found: ${clue.found}`
+            );
+          });
+
+          // Update the clue point appearances based on their statuses
+          updateCluePointStatus(svgElement, processedClues);
+
+          // Define a direct navigation function that will be used for click handling
+          const navigateToClue = (clueId) => {
+            console.log(`Navigating to clue ${clueId}`);
+            router.push(`/clue/${clueId}`);
+          };
+
+          // Attach click handlers to all clue points and click areas
+          attachClueClickHandlers(svgElement, processedClues, navigateToClue);
+        } else {
+          console.error("Failed to populate map with clue points");
+          setMapError(true);
+        }
+      })
+      .catch((error) => {
+        console.error("Error enhancing SVG map:", error);
+        setMapError(true);
+      });
+  }, [clues, router, styles]);
+
   // Function to load and enhance the SVG map
   const loadAndEnhanceMap = useCallback(async () => {
     try {
@@ -143,7 +211,7 @@ export default function MapPage() {
       }
 
       const svgText = await response.text();
-      console.log("SVG loaded, length:", svgText.length);
+      console.log(`SVG loaded, length: ${svgText.length} characters`);
 
       // Ensure SVG has correct namespaces and viewBox
       let fixedSvg = svgText.replace(
@@ -174,42 +242,6 @@ export default function MapPage() {
     }
   }, []);
 
-  // Enhanced function to populate the map with clue points
-  const enhanceSvgMap = useCallback(() => {
-    if (!mapContainerRef.current) return;
-
-    // Find the SVG element inside the map container
-    const svgElement = mapContainerRef.current.querySelector("svg");
-    if (!svgElement) {
-      console.error("No SVG element found in map container");
-      return;
-    }
-
-    console.log("SVG element found, starting enhancement");
-
-    // Use our utility to populate the map with clue points
-    populateMap(svgElement)
-      .then((success) => {
-        if (success) {
-          console.log("Map populated successfully");
-
-          // After populating the map, update the status of each clue point
-          updateCluePointStatus(svgElement, clues);
-
-          // Attach click handlers for navigation
-          attachClueClickHandlers(svgElement, clues, (clueId) => {
-            router.push(`/clue/${clueId}`);
-          });
-        } else {
-          console.error("Failed to populate map");
-        }
-      })
-      .catch((error) => {
-        console.error("Error enhancing SVG map:", error);
-        setMapError(true);
-      });
-  }, [clues, router]);
-
   // Function to check hunt status and timer
   async function checkHuntAndTimer() {
     if (!isMounted.current) return;
@@ -538,23 +570,23 @@ export default function MapPage() {
     // Only try to enhance the map if both the SVG and clues are loaded
     if (!mapSvg || !clues.length) return;
 
-    console.log("Both SVG and clues loaded, enhancing map");
+    console.log("Both SVG and clues are loaded, preparing to enhance map");
 
-    // Use requestAnimationFrame to ensure the DOM has been updated with the SVG
+    // Ensure the SVG is fully loaded in the DOM before enhancing
     requestAnimationFrame(() => {
-      // Short timeout to ensure the SVG is fully rendered in the DOM
+      // Longer timeout to ensure the SVG is fully rendered in the DOM
       setTimeout(() => {
         if (
           mapContainerRef.current &&
           mapContainerRef.current.querySelector("svg")
         ) {
-          console.log("SVG found in DOM, enhancing map");
+          console.log("SVG found in DOM, enhancing map now");
           enhanceSvgMap();
         } else {
-          console.error("SVG not found in DOM after rendering");
+          console.error("SVG not found in DOM after rendering timeout");
           setMapError(true);
         }
-      }, 100);
+      }, 500); // Increased timeout for better reliability on slower devices
     });
   }, [mapSvg, clues, enhanceSvgMap]);
 
@@ -627,14 +659,12 @@ export default function MapPage() {
             <div
               className={styles["svg-container"]}
               dangerouslySetInnerHTML={{ __html: mapSvg }}
-              onLoad={() => console.log("SVG container loaded")}
             />
           ) : (
-            <div
-              className={styles["map-background"]}
-              role="img"
-              aria-label="Treasure Map"
-            ></div>
+            <div className={styles["loading-container"]}>
+              <div className={styles["loading-spinner"]}></div>
+              <div>Loading map...</div>
+            </div>
           )}
         </div>
       </div>