@putianyi888/vue3-minesweeper-board 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tianyi Pu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+# @putianyi888/vue3-minesweeper-board
+
+Vue 3 component for rendering a Minesweeper board matrix using
+`@putianyi888/vue3-plots`.
+
+## Install
+
+```sh
+npm install @putianyi888/vue3-minesweeper-board @putianyi888/vue3-plots vue
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import MinesweeperBoard from '@putianyi888/vue3-minesweeper-board'
+
+const board = [
+  [10, 10, 10],
+  [1, 2, 1],
+  [0, 0, 0],
+]
+</script>
+
+<template>
+  <MinesweeperBoard :board="board" :size="24" />
+</template>
+```
+
+`board` follows `ms_toollib` game board values. Unsupported values render as
+an unopened background cell with a blank foreground.
+
+You can also import the lower-level layers:
+
+```ts
+import { BoardBackground, BoardForeground, Counter, MinesweeperBoard } from '@putianyi888/vue3-minesweeper-board'
+```
+
+```vue
+<Counter :value="12.34" :fixed="2" :digits="3" :size="24" />
+```

package/dist/components/BoardBackground.vue.d.ts

@@ -0,0 +1,24 @@
+import { PropType } from 'vue';
+type CellIndex = {
+    rowIndex: number;
+    columnIndex: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Background matrix. true renders a down cell, false renders an up cell. */
+    board: {
+        type: PropType<boolean[][]>;
+        default: undefined;
+    };
+}>, {
+    cellIndex: import('vue').ComputedRef<CellIndex | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Background matrix. true renders a down cell, false renders an up cell. */
+    board: {
+        type: PropType<boolean[][]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    board: boolean[][];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BoardForeground.vue.d.ts

@@ -0,0 +1,18 @@
+import { PropType } from 'vue';
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Foreground matrix. Uses 0 for blank, 1-8 for numbers, and negative values for mine states. */
+    board: {
+        type: PropType<number[][]>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Foreground matrix. Uses 0 for blank, 1-8 for numbers, and negative values for mine states. */
+    board: {
+        type: PropType<number[][]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    board: number[][];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Counter.vue.d.ts

@@ -0,0 +1,56 @@
+import { PropType } from 'vue';
+type ComponentSize = number | 'auto';
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Number to display. */
+    value: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** Rendered size for 160 source SVG units, or auto to fit the parent container. */
+    size: {
+        type: PropType<ComponentSize>;
+        required: true;
+        validator: (size: ComponentSize) => size is number | "auto";
+    };
+    /** Number of decimal places. */
+    fixed: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    /** Minimum number of integer digits. Pads high places with zeroes. */
+    digits: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Number to display. */
+    value: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** Rendered size for 160 source SVG units, or auto to fit the parent container. */
+    size: {
+        type: PropType<ComponentSize>;
+        required: true;
+        validator: (size: ComponentSize) => size is number | "auto";
+    };
+    /** Number of decimal places. */
+    fixed: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    /** Minimum number of integer digits. Pads high places with zeroes. */
+    digits: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+}>> & Readonly<{}>, {
+    fixed: number;
+    digits: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MinesweeperBoard.vue.d.ts

@@ -0,0 +1,61 @@
+import { PropType } from 'vue';
+type CellIndex = {
+    rowIndex: number;
+    columnIndex: number;
+};
+type BoardSize = number | 'auto';
+declare var __VLS_1: {
+    board: number[][] | undefined;
+    size: number;
+}, __VLS_8: {
+    board: number[][] | undefined;
+    cellIndex: CellIndex | undefined;
+    size: number;
+}, __VLS_10: {
+    board: number[][] | undefined;
+    size: number;
+};
+type __VLS_Slots = {} & {
+    background?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    foreground?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Game board matrix following ms_toollib's game_board values. */
+    board: {
+        type: PropType<number[][]>;
+        default: undefined;
+    };
+    /** Side length of each cell in canvas pixels, or auto to fit the parent container. */
+    size: {
+        type: PropType<BoardSize>;
+        required: true;
+        validator: (size: BoardSize) => size is number | "auto";
+    };
+}>, {
+    cellIndex: import('vue').Ref<CellIndex | undefined, CellIndex | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Game board matrix following ms_toollib's game_board values. */
+    board: {
+        type: PropType<number[][]>;
+        default: undefined;
+    };
+    /** Side length of each cell in canvas pixels, or auto to fit the parent container. */
+    size: {
+        type: PropType<BoardSize>;
+        required: true;
+        validator: (size: BoardSize) => size is number | "auto";
+    };
+}>> & Readonly<{}>, {
+    board: number[][];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/context.d.ts

@@ -0,0 +1,6 @@
+import { ComputedRef, InjectionKey } from 'vue';
+export type MinesweeperBoardContext = {
+    board: ComputedRef<number[][] | undefined>;
+    size: ComputedRef<number>;
+};
+export declare const minesweeperBoardKey: InjectionKey<MinesweeperBoardContext>;

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { default as BoardBackground } from './components/BoardBackground.vue';
+export { default as BoardForeground } from './components/BoardForeground.vue';
+export { default as Counter } from './components/Counter.vue';
+export { default as MinesweeperBoard } from './components/MinesweeperBoard.vue';
+export { default } from './components/MinesweeperBoard.vue';
+export declare const outerBorderClass = "outer-border";
+export declare const innerBorderClass = "inner-border";
+export declare const minesweeperBoardClasses: {
+    readonly innerBorder: "inner-border";
+    readonly outerBorder: "outer-border";
+};

package/dist/minesweeper-board.css

@@ -0,0 +1,2 @@
+.outer-border{box-sizing:border-box;background:silver;border:.1875em solid #a0a0a0;border-color:#fff #a0a0a0 #a0a0a0 #fff;align-items:flex-start;gap:.375em;margin:0;padding:.375em;line-height:0;display:inline-flex}.inner-border{box-sizing:content-box;font-size:inherit;border:.1875em solid #fff;border-color:gray #fff #fff gray}.counter[data-v-04cf9f01]{--counter-size:16px;border-style:solid;border-color:gray #fff #fff gray;border-width:calc(var(--counter-size) * .0625);box-sizing:border-box;vertical-align:middle;background:#000;align-items:flex-end;line-height:0;display:inline-flex;overflow:hidden}.counter__digit[data-v-04cf9f01]{height:calc(var(--counter-size) * 1.5625);-webkit-user-select:none;user-select:none;width:calc(var(--counter-size) * .8125);flex:none;display:block}.counter__fraction[data-v-04cf9f01]{align-items:flex-end;display:inline-flex}.counter__digit--fraction[data-v-04cf9f01]{height:calc(var(--counter-size) * .9375);width:calc(var(--counter-size) * .4875)}.minesweeper-board-content[data-v-ad3db891]{font-size:initial;line-height:0;display:grid}.minesweeper-board-layer[data-v-ad3db891]{grid-area:1/1}.minesweeper-board-layer--foreground[data-v-ad3db891]{pointer-events:none}
+/*$vite$:1*/

package/dist/minesweeper-board.js

@@ -0,0 +1,367 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, inject as s, normalizeStyle as c, onBeforeUnmount as l, onMounted as u, openBlock as d, provide as f, ref as p, renderList as m, renderSlot as h, unref as g, watch as _ } from "vue";
+import { ImageGrid as v } from "@putianyi888/vue3-plots";
+//#region src/assets/celldown.svg?url
+var y = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='160'%20height='160'%20fill='%23808080'%20/%3e%3c!--%20dark%20frame%20--%3e%3crect%20x='10'%20y='10'%20width='150'%20height='150'%20fill='%23c0c0c0'%20/%3e%3c!--%20light%20background%20--%3e%3c/svg%3e", b = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpolygon%20points='0,0%20160,0%20140,20%2020,20%2020,140%200,160'%20fill='%23ffffff'%20/%3e%3c!--%20highlight%20--%3e%3cpolygon%20points='160,160%20160,0%20140,20%20140,140%2020,140%200,160'%20fill='%23808080'%20/%3e%3c!--%20shade%20--%3e%3crect%20x='20'%20y='20'%20width='120'%20height='120'%20fill='%23c0c0c0'%20/%3e%3c!--%20background%20--%3e%3c/svg%3e", x = Symbol("minesweeper-board"), S = /* @__PURE__ */ o({
+	__name: "BoardBackground",
+	props: { board: {
+		type: Array,
+		default: void 0
+	} },
+	setup(e, { expose: r }) {
+		let i = e, a = s(x);
+		if (a === void 0) throw Error("BoardBackground must be used inside MinesweeperBoard.");
+		let o = {
+			down: y,
+			up: b
+		}, c = /* @__PURE__ */ new Set([
+			0,
+			1,
+			2,
+			3,
+			4,
+			5,
+			6,
+			7,
+			8,
+			14,
+			15,
+			18
+		]), l = t(() => {
+			if (i.board !== void 0) return i.board;
+			let e = a.board.value;
+			if (e === void 0) throw Error("BoardBackground requires a board prop or MinesweeperBoard board context.");
+			return e.map((e) => e.map((e) => c.has(e)));
+		}), u = t(() => l.value.map((e) => e.map((e) => e ? "down" : "up"))), f = p();
+		return r({ cellIndex: t(() => g(f.value?.cellIndex)) }), (e, t) => (d(), n(g(v), {
+			ref_key: "imageGrid",
+			ref: f,
+			"cell-height": g(a).size.value,
+			"cell-width": g(a).size.value,
+			cells: u.value,
+			images: o
+		}, null, 8, [
+			"cell-height",
+			"cell-width",
+			"cells"
+		]));
+	}
+}), C = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='160'%20height='160'%20fill='%23808080'%20/%3e%3c!--%20dark%20frame%20--%3e%3crect%20x='10'%20y='10'%20width='150'%20height='150'%20fill='%23ff0000'%20/%3e%3c!--%20background%20--%3e%3c!--%20mine.svg%20--%3e%3ccircle%20cx='85'%20cy='85'%20r='45'%20fill='%23000000'%20/%3e%3crect%20x='20'%20y='80'%20width='130'%20height='10'%20/%3e%3crect%20y='20'%20x='80'%20width='10'%20height='130'%20/%3e%3cline%20x1='40'%20y1='40'%20x2='130'%20y2='130'%20stroke-width='10'%20stroke='%23000000'%20/%3e%3cline%20x2='40'%20y1='40'%20x1='130'%20y2='130'%20stroke-width='10'%20stroke='%23000000'%20/%3e%3ccircle%20cx='70'%20cy='70'%20r='11'%20fill='%23ffffff'%20/%3e%3c/svg%3e", w = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3c!--%20mine.svg%20--%3e%3ccircle%20cx='85'%20cy='85'%20r='45'%20fill='%23000000'%20/%3e%3crect%20x='20'%20y='80'%20width='130'%20height='10'%20/%3e%3crect%20y='20'%20x='80'%20width='10'%20height='130'%20/%3e%3cline%20x1='40'%20y1='40'%20x2='130'%20y2='130'%20stroke-width='10'%20stroke='%23000000'%20/%3e%3cline%20x2='40'%20y1='40'%20x1='130'%20y2='130'%20stroke-width='10'%20stroke='%23000000'%20/%3e%3ccircle%20cx='70'%20cy='70'%20r='11'%20fill='%23ffffff'%20/%3e%3cpolygon%20points='15,30%2035,30%20155,150%20135,150'%20fill='%23ff0000'%20/%3e%3c!--%20\\cross%20--%3e%3cpolygon%20points='155,30%20135,30%2015,150%2035,150'%20fill='%23ff0000'%20/%3e%3c!--%20/cross%20--%3e%3c/svg%3e", T = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='40'%20y='110'%20width='80'%20height='20'%20fill='%23000000'%20/%3e%3c!--%20lower%20base%20--%3e%3crect%20x='60'%20y='100'%20width='40'%20height='10'%20fill='%23000000'%20/%3e%3c!--%20upper%20base%20--%3e%3crect%20x='80'%20y='40'%20width='10'%20height='60'%20fill='%23000000'%20/%3e%3c!--%20pole%20--%3e%3cpath%20d='M%2090%2030%20L%2035%2057%20L%2090%2084'%20fill='%23ff0000'%20/%3e%3c!--%20flag%20--%3e%3c/svg%3e", E = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='85'%20cy='85'%20r='45'%20fill='%23000000'%20/%3e%3c!--%20mine%20body%20--%3e%3crect%20x='20'%20y='80'%20width='130'%20height='10'%20/%3e%3c!--%20-spike%20--%3e%3crect%20y='20'%20x='80'%20width='10'%20height='130'%20/%3e%3c!--%20|spike%20--%3e%3cline%20x1='40'%20y1='40'%20x2='130'%20y2='130'%20stroke-width='10'%20stroke='%23000000'%20/%3e%3c!--%20\\spike%20--%3e%3cline%20x2='40'%20y1='40'%20x1='130'%20y2='130'%20stroke-width='10'%20stroke='%23000000'%20/%3e%3c!--%20/spike%20--%3e%3ccircle%20cx='70'%20cy='70'%20r='11'%20fill='%23ffffff'%20/%3e%3c!--%20highlight%20--%3e%3c/svg%3e", D = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3c/svg%3e", O = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpolygon%20points='50,110%2050,130%20120,130%20120,110%20100,110%20100,30%2085,30%2050,65%2050,70%2070,70%2070,110'%20fill='%230000ff'%20/%3e%3c/svg%3e", k = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%2030%2060%20Q%2030%2030,%2065%2030%20H%2095%20Q%20130%2030,%20130%2060%20C%20130%2085,%2070%20100,%2060%20110%20H%20130%20V%20130%20H%2030%20V%20115%20C%2030%2080,%20100%2080,%20100%2060%20Q%20100%2050,%2090%2050%20H%2070%20Q%2060%2050,%2060%2060'%20fill='%23008000'/%3e%3c/svg%3e", A = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%2030%2030%20H%2095%20Q%20130%2030,%20130%2060%20Q%20130%2075,%20115%2080%20Q%20130%2085,%20130%20100%20Q%20130%20130,%2095%20130%20H%2030%20V%20110%20H%2090%20Q%20100%20110,%20100%20100%20T%2090%2090%20H%2060%20V%2070%20H%2090%20Q%20100%2070,%20100%2060%20T%2090%2050%20H%2030'%20fill='%23ff0000'/%3e%3c/svg%3e", j = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpolygon%20points='55,30%2030,80%2030,90%2090,90%2090,130%20120,130%20120,90%20130,90%20130,70%20120,70%20120,30%2090,30%2090,70%2065,70%2085,30'%20fill='%23000080'%20/%3e%3c/svg%3e", ee = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%2030%2030%20H%20130%20V%2050%20H%2060%20V%2070%20H%2095%20Q%20130%2070,%20130%20100%20T%2095%20130%20H%2030%20V%20110%20H%2090%20Q%20100%20110,%20100%20100%20T%2090%2090%20H%2030'%20fill='%23800000'/%3e%3c/svg%3e", M = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%20120%2030%20V%2050%20H%2080%20Q%2060%2050,%2060%2060%20V%20100%20Q%2060%20110,%2080%20110%20T%20100%20100%20T%2080%2090%20H%2060%20V%2070%20H%2095%20Q%20130%2070,%20130%20100%20T%2095%20130%20H%2065%20Q%2030%20130,%2030%20100%20V%2060%20Q%2030%2030,%2065%2030'%20fill='%23008080'/%3e%3c/svg%3e", te = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%2030%2030%20H%20130%20V%2060%20L%2095%20130%20H%2065%20L%20100%2060%20V%2050%20H%2030'%20fill='%23000000'/%3e%3c/svg%3e", ne = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%2065%2030%20H%2095%20Q%20130%2030,%20130%2060%20Q%20130%2075,%20115%2080%20H%20100%20V%2060%20Q%20100%2050,%2090%2050%20H%2070%20Q%2060%2050,%2060%2060%20T%2070%2070%20H%2090%20Q%20100%2070,%20100%2060%20V%20100%20Q%20100%2090,%2090%2090%20H%2070%20Q%2060%2090,%2060%20100%20T%2070%20110%20H%2090%20Q%20100%20110,%20100%20100%20V%2080%20H%20115%20Q%20130%2085,%20130%20100%20Q%20130%20130,%2095%20130%20H%2065%20Q%2030%20130,%2030%20100%20Q%2030%2085,%2045%2080%20Q%2030%2075,%2030%2060%20Q%2030%2030,%2065%2030'%20fill='%23808080'/%3e%3c/svg%3e", N = /* @__PURE__ */ o({
+	__name: "BoardForeground",
+	props: { board: {
+		type: Array,
+		default: void 0
+	} },
+	setup(e) {
+		let r = e, i = s(x);
+		if (i === void 0) throw Error("BoardForeground must be used inside MinesweeperBoard.");
+		let a = {
+			blank: D,
+			num1: O,
+			num2: k,
+			num3: A,
+			num4: j,
+			num5: ee,
+			num6: M,
+			num7: te,
+			num8: ne,
+			mine: E,
+			flag: T,
+			falsemine: w,
+			blast: C
+		}, o = {
+			0: 0,
+			1: 1,
+			2: 2,
+			3: 3,
+			4: 4,
+			5: 5,
+			6: 6,
+			7: 7,
+			8: 8,
+			10: 0,
+			11: -2,
+			12: 0,
+			14: -3,
+			15: -4,
+			16: -1,
+			18: 0
+		}, c = {
+			0: "blank",
+			1: "num1",
+			2: "num2",
+			3: "num3",
+			4: "num4",
+			5: "num5",
+			6: "num6",
+			7: "num7",
+			8: "num8",
+			[-1]: "mine",
+			[-2]: "flag",
+			[-3]: "falsemine",
+			[-4]: "blast"
+		}, l = t(() => {
+			if (r.board !== void 0) return r.board;
+			let e = i.board.value;
+			if (e === void 0) throw Error("BoardForeground requires a board prop or MinesweeperBoard board context.");
+			return e.map((e) => e.map((e) => o[e] ?? 0));
+		}), u = t(() => l.value.map((e) => e.map((e) => c[e] ?? "blank")));
+		return (e, t) => (d(), n(g(v), {
+			"cell-height": g(i).size.value,
+			"cell-width": g(i).size.value,
+			cells: u.value,
+			images: a
+		}, null, 8, [
+			"cell-height",
+			"cell-width",
+			"cells"
+		]));
+	}
+}), re = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23400000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23400000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23400000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23400000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23400000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e", P = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23ff0000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23ff0000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23400000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e", F = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23400000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23400000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23400000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23400000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e", I = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23400000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23ff0000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23400000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e", L = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23400000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e", R = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23400000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23400000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23ff0000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e", z = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23ff0000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23400000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e", B = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23ff0000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23ff0000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23400000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e", V = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23400000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23400000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23400000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e", H = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23ff0000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23ff0000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e", U = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23ff0000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e", W = ["aria-label"], G = ["data-counter-digit", "src"], K = {
+	key: 0,
+	class: "counter__fraction"
+}, q = ["data-counter-digit", "src"], J = 270, Y = /*@__PURE__*/ o({
+	name: "MinesweeperCounter",
+	__name: "Counter",
+	props: {
+		value: {
+			type: Number,
+			required: !0
+		},
+		size: {
+			type: [Number, String],
+			required: !0,
+			validator: (e) => e === "auto" || typeof e == "number"
+		},
+		fixed: {
+			type: Number,
+			default: 0,
+			validator: (e) => Number.isInteger(e) && e >= 0 && e <= 100
+		},
+		digits: {
+			type: Number,
+			default: 1,
+			validator: (e) => Number.isInteger(e) && e >= 1 && e <= 100
+		}
+	},
+	setup(n) {
+		let a = n, o = {
+			"-": re,
+			0: P,
+			1: F,
+			2: I,
+			3: L,
+			4: R,
+			5: z,
+			6: B,
+			7: V,
+			8: H,
+			9: U
+		}, s = t(() => Math.min(100, Math.max(0, Math.trunc(a.fixed)))), f = t(() => (Number.isFinite(a.value) ? a.value : 0).toFixed(s.value)), h = t(() => f.value.split(".")), g = t(() => O(h.value[0] ?? "0")), v = t(() => E(g.value)), y = t(() => E(h.value[1] ?? "")), b = t(() => {
+			let e = h.value[1];
+			return e === void 0 ? g.value : `${g.value}.${e}`;
+		}), x = p(), S = p({
+			height: 0,
+			width: 0
+		}), C = t(() => 20 + v.value.length * 130 + y.value.length * 78), w = t(() => {
+			if (typeof a.size == "number") return a.size;
+			let e = C.value > 0 && S.value.width > 0 ? S.value.width * 160 / C.value : void 0, t = S.value.height > 0 ? S.value.height * 160 / J : void 0, n = Math.min(...[e, t].filter((e) => e !== void 0));
+			return Number.isFinite(n) ? Math.max(1, n) : 16;
+		}), T = t(() => ({ "--counter-size": `${w.value}px` }));
+		function E(e) {
+			return Array.from(e, (e) => D(e) ? e : "0");
+		}
+		function D(e) {
+			return e in o;
+		}
+		function O(e) {
+			let t = Math.min(100, Math.max(1, Math.trunc(a.digits)));
+			return e.startsWith("-") ? `-${e.slice(1).padStart(t, "0")}` : e.padStart(t, "0");
+		}
+		let k;
+		function A() {
+			let e = x.value, t = e?.parentElement ?? e;
+			if (t === void 0) {
+				S.value = {
+					height: 0,
+					width: 0
+				};
+				return;
+			}
+			let n = t.getBoundingClientRect();
+			S.value = {
+				height: n.height,
+				width: n.width
+			};
+		}
+		function j() {
+			if (k?.disconnect(), k = void 0, a.size !== "auto") return;
+			let e = x.value, t = e?.parentElement ?? e;
+			t !== void 0 && (A(), !(typeof ResizeObserver > "u") && (k = new ResizeObserver((e) => {
+				let t = e[0];
+				if (t === void 0) {
+					A();
+					return;
+				}
+				S.value = {
+					height: t.contentRect.height,
+					width: t.contentRect.width
+				};
+			}), k.observe(t)));
+		}
+		return u(() => {
+			j();
+		}), l(() => {
+			k?.disconnect();
+		}), _(() => a.size, () => {
+			j();
+		}), (t, n) => (d(), i("div", {
+			ref_key: "counterElement",
+			ref: x,
+			class: "counter",
+			style: c(T.value),
+			"aria-label": b.value,
+			role: "img"
+		}, [(d(!0), i(e, null, m(v.value, (e, t) => (d(), i("img", {
+			key: `integer-${t}`,
+			class: "counter__digit",
+			"data-counter-digit": e,
+			src: o[e],
+			alt: "",
+			draggable: "false"
+		}, null, 8, G))), 128)), y.value.length > 0 ? (d(), i("span", K, [(d(!0), i(e, null, m(y.value, (e, t) => (d(), i("img", {
+			key: `fraction-${t}`,
+			class: "counter__digit counter__digit--fraction",
+			"data-counter-digit": e,
+			src: o[e],
+			alt: "",
+			draggable: "false"
+		}, null, 8, q))), 128))])) : r("", !0)], 12, W));
+	}
+}), X = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, ie = /*#__PURE__*/ X(Y, [["__scopeId", "data-v-04cf9f01"]]), ae = { class: "minesweeper-board-layer" }, oe = { class: "minesweeper-board-layer" }, se = { class: "minesweeper-board-layer minesweeper-board-layer--foreground" }, Z = /*#__PURE__*/ X(/* @__PURE__ */ o({
+	__name: "MinesweeperBoard",
+	props: {
+		board: {
+			type: Array,
+			default: void 0
+		},
+		size: {
+			type: [Number, String],
+			required: !0,
+			validator: (e) => e === "auto" || typeof e == "number"
+		}
+	},
+	setup(e, { expose: o }) {
+		let s = e, c = p(), m = p(), g = p({
+			height: 0,
+			width: 0
+		}), v = t(() => s.board?.length ?? 0), y = t(() => s.board?.reduce((e, t) => Math.max(e, t.length), 0) ?? 0), b = t(() => {
+			if (typeof s.size == "number") return s.size;
+			let e = y.value > 0 && g.value.width > 0 ? g.value.width / y.value : void 0, t = v.value > 0 && g.value.height > 0 ? g.value.height / v.value : void 0, n = Math.min(...[e, t].filter((e) => e !== void 0));
+			return Number.isFinite(n) ? Math.max(1, n) : 16;
+		});
+		f(x, {
+			board: t(() => s.board),
+			size: t(() => b.value)
+		});
+		let C = t(() => y.value * b.value), w = t(() => v.value * b.value);
+		function T() {
+			m.value !== void 0 && (m.value = void 0);
+		}
+		function E(e) {
+			let t = c.value;
+			if (t === void 0 || v.value === 0 || y.value === 0) {
+				T();
+				return;
+			}
+			let n = t.getBoundingClientRect();
+			if (n.width === 0 || n.height === 0 || C.value === 0 || w.value === 0) {
+				T();
+				return;
+			}
+			let r = e.clientX - n.left, i = e.clientY - n.top;
+			if (r < 0 || i < 0 || r >= C.value || i >= w.value) {
+				T();
+				return;
+			}
+			let a = Math.floor(i / b.value), o = Math.floor(r / b.value);
+			if (s.board?.[a]?.[o] === void 0) {
+				T();
+				return;
+			}
+			D({
+				rowIndex: a,
+				columnIndex: o
+			});
+		}
+		function D(e) {
+			m.value?.rowIndex === e.rowIndex && m.value.columnIndex === e.columnIndex || (m.value = e);
+		}
+		let O;
+		function k() {
+			let e = c.value, t = e?.parentElement ?? e;
+			if (t === void 0) {
+				g.value = {
+					height: 0,
+					width: 0
+				};
+				return;
+			}
+			let n = t.getBoundingClientRect();
+			g.value = {
+				height: n.height,
+				width: n.width
+			};
+		}
+		function A() {
+			if (O?.disconnect(), O = void 0, s.size !== "auto") return;
+			let e = c.value, t = e?.parentElement ?? e;
+			t !== void 0 && (k(), !(typeof ResizeObserver > "u") && (O = new ResizeObserver((e) => {
+				let t = e[0];
+				if (t === void 0) {
+					k();
+					return;
+				}
+				g.value = {
+					height: t.contentRect.height,
+					width: t.contentRect.width
+				};
+			}), O.observe(t)));
+		}
+		return u(() => {
+			A();
+		}), l(() => {
+			O?.disconnect();
+		}), _(() => s.size, () => {
+			A();
+		}), o({ cellIndex: m }), (e, t) => (d(), i("div", {
+			ref_key: "boardElement",
+			ref: c,
+			class: "minesweeper-board-content",
+			onMouseleave: T,
+			onMousemove: E
+		}, [
+			a("div", ae, [h(e.$slots, "background", {
+				board: s.board,
+				size: b.value
+			}, () => [s.board === void 0 ? r("", !0) : (d(), n(S, { key: 0 }))], !0)]),
+			a("div", oe, [h(e.$slots, "default", {
+				board: s.board,
+				cellIndex: m.value,
+				size: b.value
+			}, void 0, !0)]),
+			a("div", se, [h(e.$slots, "foreground", {
+				board: s.board,
+				size: b.value
+			}, () => [s.board === void 0 ? r("", !0) : (d(), n(N, { key: 0 }))], !0)])
+		], 544));
+	}
+}), [["__scopeId", "data-v-ad3db891"]]), Q = "outer-border", $ = "inner-border", ce = {
+	innerBorder: $,
+	outerBorder: Q
+};
+//#endregion
+export { S as BoardBackground, N as BoardForeground, ie as Counter, Z as MinesweeperBoard, Z as default, $ as innerBorderClass, ce as minesweeperBoardClasses, Q as outerBorderClass };

package/dist/minesweeper-board.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("@putianyi888/vue3-plots")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@putianyi888/vue3-plots`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MinesweeperBoard={},e.Vue,e.Vue3Plots))})(this,function(e,t,n){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var r=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='160'%20height='160'%20fill='%23808080'%20/%3e%3c!--%20dark%20frame%20--%3e%3crect%20x='10'%20y='10'%20width='150'%20height='150'%20fill='%23c0c0c0'%20/%3e%3c!--%20light%20background%20--%3e%3c/svg%3e`,i=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpolygon%20points='0,0%20160,0%20140,20%2020,20%2020,140%200,160'%20fill='%23ffffff'%20/%3e%3c!--%20highlight%20--%3e%3cpolygon%20points='160,160%20160,0%20140,20%20140,140%2020,140%200,160'%20fill='%23808080'%20/%3e%3c!--%20shade%20--%3e%3crect%20x='20'%20y='20'%20width='120'%20height='120'%20fill='%23c0c0c0'%20/%3e%3c!--%20background%20--%3e%3c/svg%3e`,a=Symbol(`minesweeper-board`),o=(0,t.defineComponent)({__name:`BoardBackground`,props:{board:{type:Array,default:void 0}},setup(e,{expose:o}){let s=e,c=(0,t.inject)(a);if(c===void 0)throw Error(`BoardBackground must be used inside MinesweeperBoard.`);let l={down:r,up:i},u=new Set([0,1,2,3,4,5,6,7,8,14,15,18]),d=(0,t.computed)(()=>{if(s.board!==void 0)return s.board;let e=c.board.value;if(e===void 0)throw Error(`BoardBackground requires a board prop or MinesweeperBoard board context.`);return e.map(e=>e.map(e=>u.has(e)))}),f=(0,t.computed)(()=>d.value.map(e=>e.map(e=>e?`down`:`up`))),p=(0,t.ref)();return o({cellIndex:(0,t.computed)(()=>(0,t.unref)(p.value?.cellIndex))}),(e,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.unref)(n.ImageGrid),{ref_key:`imageGrid`,ref:p,"cell-height":(0,t.unref)(c).size.value,"cell-width":(0,t.unref)(c).size.value,cells:f.value,images:l},null,8,[`cell-height`,`cell-width`,`cells`]))}}),s=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='160'%20height='160'%20fill='%23808080'%20/%3e%3c!--%20dark%20frame%20--%3e%3crect%20x='10'%20y='10'%20width='150'%20height='150'%20fill='%23ff0000'%20/%3e%3c!--%20background%20--%3e%3c!--%20mine.svg%20--%3e%3ccircle%20cx='85'%20cy='85'%20r='45'%20fill='%23000000'%20/%3e%3crect%20x='20'%20y='80'%20width='130'%20height='10'%20/%3e%3crect%20y='20'%20x='80'%20width='10'%20height='130'%20/%3e%3cline%20x1='40'%20y1='40'%20x2='130'%20y2='130'%20stroke-width='10'%20stroke='%23000000'%20/%3e%3cline%20x2='40'%20y1='40'%20x1='130'%20y2='130'%20stroke-width='10'%20stroke='%23000000'%20/%3e%3ccircle%20cx='70'%20cy='70'%20r='11'%20fill='%23ffffff'%20/%3e%3c/svg%3e`,c=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3c!--%20mine.svg%20--%3e%3ccircle%20cx='85'%20cy='85'%20r='45'%20fill='%23000000'%20/%3e%3crect%20x='20'%20y='80'%20width='130'%20height='10'%20/%3e%3crect%20y='20'%20x='80'%20width='10'%20height='130'%20/%3e%3cline%20x1='40'%20y1='40'%20x2='130'%20y2='130'%20stroke-width='10'%20stroke='%23000000'%20/%3e%3cline%20x2='40'%20y1='40'%20x1='130'%20y2='130'%20stroke-width='10'%20stroke='%23000000'%20/%3e%3ccircle%20cx='70'%20cy='70'%20r='11'%20fill='%23ffffff'%20/%3e%3cpolygon%20points='15,30%2035,30%20155,150%20135,150'%20fill='%23ff0000'%20/%3e%3c!--%20\\cross%20--%3e%3cpolygon%20points='155,30%20135,30%2015,150%2035,150'%20fill='%23ff0000'%20/%3e%3c!--%20/cross%20--%3e%3c/svg%3e`,l=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='40'%20y='110'%20width='80'%20height='20'%20fill='%23000000'%20/%3e%3c!--%20lower%20base%20--%3e%3crect%20x='60'%20y='100'%20width='40'%20height='10'%20fill='%23000000'%20/%3e%3c!--%20upper%20base%20--%3e%3crect%20x='80'%20y='40'%20width='10'%20height='60'%20fill='%23000000'%20/%3e%3c!--%20pole%20--%3e%3cpath%20d='M%2090%2030%20L%2035%2057%20L%2090%2084'%20fill='%23ff0000'%20/%3e%3c!--%20flag%20--%3e%3c/svg%3e`,u=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='85'%20cy='85'%20r='45'%20fill='%23000000'%20/%3e%3c!--%20mine%20body%20--%3e%3crect%20x='20'%20y='80'%20width='130'%20height='10'%20/%3e%3c!--%20-spike%20--%3e%3crect%20y='20'%20x='80'%20width='10'%20height='130'%20/%3e%3c!--%20|spike%20--%3e%3cline%20x1='40'%20y1='40'%20x2='130'%20y2='130'%20stroke-width='10'%20stroke='%23000000'%20/%3e%3c!--%20\\spike%20--%3e%3cline%20x2='40'%20y1='40'%20x1='130'%20y2='130'%20stroke-width='10'%20stroke='%23000000'%20/%3e%3c!--%20/spike%20--%3e%3ccircle%20cx='70'%20cy='70'%20r='11'%20fill='%23ffffff'%20/%3e%3c!--%20highlight%20--%3e%3c/svg%3e`,d=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3c/svg%3e`,f=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpolygon%20points='50,110%2050,130%20120,130%20120,110%20100,110%20100,30%2085,30%2050,65%2050,70%2070,70%2070,110'%20fill='%230000ff'%20/%3e%3c/svg%3e`,p=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%2030%2060%20Q%2030%2030,%2065%2030%20H%2095%20Q%20130%2030,%20130%2060%20C%20130%2085,%2070%20100,%2060%20110%20H%20130%20V%20130%20H%2030%20V%20115%20C%2030%2080,%20100%2080,%20100%2060%20Q%20100%2050,%2090%2050%20H%2070%20Q%2060%2050,%2060%2060'%20fill='%23008000'/%3e%3c/svg%3e`,m=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%2030%2030%20H%2095%20Q%20130%2030,%20130%2060%20Q%20130%2075,%20115%2080%20Q%20130%2085,%20130%20100%20Q%20130%20130,%2095%20130%20H%2030%20V%20110%20H%2090%20Q%20100%20110,%20100%20100%20T%2090%2090%20H%2060%20V%2070%20H%2090%20Q%20100%2070,%20100%2060%20T%2090%2050%20H%2030'%20fill='%23ff0000'/%3e%3c/svg%3e`,h=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpolygon%20points='55,30%2030,80%2030,90%2090,90%2090,130%20120,130%20120,90%20130,90%20130,70%20120,70%20120,30%2090,30%2090,70%2065,70%2085,30'%20fill='%23000080'%20/%3e%3c/svg%3e`,g=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%2030%2030%20H%20130%20V%2050%20H%2060%20V%2070%20H%2095%20Q%20130%2070,%20130%20100%20T%2095%20130%20H%2030%20V%20110%20H%2090%20Q%20100%20110,%20100%20100%20T%2090%2090%20H%2030'%20fill='%23800000'/%3e%3c/svg%3e`,_=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%20120%2030%20V%2050%20H%2080%20Q%2060%2050,%2060%2060%20V%20100%20Q%2060%20110,%2080%20110%20T%20100%20100%20T%2080%2090%20H%2060%20V%2070%20H%2095%20Q%20130%2070,%20130%20100%20T%2095%20130%20H%2065%20Q%2030%20130,%2030%20100%20V%2060%20Q%2030%2030,%2065%2030'%20fill='%23008080'/%3e%3c/svg%3e`,v=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%2030%2030%20H%20130%20V%2060%20L%2095%20130%20H%2065%20L%20100%2060%20V%2050%20H%2030'%20fill='%23000000'/%3e%3c/svg%3e`,y=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='160'%20height='160'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%2065%2030%20H%2095%20Q%20130%2030,%20130%2060%20Q%20130%2075,%20115%2080%20H%20100%20V%2060%20Q%20100%2050,%2090%2050%20H%2070%20Q%2060%2050,%2060%2060%20T%2070%2070%20H%2090%20Q%20100%2070,%20100%2060%20V%20100%20Q%20100%2090,%2090%2090%20H%2070%20Q%2060%2090,%2060%20100%20T%2070%20110%20H%2090%20Q%20100%20110,%20100%20100%20V%2080%20H%20115%20Q%20130%2085,%20130%20100%20Q%20130%20130,%2095%20130%20H%2065%20Q%2030%20130,%2030%20100%20Q%2030%2085,%2045%2080%20Q%2030%2075,%2030%2060%20Q%2030%2030,%2065%2030'%20fill='%23808080'/%3e%3c/svg%3e`,b=(0,t.defineComponent)({__name:`BoardForeground`,props:{board:{type:Array,default:void 0}},setup(e){let r=e,i=(0,t.inject)(a);if(i===void 0)throw Error(`BoardForeground must be used inside MinesweeperBoard.`);let o={blank:d,num1:f,num2:p,num3:m,num4:h,num5:g,num6:_,num7:v,num8:y,mine:u,flag:l,falsemine:c,blast:s},b={0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8,10:0,11:-2,12:0,14:-3,15:-4,16:-1,18:0},x={0:`blank`,1:`num1`,2:`num2`,3:`num3`,4:`num4`,5:`num5`,6:`num6`,7:`num7`,8:`num8`,[-1]:`mine`,[-2]:`flag`,[-3]:`falsemine`,[-4]:`blast`},S=(0,t.computed)(()=>{if(r.board!==void 0)return r.board;let e=i.board.value;if(e===void 0)throw Error(`BoardForeground requires a board prop or MinesweeperBoard board context.`);return e.map(e=>e.map(e=>b[e]??0))}),C=(0,t.computed)(()=>S.value.map(e=>e.map(e=>x[e]??`blank`)));return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.unref)(n.ImageGrid),{"cell-height":(0,t.unref)(i).size.value,"cell-width":(0,t.unref)(i).size.value,cells:C.value,images:o},null,8,[`cell-height`,`cell-width`,`cells`]))}}),x=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23400000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23400000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23400000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23400000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23400000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e`,S=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23ff0000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23ff0000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23400000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e`,C=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23400000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23400000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23400000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23400000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e`,w=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23400000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23ff0000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23400000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e`,T=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23400000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e`,E=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23400000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23400000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23ff0000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e`,D=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23ff0000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23400000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e`,O=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23ff0000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23ff0000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23400000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e`,k=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23400000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23400000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23400000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e`,A=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23ff0000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23ff0000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e`,j=`data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='yes'?%3e%3csvg%20width='130'%20height='250'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='0'%20y='0'%20width='130'%20height='230'%20fill='%23000000'%20/%3e%3c!--%20background%20--%3e%3cpolygon%20points='15,10%20115,10%2085,40%2045,40'%20fill='%23ff0000'%20/%3e%3c!--%20top%20--%3e%3cpolygon%20points='15,220%20115,220%2085,190%2045,190'%20fill='%23ff0000'%20/%3e%3c!--%20bottom%20--%3e%3cpolygon%20points='10,15%2010,115%2040,85%2040,45'%20fill='%23ff0000'%20/%3e%3c!--%20left%20top%20--%3e%3cpolygon%20points='10,115%2010,215%2040,185%2040,145'%20fill='%23400000'%20/%3e%3c!--%20left%20bottom%20--%3e%3cpolygon%20points='120,15%20120,115%2090,85%2090,45'%20fill='%23ff0000'%20/%3e%3c!--%20right%20top%20--%3e%3cpolygon%20points='120,115%20120,215%2090,185%2090,145'%20fill='%23ff0000'%20/%3e%3c!--%20right%20bottom%20--%3e%3cpolygon%20points='20,115%2035,100%2095,100%20110,115%2095,130%2035,130'%20fill='%23ff0000'%20/%3e%3c!--%20center%20--%3e%3c/svg%3e`,M=[`aria-label`],N=[`data-counter-digit`,`src`],P={key:0,class:`counter__fraction`},F=[`data-counter-digit`,`src`],I=270,L=(0,t.defineComponent)({name:`MinesweeperCounter`,__name:`Counter`,props:{value:{type:Number,required:!0},size:{type:[Number,String],required:!0,validator:e=>e===`auto`||typeof e==`number`},fixed:{type:Number,default:0,validator:e=>Number.isInteger(e)&&e>=0&&e<=100},digits:{type:Number,default:1,validator:e=>Number.isInteger(e)&&e>=1&&e<=100}},setup(e){let n=e,r={"-":x,0:S,1:C,2:w,3:T,4:E,5:D,6:O,7:k,8:A,9:j},i=(0,t.computed)(()=>Math.min(100,Math.max(0,Math.trunc(n.fixed)))),a=(0,t.computed)(()=>(Number.isFinite(n.value)?n.value:0).toFixed(i.value)),o=(0,t.computed)(()=>a.value.split(`.`)),s=(0,t.computed)(()=>v(o.value[0]??`0`)),c=(0,t.computed)(()=>g(s.value)),l=(0,t.computed)(()=>g(o.value[1]??``)),u=(0,t.computed)(()=>{let e=o.value[1];return e===void 0?s.value:`${s.value}.${e}`}),d=(0,t.ref)(),f=(0,t.ref)({height:0,width:0}),p=(0,t.computed)(()=>20+c.value.length*130+l.value.length*78),m=(0,t.computed)(()=>{if(typeof n.size==`number`)return n.size;let e=p.value>0&&f.value.width>0?f.value.width*160/p.value:void 0,t=f.value.height>0?f.value.height*160/I:void 0,r=Math.min(...[e,t].filter(e=>e!==void 0));return Number.isFinite(r)?Math.max(1,r):16}),h=(0,t.computed)(()=>({"--counter-size":`${m.value}px`}));function g(e){return Array.from(e,e=>_(e)?e:`0`)}function _(e){return e in r}function v(e){let t=Math.min(100,Math.max(1,Math.trunc(n.digits)));return e.startsWith(`-`)?`-${e.slice(1).padStart(t,`0`)}`:e.padStart(t,`0`)}let y;function b(){let e=d.value,t=e?.parentElement??e;if(t===void 0){f.value={height:0,width:0};return}let n=t.getBoundingClientRect();f.value={height:n.height,width:n.width}}function L(){if(y?.disconnect(),y=void 0,n.size!==`auto`)return;let e=d.value,t=e?.parentElement??e;t!==void 0&&(b(),!(typeof ResizeObserver>`u`)&&(y=new ResizeObserver(e=>{let t=e[0];if(t===void 0){b();return}f.value={height:t.contentRect.height,width:t.contentRect.width}}),y.observe(t)))}return(0,t.onMounted)(()=>{L()}),(0,t.onBeforeUnmount)(()=>{y?.disconnect()}),(0,t.watch)(()=>n.size,()=>{L()}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`counterElement`,ref:d,class:`counter`,style:(0,t.normalizeStyle)(h.value),"aria-label":u.value,role:`img`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(c.value,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:`integer-${n}`,class:`counter__digit`,"data-counter-digit":e,src:r[e],alt:``,draggable:`false`},null,8,N))),128)),l.value.length>0?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,P,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(l.value,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:`fraction-${n}`,class:`counter__digit counter__digit--fraction`,"data-counter-digit":e,src:r[e],alt:``,draggable:`false`},null,8,F))),128))])):(0,t.createCommentVNode)(``,!0)],12,M))}}),R=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},z=R(L,[[`__scopeId`,`data-v-04cf9f01`]]),B={class:`minesweeper-board-layer`},V={class:`minesweeper-board-layer`},H={class:`minesweeper-board-layer minesweeper-board-layer--foreground`},U=R((0,t.defineComponent)({__name:`MinesweeperBoard`,props:{board:{type:Array,default:void 0},size:{type:[Number,String],required:!0,validator:e=>e===`auto`||typeof e==`number`}},setup(e,{expose:n}){let r=e,i=(0,t.ref)(),s=(0,t.ref)(),c=(0,t.ref)({height:0,width:0}),l=(0,t.computed)(()=>r.board?.length??0),u=(0,t.computed)(()=>r.board?.reduce((e,t)=>Math.max(e,t.length),0)??0),d=(0,t.computed)(()=>{if(typeof r.size==`number`)return r.size;let e=u.value>0&&c.value.width>0?c.value.width/u.value:void 0,t=l.value>0&&c.value.height>0?c.value.height/l.value:void 0,n=Math.min(...[e,t].filter(e=>e!==void 0));return Number.isFinite(n)?Math.max(1,n):16});(0,t.provide)(a,{board:(0,t.computed)(()=>r.board),size:(0,t.computed)(()=>d.value)});let f=(0,t.computed)(()=>u.value*d.value),p=(0,t.computed)(()=>l.value*d.value);function m(){s.value!==void 0&&(s.value=void 0)}function h(e){let t=i.value;if(t===void 0||l.value===0||u.value===0){m();return}let n=t.getBoundingClientRect();if(n.width===0||n.height===0||f.value===0||p.value===0){m();return}let a=e.clientX-n.left,o=e.clientY-n.top;if(a<0||o<0||a>=f.value||o>=p.value){m();return}let s=Math.floor(o/d.value),c=Math.floor(a/d.value);if(r.board?.[s]?.[c]===void 0){m();return}g({rowIndex:s,columnIndex:c})}function g(e){s.value?.rowIndex===e.rowIndex&&s.value.columnIndex===e.columnIndex||(s.value=e)}let _;function v(){let e=i.value,t=e?.parentElement??e;if(t===void 0){c.value={height:0,width:0};return}let n=t.getBoundingClientRect();c.value={height:n.height,width:n.width}}function y(){if(_?.disconnect(),_=void 0,r.size!==`auto`)return;let e=i.value,t=e?.parentElement??e;t!==void 0&&(v(),!(typeof ResizeObserver>`u`)&&(_=new ResizeObserver(e=>{let t=e[0];if(t===void 0){v();return}c.value={height:t.contentRect.height,width:t.contentRect.width}}),_.observe(t)))}return(0,t.onMounted)(()=>{y()}),(0,t.onBeforeUnmount)(()=>{_?.disconnect()}),(0,t.watch)(()=>r.size,()=>{y()}),n({cellIndex:s}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`boardElement`,ref:i,class:`minesweeper-board-content`,onMouseleave:m,onMousemove:h},[(0,t.createElementVNode)(`div`,B,[(0,t.renderSlot)(e.$slots,`background`,{board:r.board,size:d.value},()=>[r.board===void 0?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(o,{key:0}))],!0)]),(0,t.createElementVNode)(`div`,V,[(0,t.renderSlot)(e.$slots,`default`,{board:r.board,cellIndex:s.value,size:d.value},void 0,!0)]),(0,t.createElementVNode)(`div`,H,[(0,t.renderSlot)(e.$slots,`foreground`,{board:r.board,size:d.value},()=>[r.board===void 0?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(b,{key:0}))],!0)])],544))}}),[[`__scopeId`,`data-v-ad3db891`]]),W=`outer-border`,G=`inner-border`,K={innerBorder:G,outerBorder:W};e.BoardBackground=o,e.BoardForeground=b,e.Counter=z,e.MinesweeperBoard=U,e.default=U,e.innerBorderClass=G,e.minesweeperBoardClasses=K,e.outerBorderClass=W});

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@putianyi888/vue3-minesweeper-board",
+  "version": "0.1.0",
+  "description": "Vue 3 Minesweeper board component for ms_toollib game board values.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Tianyi Pu",
+  "main": "./dist/minesweeper-board.umd.cjs",
+  "module": "./dist/minesweeper-board.js",
+  "style": "./dist/minesweeper-board.css",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/minesweeper-board.js",
+      "require": "./dist/minesweeper-board.umd.cjs"
+    },
+    "./style.css": "./dist/minesweeper-board.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vue-tsc --noEmit && vite build",
+    "docs:build": "vitepress build docs",
+    "docs:dev": "vitepress dev docs",
+    "docs:preview": "vitepress preview docs",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "prepack": "npm run build",
+    "test": "vitest run",
+    "typecheck": "vue-tsc --noEmit",
+    "pack:dry-run": "npm pack --dry-run"
+  },
+  "peerDependencies": {
+    "@putianyi888/vue3-plots": "^0.6.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@putianyi888/vue3-plots": "^0.6.0",
+    "@types/node": "^26.1.1",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/test-utils": "^2.4.11",
+    "eslint": "^10.7.0",
+    "eslint-plugin-vue": "^10.9.2",
+    "globals": "^17.7.0",
+    "jsdom": "^29.1.1",
+    "ms-toollib": "^1.5.15",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.64.0",
+    "vite": "^8.1.5",
+    "vite-plugin-dts": "^5.0.3",
+    "vite-plugin-top-level-await": "^1.6.0",
+    "vite-plugin-wasm": "^3.6.0",
+    "vitepress": "^1.6.4",
+    "vitest": "^4.1.10",
+    "vue": "^3.5.40",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-tsc": "^3.3.7"
+  }
+}