fixing map timing errors and still trying to make leaderboard and clues pages.

Grey = cant click
Red = current
Green = complete
blue = skipped?

Need to add Clue page Need to fix Leaderboard.

app/(main)/map/map.module.css

@@ -64,14 +64,18 @@
   height: 100%;
   background-color: #69b5a8; /* Background color */
   overflow: auto; /* Enable scrolling */
+  display: flex; /* Add flexbox to center content */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
 }
 
 .treasure-map {
-  position: relative; /* Changed from absolute to relative */
+  position: relative;
   width: 100%;
   height: 100%;
-  min-width: 100%;
-  min-height: 100%;
+  display: flex; /* Add flexbox for centering */
+  justify-content: center;
+  align-items: center;
 }
 
 /* SVG container for better scrolling and zooming */
@@ -82,16 +86,16 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  overflow: auto;
+  overflow: visible; /* Change from auto to visible */
 }
 
 .svg-container svg {
-  min-width: 100%;
-  min-height: 100%;
+  max-width: 100%;
+  max-height: 90vh; /* Limit height to 90% of viewport height */
   width: auto;
   height: auto;
   display: block;
-  transform-origin: center center;
+  object-fit: contain; /* Ensure the entire SVG is visible */
 }
 
 /* Map background - display as full-page map */
@@ -101,10 +105,8 @@
   left: 0;
   width: 100%;
   height: 100%;
-  min-width: 100%;
-  min-height: 100%;
   background-image: url("/images/map.svg");
-  background-size: contain; /* Change back to contain for proper aspect ratio */
+  background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   z-index: 5;
@@ -113,12 +115,11 @@
 /* Circle elements in the SVG map - attach to a container class */
 .svg-container circle {
   cursor: pointer;
-  transition: fill 0.3s ease, transform 0.3s ease;
+  transition: fill 0.3s ease; /* Only transition the fill color, not size */
 }
 
 .svg-container circle:hover {
-  fill: #ffb74d !important;
-  transform: scale(1.1);
+  fill: #ffb74d !important; /* Only change color on hover, no movement */
 }
 
 /* Remaining styles unchanged */

app/(main)/map/page.js

@@ -55,10 +55,11 @@ export default function MapPage() {
         return cachedStartTime;
       }
 
