@mborecki/memory-game 0.3.3 → 0.4.0

package/dist/memory-game/index.esm.js

@@ -0,0 +1,4 @@
+
+//# sourceMappingURL=index.esm.js.map
+
+//# sourceMappingURL=index.esm.js.map

package/dist/{esm → memory-game}/mb-memory-game.entry.js

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent } from './index-D2pBOsDL.js';
+import { h, r as registerInstance, a as createEvent } from './index-Br8RptzJ.js';
 
 function getSet(items, count) {
     console.log('getSet', items, count);
@@ -25,7 +25,7 @@ function getSet(items, count) {
 }
 
 function Tile({ tile, selected, matched, uncovered, reversTile }) {
-    return h("div", { class: {
+    return h("div", { part: "tile", class: {
             'tile-container': true,
             selected,
             matched
@@ -40,13 +40,13 @@ function TileRender({ tile }) {
     }
 }
 
-const memoryGameCss = () => `:host{box-sizing:border-box;display:grid;place-content:center;width:100%;height:100%;container-type:size}[part=container]{width:min(100cqw, 100cqh / var(--aspect, 1));height:min(100cqw * var(--aspect, 1), 100cqh);container-type:size}[part=list]{width:100cqw;height:100cqh;display:grid;grid-template-columns:repeat(var(--cols, 4), 1fr);grid-template-rows:repeat(var(--rows, 4), 1fr)}[part=tile-slot]{display:block;aspect-ratio:1;padding:5%}.tile-container{min-width:0;transition:scale 0.3s;width:100%;height:100%}.tile-container:hover{scale:1.05}.tile-container.selected{scale:1.1}.tile-container.matched{scale:0}.tile{border-radius:var(--tile-border-radius, 5px);border:var(--tile-border-width, 2px) solid var(--tile-border-color, black);padding:0;margin:0}.tile-text{width:100%;height:100%;aspect-ratio:1;background:#d9d9d9;display:grid;place-content:center}.tile-image{width:100%;height:100%}.tile-image img{display:block;width:100%;height:100%;object-fit:cover}`;
+const memoryGameCss = () => `:host{box-sizing:border-box;display:grid;place-content:center;width:100%;height:100%;container-type:size}[part=container]{width:min(100cqw, 100cqh / var(--aspect, 1));height:min(100cqw * var(--aspect, 1), 100cqh);container-type:size}[part=list]{width:100cqw;height:100cqh;display:grid;grid-template-columns:repeat(var(--cols, 4), 1fr);grid-template-rows:repeat(var(--rows, 4), 1fr)}[part=tile-slot]{display:block;aspect-ratio:1;padding:5%}.tile-container{min-width:0;transition:scale 0.3s;width:100%;height:100%}.tile-container:hover{scale:1.05}.tile-container.selected{scale:1.1}.tile-container.matched{scale:0}.tile{border-radius:var(--tile-border-radius, 5px);border:var(--tile-border-width, 2px) solid var(--tile-border-color, black);overflow:hidden;padding:0;margin:0}.tile-text{width:100%;height:100%;aspect-ratio:1;background:#d9d9d9;display:grid;place-content:center}.tile-image{width:100%;height:100%}.tile-image img{display:block;width:100%;height:100%;object-fit:cover}`;
 
 const MbMemoryGame = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.completed = createEvent(this, "completed");
-        this.matched = createEvent(this, "matched");
+        this.completed = createEvent(this, "completed", 7);
+        this.matched = createEvent(this, "matched", 7);
     }
     tileGroups = [];
     watchTileGroups() {
@@ -67,6 +67,7 @@ const MbMemoryGame = class {
     }
     cols;
     blockUI = false;
+    keepMatched = false;
     completed;
     matched;
     componentWillLoad() {
@@ -76,6 +77,7 @@ const MbMemoryGame = class {
         }
     }
     slots = new Map();
+    lastMatched = null;
     get gridCols() {
         if (this.cols) {
             return this.cols;
@@ -116,6 +118,7 @@ const MbMemoryGame = class {
     async onTileClick(id) {
         if (this.blockUI)
             return;
+        this.lastMatched = null;
         if (this.selected.includes(id)) {
             this.selected = this.selected.filter(i => i !== id);
             return;
@@ -133,6 +136,9 @@ const MbMemoryGame = class {
                     this.markAsMatched(t2.id)
                 ]);
                 this.matched.emit({ t1: t1.data, t2: t2.data, groupId: t1.groupId });
+                if (this.keepMatched) {
+                    this.lastMatched = t1.groupId;
+                }
                 this.matchedTiles = [
                     ...this.matchedTiles, t1.id, t2.id
                 ];
@@ -186,13 +192,13 @@ const MbMemoryGame = class {
         });
     }
     render() {
-        return h("div", { key: '18002b4e8ba84bb065f5ecbff5e1a3cde40065bd', part: "container", style: {
+        return h("div", { key: 'c0744288edcde027bb2ec275abe5c5c8f5201545', part: "container", style: {
                 '--aspect': `${this.gridAspectRatio}`
-            } }, h("div", { key: '2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4', part: "list", style: {
+            } }, h("div", { key: 'ba278d3980f1e2278ead7013e97e42931a654a32', part: "list", style: {
                 '--cols': `${this.gridCols}`,
                 '--rows': `${this.gridRows}`
             } }, this.tiles.map(t => {
-            return h("div", { part: "tile-slot", onClick: () => this.onTileClick(t.id), ref: el => this.slots.set(t.id, el) }, h(Tile, { tile: t, selected: this.selected.includes(t.id), matched: this.matchedTiles.includes(t.id), reversTile: this.reverseTile, uncovered: this.selected.includes(t.id) }));
+            return h("div", { part: "tile-slot", onClick: () => this.onTileClick(t.id), ref: el => this.slots.set(t.id, el) }, h(Tile, { tile: t, selected: this.selected.includes(t.id) || t.groupId === this.lastMatched, matched: this.matchedTiles.includes(t.id) && t.groupId !== this.lastMatched, reversTile: this.reverseTile, uncovered: this.selected.includes(t.id) || t.groupId === this.lastMatched }));
         })));
     }
     static get watchers() { return {
@@ -207,3 +213,6 @@ const MbMemoryGame = class {
 MbMemoryGame.style = memoryGameCss();
 
 export { MbMemoryGame as mb_memory_game };
+//# sourceMappingURL=mb-memory-game.entry.esm.js.map
+
+//# sourceMappingURL=mb-memory-game.entry.js.map

package/dist/memory-game/mb-memory-game.entry.js.map

@@ -0,0 +1 @@
+{"file":"mb-memory-game.entry.js","mappings":"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","names":[],"sources":["src/utils/get-set.ts","src/components/sliding-puzzle/tile.tsx","src/components/sliding-puzzle/memory-game.scss?tag=mb-memory-game&encapsulation=shadow","src/components/sliding-puzzle/memory-game.tsx"],"sourcesContent":["export function getSet<T>(items: T[], count: number): T[] {\r\n    console.log('getSet', items, count);\r\n    if (items.length <= 0) throw new Error(\"getSet() - no items\");\r\n\r\n    if(items.length === count) {\r\n        return [...items];\r\n    }\r\n\r\n    let result: T[] = [];\r\n\r\n    while (count - result.length > items.length) {\r\n        result = [\r\n            ...result,\r\n            ...items\r\n        ];\r\n    }\r\n\r\n    const rest = new Set<T>();\r\n\r\n    while (rest.size < count - result.length) {\r\n        rest.add(items[Math.floor(Math.random() * items.length)]);\r\n    }\r\n\r\n    return [\r\n        ...result,\r\n        ...rest\r\n    ]\r\n}\r\n","import { h } from \"@stencil/core\";\r\nimport { ITile, TileDefinition } from \"./types\";\r\n\r\ninterface Props {\r\n    tile: ITile,\r\n    selected: boolean\r\n    matched: boolean\r\n    uncovered: boolean,\r\n    reversTile: TileDefinition\r\n}\r\n\r\nexport function Tile({ tile, selected, matched, uncovered, reversTile }: Props) {\r\n\r\n    return <div\r\n        part=\"tile\"\r\n        class={{\r\n            'tile-container': true,\r\n            selected,\r\n            matched\r\n        }}\r\n    >\r\n        <TileRender tile={uncovered ? tile.data : reversTile} />\r\n    </div>\r\n}\r\n\r\n\r\nfunction TileRender({ tile }: { tile: TileDefinition }) {\r\n    if (tile.type === 'text') {\r\n        return <button class=\"tile tile-text\">{tile.text}</button>\r\n    }\r\n\r\n    if (tile.type === 'image') {\r\n        return <button class=\"tile tile-image\">\r\n            <img src={tile.imageSrc} />\r\n        </button>\r\n    }\r\n}\r\n",":host {\r\n    box-sizing: border-box;\r\n    display: grid;\r\n    place-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    container-type: size;\r\n\r\n}\r\n\r\n[part=container] {\r\n    width: min(100cqw, calc(100cqh / var(--aspect, 1)));\r\n    height: min(calc(100cqw * var(--aspect, 1)), 100cqh);\r\n\r\n    container-type: size;\r\n}\r\n\r\n[part=list] {\r\n    width: 100cqw;\r\n    height: 100cqh;\r\n    display: grid;\r\n    grid-template-columns: repeat(var(--cols, 4), 1fr);\r\n    grid-template-rows: repeat(var(--rows, 4), 1fr);\r\n}\r\n\r\n[part=tile-slot] {\r\n    display: block;\r\n    aspect-ratio: 1;\r\n    padding: 5%;\r\n}\r\n\r\n.tile-container {\r\n    min-width: 0;\r\n    transition: scale .3s;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    &:hover {\r\n        scale: 1.05;\r\n    }\r\n\r\n    &.selected {\r\n        scale: 1.1;\r\n    }\r\n\r\n    &.matched {\r\n        scale: 0;\r\n    }\r\n}\r\n\r\n.tile {\r\n    border-radius: var(--tile-border-radius, 5px);\r\n    border: var(--tile-border-width, 2px) solid var(--tile-border-color, black);\r\n    overflow: hidden;\r\n\r\n    padding: 0;\r\n    margin: 0;\r\n}\r\n\r\n.tile-text {\r\n    width: 100%;\r\n    height: 100%;\r\n    aspect-ratio: 1;\r\n    background: #d9d9d9;\r\n\r\n    display: grid;\r\n    place-content: center;\r\n}\r\n\r\n.tile-image {\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    img {\r\n        display: block;\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n    }\r\n}\r\n","import { Component, EventEmitter, h, Method, Prop, State, Event, Watch } from \"@stencil/core\";\r\nimport { getSet } from \"../../utils/get-set\";\r\nimport { Tile } from \"./tile\";\r\nimport { ITile, MatchedEvent, TileDefinition, TileGroup, TileID } from \"./types\";\r\n\r\n@Component({\r\n  tag: 'mb-memory-game',\r\n  styleUrl: 'memory-game.scss',\r\n  shadow: true,\r\n})\r\nexport class MbMemoryGame {\r\n\r\n  @Prop() tileGroups: TileGroup[] = []\r\n  @Watch('tileGroups')\r\n  watchTileGroups() {\r\n    console.log('watchTileGroups');\r\n    if (this.init) {\r\n      this.initGame();\r\n    }\r\n  }\r\n  @Prop() reverseTile: TileDefinition = { type: 'text', text: '?' }\r\n\r\n  @Prop() init: boolean = true;\r\n\r\n  @State() tiles: ITile[] = [];\r\n  @State() selected: TileID[] = [];\r\n  @State() matchedTiles: (string | number | null)[] = [];\r\n\r\n  @Watch('matchedTiles')\r\n  watchMatchedTiles() {\r\n    if (this.matchedTiles.length === this.tiles.length) {\r\n      this.completed.emit();\r\n    }\r\n  }\r\n\r\n  @Prop() cols?: number\r\n\r\n  blockUI = false;\r\n\r\n  @Prop() keepMatched: boolean = false;\r\n\r\n  @Event() completed: EventEmitter<void>;\r\n\r\n  @Event() matched: EventEmitter<MatchedEvent>;\r\n\r\n  componentWillLoad() {\r\n    console.log('componentDidLoad', this.init, this.tileGroups, this.reverseTile)\r\n    if (this.init && this.tileGroups.length) {\r\n      this.initGame();\r\n    }\r\n  }\r\n\r\n  slots = new Map<TileID, HTMLDivElement>();\r\n\r\n  @State() lastMatched: string | null = null;\r\n\r\n  get gridCols(): number {\r\n    if (this.cols) {\r\n      return this.cols;\r\n    }\r\n\r\n    return Math.floor(Math.sqrt(this.tiles.length));\r\n  }\r\n\r\n  get gridRows(): number {\r\n    return Math.ceil(this.tiles.length / this.gridCols);\r\n  }\r\n\r\n  get gridAspectRatio(): number {\r\n    return this.gridRows / this.gridCols;\r\n  }\r\n\r\n  @Method()\r\n  async initGame(tileGroups: TileGroup[] = this.tileGroups, reverseTile: TileDefinition = this.reverseTile) {\r\n    console.log('initGame', tileGroups);\r\n    this.reverseTile = reverseTile;\r\n    this.buildTiles(tileGroups);\r\n  }\r\n\r\n  private buildTiles(tileGroups: TileGroup[]) {\r\n    let result: ITile[] = [];\r\n    let index = 0;\r\n\r\n    tileGroups.forEach(tg => {\r\n      const tiles = getSet(tg.tiles, tg.count);\r\n\r\n      result = [\r\n        ...result,\r\n        ...tiles.map(t => {\r\n          return {\r\n            id: index++,\r\n            data: { ...t },\r\n            groupId: tg.id,\r\n            uncovered: false,\r\n            matched: false\r\n          }\r\n        })\r\n      ]\r\n    })\r\n\r\n    this.tiles = result.sort(() => Math.random() - .5);\r\n  }\r\n\r\n  async onTileClick(id: string | number) {\r\n    if (this.blockUI) return;\r\n\r\n    this.lastMatched = null;\r\n\r\n    if (this.selected.includes(id)) {\r\n      this.selected = this.selected.filter(i => i !== id);\r\n      return;\r\n    }\r\n\r\n    this.selected = [...this.selected, id];\r\n\r\n    if (this.selected.length === 2) {\r\n      const t1 = this.tiles.find(t => t.id === this.selected[0]);\r\n      const t2 = this.tiles.find(t => t.id === this.selected[1]);\r\n\r\n      if (!t1 || !t2) return;\r\n\r\n      this.blockUI = true;\r\n\r\n      if (t1.groupId === t2.groupId) {\r\n        await Promise.all([\r\n          this.markAsMatched(t1.id),\r\n          this.markAsMatched(t2.id)\r\n        ])\r\n        this.matched.emit({ t1: t1.data, t2: t2.data, groupId: t1.groupId })\r\n\r\n        if (this.keepMatched) {\r\n          this.lastMatched = t1.groupId;\r\n        }\r\n\r\n        this.matchedTiles = [\r\n          ...this.matchedTiles, t1.id, t2.id\r\n        ]\r\n\r\n      } else {\r\n        await Promise.all([\r\n          this.animateWrongMatch(t1.id),\r\n          this.animateWrongMatch(t2.id)\r\n        ])\r\n      }\r\n      this.blockUI = false;\r\n\r\n      this.selected = [];\r\n    }\r\n\r\n  }\r\n\r\n  markAsMatched(id: TileID): Promise<void> {\r\n    return new Promise(resolve => {\r\n      const slot = this.slots.get(id);\r\n      if (!slot) return;\r\n\r\n      const tile = slot.children[0];\r\n      const anim = tile.animate([], { duration: 1000 })\r\n\r\n      anim.addEventListener('finish', () => {\r\n        resolve();\r\n      })\r\n\r\n      anim.addEventListener('cancel', () => {\r\n        resolve();\r\n      })\r\n    })\r\n  }\r\n\r\n  animateWrongMatch(id: TileID): Promise<void> {\r\n    return new Promise(resolve => {\r\n      const slot = this.slots.get(id);\r\n      if (!slot) return;\r\n\r\n      const tile = slot.children[0];\r\n      const anim = tile.animate([\r\n        { rotate: \"0deg\" },\r\n        { rotate: \"0deg\" },\r\n        { rotate: \"30deg\" },\r\n        { rotate: \"0deg\" },\r\n        { rotate: \"-30deg\" },\r\n        { rotate: \"0deg\" },\r\n        { rotate: \"0deg\" },\r\n      ], { duration: 1500 })\r\n\r\n      anim.addEventListener('finish', () => {\r\n        resolve();\r\n      })\r\n\r\n      anim.addEventListener('cancel', () => {\r\n        resolve();\r\n      })\r\n    })\r\n  }\r\n\r\n  render() {\r\n    return <div part=\"container\" style={{\r\n      '--aspect': `${this.gridAspectRatio}`\r\n    }}>\r\n      <div part=\"list\" style={{\r\n        '--cols': `${this.gridCols}`,\r\n        '--rows': `${this.gridRows}`\r\n      }}>\r\n        {this.tiles.map(t => {\r\n          return <div part=\"tile-slot\" onClick={() => this.onTileClick(t.id)} ref={el => this.slots.set(t.id, el!)}>\r\n            <Tile tile={t}\r\n              selected={this.selected.includes(t.id) || t.groupId === this.lastMatched}\r\n              matched={this.matchedTiles.includes(t.id) && t.groupId !== this.lastMatched}\r\n              reversTile={this.reverseTile}\r\n              uncovered={this.selected.includes(t.id) || t.groupId === this.lastMatched}\r\n            />\r\n          </div>\r\n        })}\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n\r\n"],"version":3}

package/dist/memory-game/memory-game.esm.js

@@ -1 +1,50 @@
-import{p as e,b as t}from"./p-D2pBOsDL.js";export{s as setNonce}from"./p-D2pBOsDL.js";import{g as a}from"./p-DQuL1Twl.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((async e=>(await a(),t([["p-c3a7e97d",[[513,"mb-memory-game",{tileGroups:[16],reverseTile:[16],init:[4],cols:[2],tiles:[32],selected:[32],matchedTiles:[32],initGame:[64]},null,{tileGroups:[{watchTileGroups:0}],matchedTiles:[{watchMatchedTiles:0}]}]]]],e))));
+import { B as BUILD, c as consoleDevInfo, H, w as win, N as NAMESPACE, p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-Br8RptzJ.js';
+export { s as setNonce } from './index-Br8RptzJ.js';
+
+/*
+ Stencil Client Patch Browser v4.41.0 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  if (BUILD.isDev && !BUILD.isTesting) {
+    consoleDevInfo("Running in development mode.");
+  }
+  if (BUILD.cloneNodeFix) {
+    patchCloneNodeFix(H.prototype);
+  }
+  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll("script")).find(
+    (s) => new RegExp(`/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute("data-stencil-namespace") === NAMESPACE
+  ) : null;
+  const importMeta = import.meta.url;
+  const opts = BUILD.scriptDataOpts ? (scriptElm || {})["data-opts"] || {} : {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+var patchCloneNodeFix = (HTMLElementPrototype) => {
+  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+  HTMLElementPrototype.cloneNode = function(deep) {
+    if (this.nodeName === "TEMPLATE") {
+      return nativeCloneNodeFn.call(this, deep);
+    }
+    const clonedNode = nativeCloneNodeFn.call(this, false);
+    const srcChildNodes = this.childNodes;
+    if (deep) {
+      for (let i = 0; i < srcChildNodes.length; i++) {
+        if (srcChildNodes[i].nodeType !== 2) {
+          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+        }
+      }
+    }
+    return clonedNode;
+  };
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["mb-memory-game",[[513,"mb-memory-game",{"tileGroups":[16],"reverseTile":[16],"init":[4],"cols":[2],"keepMatched":[4,"keep-matched"],"tiles":[32],"selected":[32],"matchedTiles":[32],"lastMatched":[32],"initGame":[64]},null,{"tileGroups":[{"watchTileGroups":0}],"matchedTiles":[{"watchMatchedTiles":0}]}]]]], options);
+});
+//# sourceMappingURL=memory-game.esm.js.map
+
+//# sourceMappingURL=memory-game.esm.js.map

package/dist/types/components/sliding-puzzle/memory-game.d.ts

@@ -11,10 +11,12 @@ export declare class MbMemoryGame {
     watchMatchedTiles(): void;
     cols?: number;
     blockUI: boolean;
+    keepMatched: boolean;
     completed: EventEmitter<void>;
     matched: EventEmitter<MatchedEvent>;
     componentWillLoad(): void;
     slots: Map<TileID, HTMLDivElement>;
+    lastMatched: string | null;
     get gridCols(): number;
     get gridRows(): number;
     get gridAspectRatio(): number;

package/dist/types/components.d.ts

@@ -15,6 +15,10 @@ export namespace Components {
          */
         "init": boolean;
         "initGame": (tileGroups?: TileGroup[], reverseTile?: TileDefinition) => Promise<void>;
+        /**
+          * @default false
+         */
+        "keepMatched": boolean;
         /**
           * @default { type: 'text', text: '?' }
          */
@@ -59,6 +63,10 @@ declare namespace LocalJSX {
           * @default true
          */
         "init"?: boolean;
+        /**
+          * @default false
+         */
+        "keepMatched"?: boolean;
         "onCompleted"?: (event: MbMemoryGameCustomEvent<void>) => void;
         "onMatched"?: (event: MbMemoryGameCustomEvent<MatchedEvent>) => void;
         /**

package/dist/types/roboczy/mb-puzzle/apps/memory-game/.stencil/shared/grid/src/grid.d.ts

@@ -16,4 +16,6 @@ export declare class Grid {
     static getIndexFromVec(v: Vec2, width: number | Vec2): number;
     static isInGrid(v: Vec2, size: Vec2): boolean;
     static getOrtoSiblings(v: Vec2, size: Vec2): Vec2[];
+    static areIndexSiblings(index1: number, index2: number, width: number): boolean;
+    static areSiblings(v1: Vec2, v2: Vec2): boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mborecki/memory-game",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "private": false,
   "type": "module",
   "description": "Sliding Puzzle",
@@ -41,7 +41,7 @@
     "typescript": "5.9.3",
     "vitest": "4.0.16",
     "@mb-puzzle/vec2": "0.9.0",
-    "@mb-puzzle/grid": "0.2.2"
+    "@mb-puzzle/grid": "0.3.0"
   },
   "license": "MIT",
   "scripts": {

package/dist/cjs/app-globals-V2Kpy_OQ.js

@@ -1,5 +0,0 @@
-'use strict';
-
-const globalScripts = () => {};
-
-exports.globalScripts = globalScripts;