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/waiting/page.js

@@ -8,33 +8,113 @@ export default function WaitingPage() {
   const router = useRouter();
   const { status } = useSession();
   const [huntActive, setHuntActive] = useState(false);
+  const [huntEnded, setHuntEnded] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [lastHuntData, setLastHuntData] = useState(null);
 
-  // Check hunt status
+  // Check hunt status VERY aggressively
   useEffect(() => {
-    // Function to check hunt status
+    let redirectAttempted = false;
+    let lastKnownHuntStatus = false;
+
     async function checkHuntStatus() {
+      if (redirectAttempted) return;
+
       try {
-        const response = await fetch("/api/hunt-status", {
+        // First check if we have a team ID from the session
+        const userResponse = await fetch("/api/user", {
           method: "GET",
           headers: {
-            "Content-Type": "application/json",
-            "Cache-Control": "no-store, no-store, must-revalidate",
+            "Cache-Control": "no-store, no-cache, must-revalidate",
+            Pragma: "no-cache",
           },
           credentials: "include",
         });
 
-        if (response.ok) {
-          const data = await response.json();
-          console.log("Hunt status from waiting page:", data);
+        if (userResponse.ok) {
+          const userData = await userResponse.json();
 
-          // If hunt is active, redirect to map page
+          // If user has a team, check if that team has an active hunt session
+          if (userData.teamId) {
+            const teamHuntResponse = await fetch(
+              `/api/teams/${userData.teamId}/hunt-session`,
+              {
+                method: "GET",
+                headers: {
+                  "Cache-Control": "no-store, no-cache, must-revalidate",
+                  Pragma: "no-cache",
+                },
+                credentials: "include",
+              }
+            );
+
+            // If team has an active hunt session, redirect to map
+            if (teamHuntResponse.ok) {
+              const teamHuntData = await teamHuntResponse.json();
+              if (teamHuntData.startTime) {
+                // Store the start time for the map page
+                localStorage.setItem(
+                  "teamHuntStartTime",
+                  teamHuntData.startTime
+                );
+
+                console.log("Team hunt is active! Redirecting to map...");
+                redirectAttempted = true;
+                lastKnownHuntStatus = true;
+
+                // Show loading screen and redirect
+                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;
+              }
+            }
+          }
+        }
+
+        // Fall back to checking the global hunt status
+        const timestamp = Date.now();
+        const globalResponse = 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",
+          },
+        });
+
+        if (globalResponse.ok) {
+          const data = await globalResponse.json();
+          console.log("Hunt status check result:", data);
+
+          // Store the most recent hunt data to determine if hunt ended
+          if (lastHuntData && lastHuntData.active && !data.active) {
+            // Hunt was active before but now it's not - it has ended
+            console.log("Hunt has ended! Showing leaderboard...");
+            setHuntEnded(true);
+            // Don't redirect immediately to allow user to read the message
+          }
+
+          // Save the current hunt data for next comparison
+          setLastHuntData(data);
+
           if (data.active) {
-            console.log("Hunt is active! Redirecting to map page");
-            router.push("/map");
+            // Store the global start time
+            if (data.startTime) {
+              localStorage.setItem("teamHuntStartTime", data.startTime);
+            }
+
+            console.log("Hunt is active! Redirecting immediately...");
+            redirectAttempted = true;
+            lastKnownHuntStatus = true;
+
+            // Show loading screen during redirect
+            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;
           }
 
-          // Update local state
           setHuntActive(data.active);
         }
 
@@ -45,12 +125,12 @@ export default function WaitingPage() {
       }
     }
 
-    // Check on load and every 5 seconds
+    // Check immediately and very frequently
     checkHuntStatus();
-    const intervalId = setInterval(checkHuntStatus, 5000);
+    const intervalId = setInterval(checkHuntStatus, 500); // Check every 500ms
 
     return () => clearInterval(intervalId);
-  }, [router]);
+  }, []);
 
   // Redirect to login if not authenticated
   useEffect(() => {
@@ -70,17 +150,35 @@ export default function WaitingPage() {
 
   return (
     <div className={styles.container}>
-      <h1>Waiting for Hunt to Start</h1>
-      <p>
-        The treasure hunt has not started yet. Please wait for the administrator
-        to start the hunt.
-      </p>
-      <div className={styles.waitingAnimation}>⏳</div>
-      {huntActive && (
-        <div className={styles.startedMessage}>
-          <p>The hunt has started!</p>
-          <button onClick={() => router.push("/map")}>Go to Map</button>
-        </div>
+      {huntEnded ? (
+        <>
+          <h1>Hunt Has Ended</h1>
+          <p>
+            The treasure hunt has ended. You can view the results on the
+            leaderboard.
+          </p>
+          <div className={styles.endedMessage}>
+            <p>Hunt Complete!</p>
+            <button onClick={() => router.push("/leaderboard?huntEnded=true")}>
+              View Results
+            </button>
+          </div>
+        </>
+      ) : (
+        <>
+          <h1>Waiting for Hunt to Start</h1>
+          <p>
+            The treasure hunt has not started yet. Please wait for the
+            administrator to start the hunt.
+          </p>
+          <div className={styles.waitingAnimation}>⏳</div>
+          {huntActive && (
+            <div className={styles.startedMessage}>
+              <p>The hunt has started!</p>
+              <button onClick={() => router.push("/map")}>Go to Map</button>
+            </div>
+          )}
+        </>
       )}
     </div>
   );

app/waiting/waiting.module.css

@@ -0,0 +1,88 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  text-align: center;
+  background-color: #f4f4f4;
+}
+
+.spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #68543c;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin-bottom: 20px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.waitingAnimation {
+  font-size: 48px;
+  margin: 20px 0;
+  animation: pulse 2s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.startedMessage {
+  background-color: #4caf50;
+  color: white;
+  padding: 15px;
+  border-radius: 8px;
+  margin-top: 20px;
+}
+
+.startedMessage button {
+  background-color: white;
+  color: #4caf50;
+  border: none;
+  padding: 8px 15px;
+  margin-top: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.endedMessage {
+  background-color: #f44336;
+  color: white;
+  padding: 15px;
+  border-radius: 8px;
+  margin-top: 20px;
+}
+
+.endedMessage button {
+  background-color: white;
+  color: #f44336;
+  border: none;
+  padding: 8px 15px;
+  margin-top: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: bold;
+}