@mborecki/memory-game 0.3.2 → 0.3.3
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/loader.cjs.js +1 -1
- package/dist/cjs/mb-memory-game.cjs.entry.js +6 -8
- package/dist/cjs/memory-game.cjs.js +1 -1
- package/dist/collection/components/sliding-puzzle/memory-game.css +1 -2
- package/dist/collection/components/sliding-puzzle/memory-game.js +6 -9
- package/dist/components/mb-memory-game.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mb-memory-game.entry.js +6 -8
- package/dist/esm/memory-game.js +1 -1
- package/dist/memory-game/memory-game.esm.js +1 -1
- package/dist/memory-game/p-c3a7e97d.entry.js +1 -0
- package/dist/types/components/sliding-puzzle/memory-game.d.ts +0 -1
- package/package.json +1 -1
- package/dist/memory-game/p-eb79664b.entry.js +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
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],"
|
|
9
|
+
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);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -42,7 +42,7 @@ function TileRender({ tile }) {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
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
|
|
45
|
+
const memoryGameCss = () => `:host{box-sizing:border-box;display:grid;place-content:center;width:100%;height:100%;container-type:size}[part=container]{width:min(100cqw, 100cqh / var(--aspect, 1));height:min(100cqw * var(--aspect, 1), 100cqh);container-type:size}[part=list]{width:100cqw;height:100cqh;display:grid;grid-template-columns:repeat(var(--cols, 4), 1fr);grid-template-rows:repeat(var(--rows, 4), 1fr)}[part=tile-slot]{display:block;aspect-ratio:1;padding:5%}.tile-container{min-width:0;transition:scale 0.3s;width:100%;height:100%}.tile-container:hover{scale:1.05}.tile-container.selected{scale:1.1}.tile-container.matched{scale:0}.tile{border-radius:var(--tile-border-radius, 5px);border:var(--tile-border-width, 2px) solid var(--tile-border-color, black);padding:0;margin:0}.tile-text{width:100%;height:100%;aspect-ratio:1;background:#d9d9d9;display:grid;place-content:center}.tile-image{width:100%;height:100%}.tile-image img{display:block;width:100%;height:100%;object-fit:cover}`;
|
|
46
46
|
|
|
47
47
|
const MbMemoryGame = class {
|
|
48
48
|
constructor(hostRef) {
|
|
@@ -52,6 +52,7 @@ const MbMemoryGame = class {
|
|
|
52
52
|
}
|
|
53
53
|
tileGroups = [];
|
|
54
54
|
watchTileGroups() {
|
|
55
|
+
console.log('watchTileGroups');
|
|
55
56
|
if (this.init) {
|
|
56
57
|
this.initGame();
|
|
57
58
|
}
|
|
@@ -68,7 +69,6 @@ const MbMemoryGame = class {
|
|
|
68
69
|
}
|
|
69
70
|
cols;
|
|
70
71
|
blockUI = false;
|
|
71
|
-
uncoverSelected = false;
|
|
72
72
|
completed;
|
|
73
73
|
matched;
|
|
74
74
|
componentWillLoad() {
|
|
@@ -88,7 +88,7 @@ const MbMemoryGame = class {
|
|
|
88
88
|
return Math.ceil(this.tiles.length / this.gridCols);
|
|
89
89
|
}
|
|
90
90
|
get gridAspectRatio() {
|
|
91
|
-
return this.
|
|
91
|
+
return this.gridRows / this.gridCols;
|
|
92
92
|
}
|
|
93
93
|
async initGame(tileGroups = this.tileGroups, reverseTile = this.reverseTile) {
|
|
94
94
|
console.log('initGame', tileGroups);
|
|
@@ -129,7 +129,6 @@ const MbMemoryGame = class {
|
|
|
129
129
|
if (!t1 || !t2)
|
|
130
130
|
return;
|
|
131
131
|
this.blockUI = true;
|
|
132
|
-
this.uncoverSelected = true;
|
|
133
132
|
if (t1.groupId === t2.groupId) {
|
|
134
133
|
await Promise.all([
|
|
135
134
|
this.markAsMatched(t1.id),
|
|
@@ -146,7 +145,6 @@ const MbMemoryGame = class {
|
|
|
146
145
|
this.animateWrongMatch(t2.id)
|
|
147
146
|
]);
|
|
148
147
|
}
|
|
149
|
-
this.uncoverSelected = false;
|
|
150
148
|
this.blockUI = false;
|
|
151
149
|
this.selected = [];
|
|
152
150
|
}
|
|
@@ -190,13 +188,13 @@ const MbMemoryGame = class {
|
|
|
190
188
|
});
|
|
191
189
|
}
|
|
192
190
|
render() {
|
|
193
|
-
return index.h("div", { key: '
|
|
191
|
+
return index.h("div", { key: '18002b4e8ba84bb065f5ecbff5e1a3cde40065bd', part: "container", style: {
|
|
194
192
|
'--aspect': `${this.gridAspectRatio}`
|
|
195
|
-
} }, index.h("div", { key: '
|
|
193
|
+
} }, index.h("div", { key: '2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4', part: "list", style: {
|
|
196
194
|
'--cols': `${this.gridCols}`,
|
|
197
195
|
'--rows': `${this.gridRows}`
|
|
198
196
|
} }, this.tiles.map(t => {
|
|
199
|
-
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.
|
|
197
|
+
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) }));
|
|
200
198
|
})));
|
|
201
199
|
}
|
|
202
200
|
static get watchers() { return {
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
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],"
|
|
22
|
+
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);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
width: min(100cqw, 100cqh / var(--aspect, 1));
|
|
12
12
|
height: min(100cqw * var(--aspect, 1), 100cqh);
|
|
13
13
|
container-type: size;
|
|
14
|
-
background: pink;
|
|
15
14
|
}
|
|
16
15
|
|
|
17
16
|
[part=list] {
|
|
@@ -19,7 +18,7 @@
|
|
|
19
18
|
height: 100cqh;
|
|
20
19
|
display: grid;
|
|
21
20
|
grid-template-columns: repeat(var(--cols, 4), 1fr);
|
|
22
|
-
grid-template-
|
|
21
|
+
grid-template-rows: repeat(var(--rows, 4), 1fr);
|
|
23
22
|
}
|
|
24
23
|
|
|
25
24
|
[part=tile-slot] {
|
|
@@ -4,6 +4,7 @@ import { Tile } from "./tile";
|
|
|
4
4
|
export class MbMemoryGame {
|
|
5
5
|
tileGroups = [];
|
|
6
6
|
watchTileGroups() {
|
|
7
|
+
console.log('watchTileGroups');
|
|
7
8
|
if (this.init) {
|
|
8
9
|
this.initGame();
|
|
9
10
|
}
|
|
@@ -20,7 +21,6 @@ export class MbMemoryGame {
|
|
|
20
21
|
}
|
|
21
22
|
cols;
|
|
22
23
|
blockUI = false;
|
|
23
|
-
uncoverSelected = false;
|
|
24
24
|
completed;
|
|
25
25
|
matched;
|
|
26
26
|
componentWillLoad() {
|
|
@@ -40,7 +40,7 @@ export class MbMemoryGame {
|
|
|
40
40
|
return Math.ceil(this.tiles.length / this.gridCols);
|
|
41
41
|
}
|
|
42
42
|
get gridAspectRatio() {
|
|
43
|
-
return this.
|
|
43
|
+
return this.gridRows / this.gridCols;
|
|
44
44
|
}
|
|
45
45
|
async initGame(tileGroups = this.tileGroups, reverseTile = this.reverseTile) {
|
|
46
46
|
console.log('initGame', tileGroups);
|
|
@@ -81,7 +81,6 @@ export class MbMemoryGame {
|
|
|
81
81
|
if (!t1 || !t2)
|
|
82
82
|
return;
|
|
83
83
|
this.blockUI = true;
|
|
84
|
-
this.uncoverSelected = true;
|
|
85
84
|
if (t1.groupId === t2.groupId) {
|
|
86
85
|
await Promise.all([
|
|
87
86
|
this.markAsMatched(t1.id),
|
|
@@ -98,7 +97,6 @@ export class MbMemoryGame {
|
|
|
98
97
|
this.animateWrongMatch(t2.id)
|
|
99
98
|
]);
|
|
100
99
|
}
|
|
101
|
-
this.uncoverSelected = false;
|
|
102
100
|
this.blockUI = false;
|
|
103
101
|
this.selected = [];
|
|
104
102
|
}
|
|
@@ -142,13 +140,13 @@ export class MbMemoryGame {
|
|
|
142
140
|
});
|
|
143
141
|
}
|
|
144
142
|
render() {
|
|
145
|
-
return h("div", { key: '
|
|
143
|
+
return h("div", { key: '18002b4e8ba84bb065f5ecbff5e1a3cde40065bd', part: "container", style: {
|
|
146
144
|
'--aspect': `${this.gridAspectRatio}`
|
|
147
|
-
} }, h("div", { key: '
|
|
145
|
+
} }, h("div", { key: '2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4', part: "list", style: {
|
|
148
146
|
'--cols': `${this.gridCols}`,
|
|
149
147
|
'--rows': `${this.gridRows}`
|
|
150
148
|
} }, this.tiles.map(t => {
|
|
151
|
-
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.
|
|
149
|
+
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) }));
|
|
152
150
|
})));
|
|
153
151
|
}
|
|
154
152
|
static get is() { return "mb-memory-game"; }
|
|
@@ -260,8 +258,7 @@ export class MbMemoryGame {
|
|
|
260
258
|
return {
|
|
261
259
|
"tiles": {},
|
|
262
260
|
"selected": {},
|
|
263
|
-
"matchedTiles": {}
|
|
264
|
-
"uncoverSelected": {}
|
|
261
|
+
"matchedTiles": {}
|
|
265
262
|
};
|
|
266
263
|
}
|
|
267
264
|
static get events() {
|
|
@@ -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",{class:{"tile-container":!0,selected:i,matched:s}},t(
|
|
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(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);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
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["mb-memory-game",[[513,"mb-memory-game",{"tileGroups":[16],"reverseTile":[16],"init":[4],"cols":[2],"tiles":[32],"selected":[32],"matchedTiles":[32],"
|
|
8
|
+
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);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -40,7 +40,7 @@ function TileRender({ tile }) {
|
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
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
|
|
43
|
+
const memoryGameCss = () => `:host{box-sizing:border-box;display:grid;place-content:center;width:100%;height:100%;container-type:size}[part=container]{width:min(100cqw, 100cqh / var(--aspect, 1));height:min(100cqw * var(--aspect, 1), 100cqh);container-type:size}[part=list]{width:100cqw;height:100cqh;display:grid;grid-template-columns:repeat(var(--cols, 4), 1fr);grid-template-rows:repeat(var(--rows, 4), 1fr)}[part=tile-slot]{display:block;aspect-ratio:1;padding:5%}.tile-container{min-width:0;transition:scale 0.3s;width:100%;height:100%}.tile-container:hover{scale:1.05}.tile-container.selected{scale:1.1}.tile-container.matched{scale:0}.tile{border-radius:var(--tile-border-radius, 5px);border:var(--tile-border-width, 2px) solid var(--tile-border-color, black);padding:0;margin:0}.tile-text{width:100%;height:100%;aspect-ratio:1;background:#d9d9d9;display:grid;place-content:center}.tile-image{width:100%;height:100%}.tile-image img{display:block;width:100%;height:100%;object-fit:cover}`;
|
|
44
44
|
|
|
45
45
|
const MbMemoryGame = class {
|
|
46
46
|
constructor(hostRef) {
|
|
@@ -50,6 +50,7 @@ const MbMemoryGame = class {
|
|
|
50
50
|
}
|
|
51
51
|
tileGroups = [];
|
|
52
52
|
watchTileGroups() {
|
|
53
|
+
console.log('watchTileGroups');
|
|
53
54
|
if (this.init) {
|
|
54
55
|
this.initGame();
|
|
55
56
|
}
|
|
@@ -66,7 +67,6 @@ const MbMemoryGame = class {
|
|
|
66
67
|
}
|
|
67
68
|
cols;
|
|
68
69
|
blockUI = false;
|
|
69
|
-
uncoverSelected = false;
|
|
70
70
|
completed;
|
|
71
71
|
matched;
|
|
72
72
|
componentWillLoad() {
|
|
@@ -86,7 +86,7 @@ const MbMemoryGame = class {
|
|
|
86
86
|
return Math.ceil(this.tiles.length / this.gridCols);
|
|
87
87
|
}
|
|
88
88
|
get gridAspectRatio() {
|
|
89
|
-
return this.
|
|
89
|
+
return this.gridRows / this.gridCols;
|
|
90
90
|
}
|
|
91
91
|
async initGame(tileGroups = this.tileGroups, reverseTile = this.reverseTile) {
|
|
92
92
|
console.log('initGame', tileGroups);
|
|
@@ -127,7 +127,6 @@ const MbMemoryGame = class {
|
|
|
127
127
|
if (!t1 || !t2)
|
|
128
128
|
return;
|
|
129
129
|
this.blockUI = true;
|
|
130
|
-
this.uncoverSelected = true;
|
|
131
130
|
if (t1.groupId === t2.groupId) {
|
|
132
131
|
await Promise.all([
|
|
133
132
|
this.markAsMatched(t1.id),
|
|
@@ -144,7 +143,6 @@ const MbMemoryGame = class {
|
|
|
144
143
|
this.animateWrongMatch(t2.id)
|
|
145
144
|
]);
|
|
146
145
|
}
|
|
147
|
-
this.uncoverSelected = false;
|
|
148
146
|
this.blockUI = false;
|
|
149
147
|
this.selected = [];
|
|
150
148
|
}
|
|
@@ -188,13 +186,13 @@ const MbMemoryGame = class {
|
|
|
188
186
|
});
|
|
189
187
|
}
|
|
190
188
|
render() {
|
|
191
|
-
return h("div", { key: '
|
|
189
|
+
return h("div", { key: '18002b4e8ba84bb065f5ecbff5e1a3cde40065bd', part: "container", style: {
|
|
192
190
|
'--aspect': `${this.gridAspectRatio}`
|
|
193
|
-
} }, h("div", { key: '
|
|
191
|
+
} }, h("div", { key: '2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4', part: "list", style: {
|
|
194
192
|
'--cols': `${this.gridCols}`,
|
|
195
193
|
'--rows': `${this.gridRows}`
|
|
196
194
|
} }, this.tiles.map(t => {
|
|
197
|
-
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.
|
|
195
|
+
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) }));
|
|
198
196
|
})));
|
|
199
197
|
}
|
|
200
198
|
static get watchers() { return {
|
package/dist/esm/memory-game.js
CHANGED
|
@@ -17,5 +17,5 @@ var patchBrowser = () => {
|
|
|
17
17
|
|
|
18
18
|
patchBrowser().then(async (options) => {
|
|
19
19
|
await globalScripts();
|
|
20
|
-
return bootstrapLazy([["mb-memory-game",[[513,"mb-memory-game",{"tileGroups":[16],"reverseTile":[16],"init":[4],"cols":[2],"tiles":[32],"selected":[32],"matchedTiles":[32],"
|
|
20
|
+
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);
|
|
21
21
|
});
|
|
@@ -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
|
|
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-c3a7e97d",[[513,"mb-memory-game",{tileGroups:[16],reverseTile:[16],init:[4],cols:[2],tiles:[32],selected:[32],matchedTiles:[32],initGame:[64]},null,{tileGroups:[{watchTileGroups:0}],matchedTiles:[{watchMatchedTiles:0}]}]]]],e))));
|
|
@@ -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:a,reversTile:h}){return t("div",{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);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/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",{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(){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 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,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(s,{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}]}}};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;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}";export{a as mb_memory_game}
|