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

package/dist/index.js

@@ -0,0 +1,355 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Game2048 as Game2048$1, bestMove } from "@my-games/2048-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/useGame.ts
+function useGame(options = {}) {
+	const { aiDepth = 3, size, storage, saveKey, bestKey, freshStart, target, undoLimit, rng } = options;
+	const game = useMemo(() => new Game2048$1({
+		size,
+		storage,
+		saveKey,
+		bestKey,
+		freshStart,
+		target,
+		undoLimit,
+		rng
+	}), [
+		size,
+		saveKey,
+		bestKey,
+		target,
+		undoLimit
+	]);
+	const gameRef = useRef(game);
+	gameRef.current = game;
+	const [state, setState] = useState(() => game.getState());
+	useEffect(() => {
+		setState(game.getState());
+		return game.subscribe((s) => setState(s));
+	}, [game]);
+	return {
+		state,
+		game,
+		move: (dir) => gameRef.current.move(dir),
+		newGame: () => gameRef.current.newGame(),
+		undo: () => gameRef.current.undo(),
+		continuePlaying: () => gameRef.current.continuePlaying(),
+		suggestMove: () => bestMove(gameRef.current.getGridValues(), { depth: aiDepth }),
+		aiMove: () => {
+			const dir = bestMove(gameRef.current.getGridValues(), { depth: aiDepth });
+			if (dir) gameRef.current.move(dir);
+			return dir;
+		}
+	};
+}
+// src/Game2048.tsx
+var KEY_TO_DIR = {
+	ArrowUp: "up",
+	ArrowDown: "down",
+	ArrowLeft: "left",
+	ArrowRight: "right",
+	w: "up",
+	a: "left",
+	s: "down",
+	d: "right",
+	W: "up",
+	A: "left",
+	S: "down",
+	D: "right"
+};
+function cssVars(vars) {
+	return vars;
+}
+function Game2048Inner(props, ref) {
+	const { size = 4, storage, saveKey, bestKey, freshStart = false, autofocus = true, enableAI = false, aiDepth = 3, title = "2048", onMove, onWon, onLost, className } = props;
+	const { state, move, newGame, undo, continuePlaying, suggestMove, aiMove } = useGame({
+		size,
+		storage,
+		saveKey,
+		bestKey,
+		freshStart,
+		aiDepth
+	});
+	const boardRef = useRef(null);
+	const touchStartPoint = useRef(null);
+	const lastScoreRef = useRef(state.score);
+	const lastStatusRef = useRef(state.status);
+	const [scoreDelta, setScoreDelta] = useState(null);
+	const [aiHint, setAiHint] = useState(null);
+	const deltaTimer = useRef(void 0);
+	const performMove = useCallback((dir) => {
+		const before = lastScoreRef.current;
+		if (move(dir)) {
+			onMove?.(dir, state.score - before);
+			if (enableAI) setAiHint(null);
+		}
+	}, [
+		move,
+		onMove,
+		state.score,
+		enableAI
+	]);
+	useEffect(() => {
+		const handler = (ev) => {
+			const dir = KEY_TO_DIR[ev.key];
+			if (!dir) return;
+			if (document.activeElement !== boardRef.current) return;
+			ev.preventDefault();
+			performMove(dir);
+		};
+		window.addEventListener("keydown", handler, { passive: false });
+		return () => window.removeEventListener("keydown", handler);
+	}, [performMove]);
+	useEffect(() => {
+		if (autofocus) boardRef.current?.focus({ preventScroll: true });
+	}, [autofocus]);
+	const onTouchStart = (ev) => {
+		if (ev.touches.length !== 1) return;
+		const t = ev.touches[0];
+		if (!t) return;
+		touchStartPoint.current = {
+			x: t.clientX,
+			y: t.clientY
+		};
+		boardRef.current?.focus({ preventScroll: true });
+	};
+	const onTouchEnd = (ev) => {
+		const start = touchStartPoint.current;
+		touchStartPoint.current = null;
+		if (!start) return;
+		const t = ev.changedTouches[0];
+		if (!t) return;
+		const dx = t.clientX - start.x;
+		const dy = t.clientY - start.y;
+		const adx = Math.abs(dx);
+		const ady = Math.abs(dy);
+		if (Math.max(adx, ady) < 24) return;
+		performMove(adx > ady ? dx > 0 ? "right" : "left" : dy > 0 ? "down" : "up");
+	};
+	useEffect(() => {
+		const gained = state.score - lastScoreRef.current;
+		if (gained > 0) {
+			setScoreDelta({
+				amount: gained,
+				key: Date.now() + Math.random()
+			});
+			if (deltaTimer.current) window.clearTimeout(deltaTimer.current);
+			deltaTimer.current = window.setTimeout(() => setScoreDelta(null), 700);
+		}
+		lastScoreRef.current = state.score;
+	}, [state.score]);
+	useEffect(() => {
+		if (state.status === lastStatusRef.current) return;
+		if (state.status === "won") onWon?.();
+		else if (state.status === "lost") onLost?.();
+		lastStatusRef.current = state.status;
+	}, [
+		state.status,
+		onWon,
+		onLost
+	]);
+	useEffect(() => () => {
+		if (deltaTimer.current) window.clearTimeout(deltaTimer.current);
+	}, []);
+	const gridStyle = useMemo(() => cssVars({
+		gridTemplateColumns: `repeat(${state.size}, 1fr)`,
+		gridTemplateRows: `repeat(${state.size}, 1fr)`
+	}), [state.size]);
+	const boardVars = useMemo(() => cssVars({ "--cols": state.size }), [state.size]);
+	const undoDisabled = state.historySize === 0;
+	const overlayVisible = state.status !== "playing";
+	const isWon = state.status === "won";
+	const isLost = state.status === "lost";
+	useImperativeHandle(ref, () => ({
+		suggestMove,
+		aiMove,
+		newGame,
+		undo,
+		move,
+		continuePlaying
+	}), [
+		suggestMove,
+		aiMove,
+		newGame,
+		undo,
+		move,
+		continuePlaying
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["game-2048", className].filter(Boolean).join(" "),
+		children: [
+			title ? /* @__PURE__ */ jsxs("header", {
+				className: "game-2048-header",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "game-2048-title",
+					children: title
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "game-2048-scores",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "game-2048-score-box",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "label",
+								children: "Score"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "value",
+								children: state.score
+							}),
+							scoreDelta ? /* @__PURE__ */ jsxs("span", {
+								className: "delta",
+								children: ["+", scoreDelta.amount]
+							}, scoreDelta.key) : null
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "game-2048-score-box",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "label",
+							children: "Best"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "value",
+							children: state.bestScore
+						})]
+					})]
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "game-2048-toolbar",
+				children: [/* @__PURE__ */ jsxs("p", {
+					className: "game-2048-desc",
+					children: [
+						"合并相同数字，冲过 ",
+						/* @__PURE__ */ jsx("b", { children: "2048" }),
+						"。方向键 / WASD / 触屏滑动。"
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "game-2048-actions",
+					children: [
+						enableAI ? /* @__PURE__ */ jsx("button", {
+							className: "game-2048-button",
+							type: "button",
+							disabled: isLost,
+							onClick: () => setAiHint(suggestMove()),
+							children: "提示"
+						}) : null,
+						enableAI ? /* @__PURE__ */ jsx("button", {
+							className: "game-2048-button",
+							type: "button",
+							disabled: isLost,
+							onClick: () => {
+								const before = state.score;
+								const dir = aiMove();
+								if (dir) {
+									onMove?.(dir, state.score - before);
+									setAiHint(null);
+								}
+							},
+							children: "AI 帮走"
+						}) : null,
+						/* @__PURE__ */ jsx("button", {
+							className: "game-2048-button",
+							type: "button",
+							disabled: undoDisabled,
+							onClick: () => undo(),
+							children: "撤销"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: "game-2048-button is-primary",
+							type: "button",
+							onClick: () => newGame(),
+							children: "新游戏"
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: boardRef,
+				className: "game-2048-board",
+				style: boardVars,
+				tabIndex: 0,
+				role: "application",
+				"aria-label": `2048 游戏板 ${state.status}`,
+				onTouchStart,
+				onTouchEnd,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "game-2048-grid",
+						style: gridStyle,
+						children: Array.from({ length: state.size * state.size }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "game-2048-cell" }, i))
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "game-2048-tile-layer",
+						children: state.tiles.map((t) => {
+							const cls = [
+								"game-2048-tile",
+								t.isNew ? "is-new" : "",
+								t.merged ? "is-merged" : "",
+								t.value > 2048 ? "is-super" : ""
+							].filter(Boolean).join(" ");
+							return /* @__PURE__ */ jsx("div", {
+								className: cls,
+								style: cssVars({
+									"--row": t.row,
+									"--col": t.col
+								}),
+								"data-value": t.value,
+								...t.value > 2048 ? { "data-super": "1" } : {},
+								children: t.value
+							}, t.id);
+						})
+					}),
+					enableAI && aiHint ? /* @__PURE__ */ jsxs("div", {
+						className: "game-2048-ai-indicator",
+						style: cssVars({
+							position: "absolute",
+							top: "8px",
+							left: "8px",
+							zIndex: 3
+						}),
+						children: ["推荐：", aiHint]
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: [
+							"game-2048-overlay",
+							overlayVisible ? "is-visible" : "",
+							isWon ? "is-won" : "",
+							isLost ? "is-lost" : ""
+						].filter(Boolean).join(" "),
+						children: [
+							isWon ? /* @__PURE__ */ jsx("h2", { children: "你赢了！" }) : null,
+							isLost ? /* @__PURE__ */ jsx("h2", { children: "游戏结束" }) : null,
+							/* @__PURE__ */ jsxs("div", {
+								className: "row",
+								children: [
+									isWon ? /* @__PURE__ */ jsx("button", {
+										className: "game-2048-button",
+										type: "button",
+										onClick: () => continuePlaying(),
+										children: "继续游戏"
+									}) : null,
+									isLost && !undoDisabled ? /* @__PURE__ */ jsx("button", {
+										className: "game-2048-button",
+										type: "button",
+										onClick: () => undo(),
+										children: "悔一步"
+									}) : null,
+									overlayVisible ? /* @__PURE__ */ jsx("button", {
+										className: "game-2048-button is-primary",
+										type: "button",
+										onClick: () => newGame(),
+										children: "再来一局"
+									}) : null
+								]
+							})
+						]
+					})
+				]
+			})
+		]
+	});
+}
+var Game2048 = forwardRef(Game2048Inner);
+Game2048.displayName = "Game2048";
+export { Game2048, useGame };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Game2048","aiBestMove"],"sources":["../src/useGame.ts","../src/Game2048.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  bestMove as aiBestMove,\n  Game2048,\n  type Direction,\n  type GameOptions,\n  type GameState\n} from '@my-games/2048-core';\n\n/**\n * `useGame` —— React Hook 版引擎桥接。\n *\n * - 引擎实例在 `useMemo` 里按 `size`/`saveKey` 等关键 prop 缓存，避免每次 render\n *   重新构造；这些 prop 变化 = 重开一局，视为预期语义。\n * - `useState` 订阅引擎快照；`useEffect` 里挂 unsubscribe 防泄漏。\n * - 用 `useRef` 保留最新 game 实例给 imperative handler（move / undo）用，\n *   防止闭包过期。\n */\nexport interface UseGameOptions extends GameOptions {\n  aiDepth?: number;\n}\n\nexport interface UseGameReturn {\n  state: GameState;\n  game: Game2048;\n  move: (dir: Direction) => boolean;\n  newGame: () => void;\n  undo: () => boolean;\n  continuePlaying: () => void;\n  suggestMove: () => Direction | null;\n  aiMove: () => Direction | null;\n}\n\nexport function useGame(options: UseGameOptions = {}): UseGameReturn {\n  const { aiDepth = 3, size, storage, saveKey, bestKey, freshStart, target, undoLimit, rng } = options;\n\n  // useMemo 依赖里不放 rng / storage（函数/对象引用不稳定；重开一次即可）\n  const game = useMemo(\n    () => new Game2048({ size, storage, saveKey, bestKey, freshStart, target, undoLimit, rng }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [size, saveKey, bestKey, target, undoLimit]\n  );\n\n  const gameRef = useRef(game);\n  gameRef.current = game;\n\n  const [state, setState] = useState<GameState>(() => game.getState());\n\n  useEffect(() => {\n    // 引擎替换时重新订阅；先把 state 拉齐到最新，防止首帧错位\n    setState(game.getState());\n    const unsub = game.subscribe((s) => setState(s));\n    return unsub;\n  }, [game]);\n\n  return {\n    state,\n    game,\n    move: (dir) => gameRef.current.move(dir),\n    newGame: () => gameRef.current.newGame(),\n    undo: () => gameRef.current.undo(),\n    continuePlaying: () => gameRef.current.continuePlaying(),\n    suggestMove: () => aiBestMove(gameRef.current.getGridValues(), { depth: aiDepth }),\n    aiMove: () => {\n      const dir = aiBestMove(gameRef.current.getGridValues(), { depth: aiDepth });\n      if (dir) gameRef.current.move(dir);\n      return dir;\n    }\n  };\n}\n","import {\n  type CSSProperties,\n  type Ref,\n  type TouchEvent as ReactTouchEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport '@my-games/2048-core/styles.css';\nimport type { Direction, SaveStorage } from '@my-games/2048-core';\nimport { useGame } from './useGame';\n\n/**\n * Game2048 —— React 18 组件。与 Vue 版行为对齐：\n * - 键盘：window keydown + 严格 focus 判定（多实例并存只活动那个响应）；\n *   方向键 / WASD。\n * - 触摸：单指 swipe 主导轴 ≥24px；touchstart 时把焦点抢过来。\n * - 动画：新块 / 合并 / 位移全走 core 的 styles.css。\n * - AI：`enableAI` prop 控制按钮渲染；通过 ref 一直可以命令式访问。\n */\n\nexport interface Game2048Props {\n  size?: 3 | 4 | 5 | 6;\n  storage?: SaveStorage | null;\n  saveKey?: string;\n  bestKey?: string;\n  freshStart?: boolean;\n  autofocus?: boolean;\n  enableAI?: boolean;\n  aiDepth?: number;\n  title?: string;\n  onMove?: (dir: Direction, gained: number) => void;\n  onWon?: () => void;\n  onLost?: () => void;\n  className?: string;\n}\n\nexport interface Game2048Handle {\n  suggestMove(): Direction | null;\n  aiMove(): Direction | null;\n  newGame(): void;\n  undo(): boolean;\n  move(dir: Direction): boolean;\n  continuePlaying(): void;\n}\n\nconst KEY_TO_DIR: Record<string, Direction> = {\n  ArrowUp: 'up',\n  ArrowDown: 'down',\n  ArrowLeft: 'left',\n  ArrowRight: 'right',\n  w: 'up',\n  a: 'left',\n  s: 'down',\n  d: 'right',\n  W: 'up',\n  A: 'left',\n  S: 'down',\n  D: 'right'\n};\n\nfunction cssVars(vars: Record<string, string | number>): CSSProperties {\n  return vars as CSSProperties;\n}\n\nfunction Game2048Inner(props: Game2048Props, ref: Ref<Game2048Handle>) {\n  const {\n    size = 4,\n    storage,\n    saveKey,\n    bestKey,\n    freshStart = false,\n    autofocus = true,\n    enableAI = false,\n    aiDepth = 3,\n    title = '2048',\n    onMove,\n    onWon,\n    onLost,\n    className\n  } = props;\n\n  const { state, move, newGame, undo, continuePlaying, suggestMove, aiMove } = useGame({\n    size,\n    storage,\n    saveKey,\n    bestKey,\n    freshStart,\n    aiDepth\n  });\n\n  const boardRef = useRef<HTMLDivElement>(null);\n  const touchStartPoint = useRef<{ x: number; y: number } | null>(null);\n  const lastScoreRef = useRef(state.score);\n  const lastStatusRef = useRef(state.status);\n\n  const [scoreDelta, setScoreDelta] = useState<{ amount: number; key: number } | null>(null);\n  const [aiHint, setAiHint] = useState<Direction | null>(null);\n  const deltaTimer = useRef<number | undefined>(undefined);\n\n  // --- 键盘 ---\n  const performMove = useCallback(\n    (dir: Direction) => {\n      const before = lastScoreRef.current;\n      const ok = move(dir);\n      if (ok) {\n        onMove?.(dir, state.score - before);\n        if (enableAI) setAiHint(null);\n      }\n    },\n    [move, onMove, state.score, enableAI]\n  );\n\n  useEffect(() => {\n    const handler = (ev: KeyboardEvent) => {\n      const dir = KEY_TO_DIR[ev.key];\n      if (!dir) return;\n      // 只有本实例 board 有 DOM 焦点时才响应\n      if (document.activeElement !== boardRef.current) return;\n      ev.preventDefault();\n      performMove(dir);\n    };\n    window.addEventListener('keydown', handler, { passive: false });\n    return () => window.removeEventListener('keydown', handler);\n  }, [performMove]);\n\n  useEffect(() => {\n    if (autofocus) boardRef.current?.focus({ preventScroll: true });\n  }, [autofocus]);\n\n  // --- 触摸 ---\n  const onTouchStart = (ev: ReactTouchEvent<HTMLDivElement>) => {\n    if (ev.touches.length !== 1) return;\n    const t = ev.touches[0];\n    if (!t) return;\n    touchStartPoint.current = { x: t.clientX, y: t.clientY };\n    boardRef.current?.focus({ preventScroll: true });\n  };\n  const onTouchEnd = (ev: ReactTouchEvent<HTMLDivElement>) => {\n    const start = touchStartPoint.current;\n    touchStartPoint.current = null;\n    if (!start) return;\n    const t = ev.changedTouches[0];\n    if (!t) return;\n    const dx = t.clientX - start.x;\n    const dy = t.clientY - start.y;\n    const adx = Math.abs(dx);\n    const ady = Math.abs(dy);\n    if (Math.max(adx, ady) < 24) return;\n    const dir: Direction = adx > ady ? (dx > 0 ? 'right' : 'left') : dy > 0 ? 'down' : 'up';\n    performMove(dir);\n  };\n\n  // --- 分数 delta 与状态副作用 ---\n  useEffect(() => {\n    const gained = state.score - lastScoreRef.current;\n    if (gained > 0) {\n      setScoreDelta({ amount: gained, key: Date.now() + Math.random() });\n      if (deltaTimer.current) window.clearTimeout(deltaTimer.current);\n      deltaTimer.current = window.setTimeout(() => setScoreDelta(null), 700);\n    }\n    lastScoreRef.current = state.score;\n  }, [state.score]);\n\n  useEffect(() => {\n    if (state.status === lastStatusRef.current) return;\n    if (state.status === 'won') onWon?.();\n    else if (state.status === 'lost') onLost?.();\n    lastStatusRef.current = state.status;\n  }, [state.status, onWon, onLost]);\n\n  useEffect(\n    () => () => {\n      if (deltaTimer.current) window.clearTimeout(deltaTimer.current);\n    },\n    []\n  );\n\n  // --- 渲染派生 ---\n  const gridStyle = useMemo(\n    () =>\n      cssVars({\n        gridTemplateColumns: `repeat(${state.size}, 1fr)`,\n        gridTemplateRows: `repeat(${state.size}, 1fr)`\n      }),\n    [state.size]\n  );\n  const boardVars = useMemo(() => cssVars({ '--cols': state.size }), [state.size]);\n  const undoDisabled = state.historySize === 0;\n  const overlayVisible = state.status !== 'playing';\n  const isWon = state.status === 'won';\n  const isLost = state.status === 'lost';\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      suggestMove,\n      aiMove,\n      newGame,\n      undo,\n      move,\n      continuePlaying\n    }),\n    [suggestMove, aiMove, newGame, undo, move, continuePlaying]\n  );\n\n  return (\n    <div className={['game-2048', className].filter(Boolean).join(' ')}>\n      {title ? (\n        <header className=\"game-2048-header\">\n          <h1 className=\"game-2048-title\">{title}</h1>\n          <div className=\"game-2048-scores\">\n            <div className=\"game-2048-score-box\">\n              <span className=\"label\">Score</span>\n              <span className=\"value\">{state.score}</span>\n              {scoreDelta ? (\n                <span key={scoreDelta.key} className=\"delta\">\n                  +{scoreDelta.amount}\n                </span>\n              ) : null}\n            </div>\n            <div className=\"game-2048-score-box\">\n              <span className=\"label\">Best</span>\n              <span className=\"value\">{state.bestScore}</span>\n            </div>\n          </div>\n        </header>\n      ) : null}\n\n      <div className=\"game-2048-toolbar\">\n        <p className=\"game-2048-desc\">\n          合并相同数字，冲过 <b>2048</b>。方向键 / WASD / 触屏滑动。\n        </p>\n        <div className=\"game-2048-actions\">\n          {enableAI ? (\n            <button\n              className=\"game-2048-button\"\n              type=\"button\"\n              disabled={isLost}\n              onClick={() => setAiHint(suggestMove())}\n            >\n              提示\n            </button>\n          ) : null}\n          {enableAI ? (\n            <button\n              className=\"game-2048-button\"\n              type=\"button\"\n              disabled={isLost}\n              onClick={() => {\n                const before = state.score;\n                const dir = aiMove();\n                if (dir) {\n                  onMove?.(dir, state.score - before);\n                  setAiHint(null);\n                }\n              }}\n            >\n              AI 帮走\n            </button>\n          ) : null}\n          <button\n            className=\"game-2048-button\"\n            type=\"button\"\n            disabled={undoDisabled}\n            onClick={() => undo()}\n          >\n            撤销\n          </button>\n          <button\n            className=\"game-2048-button is-primary\"\n            type=\"button\"\n            onClick={() => newGame()}\n          >\n            新游戏\n          </button>\n        </div>\n      </div>\n\n      <div\n        ref={boardRef}\n        className=\"game-2048-board\"\n        style={boardVars}\n        tabIndex={0}\n        role=\"application\"\n        aria-label={`2048 游戏板 ${state.status}`}\n        onTouchStart={onTouchStart}\n        onTouchEnd={onTouchEnd}\n      >\n        <div className=\"game-2048-grid\" style={gridStyle}>\n          {Array.from({ length: state.size * state.size }).map((_, i) => (\n            <div key={i} className=\"game-2048-cell\" />\n          ))}\n        </div>\n        <div className=\"game-2048-tile-layer\">\n          {state.tiles.map((t) => {\n            const cls = [\n              'game-2048-tile',\n              t.isNew ? 'is-new' : '',\n              t.merged ? 'is-merged' : '',\n              t.value > 2048 ? 'is-super' : ''\n            ]\n              .filter(Boolean)\n              .join(' ');\n            return (\n              <div\n                key={t.id}\n                className={cls}\n                style={cssVars({ '--row': t.row, '--col': t.col })}\n                data-value={t.value}\n                {...(t.value > 2048 ? { 'data-super': '1' } : {})}\n              >\n                {t.value}\n              </div>\n            );\n          })}\n        </div>\n\n        {enableAI && aiHint ? (\n          <div\n            className=\"game-2048-ai-indicator\"\n            style={cssVars({ position: 'absolute', top: '8px', left: '8px', zIndex: 3 })}\n          >\n            推荐：{aiHint}\n          </div>\n        ) : null}\n\n        <div\n          className={[\n            'game-2048-overlay',\n            overlayVisible ? 'is-visible' : '',\n            isWon ? 'is-won' : '',\n            isLost ? 'is-lost' : ''\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {isWon ? <h2>你赢了！</h2> : null}\n          {isLost ? <h2>游戏结束</h2> : null}\n          <div className=\"row\">\n            {isWon ? (\n              <button\n                className=\"game-2048-button\"\n                type=\"button\"\n                onClick={() => continuePlaying()}\n              >\n                继续游戏\n              </button>\n            ) : null}\n            {isLost && !undoDisabled ? (\n              <button\n                className=\"game-2048-button\"\n                type=\"button\"\n                onClick={() => undo()}\n              >\n                悔一步\n              </button>\n            ) : null}\n            {overlayVisible ? (\n              <button\n                className=\"game-2048-button is-primary\"\n                type=\"button\"\n                onClick={() => newGame()}\n              >\n                再来一局\n              </button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport const Game2048 = forwardRef(Game2048Inner);\nGame2048.displayName = 'Game2048';\n"],"mappings":"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"}

package/dist/useGame.d.ts

@@ -0,0 +1,25 @@
+import { Game2048, Direction, GameOptions, GameState } from '@my-games/2048-core';
+/**
+ * `useGame` —— React Hook 版引擎桥接。
+ *
+ * - 引擎实例在 `useMemo` 里按 `size`/`saveKey` 等关键 prop 缓存，避免每次 render
+ *   重新构造；这些 prop 变化 = 重开一局，视为预期语义。
+ * - `useState` 订阅引擎快照；`useEffect` 里挂 unsubscribe 防泄漏。
+ * - 用 `useRef` 保留最新 game 实例给 imperative handler（move / undo）用，
+ *   防止闭包过期。
+ */
+export interface UseGameOptions extends GameOptions {
+    aiDepth?: number;
+}
+export interface UseGameReturn {
+    state: GameState;
+    game: Game2048;
+    move: (dir: Direction) => boolean;
+    newGame: () => void;
+    undo: () => boolean;
+    continuePlaying: () => void;
+    suggestMove: () => Direction | null;
+    aiMove: () => Direction | null;
+}
+export declare function useGame(options?: UseGameOptions): UseGameReturn;
+//# sourceMappingURL=useGame.d.ts.map

package/dist/useGame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGame.d.ts","sourceRoot":"","sources":["../src/useGame.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,QAAQ,EACR,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,MAAM,qBAAqB,CAAC;AAE7B;;;;;;;;GAQG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,OAAO,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,SAAS,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,MAAM,SAAS,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,OAAO,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAoCnE"}

package/package.json

@@ -1,6 +1,71 @@
 {
   "name": "@my-games/2048-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "2048 游戏的 React 18/19 组件适配器（函数组件 + Hooks + forwardRef）。",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/index.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@my-games/2048-core": "0.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.5",
+    "vite-plugin-dts": "^5.1.2"
+  },
+  "keywords": [
+    "2048",
+    "react",
+    "react18",
+    "react19",
+    "game",
+    "puzzle",
+    "component",
+    "hooks"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "xyj2156"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/my-gam/2048.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/my-gam/2048/tree/main/packages/react#readme",
+  "bugs": {
+    "url": "https://github.com/my-gam/2048/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build --mode lib",
+    "dev": "vite build --mode lib --watch",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  }
 }