Update app.py

app.py

@@ -1,182 +1,93 @@
-import ChineseIdiomGame from './ChineseIdiomGame';
+import React, { useState } from 'react';
 
-function App() {
-  return <ChineseIdiomGame />;
-}
-
-// 成語資料庫
+// 簡化的成語資料庫
 const idiomDatabase = [
   { mainIdiom: '急如星火', synonyms: ['迫在眉睫', '刻不容緩'], meaning: '形容事情非常緊急' },
   { mainIdiom: '一葉知秋', synonyms: ['見微知著', '月暈而風'], meaning: '從小徵兆可以預見未來的發展' },
-  { mainIdiom: '一丘之貉', synonyms: ['沆瀣一氣', '狐群狗黨'], meaning: '形容品性相同的壞人' },
-  { mainIdiom: '一蹴可幾', synonyms: ['一步登天', '唾手可得'], meaning: '一下子就能達到目的' },
-  { mainIdiom: '一暴十寒', synonyms: ['兩天打魚，三天曬網', '虎頭蛇尾'], meaning: '形容學習或做事不能持之以恆' }
+  { mainIdiom: '一丘之貉', synonyms: ['沆瀣一氣', '狐群狗黨'], meaning: '形容品性相同的壞人' }
 ];
 
 function ChineseIdiomGame() {
-  // 狀態管理
-  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
-  const [selectedAnswers, setSelectedAnswers] = useState([]);
+  // 基本狀態
+  const [questionIndex, setQuestionIndex] = useState(0);
   const [score, setScore] = useState(0);
-  const [gameComplete, setGameComplete] = useState(false);
+  const [selectedAnswers, setSelectedAnswers] = useState([]);
 
   // 當前題目
-  const currentQuestion = idiomDatabase[currentQuestionIndex];
+  const currentQuestion = idiomDatabase[questionIndex];
 
-  // 生成選項
-  const generateOptions = () => {
-    const correctAnswers = currentQuestion.synonyms;
-    const otherOptions = idiomDatabase
-      .filter((_, index) => index !== currentQuestionIndex)
-      .flatMap(item => item.synonyms)
-      .slice(0, 8);
-    
-    return [...correctAnswers, ...otherOptions]
-      .sort(() => Math.random() - 0.5);
-  };
+  // 處理答案選擇
+  const handleSelect = (answer) => {
+    if (selectedAnswers.includes(answer)) return;
 
-  // 處理選項點擊
-  const handleOptionSelect = (option) => {
-    if (selectedAnswers.includes(option)) return;
-
-    if (currentQuestion.synonyms.includes(option)) {
-      const newSelected = [...selectedAnswers, option];
+    if (currentQuestion.synonyms.includes(answer)) {
+      const newSelected = [...selectedAnswers, answer];
       setSelectedAnswers(newSelected);
 
       if (newSelected.length === 2) {
-        const newScore = score + 20;
+        const newScore = score + 10;
         setScore(newScore);
-
-        if (newScore >= 100) {
-          setGameComplete(true);
-        } else {
-          setTimeout(() => {
-            setCurrentQuestionIndex((prev) => (prev + 1) % idiomDatabase.length);
-            setSelectedAnswers([]);
-          }, 1000);
-        }
+        
+        // 延遲後切換到下一題
+        setTimeout(() => {
+          setQuestionIndex((questionIndex + 1) % idiomDatabase.length);
+          setSelectedAnswers([]);
+        }, 1000);
       }
     }
   };
 
-  // 重新開始遊戲
-  const restartGame = () => {
-    setScore(0);
-    setGameComplete(false);
-    setCurrentQuestionIndex(0);
-    setSelectedAnswers([]);
-  };
-
-  if (gameComplete) {
-    return (
-      <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>
-    );
-  }
+  // 生成選項
+  const options = [
+    ...currentQuestion.synonyms,
+    '望穿秋水',
+    '守株待兔',
+    '揮金如土',
+    '一暴十寒'
+  ].sort(() => Math.random() - 0.5);
 
   return (
-    <div style={{ 
-      padding: '20px',
-      maxWidth: '800px',
-      margin: '0 auto'
-    }}>
-      <h1 style={{ 
-        fontSize: '24px',
-        textAlign: 'center',
-        marginBottom: '20px'
-      }}>
-        成語對對碰
-      </h1>
-
-      <div style={{
-        backgroundColor: '#f0f9ff',
+    <div style={{ padding: '20px' }}>
+      <h1 style={{ textAlign: 'center', marginBottom: '20px' }}>成語對對碰</h1>
+      
+      <div style={{ 
+        backgroundColor: '#f0f0f0', 
         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>
+        <h2 style={{ textAlign: 'center' }}>{currentQuestion.mainIdiom}</h2>
+        <p style={{ textAlign: 'center' }}>{currentQuestion.meaning}</p>
       </div>
 
-      <div style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
-        gap: '10px',
-        marginBottom: '20px'
+      <div style={{ 
+        display: 'grid', 
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gap: '10px' 
       }}>
-        {generateOptions().map((option, index) => (
+        {options.map((option, index) => (
           <button
             key={index}
-            onClick={() => handleOptionSelect(option)}
+            onClick={() => handleSelect(option)}
             style={{
               padding: '10px',
-              borderRadius: '8px',
-              border: '1px solid #e5e7eb',
-              backgroundColor: selectedAnswers.includes(option) ? '#16a34a' : 'white',
+              backgroundColor: selectedAnswers.includes(option) ? '#4CAF50' : 'white',
               color: selectedAnswers.includes(option) ? 'white' : 'black',
-              cursor: 'pointer'
+              border: '1px solid #ddd',
+              borderRadius: '4px'
             }}
-            disabled={selectedAnswers.includes(option)}
           >
             {option}
           </button>
         ))}
       </div>
 
-      <div style={{
-        backgroundColor: '#e5e7eb',
-        borderRadius: '9999px',
-        height: '20px',
-        overflow: 'hidden'
+      <div style={{ 
+        marginTop: '20px',
+        textAlign: 'center'
       }}>
-        <div
-          style={{
-            backgroundColor: '#16a34a',
-            height: '100%',
-            width: `${score}%`,
-            transition: 'width 0.5s ease-in-out'
-          }}
-        />
+        分數: {score}
       </div>
-      <p style={{ textAlign: 'center', marginTop: '10px' }}>
-        分數：{score}/100
-      </p>
     </div>
   );
 }