@mborecki/memory-game 0.3.4 → 0.4.1

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mb-memory-game.cjs",[[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}]}]]]], options);
+  return index.bootstrapLazy([["mb-memory-game.cjs",[[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);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -69,6 +69,7 @@ const MbMemoryGame = class {
     }
     cols;
     blockUI = false;
+    keepMatched = false;
     completed;
     matched;
     componentWillLoad() {
@@ -78,6 +79,7 @@ const MbMemoryGame = class {
         }
     }
     slots = new Map();
+    lastMatched = null;
     get gridCols() {
         if (this.cols) {
             return this.cols;
@@ -118,6 +120,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;
@@ -135,6 +138,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
                 ];
@@ -188,13 +194,13 @@ const MbMemoryGame = class {
         });
     }
     render() {
-        return index.h("div", { key: '18002b4e8ba84bb065f5ecbff5e1a3cde40065bd', part: "container", style: {
+        return index.h("div", { key: '0919333971e5a2a625da795a16243209a4d4f861', part: "container", style: {
                 '--aspect': `${this.gridAspectRatio}`
-            } }, index.h("div", { key: '2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4', part: "list", style: {
+            } }, index.h("div", { key: 'fcfba146bb8304d9da1a749509bb84a5650d08e7', part: "list", style: {
                 '--cols': `${this.gridCols}`,
                 '--rows': `${this.gridRows}`
             } }, this.tiles.map(t => {
-            return index.h("div", { part: "tile-slot", onClick: () => this.onTileClick(t.id), ref: el => this.slots.set(t.id, el) }, index.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 index.h("div", { part: "tile-slot", onClick: () => this.onTileClick(t.id), ref: el => this.slots.set(t.id, el) }, index.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 {

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

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mb-memory-game.cjs",[[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}]}]]]], options);
+  return index.bootstrapLazy([["mb-memory-game.cjs",[[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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/sliding-puzzle/memory-game.js

@@ -21,6 +21,7 @@ export class MbMemoryGame {
     }
     cols;
     blockUI = false;
+    keepMatched = false;
     completed;
     matched;
     componentWillLoad() {
@@ -30,6 +31,7 @@ export class MbMemoryGame {
         }
     }
     slots = new Map();
+    lastMatched = null;
     get gridCols() {
         if (this.cols) {
             return this.cols;
@@ -70,6 +72,7 @@ export class MbMemoryGame {
     async onTileClick(id) {
         if (this.blockUI)
             return;
+        this.lastMatched = null;
         if (this.selected.includes(id)) {
             this.selected = this.selected.filter(i => i !== id);
             return;
@@ -87,6 +90,9 @@ export class MbMemoryGame {
                     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
                 ];
@@ -140,13 +146,13 @@ export class MbMemoryGame {
         });
     }
     render() {
-        return h("div", { key: '18002b4e8ba84bb065f5ecbff5e1a3cde40065bd', part: "container", style: {
+        return h("div", { key: '0919333971e5a2a625da795a16243209a4d4f861', part: "container", style: {
                 '--aspect': `${this.gridAspectRatio}`
-            } }, h("div", { key: '2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4', part: "list", style: {
+            } }, h("div", { key: 'fcfba146bb8304d9da1a749509bb84a5650d08e7', 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 is() { return "mb-memory-game"; }
@@ -251,6 +257,26 @@ export class MbMemoryGame {
                 "setter": false,
                 "reflect": false,
                 "attribute": "cols"
+            },
+            "keepMatched": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keep-matched",
+                "defaultValue": "false"
             }
         };
     }
@@ -258,7 +284,8 @@ export class MbMemoryGame {
         return {
             "tiles": {},
             "selected": {},
-            "matchedTiles": {}
+            "matchedTiles": {},
+            "lastMatched": {}
         };
     }
     static get events() {

package/dist/components/mb-memory-game.js

@@ -1 +1 @@
-import{h as t,t as e,p as i,H as s,c as r}from"./index.js";function a({tile:e,selected:i,matched:s,uncovered:r,reversTile:a}){return t("div",{part:"tile",class:{"tile-container":!0,selected:i,matched:s}},t(o,{tile:r?e.data:a}))}function o({tile:e}){return"text"===e.type?t("button",{class:"tile tile-text"},e.text):"image"===e.type?t("button",{class:"tile tile-image"},t("img",{src:e.imageSrc})):void 0}const c=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.completed=r(this,"completed"),this.matched=r(this,"matched")}tileGroups=[];watchTileGroups(){console.log("watchTileGroups"),this.init&&this.initGame()}reverseTile={type:"text",text:"?"};init=!0;tiles=[];selected=[];matchedTiles=[];watchMatchedTiles(){this.matchedTiles.length===this.tiles.length&&this.completed.emit()}cols;blockUI=!1;completed;matched;componentWillLoad(){console.log("componentDidLoad",this.init,this.tileGroups,this.reverseTile),this.init&&this.tileGroups.length&&this.initGame()}slots=new Map;get gridCols(){return this.cols?this.cols:Math.floor(Math.sqrt(this.tiles.length))}get gridRows(){return Math.ceil(this.tiles.length/this.gridCols)}get gridAspectRatio(){return this.gridRows/this.gridCols}async initGame(t=this.tileGroups,e=this.reverseTile){console.log("initGame",t),this.reverseTile=e,this.buildTiles(t)}buildTiles(t){let e=[],i=0;t.forEach((t=>{const s=function(t,e){if(console.log("getSet",t,e),t.length<=0)throw Error("getSet() - no items");if(t.length===e)return[...t];let i=[];for(;e-i.length>t.length;)i=[...i,...t];const s=new Set;for(;s.size<e-i.length;)s.add(t[Math.floor(Math.random()*t.length)]);return[...i,...s]}(t.tiles,t.count);e=[...e,...s.map((e=>({id:i++,data:{...e},groupId:t.id,uncovered:!1,matched:!1})))]})),this.tiles=e.sort((()=>Math.random()-.5))}async onTileClick(t){if(!this.blockUI)if(this.selected.includes(t))this.selected=this.selected.filter((e=>e!==t));else if(this.selected=[...this.selected,t],2===this.selected.length){const t=this.tiles.find((t=>t.id===this.selected[0])),e=this.tiles.find((t=>t.id===this.selected[1]));if(!t||!e)return;this.blockUI=!0,t.groupId===e.groupId?(await Promise.all([this.markAsMatched(t.id),this.markAsMatched(e.id)]),this.matched.emit({t1:t.data,t2:e.data,groupId:t.groupId}),this.matchedTiles=[...this.matchedTiles,t.id,e.id]):await Promise.all([this.animateWrongMatch(t.id),this.animateWrongMatch(e.id)]),this.blockUI=!1,this.selected=[]}}markAsMatched(t){return new Promise((e=>{const i=this.slots.get(t);if(!i)return;const s=i.children[0].animate([],{duration:1e3});s.addEventListener("finish",(()=>{e()})),s.addEventListener("cancel",(()=>{e()}))}))}animateWrongMatch(t){return new Promise((e=>{const i=this.slots.get(t);if(!i)return;const s=i.children[0].animate([{rotate:"0deg"},{rotate:"0deg"},{rotate:"30deg"},{rotate:"0deg"},{rotate:"-30deg"},{rotate:"0deg"},{rotate:"0deg"}],{duration:1500});s.addEventListener("finish",(()=>{e()})),s.addEventListener("cancel",(()=>{e()}))}))}render(){return t("div",{key:"18002b4e8ba84bb065f5ecbff5e1a3cde40065bd",part:"container",style:{"--aspect":""+this.gridAspectRatio}},t("div",{key:"2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4",part:"list",style:{"--cols":""+this.gridCols,"--rows":""+this.gridRows}},this.tiles.map((e=>t("div",{part:"tile-slot",onClick:()=>this.onTileClick(e.id),ref:t=>this.slots.set(e.id,t)},t(a,{tile:e,selected:this.selected.includes(e.id),matched:this.matchedTiles.includes(e.id),reversTile:this.reverseTile,uncovered:this.selected.includes(e.id)}))))))}static get watchers(){return{tileGroups:[{watchTileGroups:0}],matchedTiles:[{watchMatchedTiles:0}]}}static get style(){return":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}"}},[513,"mb-memory-game",{tileGroups:[16],reverseTile:[16],init:[4],cols:[2],tiles:[32],selected:[32],matchedTiles:[32],initGame:[64]},void 0,{tileGroups:[{watchTileGroups:0}],matchedTiles:[{watchMatchedTiles:0}]}]);function h(){"undefined"!=typeof customElements&&["mb-memory-game"].forEach((t=>{"mb-memory-game"===t&&(customElements.get(e(t))||customElements.define(e(t),c))}))}h();const n=c,l=h;export{n as MbMemoryGame,l as defineCustomElement}
+import{h as t,t as e,p as i,H as s,c as r}from"./index.js";function a({tile:e,selected:i,matched:s,uncovered:r,reversTile:a}){return t("div",{part:"tile",class:{"tile-container":!0,selected:i,matched:s}},t(h,{tile:r?e.data:a}))}function h({tile:e}){return"text"===e.type?t("button",{class:"tile tile-text"},e.text):"image"===e.type?t("button",{class:"tile tile-image"},t("img",{src:e.imageSrc})):void 0}const o=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.completed=r(this,"completed"),this.matched=r(this,"matched")}tileGroups=[];watchTileGroups(){console.log("watchTileGroups"),this.init&&this.initGame()}reverseTile={type:"text",text:"?"};init=!0;tiles=[];selected=[];matchedTiles=[];watchMatchedTiles(){this.matchedTiles.length===this.tiles.length&&this.completed.emit()}cols;blockUI=!1;keepMatched=!1;completed;matched;componentWillLoad(){console.log("componentDidLoad",this.init,this.tileGroups,this.reverseTile),this.init&&this.tileGroups.length&&this.initGame()}slots=new Map;lastMatched=null;get gridCols(){return this.cols?this.cols:Math.floor(Math.sqrt(this.tiles.length))}get gridRows(){return Math.ceil(this.tiles.length/this.gridCols)}get gridAspectRatio(){return this.gridRows/this.gridCols}async initGame(t=this.tileGroups,e=this.reverseTile){console.log("initGame",t),this.reverseTile=e,this.buildTiles(t)}buildTiles(t){let e=[],i=0;t.forEach((t=>{const s=function(t,e){if(console.log("getSet",t,e),t.length<=0)throw Error("getSet() - no items");if(t.length===e)return[...t];let i=[];for(;e-i.length>t.length;)i=[...i,...t];const s=new Set;for(;s.size<e-i.length;)s.add(t[Math.floor(Math.random()*t.length)]);return[...i,...s]}(t.tiles,t.count);e=[...e,...s.map((e=>({id:i++,data:{...e},groupId:t.id,uncovered:!1,matched:!1})))]})),this.tiles=e.sort((()=>Math.random()-.5))}async onTileClick(t){if(!this.blockUI)if(this.lastMatched=null,this.selected.includes(t))this.selected=this.selected.filter((e=>e!==t));else if(this.selected=[...this.selected,t],2===this.selected.length){const t=this.tiles.find((t=>t.id===this.selected[0])),e=this.tiles.find((t=>t.id===this.selected[1]));if(!t||!e)return;this.blockUI=!0,t.groupId===e.groupId?(await Promise.all([this.markAsMatched(t.id),this.markAsMatched(e.id)]),this.matched.emit({t1:t.data,t2:e.data,groupId:t.groupId}),this.keepMatched&&(this.lastMatched=t.groupId),this.matchedTiles=[...this.matchedTiles,t.id,e.id]):await Promise.all([this.animateWrongMatch(t.id),this.animateWrongMatch(e.id)]),this.blockUI=!1,this.selected=[]}}markAsMatched(t){return new Promise((e=>{const i=this.slots.get(t);if(!i)return;const s=i.children[0].animate([],{duration:1e3});s.addEventListener("finish",(()=>{e()})),s.addEventListener("cancel",(()=>{e()}))}))}animateWrongMatch(t){return new Promise((e=>{const i=this.slots.get(t);if(!i)return;const s=i.children[0].animate([{rotate:"0deg"},{rotate:"0deg"},{rotate:"30deg"},{rotate:"0deg"},{rotate:"-30deg"},{rotate:"0deg"},{rotate:"0deg"}],{duration:1500});s.addEventListener("finish",(()=>{e()})),s.addEventListener("cancel",(()=>{e()}))}))}render(){return t("div",{key:"0919333971e5a2a625da795a16243209a4d4f861",part:"container",style:{"--aspect":""+this.gridAspectRatio}},t("div",{key:"fcfba146bb8304d9da1a749509bb84a5650d08e7",part:"list",style:{"--cols":""+this.gridCols,"--rows":""+this.gridRows}},this.tiles.map((e=>t("div",{part:"tile-slot",onClick:()=>this.onTileClick(e.id),ref:t=>this.slots.set(e.id,t)},t(a,{tile:e,selected:this.selected.includes(e.id)||e.groupId===this.lastMatched,matched:this.matchedTiles.includes(e.id)&&e.groupId!==this.lastMatched,reversTile:this.reverseTile,uncovered:this.selected.includes(e.id)||e.groupId===this.lastMatched}))))))}static get watchers(){return{tileGroups:[{watchTileGroups:0}],matchedTiles:[{watchMatchedTiles:0}]}}static get style(){return":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}"}},[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]},void 0,{tileGroups:[{watchTileGroups:0}],matchedTiles:[{watchMatchedTiles:0}]}]);function c(){"undefined"!=typeof customElements&&["mb-memory-game"].forEach((t=>{"mb-memory-game"===t&&(customElements.get(e(t))||customElements.define(e(t),o))}))}c();const l=o,n=c;export{l as MbMemoryGame,n as defineCustomElement}

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["mb-memory-game",[[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}]}]]]], options);
+  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);
 };
 
 export { defineCustomElements };

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

@@ -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: '0919333971e5a2a625da795a16243209a4d4f861', part: "container", style: {
                 '--aspect': `${this.gridAspectRatio}`
-            } }, h("div", { key: '2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4', part: "list", style: {
+            } }, h("div", { key: 'fcfba146bb8304d9da1a749509bb84a5650d08e7', 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 {

package/dist/esm/memory-game.js

@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["mb-memory-game",[[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}]}]]]], options);
+  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);
 });

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

@@ -1 +1 @@
-import{p as e,b as t}from"./p-D2pBOsDL.js";export{s as setNonce}from"./p-D2pBOsDL.js";import{g as i}from"./p-DQuL1Twl.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((async e=>(await i(),t([["p-0918f52d",[[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{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-f3557562",[[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}]}]]]],e))));

