feat: launch local-first Sudoku workbench

2026-08-30 14:14:11 +02:00
commit 659640b231
97 changed files with 19111 additions and 0 deletions
@@ -0,0 +1,73 @@
+import type { EntryMode } from "../state/session";
+import { symbolFor } from "../state/session";
+
+const modes: Array<{ mode: EntryMode; label: string; key: string }> = [
+  { mode: "value", label: "Value", key: "Z" },
+  { mode: "corner", label: "Corner", key: "X" },
+  { mode: "center", label: "Centre", key: "C" },
+  { mode: "color", label: "Colour", key: "V" },
+];
+
+export function NumberPad({
+  size,
+  mode,
+  onMode,
+  onValue,
+  onErase,
+}: {
+  size: number;
+  mode: EntryMode;
+  onMode: (mode: EntryMode) => void;
+  onValue: (value: number) => void;
+  onErase: () => void;
+}) {
+  return (
+    <div className="number-pad">
+      <div className="mode-switcher" role="group" aria-label="Entry mode">
+        {modes.map((item) => (
+          <button
+            key={item.mode}
+            type="button"
+            className={mode === item.mode ? "is-active" : ""}
+            aria-pressed={mode === item.mode}
+            title={`${item.label} mode (${item.key})`}
+            onClick={() => onMode(item.mode)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+      <div
+        className={`digit-pad${size > 9 ? " digit-pad--wide" : ""}`}
+        role="group"
+        aria-label={mode === "color" ? "Colours" : "Digits"}
+      >
+        {Array.from({ length: mode === "color" ? 8 : size }, (_, index) => {
+          const value = index + 1;
+          return (
+            <button
+              key={value}
+              type="button"
+              className={
+                mode === "color" ? `color-choice color-${String(value)}` : ""
+              }
+              onClick={() => onValue(value)}
+            >
+              {mode === "color" ? (
+                <>
+                  <span aria-hidden="true" />{" "}
+                  <span className="sr-only">Colour {value}</span>
+                </>
+              ) : (
+                symbolFor(value, size)
+              )}
+            </button>
+          );
+        })}
+        <button type="button" className="erase-key" onClick={onErase}>
+          Erase
+        </button>
+      </div>
+    </div>
+  );
+}