@my-games/2048-vue 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,251 +1,333 @@
-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;
-    }
-  };
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, shallowRef, toDisplayString, unref, watch, withModifiers } from "vue";
+import { Game2048, bestMove } from "@my-games/2048-core";
+// src/useGame.ts
+function useGame(options = {}) {
+	const { aiDepth = 3, ...engineOptions } = options;
+	const game = new Game2048(engineOptions);
+	const state = shallowRef(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: () => bestMove(game.getGridValues(), { depth: aiDepth }),
+		aiMove: () => {
+			const dir = bestMove(game.getGridValues(), { depth: aiDepth });
+			if (dir) game.move(dir);
+			return dir;
+		}
+	};
 }
-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
+// src/Game2048.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "game-2048" };
+var _hoisted_2 = {
+	key: 0,
+	class: "game-2048-header"
+};
+var _hoisted_3 = { class: "game-2048-title" };
+var _hoisted_4 = { class: "game-2048-scores" };
+var _hoisted_5 = { class: "game-2048-score-box" };
+var _hoisted_6 = { class: "value" };
+var _hoisted_7 = { class: "game-2048-score-box" };
+var _hoisted_8 = { class: "value" };
+var _hoisted_9 = { class: "game-2048-toolbar" };
+var _hoisted_10 = { class: "game-2048-actions" };
+var _hoisted_11 = ["disabled"];
+var _hoisted_12 = ["disabled"];
+var _hoisted_13 = ["disabled"];
+var _hoisted_14 = ["aria-label"];
+var _hoisted_15 = { class: "game-2048-tile-layer" };
+var _hoisted_16 = ["data-value"];
+var _hoisted_17 = {
+	key: 0,
+	class: "game-2048-ai-indicator",
+	style: {
+		"position": "absolute",
+		"top": "8px",
+		"left": "8px",
+		"z-index": "3"
+	}
 };
