118 lines
3.5 KiB
TypeScript
118 lines
3.5 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { Navigation } from '@/components/shared/Navigation'
|
||
import './globals.css'
|
||
import { SimpleFlipCard } from './components/SimpleFlipCard'
|
||
import { SimpleProgress } from './components/SimpleProgress'
|
||
import { SimpleResults } from './components/SimpleResults'
|
||
import { SIMPLE_CARDS } from './data'
|
||
|
||
export default function SimpleReviewPage() {
|
||
// 極簡狀態管理 - 只用 React useState
|
||
const [currentCardIndex, setCurrentCardIndex] = useState(0)
|
||
const [score, setScore] = useState({ correct: 0, total: 0 })
|
||
const [isComplete, setIsComplete] = useState(false)
|
||
|
||
const currentCard = SIMPLE_CARDS[currentCardIndex]
|
||
const isLastCard = currentCardIndex >= SIMPLE_CARDS.length - 1
|
||
|
||
// 處理答題 - 極簡邏輯
|
||
const handleAnswer = (confidence: number) => {
|
||
// 信心度3以上算答對
|
||
const isCorrect = confidence >= 3
|
||
|
||
// 更新分數
|
||
setScore(prevScore => ({
|
||
correct: prevScore.correct + (isCorrect ? 1 : 0),
|
||
total: prevScore.total + 1
|
||
}))
|
||
|
||
// 判斷是否完成
|
||
if (isLastCard) {
|
||
setIsComplete(true)
|
||
} else {
|
||
// 下一張卡片
|
||
setCurrentCardIndex(prevIndex => prevIndex + 1)
|
||
}
|
||
}
|
||
|
||
// 重新開始 - 重置所有狀態
|
||
const handleRestart = () => {
|
||
setCurrentCardIndex(0)
|
||
setScore({ correct: 0, total: 0 })
|
||
setIsComplete(false)
|
||
}
|
||
|
||
// 顯示結果頁面
|
||
if (isComplete) {
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
||
<Navigation />
|
||
<div className="py-8">
|
||
<SimpleResults
|
||
score={score}
|
||
totalCards={SIMPLE_CARDS.length}
|
||
onRestart={handleRestart}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// 主要複習頁面
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
||
<Navigation />
|
||
|
||
<div className="py-8">
|
||
<div className="max-w-2xl mx-auto px-4">
|
||
{/* 頁面標題 */}
|
||
<div className="text-center mb-8">
|
||
<h1 className="text-3xl font-bold text-gray-900 mb-2">詞彙複習</h1>
|
||
<p className="text-gray-600">翻卡學習，測試您的詞彙記憶</p>
|
||
</div>
|
||
|
||
{/* 進度顯示 */}
|
||
<SimpleProgress
|
||
current={currentCardIndex + 1}
|
||
total={SIMPLE_CARDS.length}
|
||
score={score}
|
||
/>
|
||
|
||
{/* 翻卡組件 */}
|
||
<SimpleFlipCard
|
||
card={currentCard}
|
||
onAnswer={handleAnswer}
|
||
/>
|
||
|
||
{/* 導航提示 */}
|
||
<div className="mt-8 text-center">
|
||
<div className="bg-white/70 rounded-lg p-4">
|
||
<p className="text-sm text-gray-600">
|
||
💡 提示：先翻卡查看詞意，再根據您的熟悉程度選擇信心度
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 快捷操作 */}
|
||
<div className="mt-6 flex justify-center space-x-4">
|
||
<button
|
||
onClick={handleRestart}
|
||
className="px-4 py-2 text-gray-600 hover:text-gray-900 transition-colors"
|
||
>
|
||
重新開始
|
||
</button>
|
||
<span className="text-gray-400">|</span>
|
||
<a
|
||
href="/flashcards"
|
||
className="px-4 py-2 text-blue-600 hover:text-blue-700 transition-colors"
|
||
>
|
||
管理詞卡
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
} |