alpha01 filetti: web app, crossword service and tor batch

webapp/components/crossword-solution-runtime-page.tsx

@@ -0,0 +1,87 @@
+"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>
+  );
+}