88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { CrosswordAnswerKey } from "@/components/crossword-answer-key";
|
|
import { CrosswordPlayer } from "@/components/crossword-player";
|
|
import { useCrosswordData } from "@/components/use-crossword-data";
|
|
import type { Locale } from "@/lib/i18n";
|
|
|
|
type CrosswordSolutionRuntimePageProps = {
|
|
id: string;
|
|
locale: Locale;
|
|
labels: {
|
|
player: {
|
|
topic: string;
|
|
difficulty: string;
|
|
lexicon: string;
|
|
};
|
|
clues: {
|
|
across: string;
|
|
down: string;
|
|
};
|
|
solution: {
|
|
solvedGridTitle: string;
|
|
answersTitle: string;
|
|
backToGame: string;
|
|
answer: string;
|
|
clue: string;
|
|
};
|
|
loading: string;
|
|
errorPrefix: string;
|
|
};
|
|
};
|
|
|
|
export function CrosswordSolutionRuntimePage({
|
|
id,
|
|
locale,
|
|
labels,
|
|
}: CrosswordSolutionRuntimePageProps) {
|
|
const { crossword, errorMessage, isLoading } = useCrosswordData(id, locale);
|
|
|
|
if (errorMessage) {
|
|
return <p className="form-error">{labels.errorPrefix}: {errorMessage}</p>;
|
|
}
|
|
|
|
if (isLoading || !crossword) {
|
|
return <p className="muted">{labels.loading}</p>;
|
|
}
|
|
|
|
return (
|
|
<section className="stack">
|
|
<div className="card solution-topbar">
|
|
<Link className="button button--secondary" href={`/${locale}/crosswords/${id}`}>
|
|
{labels.solution.backToGame}
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="card play-stage">
|
|
<div className="play-stage__header">
|
|
<h2>{labels.solution.solvedGridTitle}</h2>
|
|
<p className="muted">{crossword.summary.title}</p>
|
|
</div>
|
|
<CrosswordPlayer
|
|
crossword={crossword}
|
|
labels={labels.player}
|
|
readOnly
|
|
revealSolution
|
|
/>
|
|
</div>
|
|
|
|
<section className="card play-sidebar play-sidebar--bottom">
|
|
<div className="play-stage__header play-stage__header--tight">
|
|
<h2>{labels.solution.answersTitle}</h2>
|
|
<p className="muted">{crossword.summary.subtitle}</p>
|
|
</div>
|
|
<CrosswordAnswerKey
|
|
crossword={crossword}
|
|
labels={{
|
|
across: labels.clues.across,
|
|
down: labels.clues.down,
|
|
answer: labels.solution.answer,
|
|
clue: labels.solution.clue,
|
|
}}
|
|
/>
|
|
</section>
|
|
</section>
|
|
);
|
|
}
|