edit of teamID page

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

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

@@ -10,7 +10,6 @@ import {
 import Link from "next/link";
 import dynamic from "next/dynamic";
 import { use } from "react";
-// Add missing import for NavBar component
 import NavBar from "@/components/NavBar";
 
 // Dynamically import the QR scanner component with no SSR
@@ -23,7 +22,6 @@ const EnhancedQRScanner = dynamic(
 );
 
 export default function CluePage({ params }) {
-  // Unwrap params properly using use() from React
   const unwrappedParams = use(params);
   const clueId = unwrappedParams.clueId;
 
@@ -34,7 +32,7 @@ export default function CluePage({ params }) {
   const [scanMessage, setScanMessage] = useState(null);
   const [lastRefresh, setLastRefresh] = useState(0);
   const [clueFound, setClueFound] = useState(false);
-  const [clueSkipped, setClueSkipped] = useState(false); // Add state for skipped status
+  const [clueSkipped, setClueSkipped] = useState(false);
   const [allClues, setAllClues] = useState([]);
   const [nextClueId, setNextClueId] = useState(null);
   const [nextClueAvailable, setNextClueAvailable] = useState(false);
@@ -49,18 +47,15 @@ export default function CluePage({ params }) {
   const notificationTimeoutRef = useRef(null);
   const navErrorTimeoutRef = useRef(null);
   const timerIdRef = useRef(null);
-  const timerInitializedRef = useRef(false); // Add this ref to track if timer is already initialized
+  const timerInitializedRef = useRef(false);
 
-  // Check if user is admin
   const isAdmin = session?.user?.role === "admin";
 
-  // This effect handles authentication and initial clue data fetch
   useEffect(() => {
     let isMounted = true;
     const now = Date.now();
     const minRefreshInterval = isAdmin ? 30000 : 10000;
 
-    // Skip if we refreshed too recently and this isn't the first load
     if (loading === false && now - lastRefresh < minRefreshInterval) {
       return;
     }
@@ -74,7 +69,6 @@ export default function CluePage({ params }) {
       return;
     }
 
-    // Fetch all clues to get navigation context
     const fetchAllClues = async () => {
       try {
         const response = await fetch("/api/clues");
@@ -84,12 +78,11 @@ export default function CluePage({ params }) {
         if (isMounted) {
           setAllClues(data);
 
-          // Find next clue for navigation
           const currentIndex = data.findIndex((c) => c.id === parseInt(clueId));
           if (currentIndex !== -1 && currentIndex < data.length - 1) {
             const nextClue = data[currentIndex + 1];
             setNextClueId(nextClue.id);
-            // Set if the next clue is available (already found or is the next unfound clue)
+
             setNextClueAvailable(nextClue.found || nextClue.available);
           }
         }
@@ -100,13 +93,11 @@ export default function CluePage({ params }) {
       }
     };
 
-    // Fetch current clue details
     async function fetchClue() {
       try {
         setLoading(true);
         await fetchAllClues();
 
-        // Add timestamp to avoid browser caching
         const timestamp = Date.now();
         const response = await fetch(`/api/clues/${clueId}?t=${timestamp}`, {
           method: "GET",
@@ -130,7 +121,7 @@ export default function CluePage({ params }) {
         if (isMounted) {
           setClue(data);
           setClueFound(data.found);
-          setClueSkipped(data.skipped); // Set skipped status from API response
+          setClueSkipped(data.skipped);
           setLoading(false);
           setLastRefresh(Date.now());
         }
@@ -150,19 +141,12 @@ export default function CluePage({ params }) {
     };
   }, [clueId, router, status, lastRefresh, loading, isAdmin]);
 
-  // Add a new effect to check hunt status periodically
   useEffect(() => {
-    // Check hunt status every 5 seconds
     const checkHuntStatus = async () => {
       try {
-        // First check locally if timer indicates hunt has ended
         const timerData = getHuntTimer();
         let isActive = timerData?.isActive ?? true;
-
-        // Only make API call if local data suggests the hunt is active
-        // This reduces unnecessary API calls
         if (isActive) {
-          // Also sync with server occasionally
           const result = await syncTimerWithServer();
 
           if (result.success) {
@@ -170,26 +154,21 @@ export default function CluePage({ params }) {
           }
         }
 
-        // Update hunt active state
         setHuntActive(isActive);
 
-        // If hunt was active before but is not active now, it just ended
         if (previousHuntState && !isActive) {
           console.log("Hunt has ended! Redirecting to leaderboard...");
           router.push("/leaderboard?huntEnded=true");
         }
 
-        // Update previous state for next comparison
         setPreviousHuntState(isActive);
       } catch (err) {
         console.error("Error checking hunt status:", err);
       }
     };
 
-    // Check immediately on mount and after any hunt state change
     checkHuntStatus();
 
-    // Also set up interval for periodic checks
     const intervalId = setInterval(checkHuntStatus, 5000);
 
     return () => {
@@ -197,16 +176,13 @@ export default function CluePage({ params }) {
     };
   }, [router, previousHuntState]);
 
-  // Function to ensure we have timer data from the server - only if needed
   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
       console.log("No timer data found, syncing with server...");
       const result = await syncTimerWithServer();
       return result.success;
@@ -216,37 +192,29 @@ export default function CluePage({ params }) {
     }
   }
 
-  // Updated timer effect with protection against multiple initializations
   useEffect(() => {
-    // Prevent multiple initializations of the timer
     if (timerInitializedRef.current) {
       return;
     }
 
-    // Initialize timer
     async function initializeTimer() {
-      // First ensure we have timer data
       await fetchTeamHuntStartTime();
 
-      // Set up timer updates if not already set
       if (!timerIdRef.current) {
         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);
                 timerIdRef.current = null;
 
-                // Redirect to leaderboard with huntEnded flag
                 console.log(
                   "Hunt end time reached! Redirecting to leaderboard..."
                 );
@@ -256,10 +224,8 @@ export default function CluePage({ params }) {
           }
         };
 
-        // Initial update
         updateTimer();
 
-        // Update every second
         timerIdRef.current = setInterval(updateTimer, 1000);
         timerInitializedRef.current = true;
       }
@@ -267,7 +233,6 @@ export default function CluePage({ params }) {
 
     initializeTimer();
 
-    // Clean up interval on unmount
     return () => {
       if (timerIdRef.current) {
         clearInterval(timerIdRef.current);
@@ -275,11 +240,9 @@ export default function CluePage({ params }) {
         timerInitializedRef.current = false;
       }
     };
-  }, [router]); // Only depend on router
+  }, [router]);
 
-  // Make sure hunt status check doesn't interfere with the timer
   useEffect(() => {
-    // This function should NOT reset the timer or recreate it
     async function checkHuntStatus() {
       try {
         const response = await fetch("/api/hunt-status", {