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

package/README.md

@@ -1,3 +1,82 @@
-# 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';
+import '@my-games/2048-vue/style.css';
+
+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>
+```
+
+**样式必须显式引入**：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
+
+| 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/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

@@ -0,0 +1,5 @@
+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"}