Update app.py

app.py

@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from 'react';
+
+// 完整的成語資料庫（50組，之後擴充到200組）
+const idiomDatabase = [
+  { mainIdiom: '急如星火', synonyms: ['迫在眉睫', '刻不容緩'], meaning: '形容事情非常緊急' },
+  { mainIdiom: '一葉知秋', synonyms: ['見微知著', '月暈而風'], meaning: '從小徵兆可以預見未來的發展' },
+  { mainIdiom: '一丘之貉', synonyms: ['沆瀣一氣', '狐群狗黨'], meaning: '形容品性相同的壞人' },
+  { mainIdiom: '一蹴可幾', synonyms: ['一步登天', '唾手可得'], meaning: '一下子就能達到目的' },
+  { mainIdiom: '一暴十寒', synonyms: ['兩天打魚，三天曬網', '虎頭蛇尾'], meaning: '形容學習或做事不能持之以恆' },
+  { mainIdiom: '環堵蕭然', synonyms: ['一貧如洗', '家徒四壁'], meaning: '形容生活很貧困' },
+  { mainIdiom: '一字千金', synonyms: ['字字珠璣', '文不加點'], meaning: '形容文章寫得好，文字珍貴' },
+  { mainIdiom: '一擲千金', synonyms: ['揮金如土', '揮霍無度'], meaning: '形容揮霍錢財' },
+  { mainIdiom: '生靈塗炭', synonyms: ['民不聊生', '民生凋敝'], meaning: '形容人民生活困苦' },
+  { mainIdiom: '瓜熟蒂落', synonyms: ['水到渠成', '順理成章'], meaning: '形容事情自然成功' }
+].map((item, index) => ({ ...item, id: index + 1 }));
+
+export default function ChineseIdiomGame() {
+  const [currentQuestion, setCurrentQuestion] = useState(null);
+  const [options, setOptions] = useState([]);
+  const [selectedAnswers, setSelectedAnswers] = useState([]);
+  const [score, setScore] = useState(0);
+  const [message, setMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [gameComplete, setGameComplete] = useState(false);
+  const [incorrectOption, setIncorrectOption] = useState(null);
+  const [availableQuestions, setAvailableQuestions] = useState([...idiomDatabase]);
+
+  const shuffleArray = (array) => {
+    return [...array].sort(() => Math.random() - 0.5);
+  };
+
+  const getRandomOptions = (currentQ, count) => {
+    const otherOptions = idiomDatabase
+      .filter(item => item.id !== currentQ.id)
+      .flatMap(item => item.synonyms)
+      .filter(opt => !currentQ.synonyms.includes(opt));
+    
+    return shuffleArray(otherOptions).slice(0, count);
+  };
+
+  const startNewQuestion = () => {
+    if (availableQuestions.length === 0) {
+      setAvailableQuestions([...idiomDatabase]);
+    }
+
+    const randomIndex = Math.floor(Math.random() * availableQuestions.length);
+    const newQuestion = availableQuestions[randomIndex];
+    
+    setAvailableQuestions(prev => prev.filter(q => q.id !== newQuestion.id));
+
+    const allOptions = [
+      ...newQuestion.synonyms,
+      ...getRandomOptions(newQuestion, 8)
+    ].sort(() => Math.random() - 0.5);
+
+    setCurrentQuestion(newQuestion);
+    setOptions(allOptions);
+    setSelectedAnswers([]);
+    setMessage('');
+    setErrorMessage('');
+  };
+
+  const initializeGame = () => {
+    setScore(0);
+    setGameComplete(false);
+    setAvailableQuestions([...idiomDatabase]);
+    startNewQuestion();
+  };
+
+  useEffect(() => {
+    initializeGame();
+  }, []);
+
+  const handleOptionSelect = (option) => {
+    if (selectedAnswers.includes(option)) return;
+
+    if (currentQuestion.synonyms.includes(option)) {
+      const newSelected = [...selectedAnswers, option];
+      setSelectedAnswers(newSelected);
+      setErrorMessage('');
+
+      if (newSelected.length === 1) {
+        setScore(prev => prev + 5);
+        setMessage('答對了！還有一個答案');
+      } else if (newSelected.length === 2) {
+        const newScore = score + 5;
+        setScore(newScore);
+
+        if (newScore >= 100) {
+          setGameComplete(true);
+        } else {
+          setMessage('太棒了！準備下一題...');
+          setTimeout(startNewQuestion, 1500);
+        }
+      }
+    } else {
+      setIncorrectOption(option);
+      setErrorMessage('答錯了，再試試看！');
+      setTimeout(() => {
+        setIncorrectOption(null);
+        setErrorMessage('');
+      }, 1000);
+    }
+  };
+
+  if (gameComplete) {
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+        <div className="bg-white rounded-lg p-8 max-w-xl w-full mx-4 flex flex-col items-center">
+          <h2 className="text-3xl font-bold text-green-600 mb-12">
+            太棒了！你是成語小天才！
+          </h2>
+          <div className="flex flex-col sm:flex-row gap-8 w-full max-w-md">
+            <button
+              onClick={initializeGame}
+              className="bg-[#72BFA3] text-white text-xl font-bold px-8 py-4 rounded-lg hover:bg-green-600 transition-colors w-full"
+            >
+              繼續挑戰
+            </button>
+            <button
+              onClick={() => window.close()}
+              className="bg-[#FFC54F] text-white text-xl font-bold px-8 py-4 rounded-lg hover:bg-yellow-600 transition-colors w-full"
+            >
+              休息一下
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[#F2F1EF] p-4 flex justify-center">
+      <div className="w-full max-w-3xl">
+        <div className="bg-white rounded-lg shadow-lg p-4 sm:p-8">
+          <h1 className="text-2xl sm:text-3xl font-bold text-center mb-6">成語對對碰</h1>
+          
+          <div className="text-center mb-8">
+            <div className="flex flex-wrap justify-center items-center gap-4 mb-3">
+              <h2 className="text-xl sm:text-2xl font-bold text-blue-600">
+                題目：{currentQuestion?.mainIdiom}
+              </h2>
+              {selectedAnswers.map((idiom, index) => (
+                <span key={index} className="text-xl sm:text-2xl font-bold text-green-600">
+                  = {idiom}
+                </span>
+              ))}
+            </div>
+            <p className="text-gray-600 mb-4">{currentQuestion?.meaning}</p>
+            <p className="text-gray-700 bg-gray-100 p-4 rounded-lg">
+              玩法：這裡有兩個成語是和題目一樣的意思，請你把它找出來！
+            </p>
+          </div>
+
+          {message && (
+            <div className="text-center mb-6 text-green-600 font-bold">
+              {message}
+            </div>
+          )}
+
+          {errorMessage && (
+            <div className="text-center mb-4 text-red-500 font-bold">
+              {errorMessage}
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-2 sm:gap-4 mb-6">
+            {options.map((option, index) => (
+              <button
+                key={`${option}-${index}`}
+                onClick={() => handleOptionSelect(option)}
+                className={`
+                  p-2 sm:p-4 rounded-lg text-center transition-all
+                  ${selectedAnswers.includes(option) ? 'bg-[#72BFA3] text-white' : ''}
+                  ${incorrectOption === option ? 'bg-[#FFC54F]' : 'bg-white'}
+                  border-2 border-gray-200
+                  hover:bg-gray-50
+                  text-sm sm:text-base
+                `}
+                disabled={selectedAnswers.includes(option)}
+              >
+                {option}
+              </button>
+            ))}
+          </div>
+
+          <div className="mt-4 sm:mt-8">
+            <div className="w-full bg-gray-200 rounded-full h-6">
+              <div 
+                className="bg-green-500 h-full rounded-full transition-all duration-500 flex items-center justify-end pr-2"
+                style={{ width: `${score}%` }}
+              >
+                <span className="text-white text-sm font-bold">{score}/100</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}