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,19 +192,35 @@ export default function CluePage({ params }) {
     };
   }, [router, previousHuntState]);
 
-  // Separate effect to handle timer updates
+  // Function to ensure we have timer data from the server
-  useEffect(() => {
+  async function fetchTeamHuntStartTime() {
-    let timerId;
+    try {
+      // First try to get any existing timer data
       const timerData = getHuntTimer();
-    if (!timerData || !timerData.isActive) {
+      if (timerData && timerData.startTime) {
-      return;
+        return true;
       }
 
-    // Initial set
+      // If no timer data exists, sync with server
-    setElapsedTime(formatElapsedTime(timerData.startTime));
+      const result = await syncTimerWithServer();
+      return result.success;
+    } catch (err) {
+      console.error("Error fetching team hunt start time:", err);
+      return false;
+    }
+  }
 
-    // Update timer every second
+  // Updated timer effect that follows the same pattern as the map page
-    timerId = setInterval(() => {
+  useEffect(() => {
+    // 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)
@@ -214,17 +231,33 @@ export default function CluePage({ params }) {
             // If current time is past the end time, hunt has ended
             if (now >= endTime) {
               setHuntActive(false);
-          clearInterval(timerId);
+              clearInterval(timerIdRef.current);
 
               // Redirect to leaderboard with huntEnded flag
-          console.log("Hunt end time reached! Redirecting to leaderboard...");
+              console.log(
+                "Hunt end time reached! Redirecting to leaderboard..."
+              );
               router.push("/leaderboard?huntEnded=true");
             }
           }
-    }, 1000);
+        }
+      };
 
+      // Initial update
+      updateTimer();
+
+      // Update every second
+      timerIdRef.current = setInterval(updateTimer, 1000);
+    }
+
+    initializeTimer();
+
+    // Clean up interval on unmount
     return () => {
-      if (timerId) clearInterval(timerId);
+      if (timerIdRef.current) {
+        clearInterval(timerIdRef.current);
+        timerIdRef.current = null;
+      }
     };
   }, [router]);