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

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