package/dist/memory-game/p-f3557562.entry.js

@@ -0,0 +1 @@
+import{h as t,r as e,c as i}from"./p-D2pBOsDL.js";function s({tile:e,selected:i,matched:s,uncovered:a,reversTile:h}){return t("div",{part:"tile",class:{"tile-container":!0,selected:i,matched:s}},t(r,{tile:a?e.data:h}))}function r({tile:e}){return"text"===e.type?t("button",{class:"tile tile-text"},e.text):"image"===e.type?t("button",{class:"tile tile-image"},t("img",{src:e.imageSrc})):void 0}const a=class{constructor(t){e(this,t),this.completed=i(this,"completed"),this.matched=i(this,"matched")}tileGroups=[];watchTileGroups(){console.log("watchTileGroups"),this.init&&this.initGame()}reverseTile={type:"text",text:"?"};init=!0;tiles=[];selected=[];matchedTiles=[];watchMatchedTiles(){this.matchedTiles.length===this.tiles.length&&this.completed.emit()}cols;blockUI=!1;keepMatched=!1;completed;matched;componentWillLoad(){console.log("componentDidLoad",this.init,this.tileGroups,this.reverseTile),this.init&&this.tileGroups.length&&this.initGame()}slots=new Map;lastMatched=null;get gridCols(){return this.cols?this.cols:Math.floor(Math.sqrt(this.tiles.length))}get gridRows(){return Math.ceil(this.tiles.length/this.gridCols)}get gridAspectRatio(){return this.gridRows/this.gridCols}async initGame(t=this.tileGroups,e=this.reverseTile){console.log("initGame",t),this.reverseTile=e,this.buildTiles(t)}buildTiles(t){let e=[],i=0;t.forEach((t=>{const s=function(t,e){if(console.log("getSet",t,e),t.length<=0)throw new Error("getSet() - no items");if(t.length===e)return[...t];let i=[];for(;e-i.length>t.length;)i=[...i,...t];const s=new Set;for(;s.size<e-i.length;)s.add(t[Math.floor(Math.random()*t.length)]);return[...i,...s]}(t.tiles,t.count);e=[...e,...s.map((e=>({id:i++,data:{...e},groupId:t.id,uncovered:!1,matched:!1})))]})),this.tiles=e.sort((()=>Math.random()-.5))}async onTileClick(t){if(!this.blockUI)if(this.lastMatched=null,this.selected.includes(t))this.selected=this.selected.filter((e=>e!==t));else if(this.selected=[...this.selected,t],2===this.selected.length){const t=this.tiles.find((t=>t.id===this.selected[0])),e=this.tiles.find((t=>t.id===this.selected[1]));if(!t||!e)return;this.blockUI=!0,t.groupId===e.groupId?(await Promise.all([this.markAsMatched(t.id),this.markAsMatched(e.id)]),this.matched.emit({t1:t.data,t2:e.data,groupId:t.groupId}),this.keepMatched&&(this.lastMatched=t.groupId),this.matchedTiles=[...this.matchedTiles,t.id,e.id]):await Promise.all([this.animateWrongMatch(t.id),this.animateWrongMatch(e.id)]),this.blockUI=!1,this.selected=[]}}markAsMatched(t){return new Promise((e=>{const i=this.slots.get(t);if(!i)return;const s=i.children[0].animate([],{duration:1e3});s.addEventListener("finish",(()=>{e()})),s.addEventListener("cancel",(()=>{e()}))}))}animateWrongMatch(t){return new Promise((e=>{const i=this.slots.get(t);if(!i)return;const s=i.children[0].animate([{rotate:"0deg"},{rotate:"0deg"},{rotate:"30deg"},{rotate:"0deg"},{rotate:"-30deg"},{rotate:"0deg"},{rotate:"0deg"}],{duration:1500});s.addEventListener("finish",(()=>{e()})),s.addEventListener("cancel",(()=>{e()}))}))}render(){return t("div",{key:"0919333971e5a2a625da795a16243209a4d4f861",part:"container",style:{"--aspect":`${this.gridAspectRatio}`}},t("div",{key:"fcfba146bb8304d9da1a749509bb84a5650d08e7",part:"list",style:{"--cols":`${this.gridCols}`,"--rows":`${this.gridRows}`}},this.tiles.map((e=>t("div",{part:"tile-slot",onClick:()=>this.onTileClick(e.id),ref:t=>this.slots.set(e.id,t)},t(s,{tile:e,selected:this.selected.includes(e.id)||e.groupId===this.lastMatched,matched:this.matchedTiles.includes(e.id)&&e.groupId!==this.lastMatched,reversTile:this.reverseTile,uncovered:this.selected.includes(e.id)||e.groupId===this.lastMatched}))))))}static get watchers(){return{tileGroups:[{watchTileGroups:0}],matchedTiles:[{watchMatchedTiles:0}]}}};a.style=":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}";export{a as mb_memory_game}

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.4",
+  "version": "0.4.1",
   "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/memory-game/p-0918f52d.entry.js

