@mborecki/memory-game 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/mb-memory-game.cjs.entry.js +8 -2
- package/dist/collection/components/sliding-puzzle/memory-game.js +29 -2
- package/dist/components/mb-memory-game.js +1 -1
- package/dist/esm/mb-memory-game.entry.js +8 -2
- package/dist/memory-game/memory-game.esm.js +1 -1
- package/dist/memory-game/p-14bca3b0.entry.js +1 -0
- package/dist/types/components/sliding-puzzle/memory-game.d.ts +1 -0
- package/dist/types/components.d.ts +4 -2
- package/package.json +1 -1
- package/dist/memory-game/p-f3557562.entry.js +0 -1
|
@@ -49,6 +49,7 @@ const MbMemoryGame = class {
|
|
|
49
49
|
index.registerInstance(this, hostRef);
|
|
50
50
|
this.completed = index.createEvent(this, "completed");
|
|
51
51
|
this.matched = index.createEvent(this, "matched");
|
|
52
|
+
this.select = index.createEvent(this, "select");
|
|
52
53
|
}
|
|
53
54
|
tileGroups = [];
|
|
54
55
|
watchTileGroups() {
|
|
@@ -72,6 +73,7 @@ const MbMemoryGame = class {
|
|
|
72
73
|
keepMatched = false;
|
|
73
74
|
completed;
|
|
74
75
|
matched;
|
|
76
|
+
select;
|
|
75
77
|
componentWillLoad() {
|
|
76
78
|
console.log('componentDidLoad', this.init, this.tileGroups, this.reverseTile);
|
|
77
79
|
if (this.init && this.tileGroups.length) {
|
|
@@ -126,6 +128,10 @@ const MbMemoryGame = class {
|
|
|
126
128
|
return;
|
|
127
129
|
}
|
|
128
130
|
this.selected = [...this.selected, id];
|
|
131
|
+
const tile = this.tiles.find(t => t.id === id);
|
|
132
|
+
if (tile) {
|
|
133
|
+
this.select.emit(tile);
|
|
134
|
+
}
|
|
129
135
|
if (this.selected.length === 2) {
|
|
130
136
|
const t1 = this.tiles.find(t => t.id === this.selected[0]);
|
|
131
137
|
const t2 = this.tiles.find(t => t.id === this.selected[1]);
|
|
@@ -194,9 +200,9 @@ const MbMemoryGame = class {
|
|
|
194
200
|
});
|
|
195
201
|
}
|
|
196
202
|
render() {
|
|
197
|
-
return index.h("div", { key: '
|
|
203
|
+
return index.h("div", { key: '52fbec26357ae5a397865b9953425d35f1ed7499', part: "container", style: {
|
|
198
204
|
'--aspect': `${this.gridAspectRatio}`
|
|
199
|
-
} }, index.h("div", { key: '
|
|
205
|
+
} }, index.h("div", { key: 'da8231c3dee58a101d1818f753fbd9387c37ff96', part: "list", style: {
|
|
200
206
|
'--cols': `${this.gridCols}`,
|
|
201
207
|
'--rows': `${this.gridRows}`
|
|
202
208
|
} }, this.tiles.map(t => {
|
|
@@ -24,6 +24,7 @@ export class MbMemoryGame {
|
|
|
24
24
|
keepMatched = false;
|
|
25
25
|
completed;
|
|
26
26
|
matched;
|
|
27
|
+
select;
|
|
27
28
|
componentWillLoad() {
|
|
28
29
|
console.log('componentDidLoad', this.init, this.tileGroups, this.reverseTile);
|
|
29
30
|
if (this.init && this.tileGroups.length) {
|
|
@@ -78,6 +79,10 @@ export class MbMemoryGame {
|
|
|
78
79
|
return;
|
|
79
80
|
}
|
|
80
81
|
this.selected = [...this.selected, id];
|
|
82
|
+
const tile = this.tiles.find(t => t.id === id);
|
|
83
|
+
if (tile) {
|
|
84
|
+
this.select.emit(tile);
|
|
85
|
+
}
|
|
81
86
|
if (this.selected.length === 2) {
|
|
82
87
|
const t1 = this.tiles.find(t => t.id === this.selected[0]);
|
|
83
88
|
const t2 = this.tiles.find(t => t.id === this.selected[1]);
|
|
@@ -146,9 +151,9 @@ export class MbMemoryGame {
|
|
|
146
151
|
});
|
|
147
152
|
}
|
|
148
153
|
render() {
|
|
149
|
-
return h("div", { key: '
|
|
154
|
+
return h("div", { key: '52fbec26357ae5a397865b9953425d35f1ed7499', part: "container", style: {
|
|
150
155
|
'--aspect': `${this.gridAspectRatio}`
|
|
151
|
-
} }, h("div", { key: '
|
|
156
|
+
} }, h("div", { key: 'da8231c3dee58a101d1818f753fbd9387c37ff96', part: "list", style: {
|
|
152
157
|
'--cols': `${this.gridCols}`,
|
|
153
158
|
'--rows': `${this.gridRows}`
|
|
154
159
|
} }, this.tiles.map(t => {
|
|
@@ -326,6 +331,28 @@ export class MbMemoryGame {
|
|
|
326
331
|
}
|
|
327
332
|
}
|
|
328
333
|
}
|
|
334
|
+
}, {
|
|
335
|
+
"method": "select",
|
|
336
|
+
"name": "select",
|
|
337
|
+
"bubbles": true,
|
|
338
|
+
"cancelable": true,
|
|
339
|
+
"composed": true,
|
|
340
|
+
"docs": {
|
|
341
|
+
"tags": [],
|
|
342
|
+
"text": ""
|
|
343
|
+
},
|
|
344
|
+
"complexType": {
|
|
345
|
+
"original": "ITile",
|
|
346
|
+
"resolved": "ITile",
|
|
347
|
+
"references": {
|
|
348
|
+
"ITile": {
|
|
349
|
+
"location": "import",
|
|
350
|
+
"path": "./types",
|
|
351
|
+
"id": "src/components/sliding-puzzle/types.ts::ITile",
|
|
352
|
+
"referenceLocation": "ITile"
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
}
|
|
329
356
|
}];
|
|
330
357
|
}
|
|
331
358
|
static get methods() {
|
|
@@ -1 +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
|
|
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}
|
|
@@ -47,6 +47,7 @@ const MbMemoryGame = class {
|
|
|
47
47
|
registerInstance(this, hostRef);
|
|
48
48
|
this.completed = createEvent(this, "completed");
|
|
49
49
|
this.matched = createEvent(this, "matched");
|
|
50
|
+
this.select = createEvent(this, "select");
|
|
50
51
|
}
|
|
51
52
|
tileGroups = [];
|
|
52
53
|
watchTileGroups() {
|
|
@@ -70,6 +71,7 @@ const MbMemoryGame = class {
|
|
|
70
71
|
keepMatched = false;
|
|
71
72
|
completed;
|
|
72
73
|
matched;
|
|
74
|
+
select;
|
|
73
75
|
componentWillLoad() {
|
|
74
76
|
console.log('componentDidLoad', this.init, this.tileGroups, this.reverseTile);
|
|
75
77
|
if (this.init && this.tileGroups.length) {
|
|
@@ -124,6 +126,10 @@ const MbMemoryGame = class {
|
|
|
124
126
|
return;
|
|
125
127
|
}
|
|
126
128
|
this.selected = [...this.selected, id];
|
|
129
|
+
const tile = this.tiles.find(t => t.id === id);
|
|
130
|
+
if (tile) {
|
|
131
|
+
this.select.emit(tile);
|
|
132
|
+
}
|
|
127
133
|
if (this.selected.length === 2) {
|
|
128
134
|
const t1 = this.tiles.find(t => t.id === this.selected[0]);
|
|
129
135
|
const t2 = this.tiles.find(t => t.id === this.selected[1]);
|
|
@@ -192,9 +198,9 @@ const MbMemoryGame = class {
|
|
|
192
198
|
});
|
|
193
199
|
}
|
|
194
200
|
render() {
|
|
195
|
-
return h("div", { key: '
|
|
201
|
+
return h("div", { key: '52fbec26357ae5a397865b9953425d35f1ed7499', part: "container", style: {
|
|
196
202
|
'--aspect': `${this.gridAspectRatio}`
|
|
197
|
-
} }, h("div", { key: '
|
|
203
|
+
} }, h("div", { key: 'da8231c3dee58a101d1818f753fbd9387c37ff96', part: "list", style: {
|
|
198
204
|
'--cols': `${this.gridCols}`,
|
|
199
205
|
'--rows': `${this.gridRows}`
|
|
200
206
|
} }, this.tiles.map(t => {
|
|
@@ -1 +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-
|
|
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))));
|
|
@@ -0,0 +1 @@
|
|
|
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",{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}
|
|
@@ -14,6 +14,7 @@ export declare class MbMemoryGame {
|
|
|
14
14
|
keepMatched: boolean;
|
|
15
15
|
completed: EventEmitter<void>;
|
|
16
16
|
matched: EventEmitter<MatchedEvent>;
|
|
17
|
+
select: EventEmitter<ITile>;
|
|
17
18
|
componentWillLoad(): void;
|
|
18
19
|
slots: Map<TileID, HTMLDivElement>;
|
|
19
20
|
lastMatched: string | null;
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* It contains typing information for all components that exist in this project.
|
|
6
6
|
*/
|
|
7
7
|
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
|
|
8
|
-
import { MatchedEvent, TileDefinition, TileGroup } from "./components/sliding-puzzle/types";
|
|
9
|
-
export { MatchedEvent, TileDefinition, TileGroup } from "./components/sliding-puzzle/types";
|
|
8
|
+
import { ITile, MatchedEvent, TileDefinition, TileGroup } from "./components/sliding-puzzle/types";
|
|
9
|
+
export { ITile, MatchedEvent, TileDefinition, TileGroup } from "./components/sliding-puzzle/types";
|
|
10
10
|
export namespace Components {
|
|
11
11
|
interface MbMemoryGame {
|
|
12
12
|
"cols"?: number;
|
|
@@ -37,6 +37,7 @@ declare global {
|
|
|
37
37
|
interface HTMLMbMemoryGameElementEventMap {
|
|
38
38
|
"completed": void;
|
|
39
39
|
"matched": MatchedEvent;
|
|
40
|
+
"select": ITile;
|
|
40
41
|
}
|
|
41
42
|
interface HTMLMbMemoryGameElement extends Components.MbMemoryGame, HTMLStencilElement {
|
|
42
43
|
addEventListener<K extends keyof HTMLMbMemoryGameElementEventMap>(type: K, listener: (this: HTMLMbMemoryGameElement, ev: MbMemoryGameCustomEvent<HTMLMbMemoryGameElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -69,6 +70,7 @@ declare namespace LocalJSX {
|
|
|
69
70
|
"keepMatched"?: boolean;
|
|
70
71
|
"onCompleted"?: (event: MbMemoryGameCustomEvent<void>) => void;
|
|
71
72
|
"onMatched"?: (event: MbMemoryGameCustomEvent<MatchedEvent>) => void;
|
|
73
|
+
"onSelect"?: (event: MbMemoryGameCustomEvent<ITile>) => void;
|
|
72
74
|
/**
|
|
73
75
|
* @default { type: 'text', text: '?' }
|
|
74
76
|
*/
|
package/package.json
CHANGED
|
@@ -1 +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}
|