Initial crossword addition and arcade redesign

src/app/(protected)/[classSlug]/arcade/connections/[packId]/play/page.tsx

@@ -8,11 +8,12 @@ export default async function ConnectionsPlayPage(
 ) {
   const [{ classSlug, packId }, query] = await Promise.all([props.params, props.searchParams]);
   const pack = await getArcadePack(packId);
-  if (!pack || pack.class.slug !== classSlug || pack.gameType !== "connections") notFound();
+  if (!pack || pack.class.slug !== classSlug || pack.gameType !== "connections" || pack.normalized.type !== "connections") notFound();
+  const normalized = pack.normalized;
   const mistakesValue = Number(query.mistakes);
   const allowedMistakes = Number.isInteger(mistakesValue) && mistakesValue >= 1 && mistakesValue <= 8
     ? mistakesValue
-    : pack.normalized.settings.allowedMistakes;
+    : normalized.settings.allowedMistakes;
   const Renderer = ARCADE_RENDERERS.connections;
-  return <Renderer seed={randomUUID()} packId={pack.id} packName={pack.name} classSlug={classSlug} pack={pack.normalized} settings={{ allowedMistakes, oneAwayFeedback: query.oneAway !== "0" }} />;
+  return <Renderer seed={randomUUID()} packId={pack.id} packName={pack.name} classSlug={classSlug} pack={normalized} settings={{ allowedMistakes, oneAwayFeedback: query.oneAway !== "0" }} />;
 }

src/app/(protected)/[classSlug]/arcade/crossword/[packId]/play/page.tsx

@@ -0,0 +1,21 @@
+import { randomUUID } from "node:crypto";
+import { notFound } from "next/navigation";
+import { ARCADE_RENDERERS } from "@/components/arcade/rendererRegistry";
+import { generateCrosswordLayout } from "@/lib/arcade/crosswordEngine";
+import type { CrosswordSize, NormalizedCrosswordPack } from "@/types/arcade";
+import { getArcadePack } from "@/services/arcadeService";
+
+const SIZES = new Set<CrosswordSize>(["mini", "standard", "large", "extra-large"]);
+
+export default async function CrosswordPlayPage(props: { params: Promise<{ classSlug: string; packId: string }>; searchParams: Promise<Record<string, string | string[] | undefined>> }) {
+  const [{ classSlug, packId }, query] = await Promise.all([props.params, props.searchParams]);
+  const pack = await getArcadePack(packId);
+  if (!pack || pack.class.slug !== classSlug || pack.gameType !== "crossword" || pack.normalized.type !== "crossword") notFound();
+  const requestedSize = typeof query.size === "string" ? query.size : "standard";
+  const size: CrosswordSize = SIZES.has(requestedSize as CrosswordSize) ? requestedSize as CrosswordSize : "standard";
+  const seed = randomUUID();
+  const normalized = pack.normalized as NormalizedCrosswordPack;
+  const layout = generateCrosswordLayout(normalized, size, seed);
+  const Renderer = ARCADE_RENDERERS.crossword;
+  return <Renderer seed={seed} packId={pack.id} packName={pack.name} classSlug={classSlug} pack={normalized} layout={layout} settings={{ size, instantCheck: query.instant === "1", allowHints: query.hints !== "0" }} />;
+}

src/app/(protected)/[classSlug]/arcade/crossword/page.tsx

@@ -0,0 +1,12 @@
+import { notFound } from "next/navigation";
+import { CrosswordHub } from "@/components/arcade/CrosswordHub";
+import { getClassBySlug } from "@/services/classService";
+import { listArcadePacks } from "@/services/arcadeService";
+
+export default async function CrosswordHubPage(props: { params: Promise<{ classSlug: string }> }) {
+  const { classSlug } = await props.params;
+  const classItem = await getClassBySlug(classSlug);
+  if (!classItem) notFound();
+  const packs = await listArcadePacks(classItem.id, "crossword");
+  return <CrosswordHub classId={classItem.id} classSlug={classSlug} initialPacks={packs} />;
+}

src/app/(protected)/[classSlug]/arcade/page.tsx

@@ -37,7 +37,7 @@ export default async function ArcadePage(props: PageProps<"/[classSlug]/arcade">
 
       <div className="arcade-cabinet-grid grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
         {ARCADE_GAMES.map((game) => {
-          const card = <article className={`arcade-cabinet arcade-cabinet-${game.key} ${game.available ? "is-playable" : "is-coming"}`}><GameVisual gameKey={game.key} /><div className="arcade-cabinet-copy"><p className="arcade-cabinet-status">{game.estimatedMinutes}</p><h3>{game.name}</h3><p>{game.description}</p><span className="arcade-cabinet-action">{game.available ? "Play Connections →" : "Coming soon"}</span></div></article>;
+          const card = <article className={`arcade-cabinet arcade-cabinet-${game.key} ${game.available ? "is-playable" : "is-coming"}`}><GameVisual gameKey={game.key} /><div className="arcade-cabinet-copy"><p className="arcade-cabinet-status">{game.estimatedMinutes}</p><h3>{game.name}</h3><p>{game.description}</p><span className="arcade-cabinet-action">{game.available ? `Play ${game.name} →` : "Coming soon"}</span></div></article>;
           return game.available ? <Link key={game.key} href={`/${classSlug}/arcade/${game.path}`} className="rounded-[1.75rem] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary">{card}</Link> : <div key={game.key}>{card}</div>;
         })}
       </div>