Update app.py

app.py

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 
 // 成語資料庫
 const idiomDatabase = [
@@ -6,65 +6,31 @@ 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: '形容學習或做事不能持之以恆' }
 ];
 
 function ChineseIdiomGame() {
-  const [currentQuestion, setCurrentQuestion] = useState(null);
-  const [options, setOptions] = useState([]);
+  // 狀態管理
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
   const [selectedAnswers, setSelectedAnswers] = useState([]);
   const [score, setScore] = useState(0);
-  const [message, setMessage] = useState('');
   const [gameComplete, setGameComplete] = useState(false);
-  const [usedQuestions, setUsedQuestions] = useState([]);
 
-  // 打亂陣列順序的函數
-  const shuffleArray = (array) => {
-    return [...array].sort(() => Math.random() - 0.5);
-  };
-
-  // 開始新的題目
-  const startNewQuestion = () => {
-    // 過濾掉已使用的題目
-    const availableQuestions = idiomDatabase.filter(
-      q => !usedQuestions.includes(q.mainIdiom)
-    );
-
-    // 如果所有題目都用完了，重置使用記錄
-    if (availableQuestions.length === 0) {
-      setUsedQuestions([]);
-      return startNewQuestion();
-    }
+  // 當前題目
+  const currentQuestion = idiomDatabase[currentQuestionIndex];
 
-    // 隨機選擇一個新題目
-    const newQuestion = availableQuestions[Math.floor(Math.random() * availableQuestions.length)];
-    
-    // 生成選項
+  // 生成選項
+  const generateOptions = () => {
+    const correctAnswers = currentQuestion.synonyms;
     const otherOptions = idiomDatabase
-      .filter(item => item.mainIdiom !== newQuestion.mainIdiom)
+      .filter((_, index) => index !== currentQuestionIndex)
       .flatMap(item => item.synonyms)
-      .filter(opt => !newQuestion.synonyms.includes(opt));
+      .slice(0, 8);
     
-    const shuffledOtherOptions = shuffleArray(otherOptions).slice(0, 8);
-    const allOptions = shuffleArray([...newQuestion.synonyms, ...shuffledOtherOptions]);
-
-    setCurrentQuestion(newQuestion);
-    setOptions(allOptions);
-    setSelectedAnswers([]);
-    setMessage('');
-    setUsedQuestions([...usedQuestions, newQuestion.mainIdiom]);
+    return [...correctAnswers, ...otherOptions]
+      .sort(() => Math.random() - 0.5);
   };
 
-  // 初始化遊戲
-  useEffect(() => {
-    startNewQuestion();
-  }, []);
-
   // 處理選項點擊
   const handleOptionSelect = (option) => {
     if (selectedAnswers.includes(option)) return;
@@ -74,13 +40,16 @@ function ChineseIdiomGame() {
       setSelectedAnswers(newSelected);
 
       if (newSelected.length === 2) {
-        const newScore = score + 10;
+        const newScore = score + 20;
         setScore(newScore);
 
         if (newScore >= 100) {
           setGameComplete(true);
         } else {
-          setTimeout(startNewQuestion, 1000);
+          setTimeout(() => {
+            setCurrentQuestionIndex((prev) => (prev + 1) % idiomDatabase.length);
+            setSelectedAnswers([]);
+          }, 1000);
         }
       }
     }
@@ -90,71 +59,120 @@ function ChineseIdiomGame() {
   const restartGame = () => {
     setScore(0);
     setGameComplete(false);
-    setUsedQuestions([]);
-    startNewQuestion();
+    setCurrentQuestionIndex(0);
+    setSelectedAnswers([]);
   };
 
   if (gameComplete) {
     return (
-      <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>
-          <button
-            onClick={restartGame}
-            className="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600"
-          >
-            再玩一次
-          </button>
-        </div>
+      <div style={{ 
+        padding: '20px', 
+        textAlign: 'center',
+        maxWidth: '600px',
+        margin: '0 auto'
+      }}>
+        <h2 style={{ 
+          fontSize: '24px',
+          color: '#16a34a',
+          marginBottom: '20px'
+        }}>
+          太棒了！你是成語小天才！
+        </h2>
+        <button
+          onClick={restartGame}
+          style={{
+            backgroundColor: '#16a34a',
+            color: 'white',
+            padding: '10px 20px',
+            borderRadius: '8px',
+            border: 'none',
+            cursor: 'pointer'
+          }}
+        >
+          再玩一次
+        </button>
       </div>
     );
   }
 
   return (
-    <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>
-              <p className="text-gray-600 text-center">
-                {currentQuestion.meaning}
-              </p>
-            </div>
+    <div style={{ 
+      padding: '20px',
+      maxWidth: '800px',
+      margin: '0 auto'
+    }}>
+      <h1 style={{ 
+        fontSize: '24px',
+        textAlign: 'center',
+        marginBottom: '20px'
+      }}>
+        成語對對碰
+      </h1>
+
+      <div style={{
+        backgroundColor: '#f0f9ff',
+        padding: '20px',
+        borderRadius: '8px',
+        marginBottom: '20px'
+      }}>
+        <h2 style={{ 
+          fontSize: '20px',
+          textAlign: 'center',
+          marginBottom: '10px'
+        }}>
+          {currentQuestion.mainIdiom}
+        </h2>
+        <p style={{ 
+          textAlign: 'center',
+          color: '#4b5563'
+        }}>
+          {currentQuestion.meaning}
+        </p>
+      </div>
 
-            <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 style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+        gap: '10px',
+        marginBottom: '20px'
+      }}>
+        {generateOptions().map((option, index) => (
+          <button
+            key={index}
+            onClick={() => handleOptionSelect(option)}
+            style={{
+              padding: '10px',
+              borderRadius: '8px',
+              border: '1px solid #e5e7eb',
+              backgroundColor: selectedAnswers.includes(option) ? '#16a34a' : 'white',
+              color: selectedAnswers.includes(option) ? 'white' : 'black',
+              cursor: 'pointer'
+            }}
+            disabled={selectedAnswers.includes(option)}
+          >
+            {option}
+          </button>
+        ))}
+      </div>
 
-            <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}%` }}
-              />
-            </div>
-            <p className="text-center text-gray-600">分數：{score}/100</p>
-          </>
-        )}
+      <div style={{
+        backgroundColor: '#e5e7eb',
+        borderRadius: '9999px',
+        height: '20px',
+        overflow: 'hidden'
+      }}>
+        <div
+          style={{
+            backgroundColor: '#16a34a',
+            height: '100%',
+            width: `${score}%`,
+            transition: 'width 0.5s ease-in-out'
+          }}
+        />
       </div>
+      <p style={{ textAlign: 'center', marginTop: '10px' }}>
+        分數：{score}/100
+      </p>
     </div>
   );
 }