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.

components/QRScanner.js

@@ -1,30 +1,102 @@
-'use client'; // Mark as a Client Component
-import { useState } from 'react';
-import QrReader from 'react-qr-reader';
+"use client";
+import { useState, useRef, useEffect } from "react";
+import { Html5QrcodeScanner } from "html5-qrcode";
 
-export default function QRScanner({ onScan }) {
-    const [result, setResult] = useState('');
+export default function QRScanner({ onScan, width = 300, height = 300 }) {
+  const [scanning, setScanning] = useState(false);
+  const [error, setError] = useState(null);
+  const scannerRef = useRef(null);
 
-    const handleScan = (data) => {
-        if (data) {
-            setResult(data);
-            onScan(parseInt(data, 10));
+  useEffect(() => {
+    // Initialize scanner
+    if (!scanning && typeof window !== "undefined") {
+      try {
+        const qrScanner = new Html5QrcodeScanner(
+          "qr-reader",
+          {
+            fps: 10,
+            qrbox: { width: width * 0.7, height: height * 0.7 },
+            aspectRatio: 1,
+            disableFlip: false,
+            formatsToSupport: ["QR_CODE"],
+          },
+          false // don't start scanning immediately
+        );
+
+        // Store the scanner instance
+        scannerRef.current = qrScanner;
+
+        // If onScan is provided, set up the success callback
+        if (onScan) {
+          qrScanner.render(
+            (decodedText) => {
+              if (onScan) {
+                onScan(decodedText);
+              }
+              setScanning(false);
+            },
+            (errorMessage) => {
+              // No need to show decode errors to user as they're expected during scanning
+              console.log(errorMessage);
+            }
+          );
+          setScanning(true);
         }
-    };
+      } catch (err) {
+        console.error("QR Scanner initialization error:", err);
+        setError(
+          "Could not initialize QR scanner. Please make sure you have camera access."
+        );
+      }
+    }
 
-    const handleError = (err) => {
-        console.error(err);
+    // Cleanup function
+    return () => {
+      if (scannerRef.current) {
+        try {
+          scannerRef.current.clear();
+        } catch (err) {
+          console.error("Failed to clear QR scanner:", err);
+        }
+      }
     };
+  }, [onScan, width, height, scanning]);
 
-    return (
-        <div>
-            <QrReader
-                delay={300}
-                onError={handleError}
-                onScan={handleScan}
-                style={{ width: '100%' }}
-            />
-            <p>{result}</p>
-        </div>
-    );
-}
+  return (
+    <div className="qr-scanner">
+      {error && <div className="qr-error">{error}</div>}
+      <div id="qr-reader" style={{ width, height }}></div>
+
+      <style jsx>{`
+        .qr-scanner {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 100%;
+        }
+
+        .qr-error {
+          color: red;
+          margin-bottom: 10px;
+          text-align: center;
+          padding: 8px;
+          background-color: #ffebee;
+          border-radius: 4px;
+          width: 100%;
+        }
+
+        #qr-reader {
+          border: 2px solid #ddd;
+          border-radius: 8px;
+          overflow: hidden;
+          background-color: #f5f5f5;
+        }
+
+        #qr-reader video {
+          object-fit: cover;
+          border-radius: 6px;
+        }
+      `}</style>
+    </div>
+  );
+}