-//# sourceMappingURL=index.js.map
+var _hoisted_18 = { key: 0 };
+var _hoisted_19 = { key: 1 };
+var _hoisted_20 = { class: "row" };
+// src/Game2048.vue
+var Game2048_default = /* @__PURE__ */ defineComponent({
+	__name: "Game2048",
+	props: {
+		size: { default: 4 },
+		storage: { default: void 0 },
+		saveKey: { default: void 0 },
+		bestKey: { default: void 0 },
+		freshStart: {
+			type: Boolean,
+			default: false
+		},
+		autofocus: {
+			type: Boolean,
+			default: true
+		},
+		enableAI: {
+			type: Boolean,
+			default: false
+		},
+		aiDepth: { default: 3 },
+		title: { default: "2048" }
+	},
+	emits: [
+		"move",
+		"won",
+		"lost"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		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(null);
+		const scoreDelta = ref(null);
+		const aiHint = ref(null);
+		const lastScore = ref(state.value.score);
+		const lastStatus = ref(state.value.status);
+		let deltaTimer;
+		const 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 isBoardFocused() {
+			if (typeof document === "undefined") return false;
+			return document.activeElement === boardEl.value;
+		}
+		function onKey(ev) {
+			const dir = KEY_TO_DIR[ev.key];
+			if (!dir) return;
+			if (!isBoardFocused()) return;
+			ev.preventDefault();
+			performMove(dir);
+		}
+		function performMove(dir) {
+			const before = state.value.score;
+			if (move(dir)) {
+				emit("move", dir, state.value.score - before);
+				if (props.enableAI) aiHint.value = null;
+			}
+		}
+		let touchStartPoint = null;
+		function onTouchStart(ev) {
+			if (ev.touches.length !== 1) return;
+			const t = ev.touches[0];
+			if (!t) return;
+			touchStartPoint = {
+				x: t.clientX,
+				y: t.clientY
+			};
+			boardEl.value?.focus({ preventScroll: true });
+		}
+		function onTouchEnd(ev) {
+			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;
+			performMove(adx > ady ? dx > 0 ? "right" : "left" : dy > 0 ? "down" : "up");
+		}
+		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);
+		});
+		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, col) {
+			return {
+				"--row": String(row),
+				"--col": String(col)
+			};
+		}
+		function tileClass(t) {
+			return {
+				"is-new": t.isNew,
+				"is-merged": t.merged,
+				"is-super": t.value > 2048
+			};
+		}
+		function tileAttrs(t) {
+			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);
+		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;
+			}
+		}
+		__expose({
+			suggestMove,
+			aiMove,
+			newGame,
+			undo,
+			move,
+			continuePlaying
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				__props.title ? (openBlock(), createElementBlock("header", _hoisted_2, [createElementVNode("h1", _hoisted_3, toDisplayString(__props.title), 1), createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [
+					_cache[5] || (_cache[5] = createElementVNode("span", { class: "label" }, "Score", -1)),
+					createElementVNode("span", _hoisted_6, toDisplayString(unref(state).score), 1),
+					scoreDelta.value ? (openBlock(), createElementBlock("span", {
+						key: scoreDelta.value.key,
+						class: "delta"
+					}, "+" + toDisplayString(scoreDelta.value.amount), 1)) : createCommentVNode("", true)
+				]), createElementVNode("div", _hoisted_7, [_cache[6] || (_cache[6] = createElementVNode("span", { class: "label" }, "Best", -1)), createElementVNode("span", _hoisted_8, toDisplayString(unref(state).bestScore), 1)])])])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_9, [_cache[7] || (_cache[7] = createElementVNode("p", { class: "game-2048-desc" }, [
+					createTextVNode(" 合并相同数字，冲过 "),
+					createElementVNode("b", null, "2048"),
+					createTextVNode("。方向键 / WASD / 触屏滑动。 ")
+				], -1)), createElementVNode("div", _hoisted_10, [
+					__props.enableAI ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						class: "game-2048-button",
+						type: "button",
+						disabled: isLost.value,
+						onClick: onAskAI
+					}, " 提示 ", 8, _hoisted_11)) : createCommentVNode("", true),
+					__props.enableAI ? (openBlock(), createElementBlock("button", {
+						key: 1,
+						class: "game-2048-button",
+						type: "button",
+						disabled: isLost.value,
+						onClick: onDoAI
+					}, " AI 帮走 ", 8, _hoisted_12)) : createCommentVNode("", true),
+					createElementVNode("button", {
+						class: "game-2048-button",
+						type: "button",
+						disabled: undoDisabled.value,
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(undo)())
+					}, " 撤销 ", 8, _hoisted_13),
+					createElementVNode("button", {
+						class: "game-2048-button is-primary",
+						type: "button",
+						onClick: _cache[1] || (_cache[1] = ($event) => unref(newGame)())
+					}, " 新游戏 ")
+				])]),
+				createElementVNode("div", {
+					ref_key: "boardEl",
+					ref: boardEl,
+					class: "game-2048-board",
+					style: normalizeStyle(boardVars.value),
+					tabindex: "0",
+					role: "application",
+					"aria-label": `2048 游戏板 ${unref(state).status}`,
+					onTouchstartPassive: onTouchStart,
+					onTouchend: withModifiers(onTouchEnd, ["prevent"])
+				}, [
+					createElementVNode("div", {
+						class: "game-2048-grid",
+						style: normalizeStyle(gridStyle.value)
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).size * unref(state).size, (i) => {
+						return openBlock(), createElementBlock("div", {
+							key: i,
+							class: "game-2048-cell"
+						});
+					}), 128))], 4),
+					createElementVNode("div", _hoisted_15, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).tiles, (t) => {
+						return openBlock(), createElementBlock("div", mergeProps({
+							key: t.id,
+							class: ["game-2048-tile", tileClass(t)],
+							style: tileVars(t.row, t.col),
+							"data-value": t.value
+						}, { ref_for: true }, tileAttrs(t)), toDisplayString(t.value), 17, _hoisted_16);
+					}), 128))]),
+					__props.enableAI && aiHint.value ? (openBlock(), createElementBlock("div", _hoisted_17, " 推荐：" + toDisplayString(aiHint.value), 1)) : createCommentVNode("", true),
+					createElementVNode("div", { class: normalizeClass(["game-2048-overlay", {
+						"is-visible": overlayVisible.value,
+						"is-won": isWon.value,
+						"is-lost": isLost.value
+					}]) }, [isWon.value ? (openBlock(), createElementBlock("h2", _hoisted_18, "你赢了！")) : isLost.value ? (openBlock(), createElementBlock("h2", _hoisted_19, "游戏结束")) : createCommentVNode("", true), createElementVNode("div", _hoisted_20, [
+						isWon.value ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							class: "game-2048-button",
+							type: "button",
+							onClick: _cache[2] || (_cache[2] = ($event) => unref(continuePlaying)())
+						}, " 继续游戏 ")) : createCommentVNode("", true),
+						isLost.value && !undoDisabled.value ? (openBlock(), createElementBlock("button", {
+							key: 1,
+							class: "game-2048-button",
+							type: "button",
+							onClick: _cache[3] || (_cache[3] = ($event) => unref(undo)())
+						}, " 悔一步 ")) : createCommentVNode("", true),
+						overlayVisible.value ? (openBlock(), createElementBlock("button", {
+							key: 2,
+							class: "game-2048-button is-primary",
+							type: "button",
+							onClick: _cache[4] || (_cache[4] = ($event) => unref(newGame)())
+						}, " 再来一局 ")) : createCommentVNode("", true)
+					])], 2)
+				], 44, _hoisted_14)
+			]);
+		};
+	}
+});
+export { Game2048_default as Game2048, useGame };
+
+//# sourceMappingURL=index.js.map