map WIP

utils/map-debug.js

@@ -0,0 +1,123 @@
+/**
+ * Utility for debugging SVG rendering issues
+ */
+
+/**
+ * Adds a visible debug overlay to the SVG to test z-index rendering
+ * @param {SVGElement} svgElement - The SVG DOM element
+ */
+export function addDebugOverlay(svgElement) {
+  if (!svgElement) return;
+
+  const svgNS = "http://www.w3.org/2000/svg";
+
+  // Create a debug group at the highest level
+  const debugGroup = document.createElementNS(svgNS, "g");
+  debugGroup.setAttribute("id", "debug-overlay");
+  debugGroup.setAttribute(
+    "style",
+    "pointer-events: none; z-index: 10000; position: relative;"
+  );
+
+  // Add a semi-transparent rectangle across the entire SVG
+  const svgWidth = svgElement.viewBox?.baseVal?.width || 1000;
+  const svgHeight = svgElement.viewBox?.baseVal?.height || 1000;
+
+  const rect = document.createElementNS(svgNS, "rect");
+  rect.setAttribute("x", "0");
+  rect.setAttribute("y", "0");
+  rect.setAttribute("width", svgWidth.toString());
+  rect.setAttribute("height", svgHeight.toString());
+  rect.setAttribute("fill", "rgba(255, 255, 0, 0.1)");
+  rect.setAttribute("stroke", "none");
+
+  // Add some test circles at fixed positions
+  const testPositions = [
+    { x: 50, y: 50, color: "red" },
+    { x: 150, y: 150, color: "blue" },
+    { x: 250, y: 250, color: "green" },
+    { x: 350, y: 350, color: "purple" },
+  ];
+
+  testPositions.forEach((pos, i) => {
+    const testCircle = document.createElementNS(svgNS, "circle");
+    testCircle.setAttribute("cx", pos.x.toString());
+    testCircle.setAttribute("cy", pos.y.toString());
+    testCircle.setAttribute("r", "20");
+    testCircle.setAttribute("fill", pos.color);
+    testCircle.setAttribute("fill-opacity", "0.5");
+    testCircle.setAttribute("stroke", "black");
+    testCircle.setAttribute("stroke-width", "2");
+    testCircle.setAttribute("class", "debug-circle");
+
+    debugGroup.appendChild(testCircle);
+  });
+
+  // Add the debug group to the SVG
+  svgElement.appendChild(debugGroup);
+
+  console.log("Debug overlay added to SVG");
+}
+
+/**
+ * Checks if clue points are visible and fixes rendering issues
+ * @param {SVGElement} svgElement - The SVG DOM element
+ */
+export function fixCluePointsRendering(svgElement) {
+  if (!svgElement) return;
+
+  // Find the clue points overlay group
+  let overlayGroup = svgElement.querySelector(".clue-points-overlay");
+
+  // If no overlay group exists, create one
+  if (!overlayGroup) {
+    console.log("No clue points overlay found, creating one");
+    overlayGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    overlayGroup.setAttribute("class", "clue-points-overlay");
+    overlayGroup.setAttribute(
+      "style",
+      "pointer-events: all !important; z-index: 9999 !important; position: relative !important;"
+    );
+    svgElement.appendChild(overlayGroup);
+  }
+
+  // Find all clue points
+  const cluePoints = svgElement.querySelectorAll(".clue-point");
+  const clickAreas = svgElement.querySelectorAll(".clue-click-area");
+
+  console.log(
+    `Found ${cluePoints.length} clue points and ${clickAreas.length} click areas`
+  );
+
+  // Ensure all clue points are in the overlay group and have proper styles
+  cluePoints.forEach((point, i) => {
+    // Clone the point to remove any existing event handlers and styling issues
+    const newPoint = point.cloneNode(true);
+
+    // Apply explicit styles to ensure visibility
+    newPoint.setAttribute(
+      "style",
+      "fill: #ff9800; stroke: #e65100; stroke-width: 3px; " +
+        "pointer-events: all !important; cursor: pointer !important; " +
+        "z-index: 9999 !important; position: relative !important; " +
+        "r: 14px; fill-opacity: 1; stroke-opacity: 1; " +
+        "filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.7));"
+    );
+
+    // Move to overlay group
+    if (point.parentNode !== overlayGroup) {
+      // Remove from current location
+      if (point.parentNode) {
+        point.parentNode.removeChild(point);
+      }
+
+      // Add to overlay group
+      overlayGroup.appendChild(newPoint);
+    }
+  });
+
+  // Move the overlay group to be the last child of the SVG
+  svgElement.appendChild(overlayGroup);
+
+  console.log("Clue points rendering fixed");
+}