fixing map timing errors and still trying to make leaderboard and clues pages.

Grey = cant click
Red = current
Green = complete
blue = skipped?

Need to add Clue page Need to fix Leaderboard.

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

@@ -3,6 +3,13 @@ import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
 import { formatElapsedTime, getHuntTimer } from "@/utils/timerService";
+import Link from "next/link";
+import dynamic from "next/dynamic";
+
+// Dynamically import QR scanner component with no SSR to avoid hydration issues
+const QRScanner = dynamic(() => import("@/components/QRScanner"), {
+  ssr: false,
+});
 
 export default function CluePage({ params }) {
   const [clue, setClue] = useState(null);
@@ -10,6 +17,9 @@ export default function CluePage({ params }) {
   const [error, setError] = useState(null);
   const [foundNow, setFoundNow] = useState(false);
   const [elapsedTime, setElapsedTime] = useState("00:00:00");
+  const [showScanner, setShowScanner] = useState(false);
+  const [scanResult, setScanResult] = useState(null);
+  const [scanMessage, setScanMessage] = useState(null);
   const router = useRouter();
   const { status } = useSession();
   const { clueId } = params;
@@ -78,6 +88,96 @@ export default function CluePage({ params }) {
     return () => clearInterval(timer);
   }, []);
 
+  // Handle QR scan result
+  const handleScan = (data) => {
+    setScanResult(data);
+    setScanMessage(`QR Code scanned: ${data}`);
+
+    // Here you would typically verify the QR code matches expected value
+    // and then mark the clue as found via API
+
+    // For now, just simulate successful scan and move to the next clue
+    try {
+      const scannedClueId = parseInt(data);
+      if (scannedClueId === parseInt(clueId)) {
+        // Correct QR code scanned, mark as found and move to next clue
+        markClueAsFound(clueId);
+      } else {
+        setScanMessage(
+          "Incorrect QR code. Please scan the correct code for this clue."
+        );
+      }
+    } catch (err) {
+      setScanMessage("Invalid QR code format. Please try again.");
+    }
+  };
+
+  // Function to mark clue as found and navigate to the next clue
+  const markClueAsFound = async (currentClueId) => {
+    try {
+      // Mark the clue as found via API
+      const response = await fetch("/api/mark-clue", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ clueId: currentClueId }),
+      });
+
+      if (response.ok) {
+        // Success message
+        setScanMessage("Clue verified! Moving to the next clue...");
+
+        // Fetch all clues to find the next available one
+        const allCluesResponse = await fetch("/api/clues");
+        const allClues = await allCluesResponse.json();
+
+        // Find the current clue index
+        const currentIndex = allClues.findIndex(
+          (c) => c.id === parseInt(currentClueId)
+        );
+
+        if (currentIndex !== -1 && currentIndex < allClues.length - 1) {
+          // Navigate to the next clue after a brief delay
+          setTimeout(() => {
+            router.push(`/clue/${allClues[currentIndex + 1].id}`);
+          }, 1500);
+        } else {
+          // This was the last clue
+          setTimeout(() => {
+            router.push("/map");
+          }, 1500);
+        }
+      } else {
+        setScanMessage("Error verifying clue. Please try again.");
+      }
+    } catch (err) {
+      console.error("Error marking clue as found:", err);
+      setScanMessage("Error verifying clue. Please try again.");
+    }
+  };
+
+  // Function to handle skip button
+  const handleSkip = async () => {
+    // Fetch all clues to find the next one
+    try {
+      const response = await fetch("/api/clues");
+      const allClues = await response.json();
+
+      // Find the current clue index
+      const currentIndex = allClues.findIndex((c) => c.id === parseInt(clueId));
+
+      if (currentIndex !== -1 && currentIndex < allClues.length - 1) {
+        // Navigate to the next clue
+        router.push(`/clue/${allClues[currentIndex + 1].id}`);
+      } else {
+        // This was the last clue
+        router.push("/map");
+      }
+    } catch (err) {
+      console.error("Error skipping to next clue:", err);
+      setError("Failed to skip to next clue");
+    }
+  };
+
   if (loading) {
     return (
       <div className="clue-container">
@@ -123,56 +223,137 @@ export default function CluePage({ params }) {
 
   return (
     <div className="clue-container">
-      <div className="clue-scroll">
-        {foundNow && (
-          <div className="new-discovery">
-            <div className="discovery-icon">🎉</div>
-            <div className="discovery-text">New Clue Discovered!</div>
-          </div>
-        )}
+      <div className="timer-display">{elapsedTime}</div>
 
-        <div className="timer-display">{elapsedTime}</div>
+      <div className="clue-content-wrapper">
+        {/* QR Scanner Section */}
+        <div className="scanner-section">
+          <h2>Scan QR Code</h2>
+          <QRScanner onScan={handleScan} width={280} height={280} />
+          {scanMessage && <div className="scan-message">{scanMessage}</div>}
+        </div>
 
-        <h1 className="clue-title">{clue.title}</h1>
-
-        <div className="clue-content">
-          <h2>Description</h2>
-          <p className="clue-description">{clue.description}</p>
-
-          {clue.location && (
-            <div className="clue-location">
-              <h2>Location Hint</h2>
-              <p>{clue.location}</p>
+        {/* Clue Information Section */}
+        <div className="clue-scroll">
+          {foundNow && (
+            <div className="new-discovery">
+              <div className="discovery-icon">🎉</div>
+              <div className="discovery-text">New Clue Discovered!</div>
             </div>
           )}
+
+          <h1 className="clue-title">{clue.title}</h1>
+
+          <div className="clue-content">
+            <h2>Description</h2>
+            <p className="clue-description">{clue.description}</p>
+
+            {clue.location && (
+              <div className="clue-location">
+                <h2>Location Hint</h2>
+                <p>{clue.location}</p>
+              </div>
+            )}
+          </div>
         </div>
 
-        <div className="nav-buttons">
-          <button onClick={() => router.push("/map")} className="map-button">
-            Back to Map
+        {/* Action Buttons */}
+        <div className="action-buttons">
+          <button onClick={handleSkip} className="skip-button">
+            Skip
           </button>
-          <button onClick={() => router.push("/")} className="home-button">
-            Back to Home
+          <button onClick={() => setShowScanner(true)} className="scan-button">
+            Scan Clue
           </button>
         </div>
       </div>
 
+      {/* Bottom Navigation */}
+      <div className="nav-bar">
+        <Link href="/map" className="nav-item">
+          <div className="nav-icon">🗺️</div>
+          <div className="nav-label">Map</div>
+        </Link>
+        <Link href="/leaderboard" className="nav-item">
+          <div className="nav-icon">📊</div>
+          <div className="nav-label">Stats</div>
+        </Link>
+        <Link href="/team-selection" className="nav-item">
+          <div className="nav-icon">👥</div>
+          <div className="nav-label">Team</div>
+        </Link>
+        <Link href="/" className="nav-item">
+          <div className="nav-icon">🏠</div>
+          <div className="nav-label">Home</div>
+        </Link>
+      </div>
+
       <style jsx>{`
         .clue-container {
           display: flex;
-          justify-content: center;
-          align-items: center;
+          flex-direction: column;
           min-height: 100vh;
           background-color: #f4f1ea;
           padding: 20px;
+          padding-bottom: 70px; /* Space for bottom navbar */
+          position: relative;
+        }
+
+        .clue-content-wrapper {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 100%;
+          max-width: 600px;
+          margin: 0 auto;
+        }
+
+        .timer-display {
+          position: absolute;
+          top: 15px;
+          right: 15px;
+          background-color: rgba(0, 0, 0, 0.1);
+          padding: 5px 10px;
+          border-radius: 5px;
+          font-family: monospace;
+          font-weight: bold;
+          font-size: 1rem;
+          z-index: 10;
+        }
+
+        .scanner-section {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-bottom: 20px;
+          background-color: white;
+          border-radius: 10px;
+          padding: 15px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .scanner-section h2 {
+          margin-top: 0;
+          margin-bottom: 15px;
+          color: #68543c;
+        }
+
+        .scan-message {
+          margin-top: 10px;
+          padding: 8px;
+          background-color: #e8f5e9;
+          border-radius: 4px;
+          text-align: center;
+          width: 100%;
         }
 
         .clue-scroll {
           background-color: #f8f3e3;
           border-radius: 10px;
-          padding: 30px;
+          padding: 20px;
           width: 100%;
-          max-width: 600px;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
           position: relative;
           margin-bottom: 20px;
@@ -187,8 +368,8 @@ export default function CluePage({ params }) {
         }
 
         .clue-description {
-          font-size: 1.2rem;
-          line-height: 1.6;
+          font-size: 1.1rem;
+          line-height: 1.5;
           color: #5d4037;
           margin-bottom: 20px;
         }
@@ -199,35 +380,39 @@ export default function CluePage({ params }) {
           border-top: 1px dashed #9c6b30;
         }
 
-        .nav-buttons {
+        .action-buttons {
           display: flex;
           justify-content: space-between;
-          margin-top: 30px;
+          width: 100%;
+          margin-top: 10px;
+          margin-bottom: 20px;
         }
 
-        .map-button,
-        .home-button {
-          padding: 10px 20px;
+        .skip-button,
+        .scan-button {
+          padding: 12px 0;
           border: none;
           border-radius: 5px;
           cursor: pointer;
           font-weight: bold;
           transition: all 0.2s;
+          width: 48%;
+          font-size: 16px;
         }
 
-        .map-button {
-          background-color: #68543c;
-          color: white;
-        }
-
-        .home-button {
+        .skip-button {
           background-color: #a98467;
           color: white;
         }
 
-        .map-button:hover,
-        .home-button:hover {
-          transform: scale(1.05);
+        .scan-button {
+          background-color: #68543c;
+          color: white;
+        }
+
+        .skip-button:hover,
+        .scan-button:hover {
+          opacity: 0.9;
         }
 
         .loading,
@@ -262,25 +447,13 @@ export default function CluePage({ params }) {
 
         .clue-title {
           color: #68543c;
-          font-size: 2rem;
+          font-size: 1.8rem;
           text-align: center;
           margin-bottom: 20px;
           border-bottom: 2px solid #9c6b30;
           padding-bottom: 10px;
         }
 
-        .timer-display {
-          position: absolute;
-          top: 15px;
-          right: 15px;
-          background-color: rgba(0, 0, 0, 0.1);
-          padding: 5px 10px;
-          border-radius: 5px;
-          font-family: monospace;
-          font-weight: bold;
-          font-size: 1rem;
-        }
-
         .new-discovery {
           background-color: #feefb3;
           border: 1px solid #9f6000;
@@ -313,6 +486,37 @@ export default function CluePage({ params }) {
         .discovery-text {
           font-weight: bold;
         }
+
+        .nav-bar {
+          display: flex;
+          justify-content: space-around;
+          background-color: white;
+          border-top: 1px solid #ddd;
+          padding: 10px 0;
+          position: fixed;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          z-index: 10;
+        }
+
+        .nav-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-decoration: none;
+          color: #666;
+          flex: 1;
+        }
+
+        .nav-icon {
+          font-size: 24px;
+          margin-bottom: 4px;
+        }
+
+        .nav-label {
+          font-size: 12px;
+        }
       `}</style>
     </div>
   );

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

@@ -64,14 +64,18 @@
   height: 100%;
   background-color: #69b5a8; /* Background color */
   overflow: auto; /* Enable scrolling */
+  display: flex; /* Add flexbox to center content */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
 }
 
 .treasure-map {
-  position: relative; /* Changed from absolute to relative */
+  position: relative;
   width: 100%;
   height: 100%;
-  min-width: 100%;
-  min-height: 100%;
+  display: flex; /* Add flexbox for centering */
+  justify-content: center;
+  align-items: center;
 }
 
 /* SVG container for better scrolling and zooming */
@@ -82,16 +86,16 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  overflow: auto;
+  overflow: visible; /* Change from auto to visible */
 }
 
 .svg-container svg {
-  min-width: 100%;
-  min-height: 100%;
+  max-width: 100%;
+  max-height: 90vh; /* Limit height to 90% of viewport height */
   width: auto;
   height: auto;
   display: block;
-  transform-origin: center center;
+  object-fit: contain; /* Ensure the entire SVG is visible */
 }
 
 /* Map background - display as full-page map */
@@ -101,10 +105,8 @@
   left: 0;
   width: 100%;
   height: 100%;
-  min-width: 100%;
-  min-height: 100%;
   background-image: url("/images/map.svg");
-  background-size: contain; /* Change back to contain for proper aspect ratio */
+  background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   z-index: 5;
@@ -113,12 +115,11 @@
 /* Circle elements in the SVG map - attach to a container class */
 .svg-container circle {
   cursor: pointer;
-  transition: fill 0.3s ease, transform 0.3s ease;
+  transition: fill 0.3s ease; /* Only transition the fill color, not size */
 }
 
 .svg-container circle:hover {
-  fill: #ffb74d !important;
-  transform: scale(1.1);
+  fill: #ffb74d !important; /* Only change color on hover, no movement */
 }
 
 /* Remaining styles unchanged */

app/(main)/map/page.js

@@ -55,10 +55,11 @@ export default function MapPage() {
         return cachedStartTime;
       }
 
-      // Otherwise fetch from the server
-      if (session?.user?.teamId) {
+      // Otherwise fetch from the server - use effectiveTeamId which is derived from session
+      const effectiveTeamId = session?.user?.teamId;
+      if (effectiveTeamId) {
         const response = await fetch(
-          `/api/teams/${session.user.teamId}/hunt-session`,
+          `/api/teams/${effectiveTeamId}/hunt-session`,
           {
             method: "GET",
             headers: {
@@ -85,7 +86,7 @@ export default function MapPage() {
       console.error("Failed to fetch team hunt start time:", error);
       return new Date().toISOString();
     }
-  }, [session?.user?.teamId]);
+  }, []); // No dependencies to avoid re-creation - we'll handle session internally
 
   // IMPORTANT: Move fetchTeamData up here, before it's referenced in useEffect dependencies
   const fetchTeamData = useCallback(async () => {
@@ -188,42 +189,81 @@ export default function MapPage() {
     // Find all circles in the SVG
     const circleSvgElements =
       mapContainerRef.current.querySelectorAll("circle");
+    console.log(`Found ${circleSvgElements.length} circles in SVG`);
+
+    // Find the highest available clue ID (first unfound clue)
+    let nextAvailableClueIndex = clues.findIndex((clue) => !clue.found);
+    if (nextAvailableClueIndex === -1) {
+      // If all clues are found, allow access to all
+      nextAvailableClueIndex = clues.length;
+    }
 
     // Convert NodeList to Array for easier manipulation
     Array.from(circleSvgElements).forEach((circle, index) => {
-      // Only process if we have a clue for this circle
+      // Only process if we have a clue for this index
       if (clues[index]) {
+        // Check if this clue is available (either found or next in sequence)
+        const isAvailable =
+          clues[index].found || index <= nextAvailableClueIndex;
+
         // Make circle interactive
-        circle.style.cursor = "pointer";
-        circle.style.fill = "#ff9800";
-        circle.style.stroke = "#d87f00";
+        circle.style.cursor = isAvailable ? "pointer" : "not-allowed";
+
+        // Set appropriate colors
+        if (clues[index].found) {
+          // Found clues are green
+          circle.style.fill = "#4caf50";
+          circle.style.stroke = "#2e7d32";
+        } else if (isAvailable) {
+          // Next available clue is orange
+          circle.style.fill = "#ff9800";
+          circle.style.stroke = "#d87f00";
+        } else {
+          // Unavailable clues are grey
+          circle.style.fill = "#9e9e9e";
+          circle.style.stroke = "#757575";
+        }
+
         circle.style.strokeWidth = "2";
 
-        // Add click handler to navigate to the clue page
-        circle.onclick = () => {
-          router.push(`/clue/${clues[index].id}`);
+        // Add click handler to navigate to the clue page, but only if available
+        circle.onclick = (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (isAvailable) {
+            console.log(`Navigating to clue ${clues[index].id}`);
+            router.push(`/clue/${clues[index].id}`);
+          } else {
+            alert("Complete previous clues first to unlock this one!");
+          }
         };
 
         // Add hover effects
         circle.onmouseenter = () => {
-          circle.style.fill = "#ffb74d";
-          circle.style.transform = "scale(1.1)";
-          circle.style.transition = "all 0.3s ease";
+          if (isAvailable) {
+            circle.style.fill = "#ffb74d"; // Lighter orange for hover
+          }
         };
 
         circle.onmouseleave = () => {
-          circle.style.fill = "#ff9800";
-          circle.style.transform = "scale(1)";
+          if (clues[index].found) {
+            circle.style.fill = "#4caf50"; // Back to green for found clues
+          } else if (isAvailable) {
+            circle.style.fill = "#ff9800"; // Back to orange for available clues
+          } else {
+            circle.style.fill = "#9e9e9e"; // Back to grey for unavailable clues
+          }
         };
 
-        // Optional: Add label or tooltip
+        // Add tooltip/title
         const label = document.createElementNS(
           "http://www.w3.org/2000/svg",
           "title"
         );
         label.textContent = `Clue #${index + 1}: ${
           clues[index].title || "Mystery clue"
-        }`;
+        }${!isAvailable ? " (Locked)" : ""}`;
         circle.appendChild(label);
       }
     });
@@ -279,10 +319,14 @@ export default function MapPage() {
   // Add effect to enhance SVG once it's loaded and clues are fetched
   useEffect(() => {
     if (mapSvg && clues.length > 0) {
+      console.log("SVG and clues loaded, enhancing map...");
+
       // Let the DOM update first with the SVG content
-      setTimeout(() => {
+      const enhanceTimeout = setTimeout(() => {
         enhanceSvgMap();
-      }, 100);
+      }, 200);
+
+      return () => clearTimeout(enhanceTimeout);
     }
   }, [mapSvg, clues, enhanceSvgMap]);
 
@@ -359,53 +403,63 @@ export default function MapPage() {
 
   // Use team hunt start time for elapsed time calculation
   useEffect(() => {
-    if (!teamData?.team) return;
-
-    // Get hunt timer data from the centralized service
-    let timerData = getHuntTimer();
-
-    // If no timer data yet, fetch it
-    if (!timerData) {
-      fetchTeamHuntStartTime().then((startTimeStr) => {
-        setHuntTimer(startTimeStr);
-        timerData = getHuntTimer();
-        startTimer(timerData);
-      });
-    } else {
-      startTimer(timerData);
-    }
-
-    function startTimer(timerData) {
-      const timer = setInterval(() => {
-        if (!isMounted.current) {
-          clearInterval(timer);
-          return;
+    // Initialize the timer without waiting for teamData
+    // This ensures timer starts as soon as possible
+    const initializeTimer = async () => {
+      try {
+        // First try to get timer data from the centralized service
+        let timerData = getHuntTimer();
+        
+        // If no timer data yet, fetch it from API
+        if (!timerData || !timerData.startTime) {
+          console.log("No timer data found, fetching from API...");
+          const startTimeStr = await fetchTeamHuntStartTime();
+          console.log("Got start time:", startTimeStr);
+          
+          if (startTimeStr) {
+            setHuntTimer(startTimeStr);
+            timerData = getHuntTimer();
+          }
         }
-
-        // Refresh timer data on each interval to catch any updates
-        const currentTimerData = getHuntTimer();
-        if (!currentTimerData || !currentTimerData.isActive) {
-          setElapsedTime("00:00:00");
-          return;
+        
+        // Set up interval for timer updates
+        const timerInterval = setInterval(() => {
+          if (!isMounted.current) {
+            clearInterval(timerInterval);
+            return;
+          }
+          
+          const currentTimerData = getHuntTimer();
+          if (currentTimerData && currentTimerData.startTime) {
+            const formattedTime = formatElapsedTime(currentTimerData.startTime);
+            console.log("Updated timer:", formattedTime);
+            setElapsedTime(formattedTime);
+          } else {
+            setElapsedTime("00:00:00");
+          }
+        }, 1000);
+        
+        // Initial timer update
+        if (timerData && timerData.startTime) {
+          setElapsedTime(formatElapsedTime(timerData.startTime));
         }
-
-        setElapsedTime(formatElapsedTime(currentTimerData.startTime));
-      }, 1000);
-
-      return () => clearInterval(timer);
-    }
-
-    // Cleanup function
-    return () => {
-      isMounted.current = false;
+        
+        return () => {
+          clearInterval(timerInterval);
+        };
+      } catch (error) {
+        console.error("Error initializing timer:", error);
+      }
     };
-  }, [teamData, fetchTeamHuntStartTime]);
+    
+    initializeTimer();
+  }, []); // Empty dependency array since fetchTeamHuntStartTime is defined inside the component
 
   // Check hunt status every second to ensure immediate updates
   useEffect(() => {
     const checkHuntStatus = async () => {
       if (!isMounted.current) return;
-
+      
       try {
         const timestamp = Date.now(); // Add cache-busting timestamp
         const response = await fetch(`/api/hunt-status?t=${timestamp}`, {
@@ -417,15 +471,15 @@ export default function MapPage() {
           },
           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");
@@ -434,7 +488,7 @@ export default function MapPage() {
           }
           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");
@@ -443,7 +497,7 @@ export default function MapPage() {
           }
           return;
         }
-
+        
         // Otherwise, hunt is active and timer is running
         if (isMounted.current) {
           setHuntActive(true);
@@ -452,10 +506,11 @@ export default function MapPage() {
         console.error("Failed to check hunt status:", err);
       }
     };
-
+    
     // Check immediately and every second
     checkHuntStatus();
     const intervalId = setInterval(checkHuntStatus, 1000);
+    
     return () => clearInterval(intervalId);
   }, [softRedirect]);