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/map.module.css

@@ -64,162 +64,45 @@
   height: 100%;
   background-color: #69b5a8; /* Background color */
   overflow: auto; /* Enable scrolling */
-  display: block; /* Change from flex to block for proper scrolling */
+  display: block; /* Use block for proper scrolling */
 }
 
 .treasure-map {
   position: relative;
-  width: fit-content; /* Change from 100% to fit-content to allow natural svg size */
+  width: fit-content; /* Allow natural width */
   min-width: 100%; /* Ensure it's at least full width */
   height: fit-content;
   min-height: 100%;
-  display: flex; /* Keep flex for alignment */
+  display: flex;
   justify-content: flex-end; /* Align to the right */
   align-items: flex-start; /* Align to the top */
 }
 
-/* SVG container for better scrolling and zooming */
-.svg-container {
+/* Map image container for positioning */
+.map-image-container {
   position: relative;
-  width: fit-content; /* Allow natural width */
-  height: fit-content; /* Allow natural height */
-  display: block; /* Change to block for proper scrolling */
-  overflow: visible; /* Show content beyond boundaries */
-  z-index: 5; /* Ensure it's above the background */
+  width: fit-content;
+  height: fit-content;
 }
 
-.svg-container svg {
-  max-width: none; /* Remove max-width limitation */
+/* Map image styling */
+.map-image {
+  display: block;
+  max-width: none; /* Don't constrain the image */
   width: auto;
   height: auto;
-  display: block;
-  object-fit: none; /* Don't constrain the SVG */
-  position: relative;
 }
 
-/* Force SVG elements to show properly with z-index */
-.svg-container svg * {
-  transform-box: fill-box;
-}
-
-/* Ensure the clue points overlay is always on top */
-.svg-container svg .clue-points-overlay {
-  position: relative !important;
-  z-index: 9999 !important;
-  pointer-events: all !important;
-}
-
-/* Make clue points very visible with stronger styling */
-.svg-container .clue-point {
-  fill-opacity: 1 !important;
-  stroke-opacity: 1 !important;
-  pointer-events: all !important;
-  cursor: pointer !important;
-  stroke-width: 3px !important;
-  r: 14px !important;
-  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.7)) !important;
-}
-
-/* Remove the default map background when we have the processed SVG */
-.svg-container + .map-background {
-  display: none;
-}
-
-/* Map background - only shown when SVG is loading */
-.map-background {
+/* Map overlay positioned absolutely over the map image */
+.map-overlay {
   position: absolute;
   top: 0;
-  right: 0; /* Align to the right */
-  width: 100vw; /* Full viewport width */
-  height: auto;
-  background-image: url("/images/map.svg");
-  background-size: auto; /* Don't resize the background */
-  background-position: top right; /* Position at top right */
-  background-repeat: no-repeat;
-  z-index: 3; /* Lower z-index than the processed SVG */
-}
-
-/* Circle elements in the SVG map - attach to a container class */
-.svg-container circle {
-  cursor: pointer;
-  transition: fill 0.3s ease; /* Only transition the fill color, not size */
-}
-
-.svg-container circle:hover {
-  fill: #ffb74d !important; /* Only change color on hover, no movement */
-}
-
-/* Circle elements in the SVG map - attach to a container class */
-.svg-container circle.clue-point {
-  cursor: pointer;
-  transition: fill 0.3s ease, stroke-width 0.3s ease;
-  pointer-events: all; /* Ensure clicks are detected */
-  stroke-width: 2px;
-  r: 8; /* Set a minimum radius for all clue points */
-}
-
-/* Improve circle visibility and interactivity */
-.svg-container circle.clue-point {
-  cursor: pointer !important;
-  transition: all 0.3s ease;
-  pointer-events: all !important;
-  stroke-width: 2px;
-  r: 12px; /* Larger radius for better visibility and easier clicks */
-  z-index: 10;
-  position: relative;
-}
-
-/* Enhance hover effect */
-.svg-container circle.clue-point:hover {
-  fill: #ffb74d !important; /* Orange hover color */
-  stroke: #ff6d00 !important;
-  stroke-width: 4px !important;
-  transform: scale(1.2);
-  z-index: 20;
-  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
-}
-
-/* Invisible click areas for easier interaction */
-.svg-container circle.clue-point-click-area {
-  pointer-events: all !important;
-  cursor: pointer !important;
-  opacity: 0.01; /* Nearly invisible but still interactive */
-  z-index: 5;
-}
-
-/* Create custom animation for the current clue */
-@keyframes clue-point-pulse {
-  0% {
-    stroke-width: 3px;
-    transform: scale(1);
-    filter: drop-shadow(0px 0px 2px rgba(255, 152, 0, 0.7));
-  }
-  50% {
-    stroke-width: 5px;
-    transform: scale(1.2);
-    filter: drop-shadow(0px 0px 8px rgba(255, 152, 0, 0.9));
-  }
-  100% {
-    stroke-width: 3px;
-    transform: scale(1);
-    filter: drop-shadow(0px 0px 2px rgba(255, 152, 0, 0.7));
-  }
-}
-
-.svg-container circle.clue-point:hover {
-  fill: #ffb74d !important; /* Orange hover color */
-  stroke: #ff6d00;
-  stroke-width: 3px;
-  transform: scale(1.1);
-}
-
-/* Remaining styles unchanged */
-.map-svg {
-  width: 100% !important; /* Override Next.js Image default width */
-  height: auto !important; /* Override Next.js Image default height */
-  max-width: none; /* Allow image to grow beyond container */
-  object-fit: contain;
-  display: block;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto; /* Allow interaction with buttons */
+  z-index: 20; /* Ensure overlay is above map */
+  box-sizing: border-box;
 }
 
 .loading-container {
@@ -274,8 +157,8 @@
   box-sizing: border-box;
   z-index: 100; /* Ensure it stays on top */
   flex-shrink: 0; /* Prevent navbar from shrinking */
-  margin: 0; /* Added margin property */
-  height: auto; /* Added height property */
+  margin: 0;
+  height: auto;
 }
 
 .nav-item {
@@ -343,3 +226,63 @@
     font-size: 11px;
   }
 }
+
+/* Clue button styling */
+.clue-button {
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #9e9e9e; /* Default grey background */
+  color: white;
+  font-weight: bold;
+  border: 3px solid #757575;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
+  z-index: 30;
+  transform: translate(-50%, -50%); /* Center the button on its position */
+}
+
+.clue-button:hover {
+  transform: translate(-50%, -50%) scale(1.1);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+}
+
+/* Clue status styles */
+.clue-found {
+  background-color: #2e7d32; /* Green for found clues */
+  border-color: #1b5e20;
+}
+
+.clue-available {
+  background-color: #ff9800; /* Orange for available clues */
+  border-color: #e65100;
+  animation: pulse 1.5s infinite;
+}
+
+.clue-locked {
+  background-color: #9e9e9e; /* Grey for locked clues */
+  border-color: #757575;
+  cursor: default;
+}
+
+/* Pulse animation for available clues */
+@keyframes pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.1);
+    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.6);
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  }
+}

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