231 lines
8.7 KiB
TypeScript
231 lines
8.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { FormEvent, useEffect, useState } from "react";
|
|
|
|
import KatexRenderer from "@/components/math/KatexRenderer";
|
|
import { useGameStore } from "@/store/gameStore";
|
|
|
|
function parseAnswer(value: string) {
|
|
if (value.trim() === "") return null;
|
|
|
|
const parsed = Number.parseInt(value, 10);
|
|
return Number.isNaN(parsed) ? null : parsed;
|
|
}
|
|
|
|
export default function PlayClient() {
|
|
const session = useGameStore((state) => state.session);
|
|
const initSession = useGameStore((state) => state.initSession);
|
|
const submitAnswer = useGameStore((state) => state.submitAnswer);
|
|
const nextProblem = useGameStore((state) => state.nextProblem);
|
|
const resetSession = useGameStore((state) => state.resetSession);
|
|
|
|
const [answerA, setAnswerA] = useState("");
|
|
const [answerB, setAnswerB] = useState("");
|
|
const [inputError, setInputError] = useState("");
|
|
|
|
const currentProblem = session?.problems[session.currentIndex] ?? null;
|
|
const currentResult = session?.results[session.currentIndex] ?? null;
|
|
const isComplete = Boolean(
|
|
session && session.currentIndex >= session.problems.length,
|
|
);
|
|
const correctCount =
|
|
session?.results.filter((result) => result?.correct).length ?? 0;
|
|
const totalCount = session?.problems.length ?? 0;
|
|
|
|
useEffect(() => {
|
|
if (session === null) {
|
|
initSession();
|
|
}
|
|
}, [initSession, session]);
|
|
|
|
useEffect(() => {
|
|
setAnswerA("");
|
|
setAnswerB("");
|
|
setInputError("");
|
|
}, [currentProblem?.key]);
|
|
|
|
function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
|
|
if (currentResult || !currentProblem) return;
|
|
|
|
const parsedA = parseAnswer(answerA);
|
|
const parsedB = parseAnswer(answerB);
|
|
|
|
if (parsedA === null || parsedB === null) {
|
|
setInputError("두 칸 모두 정수로 입력하세요.");
|
|
return;
|
|
}
|
|
|
|
setInputError("");
|
|
submitAnswer({ a: parsedA, b: parsedB });
|
|
}
|
|
|
|
if (!session) {
|
|
return (
|
|
<main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
|
|
<section className="mx-auto w-full max-w-3xl">
|
|
<p className="text-lg font-semibold text-slate-700">
|
|
문제를 준비하고 있습니다.
|
|
</p>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
if (isComplete) {
|
|
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>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={resetSession}
|
|
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>
|
|
);
|
|
}
|
|
|
|
if (!currentProblem) {
|
|
return (
|
|
<main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
|
|
<section className="mx-auto w-full max-w-3xl">
|
|
<p className="text-lg font-semibold text-slate-700">
|
|
현재 문제를 불러올 수 없습니다.
|
|
</p>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
const submitted = currentResult !== null;
|
|
const isLastProblem = session.currentIndex === session.problems.length - 1;
|
|
|
|
return (
|
|
<main className="min-h-screen bg-slate-50 px-6 py-10 text-slate-950">
|
|
<section className="mx-auto flex w-full max-w-3xl flex-col gap-8">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-semibold text-emerald-700">
|
|
괄호 음수 분배
|
|
</p>
|
|
<h1 className="text-3xl font-bold tracking-normal sm:text-4xl">
|
|
문제 풀이
|
|
</h1>
|
|
</div>
|
|
<p className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200">
|
|
{session.currentIndex + 1} / {session.problems.length}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8">
|
|
<p className="mb-4 text-sm font-semibold text-slate-500">
|
|
괄호를 풀어 두 항을 순서대로 입력하세요.
|
|
</p>
|
|
<div className="text-3xl font-semibold text-slate-950 sm:text-4xl">
|
|
<KatexRenderer latex={currentProblem.latexBefore} displayMode />
|
|
</div>
|
|
</div>
|
|
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8"
|
|
>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
|
|
첫째 항
|
|
<input
|
|
value={answerA}
|
|
onChange={(event) => setAnswerA(event.target.value)}
|
|
disabled={submitted}
|
|
inputMode="numeric"
|
|
className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100"
|
|
/>
|
|
</label>
|
|
<label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
|
|
둘째 항
|
|
<input
|
|
value={answerB}
|
|
onChange={(event) => setAnswerB(event.target.value)}
|
|
disabled={submitted}
|
|
inputMode="numeric"
|
|
className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
{inputError ? (
|
|
<p className="mt-3 text-sm font-semibold text-red-700">
|
|
{inputError}
|
|
</p>
|
|
) : null}
|
|
|
|
<div className="mt-6 flex flex-wrap gap-3">
|
|
<button
|
|
type="submit"
|
|
disabled={submitted}
|
|
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 disabled:cursor-not-allowed disabled:bg-slate-300"
|
|
>
|
|
제출
|
|
</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-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
|
|
>
|
|
처음으로
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
|
|
{currentResult ? (
|
|
<div
|
|
className={`rounded-md p-6 shadow-sm ring-1 ${
|
|
currentResult.correct
|
|
? "bg-emerald-50 text-emerald-950 ring-emerald-200"
|
|
: "bg-red-50 text-red-950 ring-red-200"
|
|
}`}
|
|
>
|
|
<p className="text-lg font-bold">
|
|
{currentResult.correct ? "정답입니다." : "오답입니다."}
|
|
</p>
|
|
<div className="mt-3 text-xl font-semibold">
|
|
<KatexRenderer latex={currentProblem.latexAfter} />
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={nextProblem}
|
|
className="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-slate-950 px-5 text-base font-semibold text-white transition hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
|
|
>
|
|
{isLastProblem ? "결과 보기" : "다음 문제"}
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|