@my-games/2048-vue 0.1.0 → 0.3.0

package/README.md

@@ -13,6 +13,7 @@ pnpm add @my-games/2048-vue vue
 ```vue
 <script setup lang="ts">
 import { Game2048 } from '@my-games/2048-vue';
+import '@my-games/2048-vue/style.css';
 
 function onMove(dir, gained) {
   console.log(dir, gained);
@@ -30,7 +31,9 @@ function onMove(dir, gained) {
 </template>
 ```
 
-组件样式已经内嵌（`import '@my-games/2048-core/styles.css'`），不用额外引 CSS。
+**样式必须显式引入**：vite lib 模式把内部 CSS import 抽到 `dist/index.css`，
+JS bundle 不再引用。消费者入口加一次 `import '@my-games/2048-vue/style.css'`
+（或从 core 引 `import '@my-games/2048-core/styles.css'`，内容一致）。
 
 ## Props
 

package/dist/Game2048.vue.d.ts

@@ -0,0 +1,58 @@
+import { 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;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {
+    suggestMove: () => Direction | null;
+    aiMove: () => Direction | null;
+    newGame: () => void;
+    undo: () => boolean;
+    move: (dir: Direction) => boolean;
+    continuePlaying: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    move: (dir: Direction, gained: number) => any;
+    won: () => any;
+    lost: () => any;
+}, string, import('vue').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: import('@my-games/2048-core').SaveStorage | null;
+    saveKey: string;
+    bestKey: string;
+    freshStart: boolean;
+    autofocus: boolean;
+    enableAI: boolean;
+    title: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=Game2048.vue.d.ts.map

package/dist/Game2048.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Game2048.vue.d.ts","sourceRoot":"","sources":["../src/Game2048.vue"],"names":[],"mappings":"AAsVA,OAAO,gCAAgC,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGrD;;;;;;;;;;;;;;;;GAgBG;AAEH,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,qBAAqB,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3D,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;CAChB;AA0cD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;6EAKhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1,131 +1,5 @@
-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 { }
+export { default as Game2048 } from './Game2048.vue';
+export { useGame, type UseGameOptions, type UseGameReturn } from './useGame';
+export type { Game2048Instance } from './instance';
+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,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AAC7E,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGnD,YAAY,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACX,IAAI,EACL,MAAM,qBAAqB,CAAC"}