issues regarding the map and hunt stopping have been fixed. leaderboard page needs to be integrated and a clues should be added to be properly processed. after that the css for the application should be developed.

app/(main)/hunt-not-started/page.js

@@ -9,6 +9,49 @@ export default function HuntNotStarted() {
   const searchParams = useSearchParams();
   const teamId = searchParams.get("teamId");
 
+  // Add aggressive hunt status checking
+  useEffect(() => {
+    let redirectAttempted = false;
+
+    // Function to check hunt status
+    async function checkHuntStatus() {
+      if (redirectAttempted) return;
+
+      try {
+        const timestamp = new Date().getTime();
+        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) {
+          const data = await response.json();
+
+          // If hunt becomes active while on this page, immediately redirect to map
+          if (data.active) {
+            console.log("Hunt now active! Redirecting to map page");
+            redirectAttempted = true;
+            window.location.replace("/map");
+          }
+        }
+      } catch (err) {
+        console.error("Error checking hunt status:", err);
+      }
+    }
+
+    // Check immediately and every 500ms
+    checkHuntStatus();
+    const intervalId = setInterval(checkHuntStatus, 500);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  // Existing countdown effect
   useEffect(() => {
     // Countdown timer
     if (countdown > 0) {

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

@@ -5,7 +5,7 @@
   height: 100vh; /* Full viewport height */
   overflow: hidden; /* Hide overflow at page level */
   position: relative;
-  background-color: #69b5a8;
+  background-color: #69B5A8;
 }
 
 .map-banner {
@@ -63,17 +63,36 @@
   position: relative;
   width: 100%;
   height: 100%;
+  min-height: calc(100vh - 120px); /* Adjust for header and navbar height */
+  background-color: #69B5A8; /* Updated background color */
 }
 
 .treasure-map {
   width: 100%;
   height: 100%;
-  min-height: 100%;
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+/* New class for the background map image */
+.map-background {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url("/images/map.svg"); /* Updated path to the correct SVG file */
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 5; /* Ensure the map is above the background */
+}
+
 .map-svg {
   width: 100% !important; /* Override Next.js Image default width */
   height: auto !important; /* Override Next.js Image default height */

app/(main)/map/page.js

@@ -3,9 +3,7 @@ import { useState, useEffect, useRef } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import Image from "next/image";
 import styles from "./map.module.css";
-import { useHuntStatusCheck } from "@/hooks/useHuntStatusCheck";
 
 export default function MapPage() {
   const { data: session, status } = useSession();
@@ -17,14 +15,63 @@ export default function MapPage() {
   const mapContainerRef = useRef(null);
   const router = useRouter();
 
-  // Use the custom hook to check if hunt is still active
-  const huntActive = useHuntStatusCheck();
+  // Add local state for hunt active status
+  const [huntActive, setHuntActive] = useState(null);
 
-  // Debug log for hunt status
+  // Add function to fetch team hunt start time
+  const fetchTeamHuntStartTime = async () => {
+    try {
+      // First check localStorage for cached start time
+      const cachedStartTime = localStorage.getItem("teamHuntStartTime");
+
+      // If we have a cached time, use it
+      if (cachedStartTime) {
+        return cachedStartTime;
+      }
+
+      // Otherwise fetch from the server
+      if (session?.user?.teamId) {
+        const response = await fetch(
+          `/api/teams/${session.user.teamId}/hunt-session`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+              "Cache-Control": "no-cache, no-store, must-revalidate",
+            },
+            credentials: "include",
+          }
+        );
+
+        if (response.ok) {
+          const data = await response.json();
+          if (data.startTime) {
+            // Cache the start time for future use
+            localStorage.setItem("teamHuntStartTime", data.startTime);
+            return data.startTime;
+          }
+        }
+      }
+
+      // Fallback to current time if we couldn't get a start time
+      return new Date().toISOString();
+    } catch (error) {
+      console.error("Failed to fetch team hunt start time:", error);
+      return new Date().toISOString();
+    }
+  };
+
+  // Initial hunt status check
   useEffect(() => {
-    console.log("Hunt active status in map page:", huntActive);
-  }, [huntActive]);
+    // Check if hunt is active
+    checkHuntAndTimer();
 
+    // Set up periodic checks
+    const interval = setInterval(checkHuntAndTimer, 3000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // Handle authentication and hunt status
   useEffect(() => {
     // Only redirect if explicitly not authenticated
     if (status === "unauthenticated") {
@@ -45,31 +92,89 @@ export default function MapPage() {
     }
   }, [status, huntActive, router]);
 
-  // Update elapsed time every second
+  // Function to check hunt status and timer
+  async function checkHuntAndTimer() {
+    try {
+      const response = await fetch("/api/hunt-status", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "Cache-Control": "no-cache, no-store, must-revalidate",
+        },
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        console.log("Hunt status check from map:", data);
+
+        // 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 (using localStorage)
+          const wasActive = localStorage.getItem("teamHuntStartTime");
+
+          if (wasActive) {
+            // Hunt was active before but not now - it ended
+            console.log("Hunt has ended, redirecting to leaderboard");
+            localStorage.removeItem("teamHuntStartTime"); // Clean up
+            window.location.href = "/leaderboard?huntEnded=true";
+            return;
+          }
+
+          // Otherwise just show the waiting page
+          setHuntActive(false);
+          router.push("/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");
+          // Clean up the storage
+          localStorage.removeItem("teamHuntStartTime");
+          router.push("/leaderboard?huntEnded=true");
+          return;
+        }
+
+        // Otherwise, hunt is active and timer is running
+        setHuntActive(true);
+      }
+    } catch (err) {
+      console.error("Failed to check hunt status:", err);
+    }
+  }
+
+  // Use team hunt start time for elapsed time calculation
   useEffect(() => {
     if (!teamData?.team) return;
 
-    const startTime = new Date(teamData?.huntStartTime || Date.now()).getTime();
+    let startTimePromise = fetchTeamHuntStartTime();
+    startTimePromise.then((startTimeStr) => {
+      // Parse the ISO string to milliseconds
+      const startTime = new Date(startTimeStr).getTime();
 
-    const timer = setInterval(() => {
-      const now = Date.now();
-      const elapsed = Math.floor((now - startTime) / 1000);
+      const timer = setInterval(() => {
+        const now = Date.now();
+        const elapsed = Math.floor((now - startTime) / 1000);
 
-      const hours = Math.floor(elapsed / 3600)
-        .toString()
-        .padStart(2, "0");
-      const minutes = Math.floor((elapsed % 3600) / 60)
-        .toString()
-        .padStart(2, "0");
-      const seconds = Math.floor(elapsed % 60)
-        .toString()
-        .padStart(2, "0");
+        const hours = Math.floor(elapsed / 3600)
+          .toString()
+          .padStart(2, "0");
+        const minutes = Math.floor((elapsed % 3600) / 60)
+          .toString()
+          .padStart(2, "0");
+        const seconds = Math.floor(elapsed % 60)
+          .toString()
+          .padStart(2, "0");
 
-      setElapsedTime(`${hours}:${minutes}:${seconds}`);
-    }, 1000);
+        setElapsedTime(`${hours}:${minutes}:${seconds}`);
+      }, 1000);
 
-    return () => clearInterval(timer);
-  }, [teamData]);
+      return () => clearInterval(timer);
+    });
+  }, [teamData, session]);
 
   const fetchTeamData = async () => {
     try {
@@ -119,6 +224,56 @@ export default function MapPage() {
     }
   };
 
+  // Check hunt status every second to ensure immediate updates
+  useEffect(() => {
+    const checkHuntStatus = async () => {
+      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, force redirect to waiting page
+        if (!data.active) {
+          console.log("Hunt not active, redirecting to waiting page");
+          window.location.href = "/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");
+          window.location.href = "/leaderboard?huntEnded=true";
+          return;
+        }
+
+        // Otherwise, hunt is active and timer is running
+        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);
+  }, []);
+
   if (status === "loading" || loading) {
     return (
       <div className={styles["loading-container"]}>
@@ -174,42 +329,20 @@ export default function MapPage() {
         <div className={styles["team-code"]}>{teamData?.team?.code || ""}</div>
       </div>
 
-      {/* Main map content area */}
+      {/* Main map content area - showing map as background */}
       <div className={styles["map-container"]} ref={mapContainerRef}>
         <div className={styles["treasure-map"]}>
-          {/* Use Image component with fill layout for better SVG handling */}
-          <Image
-            src="/images/treasure-map.svg"
-            alt="Treasure Map"
-            className={styles["map-svg"]}
-            width={1000}
-            height={1000}
-            priority
-            onError={() => {
-              // Fallback to a static image if SVG fails to load
-              setMapError(true);
-            }}
-          />
+          {/* Using background-image for the map SVG */}
+          <div
+            className={styles["map-background"]}
+            role="img"
+            aria-label="Treasure Map"
+          ></div>
         </div>
       </div>
 
-      {/* Navigation bar - now sticky */}
+      {/* Navigation bar - Map as first button */}
       <nav className={styles["nav-bar"]}>
-        <Link
-          href={teamData?.teamId ? `/${teamData.teamId}` : "/"}
-          className={styles["nav-item"]}
-        >
-          <div className={styles["nav-icon"]}>🏠</div>
-          <div className={styles["nav-label"]}>Home</div>
-        </Link>
-        <Link href="/leaderboard" className={styles["nav-item"]}>
-          <div className={styles["nav-icon"]}>📊</div>
-          <div className={styles["nav-label"]}>Stats</div>
-        </Link>
-        <Link href="/team-selection" className={styles["nav-item"]}>
-          <div className={styles["nav-icon"]}>👥</div>
-          <div className={styles["nav-label"]}>Team</div>
-        </Link>
         <Link
           href="/map"
           className={`${styles["nav-item"]} ${styles["active"]}`}
@@ -217,6 +350,21 @@ export default function MapPage() {
           <div className={styles["nav-icon"]}>🗺️</div>
           <div className={styles["nav-label"]}>Map</div>
         </Link>
+        <Link href="/leaderboard" className={styles["nav-item"]}>
+          <div className={styles["nav-icon"]}>📊</div>
+          <div className={styles["nav-label"]}>Stats</div>
+        </Link>
+        <Link
+          href={teamData?.team ? `/${teamData.team.id}` : "/team-selection"}
+          className={styles["nav-item"]}
+        >
+          <div className={styles["nav-icon"]}>👥</div>
+          <div className={styles["nav-label"]}>Team</div>
+        </Link>
+        <Link href="/team-selection" className={styles["nav-item"]}>
+          <div className={styles["nav-icon"]}>🔙</div>
+          <div className={styles["nav-label"]}>Back</div>
+        </Link>
       </nav>
     </div>
   );

app/(main)/team/[teamId]/page.js

@@ -243,39 +243,64 @@ export default function TeamPage({ params }) {
               try {
                 setLoading(true);
 
-                // Use try-catch with robust error handling
-                const response = await fetch("/api/hunt-status", {
-                  method: "GET",
-                  headers: {
-                    "Content-Type": "application/json",
-                    Accept: "application/json",
-                  },
-                  credentials: "include",
-                });
+                // First, immediately check hunt status
+                const timestamp = Date.now();
+                const huntStatusResponse = 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",
+                    },
+                  }
+                );
+
+                const huntData = await huntStatusResponse.json();
+
+                // If hunt is active, immediately redirect to map
+                if (huntData.active) {
+                  console.log("Hunt already active! Redirecting to map...");
+                  document.body.innerHTML =
+                    '<div style="display:flex;justify-content:center;align-items:center;height:100vh;font-family:sans-serif;"><div style="text-align:center"><div style="font-size:24px">Loading Map...</div><div style="margin-top:20px">Please wait...</div></div></div>';
+                  window.location.href = "/map";
+                  return;
+                }
+
+                // If hunt isn't active, trigger it for the entire team
+                const response = await fetch(
+                  `/api/teams/${teamId}/start-team-hunt`,
+                  {
+                    method: "POST",
+                    headers: {
+                      "Content-Type": "application/json",
+                      "Cache-Control": "no-store, no-cache, must-revalidate",
+                    },
+                    credentials: "include",
+                  }
+                );
 
                 if (!response.ok) {
-                  const errorText = await response.text();
-                  console.error("Hunt status error response:", errorText);
-                  throw new Error(
-                    `Failed to check hunt status: ${response.status}`
-                  );
+                  const errorData = await response.json();
+                  throw new Error(errorData.error || "Failed to start hunt");
                 }
 
                 const data = await response.json();
-                console.log("Hunt status response:", data);
+                console.log("Hunt started response:", data);
 
-                // If hunt is active, go directly to the map page using window.location
-                if (data.active) {
-                  // Use window.location.href for a full page reload to avoid caching issues
-                  window.location.href = "/map";
-                } else {
-                  // If hunt is not active, show the not started page
-                  router.push(`/hunt-not-started?teamId=${teamId}`);
+                // Store hunt start time in localStorage for persistence
+                if (data.startTime) {
+                  localStorage.setItem("teamHuntStartTime", data.startTime);
                 }
+
+                // Force redirect to map page to ensure immediate navigation
+                document.body.innerHTML =
+                  '<div style="display:flex;justify-content:center;align-items:center;height:100vh;font-family:sans-serif;"><div style="text-align:center"><div style="font-size:24px">Loading Map...</div><div style="margin-top:20px">Please wait...</div></div></div>';
+                window.location.href = "/map";
               } catch (err) {
-                console.error("Error checking hunt status:", err);
-                setError(`Failed to check hunt status: ${err.message}`);
-              } finally {
+                console.error("Error starting hunt:", err);
+                setError(err.message);
                 setLoading(false);
               }
             }}