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>
   );