map WIP

app/(main)/map/page.js

@@ -10,7 +10,11 @@ import {
   clearHuntTimer,
   formatElapsedTime,
 } from "@/utils/timerService";
-import { populateMap, updateCluePointStatus } from "@/utils/map-populate";
+import {
+  populateMap,
+  updateCluePointStatus,
+  attachClueClickHandlers,
+} from "@/utils/map-populate";
 
 export default function MapPage() {
   const { data: session, status } = useSession();
@@ -188,59 +192,13 @@ export default function MapPage() {
       .then((success) => {
         if (success) {
           console.log("Map populated successfully");
+
           // After populating the map, update the status of each clue point
           updateCluePointStatus(svgElement, clues);
 
-          // Add click handlers to each clue point
-          const cluePoints = svgElement.querySelectorAll(".clue-point");
-          cluePoints.forEach((circle, index) => {
-            if (index < clues.length) {
-              const clue = clues[index];
-              const isAvailable = clue.available;
-
-              // Make circle interactive
-              circle.style.cursor = isAvailable ? "pointer" : "not-allowed";
-
-              // Add click handler
-              circle.onclick = (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-
-                if (isAvailable) {
-                  console.log(`Navigating to clue ${clue.id}`);
-                  router.push(`/clue/${clue.id}`);
-                } else {
-                  alert("Complete previous clues first to unlock this one!");
-                }
-              };
-
-              // Add hover effects
-              circle.onmouseenter = () => {
-                if (isAvailable) {
-                  circle.style.fill = "#ffb74d"; // Lighter orange for hover
-                }
-              };
-
-              circle.onmouseleave = () => {
-                if (clue.found) {
-                  circle.style.fill = "#4caf50"; // Back to green for found clues
-                } else if (isAvailable) {
-                  circle.style.fill = "#ff9800"; // Back to orange for available clues
-                } else {
-                  circle.style.fill = "#9e9e9e"; // Back to grey for unavailable clues
-                }
-              };
-
-              // Add tooltip with clue information
-              const label = document.createElementNS(
-                "http://www.w3.org/2000/svg",
-                "title"
-              );
-              label.textContent = `Clue #${index + 1}: ${
-                clue.title || "Mystery clue"
-              }${!isAvailable ? " (Locked)" : ""}`;
-              circle.appendChild(label);
-            }
+          // Attach click handlers for navigation
+          attachClueClickHandlers(svgElement, clues, (clueId) => {
+            router.push(`/clue/${clueId}`);
           });
         } else {
           console.error("Failed to populate map");