@my-games/2048-react 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,83 @@
-# Temporary Holding Version
+# @my-games/2048-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> 2048 游戏的 React 18 组件适配器（函数组件 + Hooks + forwardRef）。
+
+## 安装
+
+```bash
+pnpm add @my-games/2048-react react react-dom
+```
+
+## 用法
+
+```tsx
+import { Game2048 } from '@my-games/2048-react';
+import '@my-games/2048-react/style.css';
+
+export function Demo() {
+  return (
+    <Game2048
+      size={4}
+      saveKey="my-app:2048:save"
+      bestKey="my-app:2048:best"
+      enableAI={false}
+      onMove={(dir, gained) => console.log(dir, gained)}
+      onWon={() => console.log('won')}
+    />
+  );
+}
+```
+
+**样式必须显式引入**：vite lib 模式把内部 CSS import 抽到 `dist/index.css`，
+JS bundle 不再引用。消费者入口加一次 `import '@my-games/2048-react/style.css'`
+（或从 core 引 `import '@my-games/2048-core/styles.css'`，内容一致）。
+
+## Props
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| `size` | `3 \| 4 \| 5 \| 6` | `4` | 棋盘边长 |
+| `storage` | `SaveStorage \| null` | `localStorage` | 传 `null` 关闭持久化（SSR） |
+| `saveKey` | `string` | `game-2048:save` | 存档键，多实例分开 |
+| `bestKey` | `string` | `game-2048:best` | 最高分独立键 |
+| `freshStart` | `boolean` | `false` | 忽略已有存档开新局 |
+| `autofocus` | `boolean` | `true` | mount 后自动 focus 让键盘立刻可用 |
+| `enableAI` | `boolean` | `false` | 是否渲染 AI 按钮（API 一直可用） |
+| `aiDepth` | `number` | `3` | expectimax 搜索深度 |
+| `title` | `string` | `'2048'` | 传空串隐藏 header |
+| `onMove` | `(dir, gained) => void` | — | 一次成功的滑动后触发 |
+| `onWon` | `() => void` | — | 首次凑出目标值 |
+| `onLost` | `() => void` | — | 无合法方向 |
+| `className` | `string` | — | 追加到最外层 `<div className="game-2048">` |
+
+## Ref 命令式方法
+
+```tsx
+import { useRef } from 'react';
+import { Game2048, type Game2048Handle } from '@my-games/2048-react';
+
+const g = useRef<Game2048Handle>(null);
+// g.current?.move('left');
+// g.current?.suggestMove();
+// g.current?.aiMove();
+```
+
+## Hook（想自己画 UI）
+
+```tsx
+import { useGame } from '@my-games/2048-react';
+
+function MyBoard() {
+  const { state, move, suggestMove } = useGame({ size: 4 });
+  return <div>{state.score}</div>;
+}
+```
+
+---
+
+完整玩法、引擎 API、设计取舍见仓库根 README：
+<https://github.com/my-gam/2048#readme>
+
+## License
+
+MIT.

package/dist/Game2048.d.ts

@@ -0,0 +1,34 @@
+import { Direction, SaveStorage } from '@my-games/2048-core';
+/**
+ * Game2048 —— React 18 组件。与 Vue 版行为对齐：
+ * - 键盘：window keydown + 严格 focus 判定（多实例并存只活动那个响应）；
+ *   方向键 / WASD。
+ * - 触摸：单指 swipe 主导轴 ≥24px；touchstart 时把焦点抢过来。
+ * - 动画：新块 / 合并 / 位移全走 core 的 styles.css。
+ * - AI：`enableAI` prop 控制按钮渲染；通过 ref 一直可以命令式访问。
+ */
+export interface Game2048Props {
+    size?: 3 | 4 | 5 | 6;
+    storage?: SaveStorage | null;
+    saveKey?: string;
+    bestKey?: string;
+    freshStart?: boolean;
+    autofocus?: boolean;
+    enableAI?: boolean;
+    aiDepth?: number;
+    title?: string;
+    onMove?: (dir: Direction, gained: number) => void;
+    onWon?: () => void;
+    onLost?: () => void;
+    className?: string;
+}
+export interface Game2048Handle {
+    suggestMove(): Direction | null;
+    aiMove(): Direction | null;
+    newGame(): void;
+    undo(): boolean;
+    move(dir: Direction): boolean;
+    continuePlaying(): void;
+}
+export declare const Game2048: import('react').ForwardRefExoticComponent<Game2048Props & import('react').RefAttributes<Game2048Handle>>;
+//# sourceMappingURL=Game2048.d.ts.map

