@mborecki/memory-game 0.4.2 → 0.4.3

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

@@ -35,14 +35,14 @@ function Tile({ tile, selected, matched, uncovered, reversTile }) {
 }
 function TileRender({ tile }) {
     if (tile.type === 'text') {
-        return index.h("button", { class: "tile tile-text" }, tile.text);
+        return index.h("button", { part: "tile-text", class: "tile tile-text" }, tile.text);
     }
     if (tile.type === 'image') {
         return index.h("button", { class: "tile tile-image" }, index.h("img", { src: tile.imageSrc }));
     }
 }
 
-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 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;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) {

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

@@ -55,7 +55,6 @@
   width: 100%;
   height: 100%;
   aspect-ratio: 1;
-  background: #d9d9d9;
   display: grid;
   place-content: center;
 }

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

@@ -8,7 +8,7 @@ export function Tile({ tile, selected, matched, uncovered, reversTile }) {
 }
 function TileRender({ tile }) {
     if (tile.type === 'text') {
-        return h("button", { class: "tile tile-text" }, tile.text);
+        return h("button", { part: "tile-text", class: "tile tile-text" }, tile.text);
     }
     if (tile.type === 'image') {
         return h("button", { class: "tile tile-image" }, h("img", { src: tile.imageSrc }));

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(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 c=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.completed=r(this,"completed"),this.matched=r(this,"matched"),this.select=r(this,"select")}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;select;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)return;if(this.lastMatched=null,this.selected.includes(t))return void(this.selected=this.selected.filter((e=>e!==t)));this.selected=[...this.selected,t];const e=this.tiles.find((e=>e.id===t));if(e&&this.select.emit(e),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:"52fbec26357ae5a397865b9953425d35f1ed7499",part:"container",style:{"--aspect":""+this.gridAspectRatio}},t("div",{key:"da8231c3dee58a101d1818f753fbd9387c37ff96",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 o(){"undefined"!=typeof customElements&&["mb-memory-game"].forEach((t=>{"mb-memory-game"===t&&(customElements.get(e(t))||customElements.define(e(t),c))}))}o();const n=c,l=o;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",{part:"tile-text",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"),this.select=r(this,"select")}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;select;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)return;if(this.lastMatched=null,this.selected.includes(t))return void(this.selected=this.selected.filter((e=>e!==t)));this.selected=[...this.selected,t];const e=this.tiles.find((e=>e.id===t));if(e&&this.select.emit(e),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:"52fbec26357ae5a397865b9953425d35f1ed7499",part:"container",style:{"--aspect":""+this.gridAspectRatio}},t("div",{key:"da8231c3dee58a101d1818f753fbd9387c37ff96",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;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 o(){"undefined"!=typeof customElements&&["mb-memory-game"].forEach((t=>{"mb-memory-game"===t&&(customElements.get(e(t))||customElements.define(e(t),c))}))}o();const l=c,n=o;export{l as MbMemoryGame,n as defineCustomElement}

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

@@ -33,14 +33,14 @@ function Tile({ tile, selected, matched, uncovered, reversTile }) {
 }
 function TileRender({ tile }) {
     if (tile.type === 'text') {
-        return h("button", { class: "tile tile-text" }, tile.text);
+        return h("button", { part: "tile-text", class: "tile tile-text" }, tile.text);
     }
     if (tile.type === 'image') {
         return h("button", { class: "tile tile-image" }, h("img", { src: tile.imageSrc }));
     }
 }
 
-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 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;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) {

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 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-14bca3b0",[[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))));
+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-afa63979",[[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-afa63979.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:h,reversTile:a}){return t("div",{part:"tile",class:{"tile-container":!0,selected:i,matched:s}},t(r,{tile:h?e.data:a}))}function r({tile:e}){return"text"===e.type?t("button",{part:"tile-text",class:"tile tile-text"},e.text):"image"===e.type?t("button",{class:"tile tile-image"},t("img",{src:e.imageSrc})):void 0}const h=class{constructor(t){e(this,t),this.completed=i(this,"completed"),this.matched=i(this,"matched"),this.select=i(this,"select")}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;select;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)return;if(this.lastMatched=null,this.selected.includes(t))return void(this.selected=this.selected.filter((e=>e!==t)));this.selected=[...this.selected,t];const e=this.tiles.find((e=>e.id===t));if(e&&this.select.emit(e),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:"52fbec26357ae5a397865b9953425d35f1ed7499",part:"container",style:{"--aspect":`${this.gridAspectRatio}`}},t("div",{key:"da8231c3dee58a101d1818f753fbd9387c37ff96",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}]}}};h.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;display:grid;place-content:center}.tile-image{width:100%;height:100%}.tile-image img{display:block;width:100%;height:100%;object-fit:cover}";export{h as mb_memory_game}

package/package.json

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

package/dist/memory-game/p-14bca3b0.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:h,reversTile:a}){return t("div",{part:"tile",class:{"tile-container":!0,selected:i,matched:s}},t(r,{tile:h?e.data:a}))}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 h=class{constructor(t){e(this,t),this.completed=i(this,"completed"),this.matched=i(this,"matched"),this.select=i(this,"select")}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;select;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)return;if(this.lastMatched=null,this.selected.includes(t))return void(this.selected=this.selected.filter((e=>e!==t)));this.selected=[...this.selected,t];const e=this.tiles.find((e=>e.id===t));if(e&&this.select.emit(e),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:"52fbec26357ae5a397865b9953425d35f1ed7499",part:"container",style:{"--aspect":`${this.gridAspectRatio}`}},t("div",{key:"da8231c3dee58a101d1818f753fbd9387c37ff96",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}]}}};h.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{h as mb_memory_game}