FIXED CLUES! all that needs to be done is manually adding circle buttons and hiding/showing feature through API.. maybe fixing QR scanner

components/EnhancedQRScanner.js

@@ -0,0 +1,317 @@
+"use client";
+import { useState, useEffect, useRef } from "react";
+import { Scanner } from "@yudiel/react-qr-scanner";
+
+export default function EnhancedQRScanner({
+  onScan,
+  width = 300,
+  height = 300,
+}) {
+  const [error, setError] = useState(null);
+  const [isSecureContext, setIsSecureContext] = useState(true);
+  const [initialized, setInitialized] = useState(false);
+  const [cameraActive, setCameraActive] = useState(false);
+  const [hasCameras, setHasCameras] = useState(true);
+  const [retryCount, setRetryCount] = useState(0);
+  const maxRetries = 3;
+  const scannerRef = useRef(null);
+
+  // Check if we're in a secure context
+  useEffect(() => {
+    // Check if we're in a secure context (https or localhost)
+    const secure = window.isSecureContext;
+    setIsSecureContext(secure);
+
+    // Check if camera can be accessed
+    async function checkCameraAccess() {
+      try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const videoDevices = devices.filter(
+          (device) => device.kind === "videoinput"
+        );
+
+        if (videoDevices.length === 0) {
+          setError(
+            "No camera detected. Please make sure your device has a camera."
+          );
+          setHasCameras(false);
+        } else {
+          setHasCameras(true);
+        }
+
+        setInitialized(true);
+      } catch (err) {
+        console.error("Error checking camera devices:", err);
+        setError(`Camera initialization error: ${err.message}`);
+        setInitialized(true);
+      }
+    }
+
+    checkCameraAccess();
+  }, []);
+
+  // Handle successful scan
+  const handleDecode = (result) => {
+    if (onScan && result) {
+      onScan(result);
+    }
+  };
+
+  // Try to restart the camera
+  const retryCamera = () => {
+    if (retryCount < maxRetries) {
+      setError(null);
+      setRetryCount((prev) => prev + 1);
+      // Force re-render of scanner component
+      setCameraActive(false);
+      setTimeout(() => setCameraActive(true), 500);
+    } else {
+      setError(
+        "Could not access camera after multiple attempts. Please refresh the page or try another device."
+      );
+    }
+  };
+
+  // Handle camera errors
+  const handleError = (error) => {
+    console.error("QR Scanner error:", error);
+    setCameraActive(false);
+
+    // More descriptive error messages
+    let errorMessage = "Camera access error. ";
+
+    if (!isSecureContext) {
+      errorMessage +=
+        "Your browser requires HTTPS for camera access. When running locally, use http://localhost instead of your IP address.";
+    } else if (
+      error.name === "NotAllowedError" ||
+      error.name === "PermissionDeniedError"
+    ) {
+      errorMessage +=
+        "Camera permission denied. Please allow camera access in your browser settings.";
+    } else if (
+      error.name === "NotFoundError" ||
+      error.name === "DevicesNotFoundError"
+    ) {
+      errorMessage +=
+        "No camera found. Please ensure your device has a working camera.";
+    } else if (
+      error.name === "NotReadableError" ||
+      error.name === "TrackStartError"
+    ) {
+      errorMessage +=
+        "Camera is already in use by another application or encountered a hardware error.";
+    } else {
+      errorMessage += `${
+        error.message ||
+        "Please check your camera permissions and refresh the page."
+      }`;
+    }
+
+    setError(errorMessage);
+  };
+
+  // When initialized, activate camera
+  useEffect(() => {
+    if (initialized && hasCameras && isSecureContext && !error) {
+      setCameraActive(true);
+    }
+  }, [initialized, hasCameras, isSecureContext, error]);
+
+  // Handle secure context warning
+  if (!isSecureContext) {
+    return (
+      <div className="enhanced-qr-scanner">
+        <div className="scanner-error">
+          <p>Camera access requires a secure context (HTTPS or localhost).</p>
+          <p>
+            When running locally, use http://localhost:3000 instead of your
+            network IP.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Handle initialization state
+  if (!initialized) {
+    return (
+      <div className="enhanced-qr-scanner">
+        <div className="scanner-loading">Initializing camera...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="enhanced-qr-scanner">
+      {error && (
+        <div className="scanner-error">
+          <p>{error}</p>
+          {retryCount < maxRetries && (
+            <button className="retry-button" onClick={retryCamera}>
+              Retry Camera Access
+            </button>
+          )}
+        </div>
+      )}
+
+      {cameraActive && !error && (
+        <div
+          className="scanner-container"
+          style={{ width, height }}
+          ref={scannerRef}
+        >
+          <Scanner
+            onResult={handleDecode}
+            onError={handleError}
+            constraints={{
+              facingMode: "environment",
+              width: { min: 640, ideal: 1280, max: 1920 },
+              height: { min: 480, ideal: 720, max: 1080 },
+              aspectRatio: { ideal: 1 },
+            }}
+            containerStyle={{
+              width: "100%",
+              height: "100%",
+              borderRadius: "8px",
+              overflow: "hidden",
+            }}
+            videoStyle={{
+              objectFit: "cover",
+              width: "100%",
+              height: "100%",
+            }}
+            scanDelay={500}
+          />
+        </div>
+      )}
+
+      {/* Text input fallback when camera fails */}
+      {(!cameraActive || error) && (
+        <div className="manual-input-container">
+          <p className="fallback-text">
+            Having trouble with the camera? Try entering a code manually:
+          </p>
+          <div className="input-container">
+            <input
+              type="text"
+              placeholder="Enter QR code (e.g. QR1)"
+              className="manual-input"
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && e.target.value) {
+                  onScan(e.target.value);
+                  e.target.value = "";
+                }
+              }}
+            />
+            <button
+              className="submit-button"
+              onClick={(e) => {
+                const input = e.target.previousSibling;
+                if (input.value) {
+                  onScan(input.value);
+                  input.value = "";
+                }
+              }}
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      )}
+
+      <style jsx>{`
+        .enhanced-qr-scanner {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 100%;
+        }
+
+        .scanner-error {
+          color: #d32f2f;
+          margin-bottom: 15px;
+          text-align: center;
+          padding: 12px;
+          background-color: #ffebee;
+          border-radius: 8px;
+          width: 100%;
+        }
+
+        .retry-button {
+          margin-top: 10px;
+          padding: 8px 16px;
+          background-color: #2196f3;
+          color: white;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+          font-weight: bold;
+        }
+
+        .retry-button:hover {
+          background-color: #1976d2;
+        }
+
+        .scanner-loading {
+          text-align: center;
+          padding: 12px;
+          background-color: #e8f5e9;
+          border-radius: 8px;
+          width: 100%;
+          margin-bottom: 15px;
+        }
+
+        .scanner-container {
+          position: relative;
+          width: 100%;
+          max-width: ${width}px;
+          height: ${height}px;
+          border-radius: 8px;
+          overflow: hidden;
+          border: 2px solid #ddd;
+          background-color: #f5f5f5;
+        }
+
+        .manual-input-container {
+          margin-top: 15px;
+          width: 100%;
+          max-width: ${width}px;
+          text-align: center;
+        }
+
+        .fallback-text {
+          margin-bottom: 10px;
+          color: #555;
+        }
+
+        .input-container {
+          display: flex;
+          width: 100%;
+        }
+
+        .manual-input {
+          flex: 1;
+          padding: 10px;
+          border: 1px solid #ddd;
+          border-radius: 4px 0 0 4px;
+          font-size: 16px;
+        }
+
+        .submit-button {
+          padding: 10px 15px;
+          background-color: #68543c;
+          color: white;
+          border: none;
+          border-radius: 0 4px 4px 0;
+          cursor: pointer;
+          font-weight: bold;
+        }
+
+        .submit-button:hover {
+          background-color: #4a3c2a;
+        }
+      `}</style>
+    </div>
+  );
+}

