@mborecki/memory-game 0.3.2 → 0.3.4

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],"uncoverSelected":[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],"tiles":[32],"selected":[32],"matchedTiles":[32],"initGame":[64]},null,{"tileGroups":[{"watchTileGroups":0}],"matchedTiles":[{"watchMatchedTiles":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -27,7 +27,7 @@ function getSet(items, count) {
 }
 
 function Tile({ tile, selected, matched, uncovered, reversTile }) {
-    return index.h("div", { class: {
+    return index.h("div", { part: "tile", class: {
             'tile-container': true,
             selected,
             matched
@@ -42,7 +42,7 @@ 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;background:pink}[part=list]{width:100cqw;height:100cqh;display:grid;grid-template-columns:repeat(var(--cols, 4), 1fr);grid-template-columns: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) {
@@ -52,6 +52,7 @@ const MbMemoryGame = class {
     }
     tileGroups = [];
     watchTileGroups() {
+        console.log('watchTileGroups');
         if (this.init) {
             this.initGame();
         }
@@ -68,7 +69,6 @@ const MbMemoryGame = class {
     }
     cols;
     blockUI = false;
-    uncoverSelected = false;
     completed;
     matched;
     componentWillLoad() {
@@ -88,7 +88,7 @@ const MbMemoryGame = class {
         return Math.ceil(this.tiles.length / this.gridCols);
     }
     get gridAspectRatio() {
-        return this.gridCols / this.gridRows;
+        return this.gridRows / this.gridCols;
     }
     async initGame(tileGroups = this.tileGroups, reverseTile = this.reverseTile) {
         console.log('initGame', tileGroups);
@@ -129,7 +129,6 @@ const MbMemoryGame = class {
             if (!t1 || !t2)
                 return;
             this.blockUI = true;
-            this.uncoverSelected = true;
             if (t1.groupId === t2.groupId) {
                 await Promise.all([
                     this.markAsMatched(t1.id),
@@ -146,7 +145,6 @@ const MbMemoryGame = class {
                     this.animateWrongMatch(t2.id)
                 ]);
             }
-            this.uncoverSelected = false;
             this.blockUI = false;
             this.selected = [];
         }
@@ -190,13 +188,13 @@ const MbMemoryGame = class {
         });
     }
     render() {
-        return index.h("div", { key: '56287b90e45786be67ed85b8964bb99a6589f2b5', part: "container", style: {
+        return index.h("div", { key: '18002b4e8ba84bb065f5ecbff5e1a3cde40065bd', part: "container", style: {
                 '--aspect': `${this.gridAspectRatio}`
-            } }, index.h("div", { key: 'cc965692a5523254c6930a26cb244a24fa7c05f7', part: "list", style: {
+            } }, index.h("div", { key: '2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4', 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.uncoverSelected && 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), matched: this.matchedTiles.includes(t.id), reversTile: this.reverseTile, uncovered: this.selected.includes(t.id) }));
         })));
     }
     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],"uncoverSelected":[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],"tiles":[32],"selected":[32],"matchedTiles":[32],"initGame":[64]},null,{"tileGroups":[{"watchTileGroups":0}],"matchedTiles":[{"watchMatchedTiles":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -11,7 +11,6 @@
   width: min(100cqw, 100cqh / var(--aspect, 1));
   height: min(100cqw * var(--aspect, 1), 100cqh);
   container-type: size;
-  background: pink;
 }
 
 [part=list] {
@@ -19,7 +18,7 @@
   height: 100cqh;
   display: grid;
   grid-template-columns: repeat(var(--cols, 4), 1fr);
-  grid-template-columns: repeat(var(--rows, 4), 1fr);
+  grid-template-rows: repeat(var(--rows, 4), 1fr);
 }
 
 [part=tile-slot] {
@@ -47,6 +46,7 @@
 .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;
 }

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

@@ -4,6 +4,7 @@ import { Tile } from "./tile";
 export class MbMemoryGame {
     tileGroups = [];
     watchTileGroups() {
+        console.log('watchTileGroups');
         if (this.init) {
             this.initGame();
         }
@@ -20,7 +21,6 @@ export class MbMemoryGame {
     }
     cols;
     blockUI = false;
-    uncoverSelected = false;
     completed;
     matched;
     componentWillLoad() {
@@ -40,7 +40,7 @@ export class MbMemoryGame {
         return Math.ceil(this.tiles.length / this.gridCols);
     }
     get gridAspectRatio() {
-        return this.gridCols / this.gridRows;
+        return this.gridRows / this.gridCols;
     }
     async initGame(tileGroups = this.tileGroups, reverseTile = this.reverseTile) {
         console.log('initGame', tileGroups);
@@ -81,7 +81,6 @@ export class MbMemoryGame {
             if (!t1 || !t2)
                 return;
             this.blockUI = true;
-            this.uncoverSelected = true;
             if (t1.groupId === t2.groupId) {
                 await Promise.all([
                     this.markAsMatched(t1.id),
@@ -98,7 +97,6 @@ export class MbMemoryGame {
                     this.animateWrongMatch(t2.id)
                 ]);
             }
-            this.uncoverSelected = false;
             this.blockUI = false;
             this.selected = [];
         }
@@ -142,13 +140,13 @@ export class MbMemoryGame {
         });
     }
     render() {
-        return h("div", { key: '56287b90e45786be67ed85b8964bb99a6589f2b5', part: "container", style: {
+        return h("div", { key: '18002b4e8ba84bb065f5ecbff5e1a3cde40065bd', part: "container", style: {
                 '--aspect': `${this.gridAspectRatio}`
-            } }, h("div", { key: 'cc965692a5523254c6930a26cb244a24fa7c05f7', part: "list", style: {
+            } }, h("div", { key: '2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4', 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.uncoverSelected && 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), matched: this.matchedTiles.includes(t.id), reversTile: this.reverseTile, uncovered: this.selected.includes(t.id) }));
         })));
     }
     static get is() { return "mb-memory-game"; }
@@ -260,8 +258,7 @@ export class MbMemoryGame {
         return {
             "tiles": {},
             "selected": {},
-            "matchedTiles": {},
-            "uncoverSelected": {}
+            "matchedTiles": {}
         };
     }
     static get events() {

package/dist/collection/components/sliding-puzzle/tile.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export function Tile({ tile, selected, matched, uncovered, reversTile }) {
-    return h("div", { class: {
+    return h("div", { part: "tile", class: {
             'tile-container': true,
             selected,
             matched

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",{class:{"tile-container":!0,selected:i,matched:s}},t(c,{tile:r?e.data:a}))}function c({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(){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;uncoverSelected=!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.gridCols/this.gridRows}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,this.uncoverSelected=!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.uncoverSelected=!1,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:"56287b90e45786be67ed85b8964bb99a6589f2b5",part:"container",style:{"--aspect":""+this.gridAspectRatio}},t("div",{key:"cc965692a5523254c6930a26cb244a24fa7c05f7",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.uncoverSelected&&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;background:pink}[part=list]{width:100cqw;height:100cqh;display:grid;grid-template-columns:repeat(var(--cols, 4), 1fr);grid-template-columns: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}"}},[513,"mb-memory-game",{tileGroups:[16],reverseTile:[16],init:[4],cols:[2],tiles:[32],selected:[32],matchedTiles:[32],uncoverSelected:[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),o))}))}h();const n=o,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(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}

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],"uncoverSelected":[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],"tiles":[32],"selected":[32],"matchedTiles":[32],"initGame":[64]},null,{"tileGroups":[{"watchTileGroups":0}],"matchedTiles":[{"watchMatchedTiles":0}]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -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,7 +40,7 @@ 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;background:pink}[part=list]{width:100cqw;height:100cqh;display:grid;grid-template-columns:repeat(var(--cols, 4), 1fr);grid-template-columns: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) {
@@ -50,6 +50,7 @@ const MbMemoryGame = class {
     }
     tileGroups = [];
     watchTileGroups() {
+        console.log('watchTileGroups');
         if (this.init) {
             this.initGame();
         }
@@ -66,7 +67,6 @@ const MbMemoryGame = class {
     }
     cols;
     blockUI = false;
-    uncoverSelected = false;
     completed;
     matched;
     componentWillLoad() {
@@ -86,7 +86,7 @@ const MbMemoryGame = class {
         return Math.ceil(this.tiles.length / this.gridCols);
     }
     get gridAspectRatio() {
-        return this.gridCols / this.gridRows;
+        return this.gridRows / this.gridCols;
     }
     async initGame(tileGroups = this.tileGroups, reverseTile = this.reverseTile) {
         console.log('initGame', tileGroups);
@@ -127,7 +127,6 @@ const MbMemoryGame = class {
             if (!t1 || !t2)
                 return;
             this.blockUI = true;
-            this.uncoverSelected = true;
             if (t1.groupId === t2.groupId) {
                 await Promise.all([
                     this.markAsMatched(t1.id),
@@ -144,7 +143,6 @@ const MbMemoryGame = class {
                     this.animateWrongMatch(t2.id)
                 ]);
             }
-            this.uncoverSelected = false;
             this.blockUI = false;
             this.selected = [];
         }
@@ -188,13 +186,13 @@ const MbMemoryGame = class {
         });
     }
     render() {
-        return h("div", { key: '56287b90e45786be67ed85b8964bb99a6589f2b5', part: "container", style: {
+        return h("div", { key: '18002b4e8ba84bb065f5ecbff5e1a3cde40065bd', part: "container", style: {
                 '--aspect': `${this.gridAspectRatio}`
-            } }, h("div", { key: 'cc965692a5523254c6930a26cb244a24fa7c05f7', part: "list", style: {
+            } }, h("div", { key: '2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4', 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.uncoverSelected && 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), matched: this.matchedTiles.includes(t.id), reversTile: this.reverseTile, uncovered: this.selected.includes(t.id) }));
         })));
     }
     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],"uncoverSelected":[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],"tiles":[32],"selected":[32],"matchedTiles":[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-eb79664b",[[513,"mb-memory-game",{tileGroups:[16],reverseTile:[16],init:[4],cols:[2],tiles:[32],selected:[32],matchedTiles:[32],uncoverSelected:[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 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))));

package/dist/memory-game/p-0918f52d.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;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}

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

@@ -11,7 +11,6 @@ export declare class MbMemoryGame {
     watchMatchedTiles(): void;
     cols?: number;
     blockUI: boolean;
-    uncoverSelected: boolean;
     completed: EventEmitter<void>;
     matched: EventEmitter<MatchedEvent>;
     componentWillLoad(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mborecki/memory-game",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "private": false,
   "type": "module",
   "description": "Sliding Puzzle",