87 lines
2.4 KiB
TypeScript
87 lines
2.4 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-4xl mx-auto px-4">
|
|
{/* 進度顯示 */}
|
|
<SimpleProgress
|
|
current={currentCardIndex + 1}
|
|
total={SIMPLE_CARDS.length}
|
|
score={score}
|
|
/>
|
|
|
|
{/* 翻卡組件 */}
|
|
<SimpleFlipCard
|
|
card={currentCard}
|
|
onAnswer={handleAnswer}
|
|
/>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |