peworkshop/components/QRCodeHelper.js

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