FIXED CLUES! all that needs to be done is manually adding circle buttons and hiding/showing feature through API.. maybe fixing QR scanner

utils/map-debug.js

@@ -91,9 +91,23 @@ export function fixCluePointsRendering(svgElement) {
 
   // Ensure all clue points are in the overlay group and have proper styles
   cluePoints.forEach((point, i) => {
+    // Get original coordinates if available
+    const originalCx =
+      point.getAttribute("data-original-cx") || point.getAttribute("cx");
+    const originalCy =
+      point.getAttribute("data-original-cy") || point.getAttribute("cy");
+
     // Clone the point to remove any existing event handlers and styling issues
     const newPoint = point.cloneNode(true);
 
+    // Restore original coordinates if they were saved
+    if (originalCx) newPoint.setAttribute("cx", originalCx);
+    if (originalCy) newPoint.setAttribute("cy", originalCy);
+
+    // Store original coordinates for future reference
+    if (originalCx) newPoint.setAttribute("data-original-cx", originalCx);
+    if (originalCy) newPoint.setAttribute("data-original-cy", originalCy);
+
     // Apply explicit styles to ensure visibility
     newPoint.setAttribute(
       "style",
@@ -114,6 +128,12 @@ export function fixCluePointsRendering(svgElement) {
       // Add to overlay group
       overlayGroup.appendChild(newPoint);
     }
+
+    // Update the corresponding click area position too
+    if (clickAreas[i]) {
+      clickAreas[i].setAttribute("cx", originalCx || point.getAttribute("cx"));
+      clickAreas[i].setAttribute("cy", originalCy || point.getAttribute("cy"));
+    }
   });
 
   // Move the overlay group to be the last child of the SVG
@@ -121,3 +141,63 @@ export function fixCluePointsRendering(svgElement) {
 
   console.log("Clue points rendering fixed");
 }
+
+// New function to ensure clue circles match original map
+export function fixCluePositionsFromOriginalMap(svgElement) {
+  if (!svgElement) return;
+
+  // Fetch the original map SVG to get circle positions
+  fetch("/images/map.svg")
+    .then((response) => response.text())
+    .then((svgText) => {
+      const parser = new DOMParser();
+      const mapDoc = parser.parseFromString(svgText, "image/svg+xml");
+
+      // Get all circles from original map
+      const originalCircles = Array.from(mapDoc.querySelectorAll("circle"));
+      console.log(
+        `Found ${originalCircles.length} circles in original map for position fixing`
+      );
+
+      // Get current clue points
+      const cluePoints = svgElement.querySelectorAll(".clue-point");
+      console.log(`Found ${cluePoints.length} clue points to fix positions`);
+
+      // Only adjust positions if we have both original circles and clue points
+      if (originalCircles.length > 0 && cluePoints.length > 0) {
+        // Get the clue overlay group
+        let overlayGroup = svgElement.querySelector(".clue-points-overlay");
+
+        if (!overlayGroup) return;
+
+        // Update each clue point to match original circle position
+        cluePoints.forEach((point, i) => {
+          if (i < originalCircles.length) {
+            const originalCircle = originalCircles[i];
+            const cx = originalCircle.getAttribute("cx") || "0";
+            const cy = originalCircle.getAttribute("cy") || "0";
+
+            // Update position
+            point.setAttribute("cx", cx);
+            point.setAttribute("cy", cy);
+            point.setAttribute("data-original-cx", cx);
+            point.setAttribute("data-original-cy", cy);
+
+            // Update the corresponding click area
+            const clickArea = svgElement.querySelector(
+              `.clue-click-area[data-index="${i}"]`
+            );
+            if (clickArea) {
+              clickArea.setAttribute("cx", cx);
+              clickArea.setAttribute("cy", cy);
+            }
+          }
+        });
+
+        console.log("Clue positions fixed to match original map");
+      }
+    })
+    .catch((error) => {
+      console.error("Error fixing clue positions from original map:", error);
+    });
+}