<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>色彩展示</title>
<style>
  body {
    font-family: "Microsoft JhengHei", sans-serif;
    text-align: center;
    background-color: white;
  }
  h3, button, hr {
    margin: 20px auto;
  }
  button {
    padding: 12px 24px;
    font-size: 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
  }
  #controlPanel {
    display: none;
    margin-top: 15px;
  }
  #controlPanel button {
    margin: 0 8px;
    background-color: #ccc;
    color: #000;
  }
</style>
</head>
<body>
  <h3 tabindex="0">色彩展示</h3>
  <button id="actionBtn" tabindex="0">開始展示</button>
  <hr tabindex="0">
  <div id="controlPanel" tabindex="0">
    <button id="leftBtn">左</button>
    <button id="gameBtn">遊戲</button>
    <button id="rightBtn">右</button>
  </div>

<script>
  // 🎨 彩虹順序 + 黑白
  const colors = [
    { nameZh: "紅", nameEn: "red", code: "#FF0000" },
    { nameZh: "橙", nameEn: "orange", code: "#FFA500" },
    { nameZh: "黃", nameEn: "yellow", code: "#FFFF00" },
    { nameZh: "綠", nameEn: "green", code: "#00FF00" },
    { nameZh: "藍", nameEn: "blue", code: "#0000FF" },
    { nameZh: "靛", nameEn: "indigo", code: "#4B0082" },
    { nameZh: "紫", nameEn: "violet", code: "#EE82EE" },
    { nameZh: "黑", nameEn: "black", code: "#000000" },
    { nameZh: "白", nameEn: "white", code: "#FFFFFF" }
  ];

  let index = 0;
  let isDisplaying = false;
  let isGameReady = false;
  let isGameRunning = false;
  let gameTimer;
  let interval = 2000;
  let score = 0;
  let currentMatch = false;
  let userClicked = false;
  let isGameOver = false;

  const btn = document.getElementById("actionBtn");
  const controlPanel = document.getElementById("controlPanel");
  const leftBtn = document.getElementById("leftBtn");
  const rightBtn = document.getElementById("rightBtn");
  const gameBtn = document.getElementById("gameBtn");

  // 🔹 自動判斷互補色（亮背景→黑字，暗背景→白字）
  function getComplementaryColor(hex) {
    const r = parseInt(hex.substr(1,2), 16);
    const g = parseInt(hex.substr(3,2), 16);
    const b = parseInt(hex.substr(5,2), 16);
    const brightness = (r*299 + g*587 + b*114) / 1000;
    return (brightness > 128) ? "#000000" : "#FFFFFF";
  }

  // 🔹 顯示顏色（展示模式用）
  function showColor(i) {
    const c = colors[i];
    document.body.style.backgroundColor = c.code;
    btn.style.color = getComplementaryColor(c.code);
    btn.textContent = `${c.nameZh} ${c.nameEn} ${c.code}`;
  }

  // 🔹 開始展示模式
  function startDisplay() {
    isDisplaying = true;
    controlPanel.style.display = "block"; // 顯示控制面板
    showColor(index);
  }

  // 🔹 左右切換顏色與進入遊戲
  document.addEventListener("keydown", e => {
    if (!isDisplaying || isGameRunning || isGameReady) return;
    if (e.key === "ArrowRight") {
      index = (index + 1) % colors.length;
      showColor(index);
    } else if (e.key === "ArrowLeft") {
      index = (index - 1 + colors.length) % colors.length;
      showColor(index);
    } else if (e.key === "ArrowDown") {
      prepareGame();
    }
  });

  // 🔹 控制面板按鈕（模擬鍵盤行為）
  leftBtn.addEventListener("click", () => {
    if (isDisplaying && !isGameRunning && !isGameReady) {
      index = (index - 1 + colors.length) % colors.length;
      showColor(index);
    }
  });

  rightBtn.addEventListener("click", () => {
    if (isDisplaying && !isGameRunning && !isGameReady) {
      index = (index + 1) % colors.length;
      showColor(index);
    }
  });

  gameBtn.addEventListener("click", () => {
    if (isDisplaying && !isGameRunning && !isGameReady) {
      prepareGame();
    }
  });

  // 🔹 準備遊戲畫面
  function prepareGame() {
    isGameReady = true;
    isDisplaying = false;
    controlPanel.style.display = "none"; // 隱藏控制面板
    document.body.style.backgroundColor = "white";
    btn.style.color = "black";
    btn.innerHTML = "開始遊戲";
    const rules = document.createElement("p");
    rules.id = "rules";
    rules.textContent = "遊戲規則：若顏色與文字相符，請按下按鈕；若不相符則不要按。若答錯或錯過應按的題目，遊戲結束！";
    document.body.appendChild(rules);
  }

  // 🔹 倒數開始遊戲（立即顯示）
  function startGameCountdown() {
    const rule = document.getElementById("rules");
    if (rule) rule.remove();
    let countdown = ["倒數", "3", "2", "1"];
    let i = 0;
    btn.textContent = countdown[i];
    const timer = setInterval(() => {
      i++;
      if (i < countdown.length) {
        btn.textContent = countdown[i];
      } else {
        clearInterval(timer);
        startGame();
      }
    }, 1000);
  }

  // 🔹 遊戲開始
  function startGame() {
    score = 0;
    isGameRunning = true;
    isGameReady = false;
    isGameOver = false;
    interval = 2000;
    nextQuestion();
  }

  // 🔹 出題（顯示中文與背景色碼）
  function nextQuestion() {
    if (!isGameRunning) return;

    userClicked = false;
    const bgIndex = Math.floor(Math.random() * colors.length);
    const textIndex = Math.floor(Math.random() * colors.length);
    const bg = colors[bgIndex];
    const text = colors[textIndex];
    currentMatch = (bgIndex === textIndex);

    document.body.style.backgroundColor = bg.code;
    btn.style.color = getComplementaryColor(bg.code);
    btn.textContent = `${text.nameZh} (${bg.code})`;

    gameTimer = setTimeout(() => {
      if (!userClicked) {
        if (currentMatch) {
          endGame();
        } else {
          score++;
          interval = Math.max(500, interval - 10);
          nextQuestion();
        }
      }
    }, interval);
  }

  // 🔹 按鈕事件控制
  btn.addEventListener("click", () => {
    if (isGameOver) {
      resetToStart();
      return;
    }

    if (!isDisplaying && !isGameReady && !isGameRunning) {
      startDisplay();
    } else if (isGameReady) {
      startGameCountdown();
    } else if (isGameRunning) {
      userClicked = true;
      clearTimeout(gameTimer);
      if (currentMatch) {
        score++;
        interval = Math.max(500, interval - 10);
        nextQuestion();
      } else {
        endGame();
      }
    }
  });

  // 🔹 結束遊戲（由使用者控制返回）
  function endGame() {
    isGameRunning = false;
    isGameOver = true;
    document.body.style.backgroundColor = "white";
    btn.style.color = "black";
    btn.textContent = `遊戲結束，您共答對 ${score} 題！`;
  }

  // 🔹 回到初始狀態
  function resetToStart() {
    isGameOver = false;
    document.body.style.backgroundColor = "white";
    btn.style.color = "black";
    btn.textContent = "開始展示";
    index = 0;
    isDisplaying = false;
    score = 0;
  }
</script>

<a href="k_Game.php">回選擇遊戲</a>
</body>
</html>