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

app/(main)/map/page.js

@@ -9,13 +9,8 @@ import {
   setHuntTimer,
   clearHuntTimer,
   formatElapsedTime,
+  syncTimerWithServer,
 } from "@/utils/timerService";
-import {
-  populateMap,
-  updateCluePointStatus,
-  attachClueClickHandlers,
-} from "@/utils/map-populate";
-import { addDebugOverlay, fixCluePointsRendering } from "@/utils/map-debug";
 
 export default function MapPage() {
   const { data: session, status } = useSession();
@@ -24,7 +19,6 @@ export default function MapPage() {
   const [error, setError] = useState(null);
   const [teamData, setTeamData] = useState(null);
   const [elapsedTime, setElapsedTime] = useState("00:00:00");
-  const [mapSvg, setMapSvg] = useState(null);
   const [clues, setClues] = useState([]);
   const mapContainerRef = useRef(null);
   const router = useRouter();
@@ -120,6 +114,7 @@ export default function MapPage() {
       });
 
       setClues(processedClues);
+      setLoading(false); // Set loading to false after clues are fetched
       return processedClues;
     } catch (err) {
       console.error("Failed to fetch clues:", err);
@@ -128,211 +123,90 @@ 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 {
-      // Fetch the SVG file
-      const response = await fetch("/images/map.svg");
-      if (!response.ok) {
-        console.error(
-          "Failed to load SVG:",
-          response.status,
-          response.statusText
-        );
-        setMapError(true);
-        return;
+  // Handle clue button click
+  const handleClueClick = useCallback(
+    (clueId, isAvailable, isFound) => {
+      if (isFound || isAvailable) {
+        router.push(`/clue/${clueId}`);
+      } else {
+        alert("Complete previous clues to unlock this one!");
       }
+    },
+    [router]
+  );
 
-      const svgText = await response.text();
-      console.log(`SVG loaded, length: ${svgText.length} characters`);
+  // Size and position the overlay to match the map image
+  const setupOverlay = useCallback(() => {
+    const overlay = document.getElementById("map-overlay-container");
+    const mapImg = document.getElementById("treasure-map-img");
 
-      // Ensure SVG has correct namespaces and viewBox
-      let fixedSvg = svgText.replace(
-        /<svg/,
-        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"'
-      );
+    if (overlay && mapImg) {
+      // Wait for the image to load to get its dimensions
+      mapImg.onload = () => {
+        const mapRect = mapImg.getBoundingClientRect();
+        overlay.style.width = `${mapRect.width}px`;
+        overlay.style.height = `${mapRect.height}px`;
+      };
 
-      // Ensure SVG has a proper viewBox attribute if missing
-      if (!fixedSvg.includes('viewBox="')) {
-        const widthMatch = fixedSvg.match(/width="([^"]+)"/);
-        const heightMatch = fixedSvg.match(/height="([^"]+)"/);
-        if (widthMatch && heightMatch) {
-          const width = widthMatch[1];
-          const height = heightMatch[1];
-          fixedSvg = fixedSvg.replace(
-            /<svg/,
-            `<svg viewBox="0 0 ${width} ${height}"`
-          );
-        }
-      }
+      // Handle resize events
+      const resizeOverlay = () => {
+        const mapRect = mapImg.getBoundingClientRect();
+        overlay.style.width = `${mapRect.width}px`;
+        overlay.style.height = `${mapRect.height}px`;
+      };
 
-      setMapSvg(fixedSvg);
-      setLoading(false);
-    } catch (error) {
-      console.error("Failed to load map SVG:", error);
-      setMapError(true);
-      setLoading(false);
+      // Initial resize and listen for window resize
+      setTimeout(resizeOverlay, 300);
+      window.addEventListener("resize", resizeOverlay);
+
+      return () => {
+        window.removeEventListener("resize", resizeOverlay);
+      };
     }
   }, []);
 
+  // Add this useEffect to coordinate loading the map and clues
+  useEffect(() => {
+    if (status === "authenticated") {
+      fetchClues();
+      fetchTeamData();
+    } else if (status === "unauthenticated") {
+      softRedirect("/login");
+    }
+
+    // Setup cleanup function for component unmount
+    return () => {
+      isMounted.current = false;
+    };
+  }, [status, fetchClues, fetchTeamData, softRedirect]);
+
+  // Setup the overlay when the component is mounted
+  useEffect(() => {
+    if (!loading && clues.length > 0) {
+      return setupOverlay();
+    }
+  }, [loading, clues.length, setupOverlay]);
+
   // Function to check hunt status and timer
   async function checkHuntAndTimer() {
-    if (!isMounted.current) return;
-
     try {
       const response = await fetch("/api/hunt-status", {
         method: "GET",
         headers: {
           "Content-Type": "application/json",
           "Cache-Control": "no-cache, no-store, must-revalidate",
+          Pragma: "no-cache",
         },
         credentials: "include",
       });
 
       if (response.ok) {
         const data = await response.json();
-        console.log("Hunt status check from map:", data);
+        setHuntActive(data.active);
 
-        // If hunt is not active, check if it has ended
-        if (!data.active) {
-          console.log("Hunt not active, checking if it ended...");
-
-          // Check if we had an active hunt before
-          const timerData = getHuntTimer();
-
-          if (timerData && timerData.isActive) {
-            // Hunt was active before but not now - it has ended
-            console.log("Hunt has ended, redirecting to leaderboard");
-            clearHuntTimer(); // Clean up all timer data
-
-            // Show a brief message before redirecting
-            const huntEndedMessage = document.createElement("div");
-            huntEndedMessage.innerHTML = `
-              <div style="position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9999">
-                <div style="font-size:32px; margin-bottom:20px">🎯 Hunt Complete!</div>
-                <div style="font-size:24px; margin-bottom:20px">The treasure hunt has ended.</div>
-                <div style="font-size:18px">Redirecting to results...</div>
-              </div>
-            `;
-            document.body.appendChild(huntEndedMessage);
-
-            // Use the appropriate redirect method after a short delay
-            setTimeout(() => {
-              if (isMounted.current) {
-                hardRedirect("/leaderboard?huntEnded=true");
-              }
-            }, 2000);
-            return;
-          }
-
-          // Otherwise just show the waiting page
-          if (isMounted.current) {
-            setHuntActive(false);
-            softRedirect("/waiting");
-          }
-          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");
-          clearHuntTimer(); // Clean up all timer data
-
-          // Show a brief message before redirecting
-          const timerEndedMessage = document.createElement("div");
-          timerEndedMessage.innerHTML = `
-            <div style="position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9999">
-              <div style="font-size:32px; margin-bottom:20px">⏰ Time's Up!</div>
-              <div style="font-size:24px; margin-bottom:20px">The treasure hunt has ended.</div>
-              <div style="font-size:18px">Redirecting to results...</div>
-            </div>
-          `;
-          document.body.appendChild(timerEndedMessage);
-
-          if (isMounted.current) {
-            setTimeout(() => {
-              hardRedirect("/leaderboard?huntEnded=true");
-            }, 2000);
-          }
-          return;
-        }
-
-        // Otherwise, hunt is active and timer is running
-        if (isMounted.current) {
-          setHuntActive(true);
-
-          // Update hunt timer data with the server's values
-          if (data.startTime) {
-            setHuntTimer(data.startTime, data.endTime);
-          }
+        // If hunt is active, ensure we have timer data
+        if (data.active && data.startTime) {
+          setHuntTimer(data.startTime);
         }
       }
     } catch (err) {
@@ -343,298 +217,65 @@ export default function MapPage() {
   // Add this function before it's used in initializeTimer
   async function fetchTeamHuntStartTime() {
     try {
-      // First get the user's team ID
-      const userResponse = await fetch("/api/user", {
-        method: "GET",
-        headers: {
-          "Cache-Control": "no-store, no-cache, must-revalidate",
-          Pragma: "no-cache",
-        },
-        credentials: "include",
-      });
-
-      if (!userResponse.ok) {
-        console.error("Failed to fetch user data:", userResponse.statusText);
-        return null;
+      // First try to get any existing timer data
+      const timerData = getHuntTimer();
+      if (timerData && timerData.startTime) {
+        return true;
       }
 
-      const userData = await userResponse.json();
-      const teamId = userData.teamId;
-
-      if (!teamId) {
-        console.error("User does not belong to a team");
-        return null;
-      }
-
-      // Now fetch the team's hunt session using the team ID
-      const teamHuntResponse = await fetch(
-        `/api/teams/${teamId}/hunt-session`,
-        {
-          method: "GET",
-          headers: {
-            "Cache-Control": "no-store, no-cache, must-revalidate",
-            Pragma: "no-cache",
-          },
-          credentials: "include",
-        }
-      );
-
-      if (!teamHuntResponse.ok) {
-        console.error(
-          "Failed to fetch team hunt session:",
-          teamHuntResponse.statusText
-        );
-
-        // Try the global hunt timer as fallback
-        const globalResponse = await fetch("/api/hunt/timer", {
-          method: "GET",
-          headers: {
-            "Cache-Control": "no-store, no-cache, must-revalidate",
-            Pragma: "no-cache",
-          },
-          credentials: "include",
-        });
-
-        if (globalResponse.ok) {
-          const globalData = await globalResponse.json();
-          return globalData.startTime || null;
-        }
-
-        return null;
-      }
-
-      const teamHuntData = await teamHuntResponse.json();
-      return teamHuntData.startTime || null;
-    } catch (error) {
-      console.error("Error fetching team hunt start time:", error);
-      return null;
+      // If no timer data exists, sync with server
+      const result = await syncTimerWithServer();
+      return result.success;
+    } catch (err) {
+      console.error("Error fetching team hunt start time:", err);
+      return false;
     }
   }
 
   // Use team hunt start time for elapsed time calculation
   useEffect(() => {
-    // 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();
+    let timerId;
 
-        // 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);
+    // Initialize timer
+    async function initializeTimer() {
+      // First ensure we have timer data
+      await fetchTeamHuntStartTime();
 
-          if (startTimeStr) {
-            setHuntTimer(startTimeStr);
-            timerData = getHuntTimer();
-          }
-        }
-
-        // 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
+      // Set up timer updates
+      const updateTimer = () => {
+        const timerData = getHuntTimer();
         if (timerData && timerData.startTime) {
           setElapsedTime(formatElapsedTime(timerData.startTime));
         }
-
-        return () => {
-          clearInterval(timerInterval);
-        };
-      } catch (error) {
-        console.error("Error initializing timer:", error);
-      }
-    };
-
-    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}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-            "Cache-Control": "no-store, no-cache, must-revalidate",
-            Pragma: "no-cache",
-          },
-          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, check if it was active before (hunt ended)
-        if (!data.active) {
-          // Check if we had an active hunt before
-          const timerData = getHuntTimer();
-
-          if (timerData && timerData.isActive) {
-            // Hunt was active before but not now - it has ended
-            console.log("Hunt has ended, redirecting to leaderboard");
-            clearHuntTimer();
-
-            if (isMounted.current) {
-              hardRedirect("/leaderboard?huntEnded=true");
-            }
-            return;
-          }
-
-          // If hunt was never active, redirect to waiting page
-          console.log("Hunt not active, redirecting to waiting page");
-          if (isMounted.current) {
-            softRedirect("/waiting");
-          }
-          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");
-          if (isMounted.current) {
-            clearHuntTimer();
-            hardRedirect("/leaderboard?huntEnded=true");
-          }
-          return;
-        }
-
-        // Otherwise, hunt is active and timer is running
-        if (isMounted.current) {
-          setHuntActive(true);
-        }
-      } catch (err) {
-        console.error("Failed to check hunt status:", err);
-      }
-    };
-
-    // Check immediately and every second
-    checkHuntStatus();
-    const intervalId = setInterval(checkHuntStatus, 1000);
-
-    return () => clearInterval(intervalId);
-  }, [softRedirect, hardRedirect]);
-
-  // Add this useEffect to coordinate loading the map and clues
-  useEffect(() => {
-    // Only proceed if authenticated
-    if (status === "authenticated") {
-      const initMap = async () => {
-        try {
-          // Set loading state
-          setLoading(true);
-
-          // Load both map and clues in parallel
-          await Promise.all([fetchClues(), loadAndEnhanceMap()]);
-
-          // Data is loaded, we'll let the next effect handle enhancement
-        } catch (error) {
-          console.error("Error initializing map data:", error);
-          setError("Failed to load map data");
-          setLoading(false);
-        }
       };
 
-      initMap();
-    } else if (status === "unauthenticated") {
-      router.push("/login");
-    }
-  }, [status, fetchClues, loadAndEnhanceMap, router]);
+      // Initial update
+      updateTimer();
 
-  // Modified useEffect to ensure SVG elements are visible
+      // Update every second
+      timerId = setInterval(updateTimer, 1000);
+    }
+
+    initializeTimer();
+
+    // Clean up interval on unmount
+    return () => {
+      if (timerId) clearInterval(timerId);
+    };
+  }, []);
+
+  // Check hunt status every 10 seconds to ensure immediate updates
   useEffect(() => {
-    // Only try to enhance the map if both the SVG and clues are loaded
-    if (!mapSvg || !clues.length) return;
+    // Initial check
+    checkHuntAndTimer();
 
-    console.log("Both SVG and clues are loaded, preparing to enhance map");
+    // Set up interval to check hunt status
+    const huntStatusInterval = setInterval(checkHuntAndTimer, 10000);
 
-    let enhancementAttempts = 0;
-    const maxAttempts = 3;
-
-    function attemptMapEnhancement() {
-      enhancementAttempts++;
-      console.log(
-        `Map enhancement attempt ${enhancementAttempts}/${maxAttempts}`
-      );
-
-      if (
-        mapContainerRef.current &&
-        mapContainerRef.current.querySelector("svg")
-      ) {
-        const svgElement = mapContainerRef.current.querySelector("svg");
-        console.log("SVG found in DOM, enhancing map now");
-
-        // Try to enhance the map
-        enhanceSvgMap();
-
-        // Additional check after brief delay to ensure visibility
-        setTimeout(() => {
-          const cluePoints = svgElement.querySelectorAll(".clue-point");
-          console.log(
-            `Found ${cluePoints.length} clue points after enhancement`
-          );
-
-          if (cluePoints.length === 0 && enhancementAttempts < maxAttempts) {
-            console.log(
-              `No clue points found, retrying (attempt ${enhancementAttempts}/${maxAttempts})`
-            );
-            attemptMapEnhancement();
-          } else if (cluePoints.length === 0) {
-            console.error(
-              `Failed to create clue points after ${maxAttempts} attempts`
-            );
-            // Fix rendering issues as a last resort
-            fixCluePointsRendering(svgElement);
-          } else {
-            console.log(
-              "Map enhancement successful, fixing any rendering issues"
-            );
-            fixCluePointsRendering(svgElement);
-          }
-        }, 300);
-      } else {
-        console.error("SVG not found in DOM after rendering timeout");
-
-        if (enhancementAttempts < maxAttempts) {
-          // Try again after a delay
-          setTimeout(attemptMapEnhancement, 500);
-        } else {
-          setMapError(true);
-        }
-      }
-    }
-
-    // Ensure the SVG is fully loaded in the DOM before enhancing
-    requestAnimationFrame(() => {
-      // Initial delay before first attempt
-      setTimeout(attemptMapEnhancement, 300);
-    });
-  }, [mapSvg, clues, enhanceSvgMap]);
+    return () => {
+      clearInterval(huntStatusInterval);
+    };
+  }, [softRedirect, hardRedirect]);
 
   // Add useEffect to load team data
   useEffect(() => {
@@ -680,11 +321,22 @@ export default function MapPage() {
       <div className={styles["map-error"]}>
         <h2>Error Loading Map</h2>
         <p>We couldn't load the treasure map. Please try again.</p>
-        <button onClick={loadAndEnhanceMap}>Retry</button>
+        <button onClick={fetchClues}>Retry</button>
       </div>
     );
   }
 
+  // Function to determine clue button class based on status
+  const getClueButtonClass = (clue) => {
+    if (clue.found) return `${styles["clue-button"]} ${styles["clue-found"]}`;
+    if (clue.available)
+      return `${styles["clue-button"]} ${styles["clue-available"]}`;
+    return `${styles["clue-button"]} ${styles["clue-locked"]}`;
+  };
+
+  // Get the first clue if it exists
+  const firstClue = clues.length > 0 ? clues[0] : null;
+
   return (
     <div className={styles["map-page"]}>
       {/* Map Banner with team info and timer */}
@@ -701,36 +353,41 @@ export default function MapPage() {
       {/* Main map content area */}
       <div className={styles["map-container"]} ref={mapContainerRef}>
         <div className={styles["treasure-map"]}>
-          {mapSvg ? (
-            <div
-              className={styles["svg-container"]}
-              dangerouslySetInnerHTML={{ __html: mapSvg }}
+          {/* Simpler map implementation using an img element */}
+          <div className={styles["map-image-container"]}>
+            <img
+              id="treasure-map-img"
+              src="/images/map.svg"
+              alt="Treasure Map"
+              className={styles["map-image"]}
             />
-          ) : (
-            <div className={styles["loading-container"]}>
-              <div className={styles["loading-spinner"]}></div>
-              <div>Loading map...</div>
+
+            {/* Overlay div with the clue button - positioned exactly over the map */}
+            <div id="map-overlay-container" className={styles["map-overlay"]}>
+              {/* Hardcoded Clue 1 button */}
+              {firstClue && (
+                <button
+                  className={getClueButtonClass(firstClue)}
+                  onClick={() =>
+                    handleClueClick(
+                      firstClue.id,
+                      firstClue.available,
+                      firstClue.found
+                    )
+                  }
+                  style={{
+                    left: "150px",
+                    top: "200px",
+                  }}
+                >
+                  Clue {firstClue.id}
+                </button>
+              )}
             </div>
-          )}
+          </div>
         </div>
       </div>
 
-      {/* Add a refresh button for users if they have issues with the map */}
-      {mapSvg && (
-        <button
-          className={styles["refresh-map-button"]}
-          onClick={() => {
-            const svgElement = mapContainerRef.current?.querySelector("svg");
-            if (svgElement) {
-              enhanceSvgMap();
-              setTimeout(() => fixCluePointsRendering(svgElement), 300);
-            }
-          }}
-        >
-          Refresh Map
-        </button>
-      )}
-
       {/* Navigation bar */}
       <nav className={styles["nav-bar"]}>
         <Link