@@ -1 +0,0 @@
-import{h as t,r as e,c as i}from"./p-D2pBOsDL.js";function s({tile:e,selected:i,matched:s,uncovered:a,reversTile:h}){return t("div",{part:"tile",class:{"tile-container":!0,selected:i,matched:s}},t(r,{tile:a?e.data:h}))}function r({tile:e}){return"text"===e.type?t("button",{class:"tile tile-text"},e.text):"image"===e.type?t("button",{class:"tile tile-image"},t("img",{src:e.imageSrc})):void 0}const a=class{constructor(t){e(this,t),this.completed=i(this,"completed"),this.matched=i(this,"matched")}tileGroups=[];watchTileGroups(){console.log("watchTileGroups"),this.init&&this.initGame()}reverseTile={type:"text",text:"?"};init=!0;tiles=[];selected=[];matchedTiles=[];watchMatchedTiles(){this.matchedTiles.length===this.tiles.length&&this.completed.emit()}cols;blockUI=!1;completed;matched;componentWillLoad(){console.log("componentDidLoad",this.init,this.tileGroups,this.reverseTile),this.init&&this.tileGroups.length&&this.initGame()}slots=new Map;get gridCols(){return this.cols?this.cols:Math.floor(Math.sqrt(this.tiles.length))}get gridRows(){return Math.ceil(this.tiles.length/this.gridCols)}get gridAspectRatio(){return this.gridRows/this.gridCols}async initGame(t=this.tileGroups,e=this.reverseTile){console.log("initGame",t),this.reverseTile=e,this.buildTiles(t)}buildTiles(t){let e=[],i=0;t.forEach((t=>{const s=function(t,e){if(console.log("getSet",t,e),t.length<=0)throw new Error("getSet() - no items");if(t.length===e)return[...t];let i=[];for(;e-i.length>t.length;)i=[...i,...t];const s=new Set;for(;s.size<e-i.length;)s.add(t[Math.floor(Math.random()*t.length)]);return[...i,...s]}(t.tiles,t.count);e=[...e,...s.map((e=>({id:i++,data:{...e},groupId:t.id,uncovered:!1,matched:!1})))]})),this.tiles=e.sort((()=>Math.random()-.5))}async onTileClick(t){if(!this.blockUI)if(this.selected.includes(t))this.selected=this.selected.filter((e=>e!==t));else if(this.selected=[...this.selected,t],2===this.selected.length){const t=this.tiles.find((t=>t.id===this.selected[0])),e=this.tiles.find((t=>t.id===this.selected[1]));if(!t||!e)return;this.blockUI=!0,t.groupId===e.groupId?(await Promise.all([this.markAsMatched(t.id),this.markAsMatched(e.id)]),this.matched.emit({t1:t.data,t2:e.data,groupId:t.groupId}),this.matchedTiles=[...this.matchedTiles,t.id,e.id]):await Promise.all([this.animateWrongMatch(t.id),this.animateWrongMatch(e.id)]),this.blockUI=!1,this.selected=[]}}markAsMatched(t){return new Promise((e=>{const i=this.slots.get(t);if(!i)return;const s=i.children[0].animate([],{duration:1e3});s.addEventListener("finish",(()=>{e()})),s.addEventListener("cancel",(()=>{e()}))}))}animateWrongMatch(t){return new Promise((e=>{const i=this.slots.get(t);if(!i)return;const s=i.children[0].animate([{rotate:"0deg"},{rotate:"0deg"},{rotate:"30deg"},{rotate:"0deg"},{rotate:"-30deg"},{rotate:"0deg"},{rotate:"0deg"}],{duration:1500});s.addEventListener("finish",(()=>{e()})),s.addEventListener("cancel",(()=>{e()}))}))}render(){return t("div",{key:"18002b4e8ba84bb065f5ecbff5e1a3cde40065bd",part:"container",style:{"--aspect":`${this.gridAspectRatio}`}},t("div",{key:"2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4",part:"list",style:{"--cols":`${this.gridCols}`,"--rows":`${this.gridRows}`}},this.tiles.map((e=>t("div",{part:"tile-slot",onClick:()=>this.onTileClick(e.id),ref:t=>this.slots.set(e.id,t)},t(s,{tile:e,selected:this.selected.includes(e.id),matched:this.matchedTiles.includes(e.id),reversTile:this.reverseTile,uncovered:this.selected.includes(e.id)}))))))}static get watchers(){return{tileGroups:[{watchTileGroups:0}],matchedTiles:[{watchMatchedTiles:0}]}}};a.style=":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}";export{a as mb_memory_game}