Update app.py

app.py

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-// 完整的成語資料庫（50組，之後擴充到200組）
+// 成語資料庫
 const idiomDatabase = [
   { mainIdiom: '急如星火', synonyms: ['迫在眉睫', '刻不容緩'], meaning: '形容事情非常緊急' },
   { mainIdiom: '一葉知秋', synonyms: ['見微知著', '月暈而風'], meaning: '從小徵兆可以預見未來的發展' },
@@ -12,190 +12,151 @@ const idiomDatabase = [
   { mainIdiom: '一擲千金', synonyms: ['揮金如土', '揮霍無度'], meaning: '形容揮霍錢財' },
   { mainIdiom: '生靈塗炭', synonyms: ['民不聊生', '民生凋敝'], meaning: '形容人民生活困苦' },
   { mainIdiom: '瓜熟蒂落', synonyms: ['水到渠成', '順理成章'], meaning: '形容事情自然成功' }
-].map((item, index) => ({ ...item, id: index + 1 }));
+];
 
-export default function ChineseIdiomGame() {
+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 [usedQuestions, setUsedQuestions] = useState([]);
 
+  // 打亂陣列順序的函數
   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 = () => {
+    // 過濾掉已使用的題目
+    const availableQuestions = idiomDatabase.filter(
+      q => !usedQuestions.includes(q.mainIdiom)
+    );
+
+    // 如果所有題目都用完了，重置使用記錄
     if (availableQuestions.length === 0) {
-      setAvailableQuestions([...idiomDatabase]);
+      setUsedQuestions([]);
+      return startNewQuestion();
     }
 
-    const randomIndex = Math.floor(Math.random() * availableQuestions.length);
-    const newQuestion = availableQuestions[randomIndex];
+    // 隨機選擇一個新題目
+    const newQuestion = availableQuestions[Math.floor(Math.random() * availableQuestions.length)];
     
-    setAvailableQuestions(prev => prev.filter(q => q.id !== newQuestion.id));
-
-    const allOptions = [
-      ...newQuestion.synonyms,
-      ...getRandomOptions(newQuestion, 8)
-    ].sort(() => Math.random() - 0.5);
+    // 生成選項
+    const otherOptions = idiomDatabase
+      .filter(item => item.mainIdiom !== newQuestion.mainIdiom)
+      .flatMap(item => item.synonyms)
+      .filter(opt => !newQuestion.synonyms.includes(opt));
+    
+    const shuffledOtherOptions = shuffleArray(otherOptions).slice(0, 8);
+    const allOptions = shuffleArray([...newQuestion.synonyms, ...shuffledOtherOptions]);
 
     setCurrentQuestion(newQuestion);
     setOptions(allOptions);
     setSelectedAnswers([]);
     setMessage('');
-    setErrorMessage('');
-  };
-
-  const initializeGame = () => {
-    setScore(0);
-    setGameComplete(false);
-    setAvailableQuestions([...idiomDatabase]);
-    startNewQuestion();
+    setUsedQuestions([...usedQuestions, newQuestion.mainIdiom]);
   };
 
+  // 初始化遊戲
   useEffect(() => {
-    initializeGame();
+    startNewQuestion();
   }, []);
 
+  // 處理選項點擊
   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;
+      if (newSelected.length === 2) {
+        const newScore = score + 10;
         setScore(newScore);
 
         if (newScore >= 100) {
           setGameComplete(true);
         } else {
-          setMessage('太棒了！準備下一題...');
-          setTimeout(startNewQuestion, 1500);
+          setTimeout(startNewQuestion, 1000);
         }
       }
-    } else {
-      setIncorrectOption(option);
-      setErrorMessage('答錯了，再試試看！');
-      setTimeout(() => {
-        setIncorrectOption(null);
-        setErrorMessage('');
-      }, 1000);
     }
   };
 
+  // 重新開始遊戲
+  const restartGame = () => {
+    setScore(0);
+    setGameComplete(false);
+    setUsedQuestions([]);
+    startNewQuestion();
+  };
+
   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">
+      <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
+        <div className="bg-white rounded-lg p-8 text-center max-w-md w-full">
+          <h2 className="text-2xl font-bold text-green-600 mb-6">
             太棒了！你是成語小天才！
           </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>
+          <button
+            onClick={restartGame}
+            className="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600"
+          >
+            再玩一次
+          </button>
         </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}
+    <div className="min-h-screen bg-gray-100 p-4">
+      <div className="max-w-2xl mx-auto bg-white rounded-lg shadow p-6">
+        <h1 className="text-2xl font-bold text-center mb-6">成語對對碰</h1>
+        
+        {currentQuestion && (
+          <>
+            <div className="bg-blue-100 p-4 rounded-lg mb-6">
+              <h2 className="text-xl font-bold text-center mb-2">
+                {currentQuestion.mainIdiom}
               </h2>
-              {selectedAnswers.map((idiom, index) => (
-                <span key={index} className="text-xl sm:text-2xl font-bold text-green-600">
-                  = {idiom}
-                </span>
-              ))}
+              <p className="text-gray-600 text-center">
+                {currentQuestion.meaning}
+              </p>
             </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 className="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">
+              {options.map((option, index) => (
+                <button
+                  key={index}
+                  onClick={() => handleOptionSelect(option)}
+                  className={`
+                    p-3 rounded-lg text-center
+                    ${selectedAnswers.includes(option) ? 'bg-green-500 text-white' : 'bg-gray-100'}
+                    hover:bg-gray-200
+                  `}
+                  disabled={selectedAnswers.includes(option)}
+                >
+                  {option}
+                </button>
+              ))}
             </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"
+
+            <div className="bg-gray-200 rounded-full h-4 mb-4">
+              <div
+                className="bg-green-500 h-full rounded-full transition-all duration-500"
                 style={{ width: `${score}%` }}
-              >
-                <span className="text-white text-sm font-bold">{score}/100</span>
-              </div>
+              />
             </div>
-          </div>
-        </div>
+            <p className="text-center text-gray-600">分數：{score}/100</p>
+          </>
+        )}
       </div>
     </div>
   );
-}
+}
+
+export default ChineseIdiomGame;