package/dist/Game2048.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Game2048.d.ts","sourceRoot":"","sources":["../src/Game2048.tsx"],"names":[],"mappings":"AAYA,OAAO,gCAAgC,CAAC;AACxC,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlE;;;;;;;GAOG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,IAAI,SAAS,GAAG,IAAI,CAAC;IAChC,MAAM,IAAI,SAAS,GAAG,IAAI,CAAC;IAC3B,OAAO,IAAI,IAAI,CAAC;IAChB,IAAI,IAAI,OAAO,CAAC;IAChB,IAAI,CAAC,GAAG,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,eAAe,IAAI,IAAI,CAAC;CACzB;AA0UD,eAAO,MAAM,QAAQ,0GAA4B,CAAC"}

package/dist/index.css

@@ -0,0 +1,317 @@
+/**
+ * game-2048 通用样式表。
+ *
+ * 由 `@my-games/2048-core/styles.css` 暴露，Vue / React 适配器都直接 import 这一份，
+ * 保持视觉一致（避免两包各自漂移）。
+ *
+ * 关键约定：
+ * - 棋盘外圈 .game-2048-board 承担 pointer 事件（触摸/鼠标），内部 .tile 全部 pointer-events:none
+ *   防止子元素吞掉滑动检测。
+ * - Tile 定位用 translate，row/col 通过 --row / --col CSS 变量注入到 style 里；
+ *   `transition: transform 120ms` 让滑动有平滑感，scale 关键帧负责新块与合并 pop。
+ * - 尺寸自适应：容器宽度决定一切；cell 与 gap 用比例 + clamp() 缩放，
+ *   最小 320px、最大 520px 之间保持视觉合理。
+ */
+
+.game-2048 {
+  --board-size: min(90vw, 520px);
+  --gap: clamp(6px, 2.5vw, 12px);
+  --radius: clamp(4px, 1.2vw, 8px);
+  --bg-board: #bbada0;
+  --bg-empty: rgba(238, 228, 218, 0.35);
+  --text-dark: #776e65;
+  --text-light: #f9f6f2;
+  --accent: #8f7a66;
+
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--gap);
+  font-family: 'Helvetica Neue', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  color: var(--text-dark);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.game-2048-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap);
+  width: var(--board-size);
+  max-width: 90vw;
+}
+
+.game-2048-title {
+  margin: 0;
+  font-size: clamp(28px, 8vw, 44px);
+  font-weight: 800;
+  letter-spacing: -1px;
+  color: var(--text-dark);
+}
+
+.game-2048-scores {
+  display: flex;
+  gap: 6px;
+}
+
+.game-2048-score-box {
+  position: relative;
+  min-width: 74px;
+  padding: 6px 12px 8px;
+  border-radius: var(--radius);
+  background: var(--bg-board);
+  color: var(--text-light);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.game-2048-score-box .label {
+  display: block;
+  font-size: 11px;
+  letter-spacing: 1px;
+  color: #eee4da;
+  text-transform: uppercase;
+}
+
+.game-2048-score-box .value {
+  display: block;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.game-2048-score-box .delta {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  color: rgba(119, 110, 101, 1);
+  font-weight: 700;
+  font-size: 14px;
+  animation: game-2048-score-pop 700ms ease-out forwards;
+  pointer-events: none;
+}
+
+@keyframes game-2048-score-pop {
+  0%   { opacity: 1; transform: translateY(0); }
+  100% { opacity: 0; transform: translateY(-24px); }
+}
+
+.game-2048-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap);
+  width: var(--board-size);
+  max-width: 90vw;
+}
+
+.game-2048-desc {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-dark);
+  opacity: 0.9;
+}
+
+.game-2048-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.game-2048-button {
+  padding: 8px 14px;
+  border: 0;
+  border-radius: var(--radius);
+  background: var(--accent);
+  color: var(--text-light);
+  font: inherit;
+  font-weight: 700;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 120ms, transform 80ms;
+}
+
+.game-2048-button:hover:not(:disabled) {
+  background: #a68472;
+}
+
+.game-2048-button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.game-2048-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.game-2048-button.is-primary {
+  background: #f2b179;
+  color: #776e65;
+}
+
+.game-2048-button.is-primary:hover:not(:disabled) {
+  background: #f59563;
+}
+
+.game-2048-board {
+  position: relative;
+  width: var(--board-size);
+  max-width: 90vw;
+  aspect-ratio: 1;
+  padding: var(--gap);
+  border-radius: var(--radius);
+  background: var(--bg-board);
+  touch-action: none;
+  outline: none;
+  box-sizing: content-box;
+}
+
+.game-2048-board:focus-visible {
+  box-shadow: 0 0 0 3px rgba(143, 122, 102, 0.5);
+}
+
+.game-2048-grid {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  gap: var(--gap);
+}
+
+.game-2048-cell {
+  border-radius: var(--radius);
+  background: var(--bg-empty);
+}
+
+.game-2048-tile-layer {
+  position: absolute;
+  inset: var(--gap);
+  pointer-events: none;
+}
+
+.game-2048-tile {
+  --pitch-x: calc(100% + var(--gap));
+  --pitch-y: calc(100% + var(--gap));
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius);
+  background: #eee4da;
+  color: var(--text-dark);
+  font-weight: 800;
+  font-size: clamp(24px, 8vw, 44px);
+  line-height: 1;
+  /* 注意 --cols 由 board 内联 style 提供 */
+  width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
+  height: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
+  transform: translate(
+    calc(var(--col) * var(--pitch-x)),
+    calc(var(--row) * var(--pitch-y))
+  );
+  transition: transform 120ms ease-in-out;
+  will-change: transform;
+}
+
+.game-2048-tile.is-new {
+  animation: game-2048-tile-spawn 180ms ease-out;
+}
+
+.game-2048-tile.is-merged {
+  animation: game-2048-tile-pop 180ms ease-out;
+  z-index: 2;
+}
+
+@keyframes game-2048-tile-spawn {
+  0%   { opacity: 0; transform: translate(calc(var(--col) * var(--pitch-x)), calc(var(--row) * var(--pitch-y))) scale(0.3); }
+  100% { opacity: 1; transform: translate(calc(var(--col) * var(--pitch-x)), calc(var(--row) * var(--pitch-y))) scale(1); }
+}
+
+@keyframes game-2048-tile-pop {
+  0%   { transform: translate(calc(var(--col) * var(--pitch-x)), calc(var(--row) * var(--pitch-y))) scale(1); }
+  50%  { transform: translate(calc(var(--col) * var(--pitch-x)), calc(var(--row) * var(--pitch-y))) scale(1.18); }
+  100% { transform: translate(calc(var(--col) * var(--pitch-x)), calc(var(--row) * var(--pitch-y))) scale(1); }
+}
+
+/* 数值配色（沿用 2048 官方色板） */
+.game-2048-tile[data-value='2']    { background: #eee4da; color: var(--text-dark); }
+.game-2048-tile[data-value='4']    { background: #ede0c8; color: var(--text-dark); }
+.game-2048-tile[data-value='8']    { background: #f2b179; color: var(--text-light); }
+.game-2048-tile[data-value='16']   { background: #f59563; color: var(--text-light); }
+.game-2048-tile[data-value='32']   { background: #f67c5f; color: var(--text-light); }
+.game-2048-tile[data-value='64']   { background: #f65e3b; color: var(--text-light); }
+.game-2048-tile[data-value='128']  { background: #edcf72; color: var(--text-light); font-size: clamp(20px, 6.5vw, 38px); }
+.game-2048-tile[data-value='256']  { background: #edcc61; color: var(--text-light); font-size: clamp(20px, 6.5vw, 38px); }
+.game-2048-tile[data-value='512']  { background: #edc850; color: var(--text-light); font-size: clamp(20px, 6.5vw, 38px); }
+.game-2048-tile[data-value='1024'] { background: #edc53f; color: var(--text-light); font-size: clamp(16px, 5.5vw, 32px); }
+.game-2048-tile[data-value='2048'] { background: #edc22e; color: var(--text-light); font-size: clamp(16px, 5.5vw, 32px); box-shadow: 0 0 24px rgba(243, 215, 116, 0.6); }
+.game-2048-tile[data-super='1']    { background: #3c3a33; color: var(--text-light); font-size: clamp(14px, 5vw, 28px); }
+
+.game-2048-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  border-radius: var(--radius);
+  background: rgba(238, 228, 218, 0.73);
+  color: var(--text-dark);
+  text-align: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 220ms ease-in;
+  z-index: 10;
+}
+
+.game-2048-overlay.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.game-2048-overlay.is-lost {
+  background: rgba(238, 228, 218, 0.5);
+}
+
+.game-2048-overlay h2 {
+  margin: 0;
+  font-size: clamp(32px, 9vw, 52px);
+  font-weight: 800;
+  color: var(--text-dark);
+}
+
+.game-2048-overlay.is-won h2 {
+  color: #f9f6f2;
+  text-shadow: 0 0 12px rgba(237, 194, 46, 0.6);
+}
+
+.game-2048-overlay .row {
+  display: flex;
+  gap: 8px;
+}
+
+.game-2048-ai-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(143, 122, 102, 0.14);
+  font-size: 12px;
+  color: var(--text-dark);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .game-2048-tile,
+  .game-2048-overlay {
+    transition: none;
+  }
+  .game-2048-tile.is-new,
+  .game-2048-tile.is-merged {
+    animation: none;
+  }
+}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Game2048, type Game2048Props, type Game2048Handle } from './Game2048';
+export { useGame, type UseGameOptions, type UseGameReturn } from './useGame';
+export type { BoardSize, Direction, GameState, GameStatus, SaveStorage, Tile } from '@my-games/2048-core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AAE7E,YAAY,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACX,IAAI,EACL,MAAM,qBAAqB,CAAC"}