108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
import AnswerResultLine from "@/components/game/AnswerResultLine";
|
|
import type { GradeResult, ParenthesisSignProblem } from "@/lib/engine/types";
|
|
|
|
interface ScoreSummaryProps {
|
|
correctCount: number;
|
|
totalCount: number;
|
|
problems: ParenthesisSignProblem[];
|
|
results: (GradeResult | null)[];
|
|
onRestart: () => void;
|
|
}
|
|
|
|
function formatLatexTermPair(first: number, second: number) {
|
|
const operator = second < 0 ? "-" : "+";
|
|
|
|
return `${first} ${operator} ${Math.abs(second)}`;
|
|
}
|
|
|
|
export default function ScoreSummary({
|
|
correctCount,
|
|
totalCount,
|
|
problems,
|
|
results,
|
|
onRestart,
|
|
}: ScoreSummaryProps) {
|
|
const restartButtonRef = useRef<HTMLButtonElement>(null);
|
|
const solvedItems = problems
|
|
.map((problem, index) => ({
|
|
problem,
|
|
result: results[index],
|
|
}))
|
|
.filter(
|
|
(item): item is { problem: ParenthesisSignProblem; result: GradeResult } =>
|
|
item.result !== null,
|
|
);
|
|
|
|
useEffect(() => {
|
|
restartButtonRef.current?.focus();
|
|
}, []);
|
|
|
|
return (
|
|
<main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
|
|
<section className="mx-auto flex w-full max-w-3xl flex-col gap-8">
|
|
<div className="space-y-3">
|
|
<p className="text-sm font-semibold text-emerald-700">
|
|
괄호 음수 분배
|
|
</p>
|
|
<h1 className="text-4xl font-bold tracking-normal sm:text-5xl">
|
|
풀이 결과
|
|
</h1>
|
|
<p className="text-xl font-semibold text-slate-800">
|
|
{correctCount} / {totalCount} 정답
|
|
</p>
|
|
</div>
|
|
|
|
<ol className="space-y-3">
|
|
{solvedItems.map(({ problem, result }, index) => {
|
|
const userAnswerLatex = formatLatexTermPair(
|
|
result.userAnswer[0],
|
|
result.userAnswer[1],
|
|
);
|
|
const correctAnswerLatex = formatLatexTermPair(
|
|
result.correctAnswer[0],
|
|
result.correctAnswer[1],
|
|
);
|
|
|
|
return (
|
|
<AnswerResultLine
|
|
key={problem.key}
|
|
expressionLatex={problem.latexBefore}
|
|
userAnswerLatex={userAnswerLatex}
|
|
correctAnswerLatex={correctAnswerLatex}
|
|
correct={result.correct}
|
|
prefix={
|
|
<span className="mr-1 text-sm font-bold text-slate-500">
|
|
{index + 1}.
|
|
</span>
|
|
}
|
|
/>
|
|
);
|
|
})}
|
|
</ol>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<button
|
|
ref={restartButtonRef}
|
|
type="button"
|
|
onClick={onRestart}
|
|
className="inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 px-6 text-base font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
|
|
>
|
|
다시 시작
|
|
</button>
|
|
<Link
|
|
href="/"
|
|
className="inline-flex h-12 items-center justify-center rounded-md border border-slate-300 px-6 text-base font-semibold text-slate-800 transition hover:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
|
|
>
|
|
처음으로
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|