components/QRCodeHelper.js

@@ -0,0 +1,79 @@
+"use client";
+import { useState, useEffect } from "react";
+
+export default function QRCodeHelper({ clueId }) {
+  const [qrCodes, setQrCodes] = useState([]);
+
+  useEffect(() => {
+    // Generate possible QR code formats for this clue
+    // These are the formats that the handleScan function in the clue page can recognize
+    if (clueId) {
+      const id = parseInt(clueId);
+      if (!isNaN(id)) {
+        setQrCodes([`QR${id}`, `QR ${id}`, `${id}`, `Clue ${id}`]);
+      }
+    }
+  }, [clueId]);
+
+  if (!clueId || qrCodes.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="qr-helper">
+      <details>
+        <summary>Camera not working? Try these codes manually</summary>
+        <div className="code-list">
+          <p>
+            If the QR scanner doesn't work, you can use any of these text codes:
+          </p>
+          <ul>
+            {qrCodes.map((code, index) => (
+              <li key={index}>
+                <code>{code}</code>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </details>
+
+      <style jsx>{`
+        .qr-helper {
+          width: 100%;
+          margin-top: 15px;
+          font-size: 0.9rem;
+          color: #666;
+        }
+
+        summary {
+          cursor: pointer;
+          color: #68543c;
+          font-weight: bold;
+        }
+
+        .code-list {
+          margin-top: 10px;
+          padding: 10px;
+          background-color: #f5f5f5;
+          border-radius: 4px;
+        }
+
+        code {
+          background-color: #e0e0e0;
+          padding: 2px 5px;
+          border-radius: 3px;
+          font-family: monospace;
+        }
+
+        ul {
+          margin-top: 5px;
+          padding-left: 20px;
+        }
+
+        li {
+          margin-bottom: 5px;
+        }
+      `}</style>
+    </div>
+  );
+}

components/QRScanner.js

@@ -1,71 +1,138 @@
 "use client";
-import { useState, useRef, useEffect } from "react";
-import { Html5QrcodeScanner } from "html5-qrcode";
+import { useState, useEffect } from "react";
+import { Scanner } from "@yudiel/react-qr-scanner";
 
 export default function QRScanner({ onScan, width = 300, height = 300 }) {
-  const [scanning, setScanning] = useState(false);
   const [error, setError] = useState(null);
-  const scannerRef = useRef(null);
+  const [isSecureContext, setIsSecureContext] = useState(true);
+  const [initialized, setInitialized] = useState(false);
 
+  // Check if we're in a secure context
   useEffect(() => {
-    // Initialize scanner
-    if (!scanning && typeof window !== "undefined") {
+    // Check if we're in a secure context (https or localhost)
+    const secure = window.isSecureContext;
+    setIsSecureContext(secure);
+
+    // Check if camera can be accessed
+    async function checkCameraAccess() {
       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
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const videoDevices = devices.filter(
+          (device) => device.kind === "videoinput"
         );
 
-        // 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);
-            }
+        if (videoDevices.length === 0) {
+          setError(
+            "No camera detected. Please make sure your device has a camera."
           );
-          setScanning(true);
         }
+
+        setInitialized(true);
       } catch (err) {
-        console.error("QR Scanner initialization error:", err);
-        setError(
-          "Could not initialize QR scanner. Please make sure you have camera access."
-        );
+        console.error("Error checking camera devices:", err);
+        setError(`Camera initialization error: ${err.message}`);
+        setInitialized(true);
       }
     }
 
-    // Cleanup function
-    return () => {
-      if (scannerRef.current) {
-        try {
-          scannerRef.current.clear();
-        } catch (err) {
-          console.error("Failed to clear QR scanner:", err);
-        }
-      }
-    };
-  }, [onScan, width, height, scanning]);
+    checkCameraAccess();
+  }, []);
+
+  const handleDecode = (result) => {
+    if (onScan && result) {
+      onScan(result);
+    }
+  };
+
+  const handleError = (error) => {
+    console.error("QR Scanner error:", error);
+
+    // More descriptive error messages
+    let errorMessage = "Camera access error. ";
+
+    if (!isSecureContext) {
+      errorMessage +=
+        "Your browser requires HTTPS for camera access. When running locally, use http://localhost instead of your IP address.";
+    } else if (
+      error.name === "NotAllowedError" ||
+      error.name === "PermissionDeniedError"
+    ) {
+      errorMessage +=
+        "Camera permission denied. Please allow camera access in your browser settings.";
+    } else if (
+      error.name === "NotFoundError" ||
+      error.name === "DevicesNotFoundError"
+    ) {
+      errorMessage +=
+        "No camera found. Please ensure your device has a working camera.";
+    } else if (
+      error.name === "NotReadableError" ||
+      error.name === "TrackStartError"
+    ) {
+      errorMessage +=
+        "Camera is already in use by another application or encountered a hardware error.";
+    } else {
+      errorMessage += `${
+        error.message ||
+        "Please check your camera permissions and refresh the page."
+      }`;
+    }
+
+    setError(errorMessage);
+  };
+
+  if (!isSecureContext) {
+    return (
+      <div className="qr-scanner">
+        <div className="qr-error">
+          <p>Camera access requires a secure context (HTTPS or localhost).</p>
+          <p>
+            When running locally, use http://localhost:3000 instead of your
+            network IP.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!initialized) {
+    return (
+      <div className="qr-scanner">
+        <div className="scanner-loading">Initializing camera...</div>
+      </div>
+    );
+  }
 
   return (
     <div className="qr-scanner">
-      {error && <div className="qr-error">{error}</div>}
-      <div id="qr-reader" style={{ width, height }}></div>
+      {error && (
+        <div className="qr-error">
+          <p>{error}</p>
+        </div>
+      )}
+
+      <div className="scanner-container" style={{ width, height }}>
+        <Scanner
+          onResult={handleDecode}
+          onError={handleError}
+          constraints={{
+            facingMode: "environment",
+            width: { min: 640, ideal: 1280, max: 1920 },
+            height: { min: 480, ideal: 720, max: 1080 },
+          }}
+          containerStyle={{
+            width: "100%",
+            height: "100%",
+            borderRadius: "8px",
+            overflow: "hidden",
+          }}
+          videoStyle={{
+            objectFit: "cover",
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      </div>
 
       <style jsx>{`
         .qr-scanner {
@@ -85,16 +152,24 @@ export default function QRScanner({ onScan, width = 300, height = 300 }) {
           width: 100%;
         }
 
-        #qr-reader {
-          border: 2px solid #ddd;
+        .scanner-loading {
+          text-align: center;
+          padding: 12px;
+          background-color: #e8f5e9;
           border-radius: 8px;
-          overflow: hidden;
-          background-color: #f5f5f5;
+          width: 100%;
+          margin-bottom: 15px;
         }
 
-        #qr-reader video {
-          object-fit: cover;
-          border-radius: 6px;
+        .scanner-container {
+          position: relative;
+          width: 100%;
+          max-width: ${width}px;
+          height: ${height}px;
+          border-radius: 8px;
+          overflow: hidden;
+          border: 2px solid #ddd;
+          background-color: #f5f5f5;
         }
       `}</style>
     </div>

components/SimpleQRScanner.js

@@ -0,0 +1,164 @@
+"use client";
+import { useState, useRef } from "react";
+
+export default function SimpleQRScanner({ onScan }) {
+  const [error, setError] = useState(null);
+  const [isCameraActive, setIsCameraActive] = useState(false);
+  const videoRef = useRef(null);
+
+  const startCamera = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: "environment" },
+      });
+
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        setIsCameraActive(true);
+      }
+    } catch (err) {
+      console.error("Error accessing camera:", err);
+      setError(
+        "Could not access camera. Please make sure you've given camera permission."
+      );
+    }
+  };
+
+  const stopCamera = () => {
+    if (videoRef.current && videoRef.current.srcObject) {
+      const tracks = videoRef.current.srcObject.getTracks();
+      tracks.forEach((track) => track.stop());
+      videoRef.current.srcObject = null;
+      setIsCameraActive(false);
+    }
+  };
+
+  const handleManualInput = () => {
+    const code = prompt("Enter the QR code value manually (e.g. QR123):");
+    if (code && onScan) {
+      onScan(code);
+    }
+  };
+
+  return (
+    <div className="simple-scanner">
+      {error && <div className="scanner-error">{error}</div>}
+
+      {!isCameraActive ? (
+        <div className="scanner-controls">
+          <button className="scanner-button" onClick={startCamera}>
+            Open Camera to Scan QR Code
+          </button>
+          <button
+            className="scanner-button secondary"
+            onClick={handleManualInput}
+          >
+            Enter Code Manually
+          </button>
+        </div>
+      ) : (
+        <div className="video-container">
+          <video
+            ref={videoRef}
+            autoPlay
+            playsInline
+            onCanPlay={() => videoRef.current.play()}
+          />
+          <div className="scanner-overlay">
+            <div className="scanner-target"></div>
+          </div>
+          <button className="close-camera-button" onClick={stopCamera}>
+            Close Camera
+          </button>
+        </div>
+      )}
+
+      <style jsx>{`
+        .simple-scanner {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 100%;
+        }
+
+        .scanner-error {
+          color: red;
+          margin-bottom: 15px;
+          text-align: center;
+          padding: 8px;
+          background-color: #ffebee;
+          border-radius: 4px;
+          width: 100%;
+        }
+
+        .scanner-controls {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          width: 100%;
+        }
+
+        .scanner-button {
+          padding: 12px;
+          background-color: #68543c;
+          color: white;
+          border: none;
+          border-radius: 6px;
+          font-weight: bold;
+          cursor: pointer;
+        }
+
+        .scanner-button.secondary {
+          background-color: #999;
+        }
+
+        .video-container {
+          position: relative;
+          width: 300px;
+          height: 300px;
+          overflow: hidden;
+          border-radius: 8px;
+          border: 2px solid #ddd;
+        }
+
+        video {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+        .scanner-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: rgba(0, 0, 0, 0.2);
+        }
+
+        .scanner-target {
+          width: 200px;
+          height: 200px;
+          border: 2px solid #fff;
+          border-radius: 8px;
+          box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.3);
+        }
+
+        .close-camera-button {
+          position: absolute;
+          bottom: 10px;
+          right: 10px;
+          background-color: rgba(0, 0, 0, 0.5);
+          color: white;
+          border: none;
+          border-radius: 4px;
+          padding: 5px 10px;
+          cursor: pointer;
+        }
+      `}</style>
+    </div>
+  );
+}