@my-games/sudoku-react 0.0.1 → 0.1.0

package/README.md

@@ -1,6 +1,6 @@
 # @my-games/sudoku-react
 
-> 数独的 React 18/19 组件适配器。**当前为 `0.0.0` 占位版本**，`GameSudoku` 仅渲染占位文案。
+> 数独的 React 18/19 组件适配器（函数组件 + Hooks + `forwardRef`），基于 `@my-games/sudoku-core`。
 
 ```bash
 pnpm add @my-games/sudoku-react react react-dom
@@ -11,12 +11,42 @@ import { GameSudoku } from '@my-games/sudoku-react';
 import '@my-games/sudoku-react/style.css';
 
 export function Demo() {
-  return <GameSudoku title="Sudoku" />;
+  return (
+    <GameSudoku
+      difficulty="easy"
+      saveKey="my-app:sudoku:save"
+      onDigit={(d, changed) => console.log('fill', d, changed)}
+      onSolved={(p) => console.log('won', p.difficulty, p.seconds + 's')}
+    />
+  );
 }
 ```
 
-**样式需显式引入**：vite lib build 把内部 CSS import 抽到 `dist/index.css`。
-真实棋盘组件、`forwardRef` 句柄与 `useGame()` hook 随引擎后续提交补入。
+**样式需显式引入**：vite lib build 把内部 CSS import 抽到 `dist/index.css`，入口加一次
+`import '@my-games/sudoku-react/style.css'`（或 core 的 `@my-games/sudoku-core/style.css`）。
+
+## Props
+
+同 Vue 版：`difficulty` / `storage` / `saveKey` / `bestKey` / `freshStart` / `autofocus` / `showPad` /
+`showHint`（默认 `false`，`hint()` 始终在句柄 / `useGame` 上）/ `title`，另有 `className`（追加到最外层
+`.game-sudoku`）、`onDigit(digit, changed)`、`onSolved({ difficulty, seconds })`。
+
+## Ref 命令式方法（`GameSudokuHandle`）
+
+```tsx
+import { useRef } from 'react';
+import { GameSudoku, type GameSudokuHandle } from '@my-games/sudoku-react';
+
+const g = useRef<GameSudokuHandle>(null);
+// g.current?.select(0, 2); g.current?.input(4); g.current?.hint(); g.current?.undo();
+```
+
+## Hook（想自己画 UI）
+
+```tsx
+import { useGame } from '@my-games/sudoku-react';
+const { state, select, input, hint, undo, newGame } = useGame({ difficulty: 'hard' });
+```
 
 完整说明见仓库根 README：<https://github.com/my-gam/sudoku#readme>
 

package/dist/GameSudoku.d.ts

@@ -1,5 +1,34 @@
+import { Difficulty, Digit, SaveStorage } from '@my-games/sudoku-core';
+/**
+ * GameSudoku —— React 18/19 组件，行为与 Vue 版对齐。
+ * 键盘：数字 1-9 填数 / N 切笔记 / Backspace·Delete 擦除 / 方向键移动选中；
+ * 严格判 `document.activeElement === board`，多实例并存只活动那个响应。
+ */
 export interface GameSudokuProps {
+    difficulty?: Difficulty;
+    storage?: SaveStorage | null;
+    saveKey?: string;
+    bestKey?: string;
+    freshStart?: boolean;
+    autofocus?: boolean;
+    showPad?: boolean;
     title?: string;
+    className?: string;
+    showHint?: boolean;
+    onDigit?: (digit: Digit, changed: boolean) => void;
+    onSolved?: (payload: {
+        difficulty: Difficulty;
+        seconds: number;
+    }) => void;
 }
-export declare function GameSudoku({ title }: GameSudokuProps): import('react').JSX.Element;
+export interface GameSudokuHandle {
+    select(row: number, col: number): void;
+    input(digit: Digit): boolean;
+    erase(): boolean;
+    toggleNote(digit: Digit): boolean;
+    hint(): boolean;
+    newGame(difficulty?: Difficulty): void;
+    undo(): boolean;
+}
+export declare const GameSudoku: import('react').ForwardRefExoticComponent<GameSudokuProps & import('react').RefAttributes<GameSudokuHandle>>;
 //# sourceMappingURL=GameSudoku.d.ts.map

package/dist/GameSudoku.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameSudoku.d.ts","sourceRoot":"","sources":["../src/GameSudoku.tsx"],"names":[],"mappings":"AAEA,OAAO,iCAAiC,CAAC;AAEzC,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAgB,EAAE,EAAE,eAAe,+BAM/D"}
+{"version":3,"file":"GameSudoku.d.ts","sourceRoot":"","sources":["../src/GameSudoku.tsx"],"names":[],"mappings":"AAWA,OAAO,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAa,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGvF;;;;GAIG;AAEH,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,UAAU,EAAE,UAAU,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC3E;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC;IAC7B,KAAK,IAAI,OAAO,CAAC;IACjB,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC;IAClC,IAAI,IAAI,OAAO,CAAC;IAChB,OAAO,CAAC,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACvC,IAAI,IAAI,OAAO,CAAC;CACjB;AAiTD,eAAO,MAAM,UAAU,8GAA8B,CAAC"}

