<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>謎工船 おまけの謎製作</title>
  <style>
    body {
      background-image: url('background.jpg'); /* ページ全体の背景画像 */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
      color: white;
      background-color: black;
    }
    .vmin_midashi {
      font-size: 2.7vmin;
      background-color: rgba(0, 0, 0, 0.6);
    }
  </style>
  <!-- ReactとReactDOMのCDN -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!-- Tailwind CSSのCDN -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="vmin_midashi">
    <h1>謎工船 おまけの缶詰製作</h1>
  </div>
  <div id="root"></div>
  <script type="text/babel">
    const { useState } = React;

    const QuizApp = () => {
      const questions = [
        { image: "nazo_01.png", answer: "にがり" },
        { image: "nazo_02.png", answer: "いんく" },
        { image: "nazo_03.png", answer: "りどる" },
        { image: "nazo_04.png", answer: "へいかいしき" },
      ];

      const backgrounds = ["nazo_01.png", "nazo_02.png", "nazo_03.png", "nazo_04.png"];
      const correctMatches = ["nazo_01.png", "nazo_02.png", "nazo_03.png", "nazo_04.png"];
      // 透過画像の変更
      const overlays = ["kan_n25.png", "kan_n01.png", "kan_n03.png", "kan_n14.png"];
      const defaultBackground = "nazo_default.png";

      const [userAnswers, setUserAnswers] = useState(Array(4).fill(""));
      const [isCorrect, setIsCorrect] = useState(Array(4).fill(false));
      const [showSecondPart, setShowSecondPart] = useState(false);
      const [selectedBackgrounds, setSelectedBackgrounds] = useState(Array(4).fill(defaultBackground));
      const [zoomedImage, setZoomedImage] = useState(null);

      const checkAnswer = (index) => {
        if (userAnswers[index].toLowerCase() === questions[index].answer) {
          alert("正解！");
          const newCorrect = [...isCorrect];
          newCorrect[index] = true;
          setIsCorrect(newCorrect);
          if (newCorrect.every(val => val)) setShowSecondPart(true);
        } else {
          alert("何かが違うようだ");
        }
      };

      const checkFinalAnswer = () => {
        if (JSON.stringify(selectedBackgrounds) === JSON.stringify(correctMatches)) {
          window.location.href = "clearnazokosen.html";
        } else {
          alert("何かが違うようだ");
        }
      };

      return (
        <div className="p-5 flex flex-col items-center">
          {/* 画像拡大用のオーバーレイ */}
          {zoomedImage && (
            <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-80 flex items-center justify-center z-50"
                 onClick={() => setZoomedImage(null)}>
              <img src={zoomedImage} alt="Zoomed" className="max-w-full max-h-full" />
            </div>
          )}

          {/* Part A */}
          <div className="bg-white bg-opacity-70 p-5 rounded-lg shadow-lg relative">
            <div className="absolute top-0 left-0 right-0 bg-black bg-opacity-50 text-white text-center p-2">
              全ての謎の答えを入力してください<br/>(クリックで拡大表示)
            </div>
            <div className="grid grid-cols-2 gap-4 mt-10">
              {questions.map((q, index) => (
                <div key={index} className="text-center">
                  <img src={q.image} alt="question"
                       className={`w-48 h-48 mx-auto cursor-pointer ${isCorrect[index] ? 'opacity-50' : ''}`}
                       onClick={() => setZoomedImage(q.image)}
                  />
                  <input type="text"
                         className="border p-1 mt-2 w-32 text-black"
                         value={userAnswers[index]}
                         onChange={(e) => {
                           const newAnswers = [...userAnswers];
                           newAnswers[index] = e.target.value;
                           setUserAnswers(newAnswers);
                         }}
                         disabled={isCorrect[index]}
                  />
                  <button className="ml-2 bg-red-500 text-white px-3 py-1"
                          onClick={() => checkAnswer(index)}
                          disabled={isCorrect[index]}>
                    判定
                  </button>
                </div>
              ))}
            </div>
          </div>

          {/* Part B */}
          {showSecondPart && (
            <div className="mt-10 bg-white bg-opacity-70 p-5 rounded-lg shadow-lg relative">
              <div className="absolute top-0 left-0 right-0 bg-black bg-opacity-50 text-white text-center p-2">
                リストの缶詰ができるよう、適切な謎を選んでください
              </div>
              <div className="grid grid-cols-2 gap-4 mt-10">
                {overlays.map((overlay, index) => (
                  <div key={index} className="text-center w-48 mx-auto">
                    {/* 画像部分 */}
                    <div className="relative w-48 h-48 mx-auto">
                      <img src={selectedBackgrounds[index]} alt="background" className="w-full h-full" />
                      <img src={overlay} alt="overlay" className="w-full h-full absolute top-0 left-0" />
                    </div>
                    {/* プルダウンメニュー：表示は「謎1」「謎2」... */}
                    <select className="border p-1 text-black w-full mt-2"
                            onChange={(e) => {
                              const newSelections = [...selectedBackgrounds];
                              newSelections[index] = e.target.value;
                              setSelectedBackgrounds(newSelections);
                            }}>
                      <option value={defaultBackground}>謎を選択</option>
                      {backgrounds.map((b, i) => (
                        <option key={i} value={b}>{`謎${i + 1}`}</option>
                      ))}
                    </select>
                  </div>
                ))}
              </div>
              <div className="mt-4 text-center">
                <button className="bg-red-500 text-white px-5 py-2" onClick={checkFinalAnswer}>
                  判定
                </button>
              </div>
            </div>
          )}
        </div>
      );
    };

    ReactDOM.createRoot(document.getElementById("root")).render(<QuizApp />);
  </script>
</body>
</html>
