8-bit Crate Pusher 404

1/** biome-ignore-all lint/a11y/noNoninteractiveElementInteractions: The focus-scoped game fieldset intentionally owns keyboard input. */
2/** biome-ignore-all lint/a11y/noNoninteractiveTabindex: The game fieldset must receive focus without a global listener. */
3"use client";
4 
5import Link from "next/link";
6import {
7  type ComponentPropsWithoutRef,
8  type KeyboardEvent as ReactKeyboardEvent,
9  useId,
10  useMemo,
11  useReducer,
12  useRef,
13  useState,
14} from "react";
15 
16import { Badge } from "@/components/ui/8bit/badge";
17import { Button } from "@/components/ui/8bit/button";
18import {
19  Card,
20  CardContent,
21  CardFooter,
22  CardHeader,
23} from "@/components/ui/8bit/card";
24import { Kbd, KbdGroup } from "@/components/ui/8bit/kbd";
25import {
26  type CratePusherState,
27  createCratePusherState,
28  type Direction,
29  moveCratePusher,
30  type ParsedCratePusherLevel,
31  type PositionKey,
32  parseCratePusherLevel,
33  resetCratePusher,
34  startCratePusher,
35  undoCratePusher,
36} from "@/lib/games/crate-pusher";
37import {
38  CRATE_PUSHER_LEVELS,
39  type CratePusherLevelDefinition,
40  type CratePusherShuffleBag,
41  createCratePusherShuffleBag,
42  drawCratePusherShuffleBag,
43} from "@/lib/games/crate-pusher-levels";
44import { cn } from "@/lib/utils";
45 
46import "@/components/ui/8bit/styles/retro.css";
47 
48export interface NotFoundCratePusherProps
49  extends ComponentPropsWithoutRef<"section"> {
50  badge?: string;
51  cta?: string;
52  description?: string;
53  href?: string;
54  level?: readonly string[];
55  seed?: number;
56  title?: string;
57}
58 
59interface CratePusherGameProps
60  extends Omit<NotFoundCratePusherProps, "level" | "seed"> {
61  readonly catalogMode: boolean;
62  readonly initialLevel: ParsedCratePusherLevel;
63  readonly seed?: number;
64}
65 
66interface BoardTileProps {
67  readonly column: number;
68  readonly row: number;
69  readonly state: CratePusherState;
70}
71 
72type CratePusherAction =
73  | {
74      readonly announcement: string;
75      readonly level: ParsedCratePusherLevel;
76      readonly type: "load";
77    }
78  | { readonly type: "move"; readonly direction: Direction }
79  | { readonly type: "restart" }
80  | { readonly type: "start" }
81  | { readonly type: "undo" };
82 
83const KEY_DIRECTIONS: Readonly<Record<string, Direction | undefined>> = {
84  a: "left",
85  arrowdown: "down",
86  arrowleft: "left",
87  arrowright: "right",
88  arrowup: "up",
89  d: "right",
90  s: "down",
91  w: "up",
92};
93 
94const INTERACTIVE_SELECTOR =
95  "a, button, input, textarea, select, [contenteditable=''], [contenteditable='true']";
96 
97// … truncated