@my-games/2048-vue 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,79 @@
-# Temporary Holding Version
+# @my-games/2048-vue
 
-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 游戏的 Vue 3 组件适配器（Composition API + SFC）。
+
+## 安装
+
+```bash
+pnpm add @my-games/2048-vue vue
+```
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { Game2048 } from '@my-games/2048-vue';
+
+function onMove(dir, gained) {
+  console.log(dir, gained);
+}
+</script>
+
+<template>
+  <Game2048
+    :size="4"
+    save-key="my-app:2048:save"
+    best-key="my-app:2048:best"
+    :enable-ai="false"
+    @move="onMove"
+  />
+</template>
+```
+
+组件样式已经内嵌（`import '@my-games/2048-core/styles.css'`），不用额外引 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 |
+
+## 事件
+
+`move(dir, gained)` / `won()` / `lost()`
+
+## Ref 命令式方法
+
+`<script setup>` 里 `const g = ref<Game2048Instance>();` 后：
+
+- `g.value?.move(dir)`
+- `g.value?.newGame()` / `undo()` / `continuePlaying()`
+- `g.value?.suggestMove(): Direction | null` — 只查询建议
+- `g.value?.aiMove(): Direction | null` — 让 AI 走一步
+
+## Composable（想自己画 UI）
+
+```ts
+import { useGame } from '@my-games/2048-vue';
+
+const { state, move, suggestMove } = useGame({ size: 4 });
+```
+
+`state` 是 `ShallowRef<GameState>`，模板里 auto-unwrap 直接用。
+
+---
+
+完整玩法、引擎 API、设计取舍见仓库根 README：
+<https://github.com/my-gam/2048#readme>
+
+## License
+
+MIT.

package/dist/index.d.ts

@@ -0,0 +1,131 @@
+import { BoardSize } from '@my-games/2048-core';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { Direction } from '@my-games/2048-core';
+import { Game2048 as Game2048_2 } from '@my-games/2048-core';
+import { GameOptions } from '@my-games/2048-core';
+import { GameState } from '@my-games/2048-core';
+import { GameStatus } from '@my-games/2048-core';
+import { PublicProps } from 'vue';
+import { SaveStorage } from '@my-games/2048-core';
+import { ShallowRef } from 'vue';
+import { Tile } from '@my-games/2048-core';
+
+export { BoardSize }
+
+export { Direction }
+
+export declare const Game2048: DefineComponent<Props, {
+suggestMove: () => Direction | null;
+aiMove: () => Direction | null;
+newGame: () => void;
+undo: () => boolean;
+move: (dir: Direction) => boolean;
+continuePlaying: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+move: (dir: Direction, gained: number) => any;
+won: () => any;
+lost: () => any;
+}, string, PublicProps, Readonly<Props> & Readonly<{
+onMove?: ((dir: Direction, gained: number) => any) | undefined;
+onWon?: (() => any) | undefined;
+onLost?: (() => any) | undefined;
+}>, {
+aiDepth: number;
+size: 3 | 4 | 5 | 6;
+storage: SaveStorage | null;
+saveKey: string;
+bestKey: string;
+freshStart: boolean;
+autofocus: boolean;
+enableAI: boolean;
+title: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+boardEl: HTMLDivElement;
+}, HTMLDivElement>;
+
+/**
+ * 组件 `ref` 上暴露的方法（`defineExpose` 的对应类型）。
+ * 供父组件用 `const g = ref<Game2048Instance>()` 精确声明类型。
+ */
+export declare interface Game2048Instance {
+    suggestMove(): Direction | null;
+    aiMove(): Direction | null;
+    newGame(): void;
+    undo(): boolean;
+    move(dir: Direction): boolean;
+    continuePlaying(): void;
+}
+
+export { GameState }
+
+export { GameStatus }
+
+/**
+ * Game2048 —— Vue 3 官方组件。
+ *
+ * 输入模型：
+ * - 键盘：window 监听 keydown，但只有 board 元素拥有 DOM 焦点时才处理。
+ *   多实例并存时用户点击 / 触摸哪个，哪个成为「活动」实例；`autofocus=true`
+ *   （默认）让第一个实例在 mount 时自动 focus，符合单实例场景直觉。
+ * - 触摸：board 上的单指 swipe，主导轴决定方向；阈值 24px。
+ *
+ * 动画：
+ * - 新块：scale-in
+ * - 合并：pop 弹跳
+ * - 滑动：transform transition
+ *
+ * AI：`enableAI=true` 打开「提示」/「AI 帮走」按钮；未打开时依然可以通过
+ * template ref 拿到 `suggestMove` / `aiMove` 方法（`defineExpose`）。
+ */
+declare interface Props {
+    size?: 3 | 4 | 5 | 6;
+    storage?: SaveStorage | null;
+    saveKey?: string;
+    bestKey?: string;
+    freshStart?: boolean;
+    autofocus?: boolean;
+    enableAI?: boolean;
+    aiDepth?: number;
+    title?: string;
+}
+
+export { SaveStorage }
+
+export { Tile }
+
+export declare function useGame(options?: UseGameOptions): UseGameReturn;
+
+/**
+ * `useGame` —— Vue 侧连接 Game2048 引擎的 composable。
+ *
+ * 用法：
+ * ```ts
+ * const { state, move, newGame, undo } = useGame({ size: 4 });
+ * ```
+ *
+ * 生命周期：内部订阅引擎；`onBeforeUnmount` 时自动退订，防止内存泄漏。
+ * state 用 `shallowRef` 存 —— 引擎每次都推新对象，深度 reactive 无收益。
+ */
+export declare interface UseGameOptions extends GameOptions {
+    /** AI 搜索深度；仅 `aiMove` 用到。 */
+    aiDepth?: number;
+}
+
+export declare interface UseGameReturn {
+    /** 引擎的完整状态快照；用 ShallowRef 声明让 <script setup> 的模板能自动 unwrap。 */
+    state: ShallowRef<GameState>;
+    raw: Game2048_2;
+    move: (dir: Direction) => boolean;
+    newGame: () => void;
+    undo: () => boolean;
+    continuePlaying: () => void;
+    canUndo: () => boolean;
+    /** 让 AI 走一步（内部仍走 game.move 触发订阅）。 */
+    aiMove: () => Direction | null;
+    /** 只查询、不走子。 */
+    suggestMove: () => Direction | null;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,251 @@
+import { shallowRef as ae, onBeforeUnmount as O, defineComponent as le, ref as h, onMounted as ie, watch as N, computed as m, openBlock as l, createElementBlock as i, createElementVNode as a, toDisplayString as f, unref as u, createCommentVNode as c, createTextVNode as R, withModifiers as ue, normalizeStyle as U, Fragment as W, renderList as Y, mergeProps as re, normalizeClass as ce } from "vue";
+import { Game2048 as de, bestMove as F } from "@my-games/2048-core";
+function ve(d = {}) {
+  const { aiDepth: w = 3, ..._ } = d, n = new de(_), v = ae(n.getState()), s = n.subscribe((r) => {
+    v.value = r;
+  });
+  return O(s), {
+    state: v,
+    raw: n,
+    move: (r) => n.move(r),
+    newGame: () => n.newGame(),
+    undo: () => n.undo(),
+    continuePlaying: () => n.continuePlaying(),
+    canUndo: () => n.canUndo(),
+    suggestMove: () => F(n.getGridValues(), { depth: w }),
+    aiMove: () => {
+      const r = F(n.getGridValues(), { depth: w });
+      return r && n.move(r), r;
+    }
+  };
+}
+const me = { class: "game-2048" }, fe = {
+  key: 0,
+  class: "game-2048-header"
+}, be = { class: "game-2048-title" }, ge = { class: "game-2048-scores" }, ye = { class: "game-2048-score-box" }, pe = { class: "value" }, he = { class: "game-2048-score-box" }, we = { class: "value" }, ke = { class: "game-2048-toolbar" }, _e = { class: "game-2048-actions" }, Se = ["disabled"], Ae = ["disabled"], xe = ["disabled"], De = ["aria-label"], Te = { class: "game-2048-tile-layer" }, ze = ["data-value"], Ce = {
+  key: 0,
+  class: "game-2048-ai-indicator",
+  style: { position: "absolute", top: "8px", left: "8px", "z-index": "3" }
+}, Me = { key: 0 }, Ee = { key: 1 }, Ge = { class: "row" }, Ke = /* @__PURE__ */ le({
+  __name: "Game2048",
+  props: {
+    size: { default: 4 },
+    storage: { default: void 0 },
+    saveKey: { default: void 0 },
+    bestKey: { default: void 0 },
+    freshStart: { type: Boolean, default: !1 },
+    autofocus: { type: Boolean, default: !0 },
+    enableAI: { type: Boolean, default: !1 },
+    aiDepth: { default: 3 },
+    title: { default: "2048" }
+  },
+  emits: ["move", "won", "lost"],
+  setup(d, { expose: w, emit: _ }) {
+    const n = d, v = _, { state: s, move: r, newGame: S, undo: A, continuePlaying: T, suggestMove: z, aiMove: C } = ve({
+      size: n.size,
+      storage: n.storage,
+      saveKey: n.saveKey,
+      bestKey: n.bestKey,
+      freshStart: n.freshStart,
+      aiDepth: n.aiDepth
+    }), k = h(null), b = h(null), g = h(null), M = h(s.value.score), E = h(s.value.status);
+    let y;
+    const X = {
+      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 H() {
+      return typeof document > "u" ? !1 : document.activeElement === k.value;
+    }
+    function G(t) {
+      const e = X[t.key];
+      e && H() && (t.preventDefault(), I(e));
+    }
+    function I(t) {
+      const e = s.value.score;
+      r(t) && (v("move", t, s.value.score - e), n.enableAI && (g.value = null));
+    }
+    let x = null;
+    function j(t) {
+      var o;
+      if (t.touches.length !== 1) return;
+      const e = t.touches[0];
+      e && (x = { x: e.clientX, y: e.clientY }, (o = k.value) == null || o.focus({ preventScroll: !0 }));
+    }
+    function q(t) {
+      const e = x;
+      if (x = null, !e) return;
+      const o = t.changedTouches[0];
+      if (!o) return;
+      const V = o.clientX - e.x, $ = o.clientY - e.y, P = Math.abs(V), L = Math.abs($);
+      if (Math.max(P, L) < 24) return;
+      const ne = P > L ? V > 0 ? "right" : "left" : $ > 0 ? "down" : "up";
+      I(ne);
+    }
+    ie(() => {
+      var t;
+      n.autofocus && ((t = k.value) == null || t.focus({ preventScroll: !0 })), window.addEventListener("keydown", G, { passive: !1 });
+    }), O(() => {
+      window.removeEventListener("keydown", G), y && window.clearTimeout(y);
+    }), N(
+      () => s.value.score,
+      (t, e) => {
+        const o = t - (e ?? M.value);
+        o > 0 && (b.value = { amount: o, key: Date.now() + Math.random() }, y && window.clearTimeout(y), y = window.setTimeout(() => b.value = null, 700)), M.value = t;
+      }
+    ), N(
+      () => s.value.status,
+      (t) => {
+        t !== E.value && (t === "won" ? v("won") : t === "lost" && v("lost"), E.value = t);
+      }
+    );
+    const J = m(() => ({
+      gridTemplateColumns: `repeat(${s.value.size}, 1fr)`,
+      gridTemplateRows: `repeat(${s.value.size}, 1fr)`
+    })), Q = m(() => ({ "--cols": String(s.value.size) }));
+    function Z(t, e) {
+      return { "--row": String(t), "--col": String(e) };
+    }
+    function ee(t) {
+      return {
+        "is-new": t.isNew,
+        "is-merged": t.merged,
+        "is-super": t.value > 2048
+      };
+    }
+    function te(t) {
+      return t.value > 2048 ? { "data-super": "1" } : {};
+    }
+    const B = m(() => s.value.status !== "playing"), D = m(() => s.value.status === "won"), p = m(() => s.value.status === "lost"), K = m(() => s.value.historySize === 0);
+    function oe() {
+      g.value = z();
+    }
+    function se() {
+      const t = s.value.score, e = C();
+      e && (v("move", e, s.value.score - t), g.value = null);
+    }
+    return w({ suggestMove: z, aiMove: C, newGame: S, undo: A, move: r, continuePlaying: T }), (t, e) => (l(), i("div", me, [
+      d.title ? (l(), i("header", fe, [
+        a("h1", be, f(d.title), 1),
+        a("div", ge, [
+          a("div", ye, [
+            e[5] || (e[5] = a("span", { class: "label" }, "Score", -1)),
+            a("span", pe, f(u(s).score), 1),
+            b.value ? (l(), i("span", {
+              key: b.value.key,
+              class: "delta"
+            }, "+" + f(b.value.amount), 1)) : c("", !0)
+          ]),
+          a("div", he, [
+            e[6] || (e[6] = a("span", { class: "label" }, "Best", -1)),
+            a("span", we, f(u(s).bestScore), 1)
+          ])
+        ])
+      ])) : c("", !0),
+      a("div", ke, [
+        e[7] || (e[7] = a("p", { class: "game-2048-desc" }, [
+          R(" 合并相同数字，冲过 "),
+          a("b", null, "2048"),
+          R("。方向键 / WASD / 触屏滑动。 ")
+        ], -1)),
+        a("div", _e, [
+          d.enableAI ? (l(), i("button", {
+            key: 0,
+            class: "game-2048-button",
+            type: "button",
+            disabled: p.value,
+            onClick: oe
+          }, " 提示 ", 8, Se)) : c("", !0),
+          d.enableAI ? (l(), i("button", {
+            key: 1,
+            class: "game-2048-button",
+            type: "button",
+            disabled: p.value,
+            onClick: se
+          }, " AI 帮走 ", 8, Ae)) : c("", !0),
+          a("button", {
+            class: "game-2048-button",
+            type: "button",
+            disabled: K.value,
+            onClick: e[0] || (e[0] = (o) => u(A)())
+          }, " 撤销 ", 8, xe),
+          a("button", {
+            class: "game-2048-button is-primary",
+            type: "button",
+            onClick: e[1] || (e[1] = (o) => u(S)())
+          }, " 新游戏 ")
+        ])
+      ]),
+      a("div", {
+        ref_key: "boardEl",
+        ref: k,
+        class: "game-2048-board",
+        style: U(Q.value),
+        tabindex: "0",
+        role: "application",
+        "aria-label": `2048 游戏板 ${u(s).status}`,
+        onTouchstartPassive: j,
+        onTouchend: ue(q, ["prevent"])
+      }, [
+        a("div", {
+          class: "game-2048-grid",
+          style: U(J.value)
+        }, [
+          (l(!0), i(W, null, Y(u(s).size * u(s).size, (o) => (l(), i("div", {
+            key: o,
+            class: "game-2048-cell"
+          }))), 128))
+        ], 4),
+        a("div", Te, [
+          (l(!0), i(W, null, Y(u(s).tiles, (o) => (l(), i("div", re({
+            key: o.id,
+            class: ["game-2048-tile", ee(o)],
+            style: Z(o.row, o.col),
+            "data-value": o.value
+          }, { ref_for: !0 }, te(o)), f(o.value), 17, ze))), 128))
+        ]),
+        d.enableAI && g.value ? (l(), i("div", Ce, " 推荐：" + f(g.value), 1)) : c("", !0),
+        a("div", {
+          class: ce(["game-2048-overlay", { "is-visible": B.value, "is-won": D.value, "is-lost": p.value }])
+        }, [
+          D.value ? (l(), i("h2", Me, "你赢了！")) : p.value ? (l(), i("h2", Ee, "游戏结束")) : c("", !0),
+          a("div", Ge, [
+            D.value ? (l(), i("button", {
+              key: 0,
+              class: "game-2048-button",
+              type: "button",
+              onClick: e[2] || (e[2] = (o) => u(T)())
+            }, " 继续游戏 ")) : c("", !0),
+            p.value && !K.value ? (l(), i("button", {
+              key: 1,
+              class: "game-2048-button",
+              type: "button",
+              onClick: e[3] || (e[3] = (o) => u(A)())
+            }, " 悔一步 ")) : c("", !0),
+            B.value ? (l(), i("button", {
+              key: 2,
+              class: "game-2048-button is-primary",
+              type: "button",
+              onClick: e[4] || (e[4] = (o) => u(S)())
+            }, " 再来一局 ")) : c("", !0)
+          ])
+        ], 2)
+      ], 44, De)
+    ]));
+  }
+});
+export {
+  Ke as Game2048,
+  ve as useGame
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/useGame.ts","../src/Game2048.vue"],"sourcesContent":["import { onBeforeUnmount, shallowRef, type ShallowRef } from 'vue';\nimport { bestMove as aiBestMove, Game2048, type Direction, type GameOptions, type GameState } from '@my-games/2048-core';\n\n/**\n * `useGame` —— Vue 侧连接 Game2048 引擎的 composable。\n *\n * 用法：\n * ```ts\n * const { state, move, newGame, undo } = useGame({ size: 4 });\n * ```\n *\n * 生命周期：内部订阅引擎；`onBeforeUnmount` 时自动退订，防止内存泄漏。\n * state 用 `shallowRef` 存 —— 引擎每次都推新对象，深度 reactive 无收益。\n */\nexport interface UseGameOptions extends GameOptions {\n  /** AI 搜索深度；仅 `aiMove` 用到。 */\n  aiDepth?: number;\n}\n\nexport interface UseGameReturn {\n  /** 引擎的完整状态快照；用 ShallowRef 声明让 <script setup> 的模板能自动 unwrap。 */\n  state: ShallowRef<GameState>;\n  raw: Game2048;\n  move: (dir: Direction) => boolean;\n  newGame: () => void;\n  undo: () => boolean;\n  continuePlaying: () => void;\n  canUndo: () => boolean;\n  /** 让 AI 走一步（内部仍走 game.move 触发订阅）。 */\n  aiMove: () => Direction | null;\n  /** 只查询、不走子。 */\n  suggestMove: () => Direction | null;\n}\n\nexport function useGame(options: UseGameOptions = {}): UseGameReturn {\n  const { aiDepth = 3, ...engineOptions } = options;\n  const game = new Game2048(engineOptions);\n  const state = shallowRef<GameState>(game.getState());\n  const unsubscribe = game.subscribe((s) => {\n    state.value = s;\n  });\n  onBeforeUnmount(unsubscribe);\n\n  return {\n    state,\n    raw: game,\n    move: (dir) => game.move(dir),\n    newGame: () => game.newGame(),\n    undo: () => game.undo(),\n    continuePlaying: () => game.continuePlaying(),\n    canUndo: () => game.canUndo(),\n    suggestMove: () => aiBestMove(game.getGridValues(), { depth: aiDepth }),\n    aiMove: () => {\n      const dir = aiBestMove(game.getGridValues(), { depth: aiDepth });\n      if (dir) game.move(dir);\n      return dir;\n    }\n  };\n}\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport '@my-games/2048-core/styles.css';\nimport { useGame } from './useGame';\nimport type { Direction } from '@my-games/2048-core';\n\n/**\n * Game2048 —— Vue 3 官方组件。\n *\n * 输入模型：\n * - 键盘：window 监听 keydown，但只有 board 元素拥有 DOM 焦点时才处理。\n *   多实例并存时用户点击 / 触摸哪个，哪个成为「活动」实例；`autofocus=true`\n *   （默认）让第一个实例在 mount 时自动 focus，符合单实例场景直觉。\n * - 触摸：board 上的单指 swipe，主导轴决定方向；阈值 24px。\n *\n * 动画：\n * - 新块：scale-in\n * - 合并：pop 弹跳\n * - 滑动：transform transition\n *\n * AI：`enableAI=true` 打开「提示」/「AI 帮走」按钮；未打开时依然可以通过\n * template ref 拿到 `suggestMove` / `aiMove` 方法（`defineExpose`）。\n */\n\ninterface Props {\n  size?: 3 | 4 | 5 | 6;\n  storage?: import('@my-games/2048-core').SaveStorage | null;\n  saveKey?: string;\n  bestKey?: string;\n  freshStart?: boolean;\n  autofocus?: boolean;\n  enableAI?: boolean;\n  aiDepth?: number;\n  title?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 4,\n  storage: undefined,\n  saveKey: undefined,\n  bestKey: undefined,\n  freshStart: false,\n  autofocus: true,\n  enableAI: false,\n  aiDepth: 3,\n  title: '2048'\n});\n\nconst emit = defineEmits<{\n  (e: 'move', dir: Direction, gained: number): void;\n  (e: 'won'): void;\n  (e: 'lost'): void;\n}>();\n\nconst { state, move, newGame, undo, continuePlaying, suggestMove, aiMove } = useGame({\n  size: props.size,\n  storage: props.storage,\n  saveKey: props.saveKey,\n  bestKey: props.bestKey,\n  freshStart: props.freshStart,\n  aiDepth: props.aiDepth\n});\n\nconst boardEl = ref<HTMLDivElement | null>(null);\nconst scoreDelta = ref<{ amount: number; key: number } | null>(null);\nconst aiHint = ref<Direction | null>(null);\nconst lastScore = ref(state.value.score);\nconst lastStatus = ref(state.value.status);\nlet deltaTimer: number | undefined;\n\n// 手动 watch：Vue 的 watch 需要在 setup 里 import；这里用普通 getter 触发\n// 每次订阅推来的新 state 时，state.value 会变，computed 重算 → DOM 更新。\n// 分数变化与 status 变化通过在 update 回调里对比 last 值实现（见下方 subscribe 二次挂载）。\n// 简化：把状态变化处理放在 useGame 的订阅里；这里只保留必要的 reactive。\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 isBoardFocused(): boolean {\n  if (typeof document === 'undefined') return false;\n  return document.activeElement === boardEl.value;\n}\n\nfunction onKey(ev: KeyboardEvent) {\n  const dir = KEY_TO_DIR[ev.key];\n  if (!dir) return;\n  if (!isBoardFocused()) return;\n  ev.preventDefault();\n  performMove(dir);\n}\n\nfunction performMove(dir: Direction) {\n  const before = state.value.score;\n  const ok = move(dir);\n  if (ok) {\n    emit('move', dir, state.value.score - before);\n    if (props.enableAI) aiHint.value = null;\n  }\n}\n\n// --- 触摸 ---\nlet touchStartPoint: { x: number; y: number } | null = null;\nfunction onTouchStart(ev: TouchEvent) {\n  if (ev.touches.length !== 1) return;\n  const t = ev.touches[0];\n  if (!t) return;\n  touchStartPoint = { x: t.clientX, y: t.clientY };\n  // 触摸时把焦点转到本 board，让后续键盘操作也生效\n  boardEl.value?.focus({ preventScroll: true });\n}\nfunction onTouchEnd(ev: TouchEvent) {\n  const start = touchStartPoint;\n  touchStartPoint = 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\nonMounted(() => {\n  if (props.autofocus) boardEl.value?.focus({ preventScroll: true });\n  window.addEventListener('keydown', onKey, { passive: false });\n});\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keydown', onKey);\n  if (deltaTimer) window.clearTimeout(deltaTimer);\n});\n\n// --- 分数 & 状态 side-effect ---\nwatch(\n  () => state.value.score,\n  (now, prev) => {\n    const gained = now - (prev ?? lastScore.value);\n    if (gained > 0) {\n      scoreDelta.value = { amount: gained, key: Date.now() + Math.random() };\n      if (deltaTimer) window.clearTimeout(deltaTimer);\n      deltaTimer = window.setTimeout(() => (scoreDelta.value = null), 700);\n    }\n    lastScore.value = now;\n  }\n);\nwatch(\n  () => state.value.status,\n  (s) => {\n    if (s === lastStatus.value) return;\n    if (s === 'won') emit('won');\n    else if (s === 'lost') emit('lost');\n    lastStatus.value = s;\n  }\n);\n\n// --- 渲染辅助 ---\nconst gridStyle = computed(() => ({\n  gridTemplateColumns: `repeat(${state.value.size}, 1fr)`,\n  gridTemplateRows: `repeat(${state.value.size}, 1fr)`\n}));\n\nconst boardVars = computed(() => ({ '--cols': String(state.value.size) }));\n\nfunction tileVars(row: number, col: number) {\n  return { '--row': String(row), '--col': String(col) } as Record<string, string>;\n}\n\nfunction tileClass(t: { value: number; isNew: boolean; merged: boolean }) {\n  return {\n    'is-new': t.isNew,\n    'is-merged': t.merged,\n    'is-super': t.value > 2048\n  };\n}\n\nfunction tileAttrs(t: { value: number }) {\n  return t.value > 2048\n    ? { 'data-super': '1' }\n    : {};\n}\n\nconst overlayVisible = computed(() => state.value.status !== 'playing');\nconst isWon = computed(() => state.value.status === 'won');\nconst isLost = computed(() => state.value.status === 'lost');\nconst undoDisabled = computed(() => state.value.historySize === 0);\n\n// --- AI ---\nfunction onAskAI() {\n  aiHint.value = suggestMove();\n}\nfunction onDoAI() {\n  const before = state.value.score;\n  const dir = aiMove();\n  if (dir) {\n    emit('move', dir, state.value.score - before);\n    aiHint.value = null;\n  }\n}\n\ndefineExpose({ suggestMove, aiMove, newGame, undo, move, continuePlaying });\n</script>\n\n<template>\n  <div class=\"game-2048\">\n    <header v-if=\"title\" class=\"game-2048-header\">\n      <h1 class=\"game-2048-title\">{{ title }}</h1>\n      <div class=\"game-2048-scores\">\n        <div class=\"game-2048-score-box\">\n          <span class=\"label\">Score</span>\n          <span class=\"value\">{{ state.score }}</span>\n          <span\n            v-if=\"scoreDelta\"\n            :key=\"scoreDelta.key\"\n            class=\"delta\"\n            >+{{ scoreDelta.amount }}</span\n          >\n        </div>\n        <div class=\"game-2048-score-box\">\n          <span class=\"label\">Best</span>\n          <span class=\"value\">{{ state.bestScore }}</span>\n        </div>\n      </div>\n    </header>\n\n    <div class=\"game-2048-toolbar\">\n      <p class=\"game-2048-desc\">\n        合并相同数字，冲过 <b>2048</b>。方向键 / WASD / 触屏滑动。\n      </p>\n      <div class=\"game-2048-actions\">\n        <button\n          v-if=\"enableAI\"\n          class=\"game-2048-button\"\n          type=\"button\"\n          :disabled=\"isLost\"\n          @click=\"onAskAI\"\n        >\n          提示\n        </button>\n        <button\n          v-if=\"enableAI\"\n          class=\"game-2048-button\"\n          type=\"button\"\n          :disabled=\"isLost\"\n          @click=\"onDoAI\"\n        >\n          AI 帮走\n        </button>\n        <button class=\"game-2048-button\" type=\"button\" :disabled=\"undoDisabled\" @click=\"undo()\">\n          撤销\n        </button>\n        <button class=\"game-2048-button is-primary\" type=\"button\" @click=\"newGame()\">\n          新游戏\n        </button>\n      </div>\n    </div>\n\n    <div\n      ref=\"boardEl\"\n      class=\"game-2048-board\"\n      :style=\"boardVars\"\n      tabindex=\"0\"\n      role=\"application\"\n      :aria-label=\"`2048 游戏板 ${state.status}`\"\n      @touchstart.passive=\"onTouchStart\"\n      @touchend.prevent=\"onTouchEnd\"\n    >\n      <div class=\"game-2048-grid\" :style=\"gridStyle\">\n        <div v-for=\"i in state.size * state.size\" :key=\"i\" class=\"game-2048-cell\" />\n      </div>\n      <div class=\"game-2048-tile-layer\">\n        <div\n          v-for=\"t in state.tiles\"\n          :key=\"t.id\"\n          class=\"game-2048-tile\"\n          :class=\"tileClass(t)\"\n          :style=\"tileVars(t.row, t.col)\"\n          :data-value=\"t.value\"\n          v-bind=\"tileAttrs(t)\"\n        >\n          {{ t.value }}\n        </div>\n      </div>\n\n      <div\n        v-if=\"enableAI && aiHint\"\n        class=\"game-2048-ai-indicator\"\n        style=\"position: absolute; top: 8px; left: 8px; z-index: 3\"\n      >\n        推荐：{{ aiHint }}\n      </div>\n\n      <div\n        class=\"game-2048-overlay\"\n        :class=\"{ 'is-visible': overlayVisible, 'is-won': isWon, 'is-lost': isLost }\"\n      >\n        <h2 v-if=\"isWon\">你赢了！</h2>\n        <h2 v-else-if=\"isLost\">游戏结束</h2>\n        <div class=\"row\">\n          <button v-if=\"isWon\" class=\"game-2048-button\" type=\"button\" @click=\"continuePlaying()\">\n            继续游戏\n          </button>\n          <button\n            v-if=\"isLost && !undoDisabled\"\n            class=\"game-2048-button\"\n            type=\"button\"\n            @click=\"undo()\"\n          >\n            悔一步\n          </button>\n          <button\n            v-if=\"overlayVisible\"\n            class=\"game-2048-button is-primary\"\n            type=\"button\"\n            @click=\"newGame()\"\n          >\n            再来一局\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["useGame","options","aiDepth","engineOptions","game","Game2048","state","shallowRef","unsubscribe","s","onBeforeUnmount","dir","aiBestMove","props","__props","emit","__emit","move","newGame","undo","continuePlaying","suggestMove","aiMove","boardEl","ref","scoreDelta","aiHint","lastScore","lastStatus","deltaTimer","KEY_TO_DIR","isBoardFocused","onKey","ev","performMove","before","touchStartPoint","onTouchStart","t","_a","onTouchEnd","start","dx","dy","adx","ady","onMounted","watch","now","prev","gained","gridStyle","computed","boardVars","tileVars","row","col","tileClass","tileAttrs","overlayVisible","isWon","isLost","undoDisabled","onAskAI","onDoAI","__expose","_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","_toDisplayString","_hoisted_4","_hoisted_5","_cache","_hoisted_6","_unref","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_Fragment","_renderList","i","_hoisted_15","_mergeProps","_hoisted_16","_hoisted_17","_hoisted_20"],"mappings":";;AAkCO,SAASA,GAAQC,IAA0B,IAAmB;AACnE,QAAM,EAAE,SAAAC,IAAU,GAAG,GAAGC,MAAkBF,GACpCG,IAAO,IAAIC,GAASF,CAAa,GACjCG,IAAQC,GAAsBH,EAAK,SAAA,CAAU,GAC7CI,IAAcJ,EAAK,UAAU,CAACK,MAAM;AACxC,IAAAH,EAAM,QAAQG;AAAA,EAChB,CAAC;AACD,SAAAC,EAAgBF,CAAW,GAEpB;AAAA,IACL,OAAAF;AAAA,IACA,KAAKF;AAAA,IACL,MAAM,CAACO,MAAQP,EAAK,KAAKO,CAAG;AAAA,IAC5B,SAAS,MAAMP,EAAK,QAAA;AAAA,IACpB,MAAM,MAAMA,EAAK,KAAA;AAAA,IACjB,iBAAiB,MAAMA,EAAK,gBAAA;AAAA,IAC5B,SAAS,MAAMA,EAAK,QAAA;AAAA,IACpB,aAAa,MAAMQ,EAAWR,EAAK,iBAAiB,EAAE,OAAOF,GAAS;AAAA,IACtE,QAAQ,MAAM;AACZ,YAAMS,IAAMC,EAAWR,EAAK,cAAA,GAAiB,EAAE,OAAOF,GAAS;AAC/D,aAAIS,KAAKP,EAAK,KAAKO,CAAG,GACfA;AAAA,IACT;AAAA,EAAA;AAEJ;;;;;;;;;;;;;;;;;;;;;;;ACtBA,UAAME,IAAQC,GAYRC,IAAOC,GAMP,EAAE,OAAAV,GAAO,MAAAW,GAAM,SAAAC,GAAS,MAAAC,GAAM,iBAAAC,GAAiB,aAAAC,GAAa,QAAAC,EAAA,IAAWtB,GAAQ;AAAA,MACnF,MAAMa,EAAM;AAAA,MACZ,SAASA,EAAM;AAAA,MACf,SAASA,EAAM;AAAA,MACf,SAASA,EAAM;AAAA,MACf,YAAYA,EAAM;AAAA,MAClB,SAASA,EAAM;AAAA,IAAA,CAChB,GAEKU,IAAUC,EAA2B,IAAI,GACzCC,IAAaD,EAA4C,IAAI,GAC7DE,IAASF,EAAsB,IAAI,GACnCG,IAAYH,EAAIlB,EAAM,MAAM,KAAK,GACjCsB,IAAaJ,EAAIlB,EAAM,MAAM,MAAM;AACzC,QAAIuB;AAQJ,UAAMC,IAAwC;AAAA,MAC5C,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAGL,aAASC,IAA0B;AACjC,aAAI,OAAO,WAAa,MAAoB,KACrC,SAAS,kBAAkBR,EAAQ;AAAA,IAC5C;AAEA,aAASS,EAAMC,GAAmB;AAChC,YAAMtB,IAAMmB,EAAWG,EAAG,GAAG;AAC7B,MAAKtB,KACAoB,QACLE,EAAG,eAAA,GACHC,EAAYvB,CAAG;AAAA,IACjB;AAEA,aAASuB,EAAYvB,GAAgB;AACnC,YAAMwB,IAAS7B,EAAM,MAAM;AAE3B,MADWW,EAAKN,CAAG,MAEjBI,EAAK,QAAQJ,GAAKL,EAAM,MAAM,QAAQ6B,CAAM,GACxCtB,EAAM,aAAUa,EAAO,QAAQ;AAAA,IAEvC;AAGA,QAAIU,IAAmD;AACvD,aAASC,EAAaJ,GAAgB;;AACpC,UAAIA,EAAG,QAAQ,WAAW,EAAG;AAC7B,YAAMK,IAAIL,EAAG,QAAQ,CAAC;AACtB,MAAKK,MACLF,IAAkB,EAAE,GAAGE,EAAE,SAAS,GAAGA,EAAE,QAAA,IAEvCC,IAAAhB,EAAQ,UAAR,QAAAgB,EAAe,MAAM,EAAE,eAAe;IACxC;AACA,aAASC,EAAWP,GAAgB;AAClC,YAAMQ,IAAQL;AAEd,UADAA,IAAkB,MACd,CAACK,EAAO;AACZ,YAAMH,IAAIL,EAAG,eAAe,CAAC;AAC7B,UAAI,CAACK,EAAG;AACR,YAAMI,IAAKJ,EAAE,UAAUG,EAAM,GACvBE,IAAKL,EAAE,UAAUG,EAAM,GACvBG,IAAM,KAAK,IAAIF,CAAE,GACjBG,IAAM,KAAK,IAAIF,CAAE;AACvB,UAAI,KAAK,IAAIC,GAAKC,CAAG,IAAI,GAAI;AAC7B,YAAMlC,KAAiBiC,IAAMC,IAAOH,IAAK,IAAI,UAAU,SAAUC,IAAK,IAAI,SAAS;AACnF,MAAAT,EAAYvB,EAAG;AAAA,IACjB;AAEA,IAAAmC,GAAU,MAAM;;AACd,MAAIjC,EAAM,eAAW0B,IAAAhB,EAAQ,UAAR,QAAAgB,EAAe,MAAM,EAAE,eAAe,QAC3D,OAAO,iBAAiB,WAAWP,GAAO,EAAE,SAAS,IAAO;AAAA,IAC9D,CAAC,GAEDtB,EAAgB,MAAM;AACpB,aAAO,oBAAoB,WAAWsB,CAAK,GACvCH,KAAY,OAAO,aAAaA,CAAU;AAAA,IAChD,CAAC,GAGDkB;AAAA,MACE,MAAMzC,EAAM,MAAM;AAAA,MAClB,CAAC0C,GAAKC,MAAS;AACb,cAAMC,IAASF,KAAOC,KAAQtB,EAAU;AACxC,QAAIuB,IAAS,MACXzB,EAAW,QAAQ,EAAE,QAAQyB,GAAQ,KAAK,KAAK,IAAA,IAAQ,KAAK,SAAO,GAC/DrB,KAAY,OAAO,aAAaA,CAAU,GAC9CA,IAAa,OAAO,WAAW,MAAOJ,EAAW,QAAQ,MAAO,GAAG,IAErEE,EAAU,QAAQqB;AAAA,MACpB;AAAA,IAAA,GAEFD;AAAA,MACE,MAAMzC,EAAM,MAAM;AAAA,MAClB,CAACG,MAAM;AACL,QAAIA,MAAMmB,EAAW,UACjBnB,MAAM,QAAOM,EAAK,KAAK,IAClBN,MAAM,UAAQM,EAAK,MAAM,GAClCa,EAAW,QAAQnB;AAAA,MACrB;AAAA,IAAA;AAIF,UAAM0C,IAAYC,EAAS,OAAO;AAAA,MAChC,qBAAqB,UAAU9C,EAAM,MAAM,IAAI;AAAA,MAC/C,kBAAkB,UAAUA,EAAM,MAAM,IAAI;AAAA,IAAA,EAC5C,GAEI+C,IAAYD,EAAS,OAAO,EAAE,UAAU,OAAO9C,EAAM,MAAM,IAAI,EAAA,EAAI;AAEzE,aAASgD,EAASC,GAAaC,GAAa;AAC1C,aAAO,EAAE,SAAS,OAAOD,CAAG,GAAG,SAAS,OAAOC,CAAG,EAAA;AAAA,IACpD;AAEA,aAASC,GAAU,GAAuD;AACxE,aAAO;AAAA,QACL,UAAU,EAAE;AAAA,QACZ,aAAa,EAAE;AAAA,QACf,YAAY,EAAE,QAAQ;AAAA,MAAA;AAAA,IAE1B;AAEA,aAASC,GAAU,GAAsB;AACvC,aAAO,EAAE,QAAQ,OACb,EAAE,cAAc,IAAA,IAChB,CAAA;AAAA,IACN;AAEA,UAAMC,IAAiBP,EAAS,MAAM9C,EAAM,MAAM,WAAW,SAAS,GAChEsD,IAAQR,EAAS,MAAM9C,EAAM,MAAM,WAAW,KAAK,GACnDuD,IAAST,EAAS,MAAM9C,EAAM,MAAM,WAAW,MAAM,GACrDwD,IAAeV,EAAS,MAAM9C,EAAM,MAAM,gBAAgB,CAAC;AAGjE,aAASyD,KAAU;AACjB,MAAArC,EAAO,QAAQL,EAAA;AAAA,IACjB;AACA,aAAS2C,KAAS;AAChB,YAAM7B,IAAS7B,EAAM,MAAM,OACrBK,IAAMW,EAAA;AACZ,MAAIX,MACFI,EAAK,QAAQJ,GAAKL,EAAM,MAAM,QAAQ6B,CAAM,GAC5CT,EAAO,QAAQ;AAAA,IAEnB;AAEA,WAAAuC,EAAa,EAAE,aAAA5C,GAAa,QAAAC,GAAQ,SAAAJ,GAAS,MAAAC,GAAM,MAAAF,GAAM,iBAAAG,GAAiB,cAIxE8C,EAAA,GAAAC,EAqHM,OArHNC,IAqHM;AAAA,MApHUtD,EAAA,SAAdoD,EAAA,GAAAC,EAkBS,UAlBTE,IAkBS;AAAA,QAjBPC,EAA4C,MAA5CC,IAA4CC,EAAb1D,EAAA,KAAK,GAAA,CAAA;AAAA,QACpCwD,EAeM,OAfNG,IAeM;AAAA,UAdJH,EASM,OATNI,IASM;AAAA,YARJC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAL,EAAgC,QAAA,EAA1B,OAAM,QAAA,GAAQ,SAAK,EAAA;AAAA,YACzBA,EAA4C,QAA5CM,IAA4CJ,EAArBK,EAAAvE,CAAA,EAAM,KAAK,GAAA,CAAA;AAAA,YAE1BmB,EAAA,cADR0C,EAKC,QAAA;AAAA,cAHE,KAAK1C,EAAA,MAAW;AAAA,cACjB,OAAM;AAAA,YAAA,GACL,MAAC+C,EAAG/C,EAAA,MAAW,MAAM,GAAA,CAAA;;UAG1B6C,EAGM,OAHNQ,IAGM;AAAA,YAFJH,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAL,EAA+B,QAAA,EAAzB,OAAM,QAAA,GAAQ,QAAI,EAAA;AAAA,YACxBA,EAAgD,QAAhDS,IAAgDP,EAAzBK,EAAAvE,CAAA,EAAM,SAAS,GAAA,CAAA;AAAA,UAAA;;;MAK5CgE,EA8BM,OA9BNU,IA8BM;AAAA,wBA7BJV,EAEI,KAAA,EAFD,OAAM,oBAAgB;AAAA,YAAC,aACd;AAAA,UAAAA,EAAW,WAAR,MAAI;AAAA,YAAI,sBACvB;AAAA,QAAA;QACAA,EAyBM,OAzBNW,IAyBM;AAAA,UAvBInE,EAAA,iBADRqD,EAQS,UAAA;AAAA;YANP,OAAM;AAAA,YACN,MAAK;AAAA,YACJ,UAAUN,EAAA;AAAA,YACV,SAAOE;AAAA,UAAA,GACT,QAED,GAAAmB,EAAA;UAEQpE,EAAA,iBADRqD,EAQS,UAAA;AAAA;YANP,OAAM;AAAA,YACN,MAAK;AAAA,YACJ,UAAUN,EAAA;AAAA,YACV,SAAOG;AAAA,UAAA,GACT,WAED,GAAAmB,EAAA;UACAb,EAES,UAAA;AAAA,YAFD,OAAM;AAAA,YAAmB,MAAK;AAAA,YAAU,UAAUR,EAAA;AAAA,YAAe,gCAAOe,EAAA1D,CAAA,EAAA;AAAA,UAAI,GAAI,QAExF,GAAAiE,EAAA;AAAA,UACAd,EAES,UAAA;AAAA,YAFD,OAAM;AAAA,YAA8B,MAAK;AAAA,YAAU,gCAAOO,EAAA3D,CAAA,EAAA;AAAA,UAAO,GAAI,OAE7E;AAAA,QAAA;;MAIJoD,EA+DM,OAAA;AAAA,iBA9DA;AAAA,QAAJ,KAAI/C;AAAA,QACJ,OAAM;AAAA,QACL,SAAO8B,EAAA,KAAS;AAAA,QACjB,UAAS;AAAA,QACT,MAAK;AAAA,QACJ,cAAU,YAAcwB,EAAAvE,CAAA,EAAM,MAAM;AAAA,6BAChB+B;AAAA,QACpB,eAAkBG,GAAU,CAAA,SAAA,CAAA;AAAA,MAAA;QAE7B8B,EAEM,OAAA;AAAA,UAFD,OAAM;AAAA,UAAkB,SAAOnB,EAAA,KAAS;AAAA,QAAA;kBAC3CgB,EAA4EkB,GAAA,MAAAC,EAA3DT,KAAM,OAAOA,EAAAvE,CAAA,EAAM,MAAI,CAA5BiF,YAAZpB,EAA4E,OAAA;AAAA,YAAjC,KAAKoB;AAAA,YAAG,OAAM;AAAA,UAAA;;QAE3DjB,EAYM,OAZNkB,IAYM;AAAA,WAXJtB,EAAA,EAAA,GAAAC,EAUMkB,GAAA,MAAAC,EATQT,EAAAvE,CAAA,EAAM,QAAXgC,OADT4B,EAAA,GAAAC,EAUM,OAVNsB,GAUM;AAAA,YARH,KAAKnD,EAAE;AAAA,YACR,OAAK,CAAC,kBACEmB,GAAUnB,CAAC,CAAA;AAAA,YAClB,OAAOgB,EAAShB,EAAE,KAAKA,EAAE,GAAG;AAAA,YAC5B,cAAYA,EAAE;AAAA,UAAA,GACP,EAAA,SAAA,GAAA,GAAAoB,GAAUpB,CAAC,CAAA,GAAAkC,EAEhBlC,EAAE,KAAK,GAAA,IAAAoD,EAAA;;QAKN5E,EAAA,YAAYY,EAAA,SADpBwC,KAAAC,EAMM,OANNwB,IAIC,WACOjE,EAAA,KAAM,GAAA,CAAA;QAGd4C,EA2BM,OAAA;AAAA,UA1BJ,WAAM,qBAAmB,EAAA,cACDX,SAAc,UAAYC,EAAA,kBAAkBC,EAAA,MAAA,CAAM,CAAA;AAAA,QAAA;UAEhED,EAAA,SAAVM,KAAAC,EAA0B,UAAT,MAAI,KACNN,EAAA,SAAfK,EAAA,GAAAC,EAAgC,UAAT,MAAI;UAC3BG,EAoBM,OApBNsB,IAoBM;AAAA,YAnBUhC,EAAA,cAAdO,EAES,UAAA;AAAA;cAFY,OAAM;AAAA,cAAmB,MAAK;AAAA,cAAU,gCAAOU,EAAAzD,CAAA,EAAA;AAAA,YAAe,GAAI,QAEvF;YAEQyC,EAAA,UAAWC,EAAA,cADnBK,EAOS,UAAA;AAAA;cALP,OAAM;AAAA,cACN,MAAK;AAAA,cACJ,gCAAOU,EAAA1D,CAAA,EAAA;AAAA,YAAI,GACb,OAED;YAEQwC,EAAA,cADRQ,EAOS,UAAA;AAAA;cALP,OAAM;AAAA,cACN,MAAK;AAAA,cACJ,gCAAOU,EAAA3D,CAAA,EAAA;AAAA,YAAO,GAChB,QAED;;;;;;;"}

package/dist/style.css

@@ -0,0 +1 @@
+.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, .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);-webkit-user-select:none;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:#776e65;font-weight:700;font-size:14px;animation:game-2048-score-pop .7s ease-out forwards;pointer-events:none}@keyframes game-2048-score-pop{0%{opacity:1;transform:translateY(0)}to{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:.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 .12s,transform 80ms}.game-2048-button:hover:not(:disabled){background:#a68472}.game-2048-button:active:not(:disabled){transform:translateY(1px)}.game-2048-button:disabled{opacity:.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 #8f7a6680}.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;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 .12s ease-in-out;will-change:transform}.game-2048-tile.is-new{animation:game-2048-tile-spawn .18s ease-out}.game-2048-tile.is-merged{animation:game-2048-tile-pop .18s 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(.3)}to{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)}to{transform:translate(calc(var(--col) * var(--pitch-x)),calc(var(--row) * var(--pitch-y))) scale(1)}}.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 #f3d77499}.game-2048-tile[data-super="1"]{background:#3c3a33;color:var(--text-light);font-size:clamp(14px,5vw,28px)}.game-2048-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:var(--radius);background:#eee4daba;color:var(--text-dark);text-align:center;opacity:0;pointer-events:none;transition:opacity .22s ease-in;z-index:10}.game-2048-overlay.is-visible{opacity:1;pointer-events:auto}.game-2048-overlay.is-lost{background:#eee4da80}.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,.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:#8f7a6624;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}}

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@my-games/2048-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "2048 游戏的 Vue 3 组件适配器（Composition API）。",
+  "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": "@my-games/2048-core/styles.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "@my-games/2048-core": "0.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "typescript": "^5.9.3",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vue": "^3.5.12",
+    "vue-tsc": "^2.2.12"
+  },
+  "keywords": [
+    "2048",
+    "vue",
+    "vue3",
+    "game",
+    "puzzle",
+    "component"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "xyj2156"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/my-gam/2048.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://github.com/my-gam/2048/tree/main/packages/vue#readme",
+  "bugs": {
+    "url": "https://github.com/my-gam/2048/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build --mode lib",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
+  }
 }

package/src/Game2048.vue

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import '@my-games/2048-core/styles.css';
+import { useGame } from './useGame';
+import type { Direction } from '@my-games/2048-core';
+
+/**
+ * Game2048 —— Vue 3 官方组件。
+ *
+ * 输入模型：
+ * - 键盘：window 监听 keydown，但只有 board 元素拥有 DOM 焦点时才处理。
+ *   多实例并存时用户点击 / 触摸哪个，哪个成为「活动」实例；`autofocus=true`
+ *   （默认）让第一个实例在 mount 时自动 focus，符合单实例场景直觉。
+ * - 触摸：board 上的单指 swipe，主导轴决定方向；阈值 24px。
+ *
+ * 动画：
+ * - 新块：scale-in
+ * - 合并：pop 弹跳
+ * - 滑动：transform transition
+ *
+ * AI：`enableAI=true` 打开「提示」/「AI 帮走」按钮；未打开时依然可以通过
+ * template ref 拿到 `suggestMove` / `aiMove` 方法（`defineExpose`）。
+ */
+
+interface Props {
+  size?: 3 | 4 | 5 | 6;
+  storage?: import('@my-games/2048-core').SaveStorage | null;
+  saveKey?: string;
+  bestKey?: string;
+  freshStart?: boolean;
+  autofocus?: boolean;
+  enableAI?: boolean;
+  aiDepth?: number;
+  title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 4,
+  storage: undefined,
+  saveKey: undefined,
+  bestKey: undefined,
+  freshStart: false,
+  autofocus: true,
+  enableAI: false,
+  aiDepth: 3,
+  title: '2048'
+});
+
+const emit = defineEmits<{
+  (e: 'move', dir: Direction, gained: number): void;
+  (e: 'won'): void;
+  (e: 'lost'): void;
+}>();
+
+const { state, move, newGame, undo, continuePlaying, suggestMove, aiMove } = useGame({
+  size: props.size,
+  storage: props.storage,
+  saveKey: props.saveKey,
+  bestKey: props.bestKey,
+  freshStart: props.freshStart,
+  aiDepth: props.aiDepth
+});
+
+const boardEl = ref<HTMLDivElement | null>(null);
+const scoreDelta = ref<{ amount: number; key: number } | null>(null);
+const aiHint = ref<Direction | null>(null);
+const lastScore = ref(state.value.score);
+const lastStatus = ref(state.value.status);
+let deltaTimer: number | undefined;
+
+// 手动 watch：Vue 的 watch 需要在 setup 里 import；这里用普通 getter 触发
+// 每次订阅推来的新 state 时，state.value 会变，computed 重算 → DOM 更新。
+// 分数变化与 status 变化通过在 update 回调里对比 last 值实现（见下方 subscribe 二次挂载）。
+// 简化：把状态变化处理放在 useGame 的订阅里；这里只保留必要的 reactive。
+
+// --- 键盘 ---
+const KEY_TO_DIR: Record<string, Direction> = {
+  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 isBoardFocused(): boolean {
+  if (typeof document === 'undefined') return false;
+  return document.activeElement === boardEl.value;
+}
+
+function onKey(ev: KeyboardEvent) {
+  const dir = KEY_TO_DIR[ev.key];
+  if (!dir) return;
+  if (!isBoardFocused()) return;
+  ev.preventDefault();
+  performMove(dir);
+}
+
+function performMove(dir: Direction) {
+  const before = state.value.score;
+  const ok = move(dir);
+  if (ok) {
+    emit('move', dir, state.value.score - before);
+    if (props.enableAI) aiHint.value = null;
+  }
+}
+
+// --- 触摸 ---
+let touchStartPoint: { x: number; y: number } | null = null;
+function onTouchStart(ev: TouchEvent) {
+  if (ev.touches.length !== 1) return;
+  const t = ev.touches[0];
+  if (!t) return;
+  touchStartPoint = { x: t.clientX, y: t.clientY };
+  // 触摸时把焦点转到本 board，让后续键盘操作也生效
+  boardEl.value?.focus({ preventScroll: true });
+}
+function onTouchEnd(ev: TouchEvent) {
+  const start = touchStartPoint;
+  touchStartPoint = 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;
+  const dir: Direction = adx > ady ? (dx > 0 ? 'right' : 'left') : dy > 0 ? 'down' : 'up';
+  performMove(dir);
+}
+
+onMounted(() => {
+  if (props.autofocus) boardEl.value?.focus({ preventScroll: true });
+  window.addEventListener('keydown', onKey, { passive: false });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKey);
+  if (deltaTimer) window.clearTimeout(deltaTimer);
+});
+
+// --- 分数 & 状态 side-effect ---
+watch(
+  () => state.value.score,
+  (now, prev) => {
+    const gained = now - (prev ?? lastScore.value);
+    if (gained > 0) {
+      scoreDelta.value = { amount: gained, key: Date.now() + Math.random() };
+      if (deltaTimer) window.clearTimeout(deltaTimer);
+      deltaTimer = window.setTimeout(() => (scoreDelta.value = null), 700);
+    }
+    lastScore.value = now;
+  }
+);
+watch(
+  () => state.value.status,
+  (s) => {
+    if (s === lastStatus.value) return;
+    if (s === 'won') emit('won');
+    else if (s === 'lost') emit('lost');
+    lastStatus.value = s;
+  }
+);
+
+// --- 渲染辅助 ---
+const gridStyle = computed(() => ({
+  gridTemplateColumns: `repeat(${state.value.size}, 1fr)`,
+  gridTemplateRows: `repeat(${state.value.size}, 1fr)`
+}));
+
+const boardVars = computed(() => ({ '--cols': String(state.value.size) }));
+
+function tileVars(row: number, col: number) {
+  return { '--row': String(row), '--col': String(col) } as Record<string, string>;
+}
+
+function tileClass(t: { value: number; isNew: boolean; merged: boolean }) {
+  return {
+    'is-new': t.isNew,
+    'is-merged': t.merged,
+    'is-super': t.value > 2048
+  };
+}
+
+function tileAttrs(t: { value: number }) {
+  return t.value > 2048
+    ? { 'data-super': '1' }
+    : {};
+}
+
+const overlayVisible = computed(() => state.value.status !== 'playing');
+const isWon = computed(() => state.value.status === 'won');
+const isLost = computed(() => state.value.status === 'lost');
+const undoDisabled = computed(() => state.value.historySize === 0);
+
+// --- AI ---
+function onAskAI() {
+  aiHint.value = suggestMove();
+}
+function onDoAI() {
+  const before = state.value.score;
+  const dir = aiMove();
+  if (dir) {
+    emit('move', dir, state.value.score - before);
+    aiHint.value = null;
+  }
+}
+
+defineExpose({ suggestMove, aiMove, newGame, undo, move, continuePlaying });
+</script>
+
+<template>
+  <div class="game-2048">
+    <header v-if="title" class="game-2048-header">
+      <h1 class="game-2048-title">{{ title }}</h1>
+      <div class="game-2048-scores">
+        <div class="game-2048-score-box">
+          <span class="label">Score</span>
+          <span class="value">{{ state.score }}</span>
+          <span
+            v-if="scoreDelta"
+            :key="scoreDelta.key"
+            class="delta"
+            >+{{ scoreDelta.amount }}</span
+          >
+        </div>
+        <div class="game-2048-score-box">
+          <span class="label">Best</span>
+          <span class="value">{{ state.bestScore }}</span>
+        </div>
+      </div>
+    </header>
+
+    <div class="game-2048-toolbar">
+      <p class="game-2048-desc">
+        合并相同数字，冲过 <b>2048</b>。方向键 / WASD / 触屏滑动。
+      </p>
+      <div class="game-2048-actions">
+        <button
+          v-if="enableAI"
+          class="game-2048-button"
+          type="button"
+          :disabled="isLost"
+          @click="onAskAI"
+        >
+          提示
+        </button>
+        <button
+          v-if="enableAI"
+          class="game-2048-button"
+          type="button"
+          :disabled="isLost"
+          @click="onDoAI"
+        >
+          AI 帮走
+        </button>
+        <button class="game-2048-button" type="button" :disabled="undoDisabled" @click="undo()">
+          撤销
+        </button>
+        <button class="game-2048-button is-primary" type="button" @click="newGame()">
+          新游戏
+        </button>
+      </div>
+    </div>
+
+    <div
+      ref="boardEl"
+      class="game-2048-board"
+      :style="boardVars"
+      tabindex="0"
+      role="application"
+      :aria-label="`2048 游戏板 ${state.status}`"
+      @touchstart.passive="onTouchStart"
+      @touchend.prevent="onTouchEnd"
+    >
+      <div class="game-2048-grid" :style="gridStyle">
+        <div v-for="i in state.size * state.size" :key="i" class="game-2048-cell" />
+      </div>
+      <div class="game-2048-tile-layer">
+        <div
+          v-for="t in state.tiles"
+          :key="t.id"
+          class="game-2048-tile"
+          :class="tileClass(t)"
+          :style="tileVars(t.row, t.col)"
+          :data-value="t.value"
+          v-bind="tileAttrs(t)"
+        >
+          {{ t.value }}
+        </div>
+      </div>
+
+      <div
+        v-if="enableAI && aiHint"
+        class="game-2048-ai-indicator"
+        style="position: absolute; top: 8px; left: 8px; z-index: 3"
+      >
+        推荐：{{ aiHint }}
+      </div>
+
+      <div
+        class="game-2048-overlay"
+        :class="{ 'is-visible': overlayVisible, 'is-won': isWon, 'is-lost': isLost }"
+      >
+        <h2 v-if="isWon">你赢了！</h2>
+        <h2 v-else-if="isLost">游戏结束</h2>
+        <div class="row">
+          <button v-if="isWon" class="game-2048-button" type="button" @click="continuePlaying()">
+            继续游戏
+          </button>
+          <button
+            v-if="isLost && !undoDisabled"
+            class="game-2048-button"
+            type="button"
+            @click="undo()"
+          >
+            悔一步
+          </button>
+          <button
+            v-if="overlayVisible"
+            class="game-2048-button is-primary"
+            type="button"
+            @click="newGame()"
+          >
+            再来一局
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/index.ts

@@ -0,0 +1,13 @@
+export { default as Game2048 } from './Game2048.vue';
+export { useGame, type UseGameOptions, type UseGameReturn } from './useGame';
+export type { Game2048Instance } from './instance';
+
+// 顺手把 core 的关键类型透出来，宿主项目不需要额外装 core 也能拿到方向等类型。
+export type {
+  BoardSize,
+  Direction,
+  GameState,
+  GameStatus,
+  SaveStorage,
+  Tile
+} from '@my-games/2048-core';

package/src/instance.ts

@@ -0,0 +1,14 @@
+import type { Direction } from '@my-games/2048-core';
+
+/**
+ * 组件 `ref` 上暴露的方法（`defineExpose` 的对应类型）。
+ * 供父组件用 `const g = ref<Game2048Instance>()` 精确声明类型。
+ */
+export interface Game2048Instance {
+  suggestMove(): Direction | null;
+  aiMove(): Direction | null;
+  newGame(): void;
+  undo(): boolean;
+  move(dir: Direction): boolean;
+  continuePlaying(): void;
+}

package/src/useGame.ts

@@ -0,0 +1,59 @@
+import { onBeforeUnmount, shallowRef, type ShallowRef } from 'vue';
+import { bestMove as aiBestMove, Game2048, type Direction, type GameOptions, type GameState } from '@my-games/2048-core';
+
+/**
+ * `useGame` —— Vue 侧连接 Game2048 引擎的 composable。
+ *
+ * 用法：
+ * ```ts
+ * const { state, move, newGame, undo } = useGame({ size: 4 });
+ * ```
+ *
+ * 生命周期：内部订阅引擎；`onBeforeUnmount` 时自动退订，防止内存泄漏。
+ * state 用 `shallowRef` 存 —— 引擎每次都推新对象，深度 reactive 无收益。
+ */
+export interface UseGameOptions extends GameOptions {
+  /** AI 搜索深度；仅 `aiMove` 用到。 */
+  aiDepth?: number;
+}
+
+export interface UseGameReturn {
+  /** 引擎的完整状态快照；用 ShallowRef 声明让 <script setup> 的模板能自动 unwrap。 */
+  state: ShallowRef<GameState>;
+  raw: Game2048;
+  move: (dir: Direction) => boolean;
+  newGame: () => void;
+  undo: () => boolean;
+  continuePlaying: () => void;
+  canUndo: () => boolean;
+  /** 让 AI 走一步（内部仍走 game.move 触发订阅）。 */
+  aiMove: () => Direction | null;
+  /** 只查询、不走子。 */
+  suggestMove: () => Direction | null;
+}
+
+export function useGame(options: UseGameOptions = {}): UseGameReturn {
+  const { aiDepth = 3, ...engineOptions } = options;
+  const game = new Game2048(engineOptions);
+  const state = shallowRef<GameState>(game.getState());
+  const unsubscribe = game.subscribe((s) => {
+    state.value = s;
+  });
+  onBeforeUnmount(unsubscribe);
+
+  return {
+    state,
+    raw: game,
+    move: (dir) => game.move(dir),
+    newGame: () => game.newGame(),
+    undo: () => game.undo(),
+    continuePlaying: () => game.continuePlaying(),
+    canUndo: () => game.canUndo(),
+    suggestMove: () => aiBestMove(game.getGridValues(), { depth: aiDepth }),
+    aiMove: () => {
+      const dir = aiBestMove(game.getGridValues(), { depth: aiDepth });
+      if (dir) game.move(dir);
+      return dir;
+    }
+  };
+}