edit of teamID page

using a long-wave format to fix issue with repeating patterns not lining up.

app/(main)/map/page.js

@@ -1,4 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
 "use client";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useSession } from "next-auth/react";
@@ -26,12 +25,9 @@ export default function MapPage() {
   const router = useRouter();
   const isMounted = useRef(true);
 
-  // Add local state for hunt active status
   const [huntActive, setHuntActive] = useState(null);
-  // Add previous hunt state to detect when hunt ends
   const [previousHuntState, setPreviousHuntState] = useState(null);
 
-  // Use useCallback for functions called in useEffect to avoid dependency issues
   const softRedirect = useCallback(
     (url) => {
       if (isMounted.current) {
@@ -41,12 +37,10 @@ export default function MapPage() {
     [router]
   );
 
-  // Hard redirect function (for when a full page reload is needed)
   const hardRedirect = useCallback((url) => {
     window.location.href = url;
   }, []);
 
-  // Enhanced fetchTeamData function
   const fetchTeamData = useCallback(async () => {
     try {
       const response = await fetch("/api/user/team", {
@@ -84,7 +78,6 @@ export default function MapPage() {
     }
   }, [softRedirect]);
 
-  // Fetch all clues with their status
   const fetchClues = useCallback(async () => {
     try {
       const response = await fetch("/api/clues", {
@@ -98,7 +91,6 @@ export default function MapPage() {
       });
 
       if (!response.ok) {
-        // Extract the error message from the response if possible
         const errorData = await response.json().catch(() => ({}));
         console.error("API response details:", {
           status: response.status,
@@ -114,10 +106,7 @@ export default function MapPage() {
 
       const data = await response.json();
 
-      // Process the clues to determine which are available
-      // A clue is available if it's either found already or the next in sequence
       const processedClues = data.map((clue) => {
-        // The API now returns clues with availability already determined
         return {
           ...clue,
           available: clue.available || clue.found || clue.skipped,
@@ -125,17 +114,16 @@ export default function MapPage() {
       });
 
       setClues(processedClues);
-      setLoading(false); // Set loading to false after clues are fetched
+      setLoading(false);
       return processedClues;
     } catch (err) {
       console.error("Failed to fetch clues:", err);
-      setError(err.message); // Make sure we set the error state
+      setError(err.message);
       setLoading(false);
       return [];
     }
   }, []);
 
-  // Handle clue button click
   const handleClueClick = useCallback(
     (clueId, isAvailable, isFound) => {
       if (isFound || isAvailable) {
@@ -147,27 +135,23 @@ export default function MapPage() {
     [router]
   );
 
-  // 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");
 
     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`;
       };
 
-      // Handle resize events
       const resizeOverlay = () => {
         const mapRect = mapImg.getBoundingClientRect();
         overlay.style.width = `${mapRect.width}px`;
         overlay.style.height = `${mapRect.height}px`;
       };
 
-      // Initial resize and listen for window resize
       setTimeout(resizeOverlay, 300);
       window.addEventListener("resize", resizeOverlay);
 
@@ -177,7 +161,6 @@ export default function MapPage() {
     }
   }, []);
 
-  // Add this useEffect to coordinate loading the map and clues
   useEffect(() => {
     if (status === "authenticated") {
       fetchClues();
@@ -186,20 +169,17 @@ export default function MapPage() {
       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() {
     try {
       const response = await fetch("/api/hunt-status", {
@@ -216,13 +196,11 @@ export default function MapPage() {
         const data = await response.json();
         setHuntActive(data.active);
 
-        // If hunt is inactive, redirect to waiting page
         if (data.active === false) {
           router.push("/waiting");
           return;
         }
 
-        // If hunt is active, ensure we have timer data
         if (data.active && data.startTime) {
           setHuntTimer(data.startTime);
         }
@@ -232,16 +210,13 @@ export default function MapPage() {
     }
   }
 
-  // Add this function before it's used in initializeTimer
   async function fetchTeamHuntStartTime() {
     try {
-      // First try to get any existing timer data
       const timerData = getHuntTimer();
       if (timerData && timerData.startTime) {
         return true;
       }
 
-      // If no timer data exists, sync with server
       const result = await syncTimerWithServer();
       return result.success;
     } catch (err) {
@@ -250,16 +225,12 @@ export default function MapPage() {
     }
   }
 
-  // Use team hunt start time for elapsed time calculation
   useEffect(() => {
     let timerId;
 
-    // Initialize timer
     async function initializeTimer() {
-      // First ensure we have timer data
       await fetchTeamHuntStartTime();
 
-      // Set up timer updates
       const updateTimer = () => {
         const timerData = getHuntTimer();
         if (timerData && timerData.startTime) {
@@ -267,27 +238,21 @@ export default function MapPage() {
         }
       };
 
-      // Initial update
       updateTimer();
 
-      // 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(() => {
-    // Initial check
     checkHuntAndTimer();
 
-    // Set up interval to check hunt status
     const huntStatusInterval = setInterval(checkHuntAndTimer, 10000);
 
     return () => {
@@ -295,22 +260,18 @@ export default function MapPage() {
     };
   }, [softRedirect, hardRedirect]);
 
-  // Add useEffect to load team data
   useEffect(() => {
     if (status === "authenticated") {
       fetchTeamData();
     }
   }, [status, fetchTeamData]);
 
-  // Add this useEffect to detect when hunt ends
   useEffect(() => {
-    // If previous state was active but current state is not active, the hunt just ended
     if (previousHuntState === true && huntActive === false) {
       console.log("Hunt has ended! Redirecting to leaderboard...");
       router.push("/leaderboard?huntEnded=true");
     }
 
-    // Update previous state after checking
     setPreviousHuntState(huntActive);
   }, [huntActive, previousHuntState, router]);
 
@@ -323,11 +284,7 @@ export default function MapPage() {
     );
   }
 
-  // Remove or modify this conditional block since we're now handling hunt ending differently
-  // Instead of showing an error message, we'll redirect in the useEffect
   if (huntActive === false && previousHuntState === null) {
-    // Only show this if we just landed on the page and hunt is inactive
-    // (not when the hunt just ended)
     return (
       <div className={styles["map-error"]}>
         <h2>Hunt Not Active</h2>
@@ -359,7 +316,6 @@ export default function MapPage() {
     );
   }
 
-  // Function to determine clue button class based on status
   const getClueButtonClass = (clue) => {
     if (clue.found) return `${styles["clue-button"]} ${styles["clue-found"]}`;
     if (clue.skipped)
@@ -369,12 +325,10 @@ export default function MapPage() {
     return `${styles["clue-button"]} ${styles["clue-locked"]}`;
   };
 
-  // Get the first clue if it exists
   const firstClue = clues.length > 0 ? clues[0] : null;
 
-  // Render a clue button only if the clue exists
   const renderClueButton = (index, position) => {
-    if (index >= clues.length) return null; // Don't render if clue doesn't exist
+    if (index >= clues.length) return null;
 
     const clue = clues[index];
     return (
@@ -392,7 +346,6 @@ export default function MapPage() {
 
   return (
     <div className={styles["map-page"]}>
-      {/* Map Banner with team info and timer */}
       <div className={styles["map-banner"]}>
         <div className={styles["team-name"]}>
           Team Name: {teamData?.team?.name || "Loading..."}
@@ -403,10 +356,8 @@ export default function MapPage() {
         <div className={styles["team-code"]}>{teamData?.team?.code || ""}</div>
       </div>
 
-      {/* Main map content area */}
       <div className={styles["map-container"]} ref={mapContainerRef}>
         <div className={styles["treasure-map"]}>
-          {/* Simpler map implementation using an img element */}
           <div className={styles["map-image-container"]}>
             <img
               id="treasure-map-img"
@@ -416,7 +367,6 @@ export default function MapPage() {
             />
 
             <div id="map-overlay-container" className={styles["map-overlay"]}>
-              {/* Render clue buttons conditionally */}
               {renderClueButton(0, { left: "230px", top: "212px" })}
               {renderClueButton(1, { left: "320px", top: "285px" })}
               {renderClueButton(2, { left: "265px", top: "400px" })}
@@ -437,14 +387,11 @@ export default function MapPage() {
               {renderClueButton(17, { left: "275px", top: "1885px" })}
               {renderClueButton(18, { left: "362px", top: "1917px" })}
               {renderClueButton(19, { left: "300px", top: "2040px" })}
-
-              {/* Additional clue buttons can be added here when needed */}
             </div>
           </div>
         </div>
       </div>
 
-      {/* Replace hardcoded navbar with NavBar component */}
       <NavBar activeLink="map" teamData={teamData?.team} />
     </div>
   );