-      // Otherwise fetch from the server
-      if (session?.user?.teamId) {
+      // Otherwise fetch from the server - use effectiveTeamId which is derived from session
+      const effectiveTeamId = session?.user?.teamId;
+      if (effectiveTeamId) {
         const response = await fetch(
-          `/api/teams/${session.user.teamId}/hunt-session`,
+          `/api/teams/${effectiveTeamId}/hunt-session`,
           {
             method: "GET",
             headers: {
@@ -85,7 +86,7 @@ export default function MapPage() {
       console.error("Failed to fetch team hunt start time:", error);
       return new Date().toISOString();
     }
-  }, [session?.user?.teamId]);
+  }, []); // No dependencies to avoid re-creation - we'll handle session internally
 
   // IMPORTANT: Move fetchTeamData up here, before it's referenced in useEffect dependencies
   const fetchTeamData = useCallback(async () => {
@@ -188,42 +189,81 @@ export default function MapPage() {
     // Find all circles in the SVG
     const circleSvgElements =
       mapContainerRef.current.querySelectorAll("circle");
+    console.log(`Found ${circleSvgElements.length} circles in SVG`);
+
+    // Find the highest available clue ID (first unfound clue)
+    let nextAvailableClueIndex = clues.findIndex((clue) => !clue.found);
+    if (nextAvailableClueIndex === -1) {
+      // If all clues are found, allow access to all
+      nextAvailableClueIndex = clues.length;
+    }
 
     // Convert NodeList to Array for easier manipulation
     Array.from(circleSvgElements).forEach((circle, index) => {
-      // Only process if we have a clue for this circle
+      // Only process if we have a clue for this index
       if (clues[index]) {
+        // Check if this clue is available (either found or next in sequence)
+        const isAvailable =
+          clues[index].found || index <= nextAvailableClueIndex;
+
         // Make circle interactive
-        circle.style.cursor = "pointer";
-        circle.style.fill = "#ff9800";
-        circle.style.stroke = "#d87f00";
+        circle.style.cursor = isAvailable ? "pointer" : "not-allowed";
+
+        // Set appropriate colors
+        if (clues[index].found) {
+          // Found clues are green
+          circle.style.fill = "#4caf50";
+          circle.style.stroke = "#2e7d32";
+        } else if (isAvailable) {
+          // Next available clue is orange
+          circle.style.fill = "#ff9800";
+          circle.style.stroke = "#d87f00";
+        } else {
+          // Unavailable clues are grey
+          circle.style.fill = "#9e9e9e";
+          circle.style.stroke = "#757575";
+        }
+
         circle.style.strokeWidth = "2";
 
-        // Add click handler to navigate to the clue page
-        circle.onclick = () => {
-          router.push(`/clue/${clues[index].id}`);
+        // Add click handler to navigate to the clue page, but only if available
+        circle.onclick = (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (isAvailable) {
+            console.log(`Navigating to clue ${clues[index].id}`);
+            router.push(`/clue/${clues[index].id}`);
+          } else {
+            alert("Complete previous clues first to unlock this one!");
+          }
         };
 
         // Add hover effects
         circle.onmouseenter = () => {
-          circle.style.fill = "#ffb74d";
-          circle.style.transform = "scale(1.1)";
-          circle.style.transition = "all 0.3s ease";
+          if (isAvailable) {
+            circle.style.fill = "#ffb74d"; // Lighter orange for hover
+          }
         };
 
         circle.onmouseleave = () => {
-          circle.style.fill = "#ff9800";
-          circle.style.transform = "scale(1)";
+          if (clues[index].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
+          }
         };
 
-        // Optional: Add label or tooltip
+        // Add tooltip/title
         const label = document.createElementNS(
           "http://www.w3.org/2000/svg",
           "title"
         );
         label.textContent = `Clue #${index + 1}: ${
           clues[index].title || "Mystery clue"
-        }`;
+        }${!isAvailable ? " (Locked)" : ""}`;
         circle.appendChild(label);
       }
     });
@@ -279,10 +319,14 @@ export default function MapPage() {
   // Add effect to enhance SVG once it's loaded and clues are fetched
   useEffect(() => {
     if (mapSvg && clues.length > 0) {
+      console.log("SVG and clues loaded, enhancing map...");
+
       // Let the DOM update first with the SVG content
-      setTimeout(() => {
+      const enhanceTimeout = setTimeout(() => {
         enhanceSvgMap();
-      }, 100);
+      }, 200);
+
+      return () => clearTimeout(enhanceTimeout);
     }
   }, [mapSvg, clues, enhanceSvgMap]);
 
@@ -359,53 +403,63 @@ export default function MapPage() {
 
   // Use team hunt start time for elapsed time calculation
   useEffect(() => {
-    if (!teamData?.team) return;
-
-    // Get hunt timer data from the centralized service
-    let timerData = getHuntTimer();
-
-    // If no timer data yet, fetch it
-    if (!timerData) {
-      fetchTeamHuntStartTime().then((startTimeStr) => {
-        setHuntTimer(startTimeStr);
-        timerData = getHuntTimer();
-        startTimer(timerData);
-      });
-    } else {
-      startTimer(timerData);
-    }
-
-    function startTimer(timerData) {
-      const timer = setInterval(() => {
-        if (!isMounted.current) {
-          clearInterval(timer);
-          return;
+    // Initialize the timer without waiting for teamData
+    // This ensures timer starts as soon as possible
+    const initializeTimer = async () => {
+      try {
+        // First try to get timer data from the centralized service
+        let timerData = getHuntTimer();
+        
+        // If no timer data yet, fetch it from API
+        if (!timerData || !timerData.startTime) {
+          console.log("No timer data found, fetching from API...");
+          const startTimeStr = await fetchTeamHuntStartTime();
+          console.log("Got start time:", startTimeStr);
+          
+          if (startTimeStr) {
+            setHuntTimer(startTimeStr);
+            timerData = getHuntTimer();
+          }
         }
-
-        // Refresh timer data on each interval to catch any updates
-        const currentTimerData = getHuntTimer();
-        if (!currentTimerData || !currentTimerData.isActive) {
-          setElapsedTime("00:00:00");
-          return;
+        
+        // Set up interval for timer updates
+        const timerInterval = setInterval(() => {
+          if (!isMounted.current) {
+            clearInterval(timerInterval);
+            return;
+          }
+          
+          const currentTimerData = getHuntTimer();
+          if (currentTimerData && currentTimerData.startTime) {
+            const formattedTime = formatElapsedTime(currentTimerData.startTime);
+            console.log("Updated timer:", formattedTime);
+            setElapsedTime(formattedTime);
+          } else {
+            setElapsedTime("00:00:00");
+          }
+        }, 1000);
+        
+        // Initial timer update
+        if (timerData && timerData.startTime) {
+          setElapsedTime(formatElapsedTime(timerData.startTime));
         }
-
-        setElapsedTime(formatElapsedTime(currentTimerData.startTime));
-      }, 1000);
-
-      return () => clearInterval(timer);
-    }
-
-    // Cleanup function
-    return () => {
-      isMounted.current = false;
+        
+        return () => {
+          clearInterval(timerInterval);
+        };
+      } catch (error) {
+        console.error("Error initializing timer:", error);
+      }
     };
-  }, [teamData, fetchTeamHuntStartTime]);
+    
+    initializeTimer();
+  }, []); // Empty dependency array since fetchTeamHuntStartTime is defined inside the component
 
   // Check hunt status every second to ensure immediate updates
   useEffect(() => {
     const checkHuntStatus = async () => {
       if (!isMounted.current) return;
-
+      
       try {
         const timestamp = Date.now(); // Add cache-busting timestamp
         const response = await fetch(`/api/hunt-status?t=${timestamp}`, {
@@ -417,15 +471,15 @@ export default function MapPage() {
           },
           credentials: "include",
         });
-
+        
         if (!response.ok) {
           console.error("Failed to fetch hunt status:", response.statusText);
           return;
         }
-
+        
         const data = await response.json();
         console.log("Map page hunt status check:", data);
-
+        
         // If hunt is not active, force redirect to waiting page
         if (!data.active) {
           console.log("Hunt not active, redirecting to waiting page");
@@ -434,7 +488,7 @@ export default function MapPage() {
           }
           return;
         }
-
+        
         // If timer endTime exists and has passed, redirect to leaderboard
         if (data.endTime && new Date(data.endTime) <= new Date()) {
           console.log("Timer expired, redirecting to leaderboard");
@@ -443,7 +497,7 @@ export default function MapPage() {
           }
           return;
         }
-
+        
         // Otherwise, hunt is active and timer is running
         if (isMounted.current) {
           setHuntActive(true);
@@ -452,10 +506,11 @@ export default function MapPage() {
         console.error("Failed to check hunt status:", err);
       }
     };
-
+    
     // Check immediately and every second
     checkHuntStatus();
     const intervalId = setInterval(checkHuntStatus, 1000);
+    
     return () => clearInterval(intervalId);
   }, [softRedirect]);