package/dist/index.css

@@ -1,18 +1,376 @@
-/*
- * @my-games/sudoku-core —— 0.0.0 占位样式表（单数命名 ./style.css）。
+/**
+ * game-sudoku 通用样式表（单数命名：`./style.css`）。
  *
- * 空骨架阶段只放最小基类，保证三包各自构建能产出非空 dist/index.css
- * （verify:dist 守卫要求 vue/react 的 index.css 存在且非 0 字节）。
- * 真实棋盘样式（3×3 宫格布局、题面/用户/冲突配色、铅笔笔记迷你格）随引擎补入。
+ * 由 `@my-games/sudoku-core/style.css` 暴露，Vue / React 适配器都直接 import 这一份，
+ * 保持视觉一致（避免两包各自漂移）。
+ *
+ * 关键布局：棋盘是 3×3 的「宫」网格（.game-sudoku-box 各含 3×3 共 9 格）。
+ * 宫之间的粗缝（box 背景透出 strong line 色）天然构成九宫分隔线，宫之间用 box-gap、
+ * 宫内用 cell-gap 两级间距即可，无需 nth-child 取模去判边界。
+ *
+ * 约定：
+ * - 数字配色区分「题面给定」(深色加粗) 与「玩家填入」(蓝色)；冲突格红底。
+ * - 选中格高亮 + 同数/同行列宫淡色提示；空格用 .cell-notes 3×3 迷你格画铅笔标记。
+ * - 尺寸自适应：容器宽度决定一切，clamp() 缩放，320px～520px 视觉合理。
+ * - prefers-reduced-motion 下关过渡/动画。
  */
 
 .game-sudoku {
+  --board-size: min(92vw, 460px);
+  --box-gap: 3px;
+  --cell-gap: 1px;
+  --radius: clamp(4px, 1.2vw, 10px);
+  --line-strong: #3b4a5a;
+  --line-soft: #93a3b3;
+  --cell-bg: #ffffff;
+  --text-given: #1f2d3d;
+  --text-user: #1c63b5;
+  --text-muted: #8a99a8;
+  --hl-selected: #cfe3ff;
+  --hl-peer: #eef4fb;
+  --hl-same: #d7e9ff;
+  --bad: #ffd7d7;
+  --bad-text: #b4232a;
+  --accent: #1c63b5;
+  --accent-dark: #144d8f;
+
   display: inline-flex;
   flex-direction: column;
-  gap: 8px;
-  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
-  color: #1f2d3d;
+  gap: 10px;
+  font-family: 'Helvetica Neue', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  color: var(--text-given);
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
+
+.game-sudoku-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  width: var(--board-size);
+  max-width: 92vw;
+}
+
+.game-sudoku-title {
+  margin: 0;
+  font-size: clamp(24px, 7vw, 38px);
+  font-weight: 800;
+  letter-spacing: -0.5px;
+}
+
+.game-sudoku-title .subtitle {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: var(--text-muted);
+}
+
+.game-sudoku-stats {
+  display: flex;
+  gap: 6px;
+}
+
+.game-sudoku-stat {
+  position: relative;
+  min-width: 66px;
+  padding: 5px 10px 7px;
+  border-radius: var(--radius);
+  background: var(--line-strong);
+  color: #fff;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.game-sudoku-stat .label {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  opacity: 0.85;
+}
+
+.game-sudoku-stat .value {
+  display: block;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.game-sudoku-stat.is-danger .value {
+  color: #ffb3b3;
+}
+
+.game-sudoku-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: var(--board-size);
+  max-width: 92vw;
+  flex-wrap: wrap;
+}
+
+.game-sudoku-difficulty {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.game-sudoku-chip {
+  padding: 6px 12px;
+  border: 1px solid var(--line-soft);
+  border-radius: 999px;
+  background: #fff;
+  color: var(--text-given);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.game-sudoku-chip.is-active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+.game-sudoku-chip:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.game-sudoku-actions {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.game-sudoku-button {
+  padding: 8px 12px;
+  border: 0;
+  border-radius: var(--radius);
+  background: #e7edf3;
+  color: var(--text-given);
+  font: inherit;
+  font-weight: 700;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 120ms, transform 80ms;
+}
+
+.game-sudoku-button:hover:not(:disabled) {
+  background: #d7e2ec;
+}
+
+.game-sudoku-button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.game-sudoku-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.game-sudoku-button.is-primary {
+  background: var(--accent);
+  color: #fff;
+}
+
+.game-sudoku-button.is-primary:hover:not(:disabled) {
+  background: var(--accent-dark);
+}
+
+.game-sudoku-button.is-toggled {
+  background: var(--accent-dark);
+  color: #fff;
+}
+
+.game-sudoku-board {
+  position: relative;
+  width: var(--board-size);
+  max-width: 92vw;
+  padding: var(--box-gap);
+  border-radius: var(--radius);
+  background: var(--line-strong);
+  outline: none;
+  box-sizing: content-box;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: var(--box-gap);
+  aspect-ratio: 1;
+}
+
+.game-sudoku-board:focus-visible {
+  box-shadow: 0 0 0 3px rgba(28, 99, 181, 0.4);
+}
+
+.game-sudoku-box {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: var(--cell-gap);
+  background: var(--line-soft);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.game-sudoku-cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cell-bg);
+  font-weight: 500;
+  font-size: clamp(15px, 4.6vw, 26px);
+  line-height: 1;
+  cursor: pointer;
+  aspect-ratio: 1;
+}
+
+.game-sudoku-cell.is-given {
+  color: var(--text-given);
+  font-weight: 800;
+}
+
+.game-sudoku-cell.is-user {
+  color: var(--text-user);
+}
+
+.game-sudoku-cell.is-peer {
+  background: var(--hl-peer);
+}
+
+.game-sudoku-cell.is-same {
+  background: var(--hl-same);
+}
+
+.game-sudoku-cell.is-selected {
+  background: var(--hl-selected);
+}
+
+.game-sudoku-cell.is-conflict {
+  background: var(--bad);
+  color: var(--bad-text);
+}
+
+.game-sudoku-cell.is-hint {
+  color: var(--accent-dark);
+}
+
+.cell-notes {
+  position: absolute;
+  inset: 2px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  align-items: center;
+  justify-items: center;
+  font-size: clamp(7px, 1.8vw, 11px);
+  font-weight: 600;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+.game-sudoku-pad {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  gap: 6px;
+  width: var(--board-size);
+  max-width: 92vw;
+}
+
+.game-sudoku-pad button {
+  padding: 10px 0;
+  border: 0;
+  border-radius: var(--radius);
+  background: #eef3f8;
+  color: var(--text-user);
+  font: inherit;
+  font-weight: 700;
+  font-size: clamp(16px, 4vw, 22px);
+  cursor: pointer;
+}
+
+.game-sudoku-pad button:hover:not(:disabled) {
+  background: #dfeaf5;
+}
+
+.game-sudoku-pad button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.game-sudoku-pad .is-active-mode {
+  background: var(--accent);
+  color: #fff;
+}
+
+.game-sudoku-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.86);
+  color: var(--text-given);
+  text-align: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 220ms ease-in;
+  z-index: 10;
+}
+
+.game-sudoku-overlay.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.game-sudoku-overlay h2 {
+  margin: 0;
+  font-size: clamp(26px, 7vw, 40px);
+  font-weight: 800;
+  color: var(--accent-dark);
+}
+
+.game-sudoku-overlay .meta {
+  font-size: 14px;
+  color: var(--text-muted);
+}
+
+.game-sudoku-overlay .row {
+  display: flex;
+  gap: 8px;
+}
+
+.game-sudoku-desc {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+
+@keyframes game-sudoku-pop {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.18); }
+  100% { transform: scale(1); }
+}
+
+.game-sudoku-cell.is-pop {
+  animation: game-sudoku-pop 200ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .game-sudoku-button,
+  .game-sudoku-overlay {
+    transition: none;
+  }
+  .game-sudoku-cell.is-pop {
+    animation: none;
+  }
+}
 /*$vite$:1*/

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { GameSudoku, type GameSudokuProps } from './GameSudoku';
-export declare const SUDOKU_PACKAGE: "sudoku-react";
-export declare const SUDOKU_STAGE: "0.0.0";
+export { GameSudoku, type GameSudokuProps, type GameSudokuHandle } from './GameSudoku';
+export { useGame, type UseGameReturn } from './useGame';
+export type { Cell, Difficulty, Digit, GameState, GameStatus, Grid, SaveStorage } from '@my-games/sudoku-core';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,eAAO,MAAM,cAAc,EAAG,cAAuB,CAAC;AACtD,eAAO,MAAM,YAAY,EAAG,OAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACvF,OAAO,EAAE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AAExD,YAAY,EACV,IAAI,EACJ,UAAU,EACV,KAAK,EACL,SAAS,EACT,UAAU,EACV,IAAI,EACJ,WAAW,EACZ,MAAM,uBAAuB,CAAC"}