added more clue buttons and positioned them correctly, need to fix elapsed timer on clue page....

app/(main)/clue/[clueId]/page.js

@@ -45,6 +45,7 @@ export default function CluePage({ params }) {
   const { data: session, status } = useSession();
   const notificationTimeoutRef = useRef(null);
   const navErrorTimeoutRef = useRef(null);
+  const timerIdRef = useRef(null);
 
   // Check if user is admin
   const isAdmin = session?.user?.role === "admin";
@@ -191,40 +192,72 @@ export default function CluePage({ params }) {
     };
   }, [router, previousHuntState]);
 
-  // Separate effect to handle timer updates
+  // Function to ensure we have timer data from the server
+  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) {
+      console.error("Error fetching team hunt start time:", err);
+      return false;
+    }
+  }
+
+  // Updated timer effect that follows the same pattern as the map page
   useEffect(() => {
-    let timerId;
-    const timerData = getHuntTimer();
-    if (!timerData || !timerData.isActive) {
-      return;
+    // 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) {
+          setElapsedTime(formatElapsedTime(timerData.startTime));
+
+          // Check if timer has ended (if there's an endTime)
+          if (timerData.endTime) {
+            const now = Date.now();
+            const endTime = new Date(timerData.endTime).getTime();
+
+            // If current time is past the end time, hunt has ended
+            if (now >= endTime) {
+              setHuntActive(false);
+              clearInterval(timerIdRef.current);
+
+              // Redirect to leaderboard with huntEnded flag
+              console.log(
+                "Hunt end time reached! Redirecting to leaderboard..."
+              );
+              router.push("/leaderboard?huntEnded=true");
+            }
+          }
+        }
+      };
+
+      // Initial update
+      updateTimer();
+
+      // Update every second
+      timerIdRef.current = setInterval(updateTimer, 1000);
     }
 
-    // Initial set
-    setElapsedTime(formatElapsedTime(timerData.startTime));
-
-    // Update timer every second
-    timerId = setInterval(() => {
-      setElapsedTime(formatElapsedTime(timerData.startTime));
-
-      // Check if timer has ended (if there's an endTime)
-      if (timerData.endTime) {
-        const now = Date.now();
-        const endTime = new Date(timerData.endTime).getTime();
-
-        // If current time is past the end time, hunt has ended
-        if (now >= endTime) {
-          setHuntActive(false);
-          clearInterval(timerId);
-
-          // Redirect to leaderboard with huntEnded flag
-          console.log("Hunt end time reached! Redirecting to leaderboard...");
-          router.push("/leaderboard?huntEnded=true");
-        }
-      }
-    }, 1000);
+    initializeTimer();
 
+    // Clean up interval on unmount
     return () => {
-      if (timerId) clearInterval(timerId);
+      if (timerIdRef.current) {
+        clearInterval(timerIdRef.current);
+        timerIdRef.current = null;
+      }
     };
   }, [router]);