@mborecki/memory-game 0.1.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-D_ddvJ2f.js');
+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,{"board":[{"watchBoard":0}],"matchedTiles":[{"watchMatchedTiles":0}]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,213 @@
+'use strict';
+
+var index = require('./index-D_ddvJ2f.js');
+
+function getSet(items, count) {
+    console.log('getSet', items, count);
+    if (items.length <= 0)
+        throw new Error("getSet() - no items");
+    if (items.length === count) {
+        return [...items];
+    }
+    let result = [];
+    while (count - result.length > items.length) {
+        result = [
+            ...result,
+            ...items
+        ];
+    }
+    const rest = new Set();
+    while (rest.size < count - result.length) {
+        rest.add(items[Math.floor(Math.random() * items.length)]);
+    }
+    return [
+        ...result,
+        ...rest
+    ];
+}
+
+function Tile({ tile, selected, matched, uncovered, reversTile }) {
+    return index.h("div", { class: {
+            'tile-container': true,
+            selected,
+            matched
+        } }, index.h(TileRender, { tile: uncovered ? tile.data : reversTile }));
+}
+function TileRender({ tile }) {
+    if (tile.type === 'text') {
+        return index.h("button", { 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;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 MbMemoryGame = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.completed = index.createEvent(this, "completed");
+        this.matched = index.createEvent(this, "matched");
+    }
+    tileGroups = [];
+    reverseTile = { type: 'text', text: '?' };
+    init = true;
+    watchBoard() {
+        if (this.init) {
+            this.initGame();
+        }
+    }
+    tiles = [];
+    selected = [];
+    matchedTiles = [];
+    watchMatchedTiles() {
+        if (this.matchedTiles.length === this.tiles.length) {
+            this.completed.emit();
+        }
+    }
+    cols;
+    blockUI = false;
+    uncoverSelected = false;
+    completed;
+    matched;
+    componentWillLoad() {
+        console.log('componentDidLoad', this.init);
+        if (this.init && this.tileGroups) {
+            this.initGame();
+        }
+    }
+    slots = new Map();
+    get gridCols() {
+        if (this.cols) {
+            return this.cols;
+        }
+        return 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(tileGroups = this.tileGroups, reverseTile = this.reverseTile) {
+        console.log('initGame', tileGroups);
+        this.reverseTile = reverseTile;
+        this.buildTiles(tileGroups);
+    }
+    buildTiles(tileGroups) {
+        let result = [];
+        let index = 0;
+        tileGroups.forEach(tg => {
+            const tiles = getSet(tg.tiles, tg.count);
+            result = [
+                ...result,
+                ...tiles.map(t => {
+                    return {
+                        id: index++,
+                        data: { ...t },
+                        groupId: tg.id,
+                        uncovered: false,
+                        matched: false
+                    };
+                })
+            ];
+        });
+        this.tiles = result.sort(() => Math.random() - .5);
+    }
+    async onTileClick(id) {
+        if (this.blockUI)
+            return;
+        if (this.selected.includes(id)) {
+            this.selected = this.selected.filter(i => i !== id);
+            return;
+        }
+        this.selected = [...this.selected, id];
+        if (this.selected.length === 2) {
+            const t1 = this.tiles.find(t => t.id === this.selected[0]);
+            const t2 = this.tiles.find(t => t.id === this.selected[1]);
+            if (!t1 || !t2)
+                return;
+            this.blockUI = true;
+            this.uncoverSelected = true;
+            if (t1.groupId === t2.groupId) {
+                await Promise.all([
+                    this.markAsMatched(t1.id),
+                    this.markAsMatched(t2.id)
+                ]);
+                this.matched.emit({ t1: t1.data, t2: t2.data, groupId: t1.groupId });
+                this.matchedTiles = [
+                    ...this.matchedTiles, t1.id, t2.id
+                ];
+            }
+            else {
+                await Promise.all([
+                    this.animateWrongMatch(t1.id),
+                    this.animateWrongMatch(t2.id)
+                ]);
+            }
+            this.uncoverSelected = false;
+            this.blockUI = false;
+            this.selected = [];
+        }
+    }
+    markAsMatched(id) {
+        return new Promise(resolve => {
+            const slot = this.slots.get(id);
+            if (!slot)
+                return;
+            const tile = slot.children[0];
+            const anim = tile.animate([], { duration: 1000 });
+            anim.addEventListener('finish', () => {
+                resolve();
+            });
+            anim.addEventListener('cancel', () => {
+                resolve();
+            });
+        });
+    }
+    animateWrongMatch(id) {
+        return new Promise(resolve => {
+            const slot = this.slots.get(id);
+            if (!slot)
+                return;
+            const tile = slot.children[0];
+            const anim = tile.animate([
+                { rotate: "0deg" },
+                { rotate: "0deg" },
+                { rotate: "30deg" },
+                { rotate: "0deg" },
+                { rotate: "-30deg" },
+                { rotate: "0deg" },
+                { rotate: "0deg" },
+            ], { duration: 1500 });
+            anim.addEventListener('finish', () => {
+                resolve();
+            });
+            anim.addEventListener('cancel', () => {
+                resolve();
+            });
+        });
+    }
+    render() {
+        return index.h("div", { key: 'bb7b898014606de493fd580e50ef685f529ac2bb', part: "container", style: {
+                '--aspect': `${this.gridAspectRatio}`
+            } }, index.h("div", { key: '0c677fb539e7af023c21411e70adf64050c97077', 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) }));
+        })));
+    }
+    static get watchers() { return {
+        "board": [{
+                "watchBoard": 0
+            }],
+        "matchedTiles": [{
+                "watchMatchedTiles": 0
+            }]
+    }; }
+};
+MbMemoryGame.style = memoryGameCss();
+
+exports.mb_memory_game = MbMemoryGame;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-D_ddvJ2f.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.41.0 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('memory-game.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+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,{"board":[{"watchBoard":0}],"matchedTiles":[{"watchMatchedTiles":0}]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/sliding-puzzle/memory-game.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.41.0",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,72 @@
+: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;
+}

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

@@ -0,0 +1,357 @@
+import { h } from "@stencil/core";
+import { getSet } from "../../utils/get-set";
+import { Tile } from "./tile";
+export class MbMemoryGame {
+    tileGroups = [];
+    reverseTile = { type: 'text', text: '?' };
+    init = true;
+    watchBoard() {
+        if (this.init) {
+            this.initGame();
+        }
+    }
+    tiles = [];
+    selected = [];
+    matchedTiles = [];
+    watchMatchedTiles() {
+        if (this.matchedTiles.length === this.tiles.length) {
+            this.completed.emit();
+        }
+    }
+    cols;
+    blockUI = false;
+    uncoverSelected = false;
+    completed;
+    matched;
+    componentWillLoad() {
+        console.log('componentDidLoad', this.init);
+        if (this.init && this.tileGroups) {
+            this.initGame();
+        }
+    }
+    slots = new Map();
+    get gridCols() {
+        if (this.cols) {
+            return this.cols;
+        }
+        return 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(tileGroups = this.tileGroups, reverseTile = this.reverseTile) {
+        console.log('initGame', tileGroups);
+        this.reverseTile = reverseTile;
+        this.buildTiles(tileGroups);
+    }
+    buildTiles(tileGroups) {
+        let result = [];
+        let index = 0;
+        tileGroups.forEach(tg => {
+            const tiles = getSet(tg.tiles, tg.count);
+            result = [
+                ...result,
+                ...tiles.map(t => {
+                    return {
+                        id: index++,
+                        data: { ...t },
+                        groupId: tg.id,
+                        uncovered: false,
+                        matched: false
+                    };
+                })
+            ];
+        });
+        this.tiles = result.sort(() => Math.random() - .5);
+    }
+    async onTileClick(id) {
+        if (this.blockUI)
+            return;
+        if (this.selected.includes(id)) {
+            this.selected = this.selected.filter(i => i !== id);
+            return;
+        }
+        this.selected = [...this.selected, id];
+        if (this.selected.length === 2) {
+            const t1 = this.tiles.find(t => t.id === this.selected[0]);
+            const t2 = this.tiles.find(t => t.id === this.selected[1]);
+            if (!t1 || !t2)
+                return;
+            this.blockUI = true;
+            this.uncoverSelected = true;
+            if (t1.groupId === t2.groupId) {
+                await Promise.all([
+                    this.markAsMatched(t1.id),
+                    this.markAsMatched(t2.id)
+                ]);
+                this.matched.emit({ t1: t1.data, t2: t2.data, groupId: t1.groupId });
+                this.matchedTiles = [
+                    ...this.matchedTiles, t1.id, t2.id
+                ];
+            }
+            else {
+                await Promise.all([
+                    this.animateWrongMatch(t1.id),
+                    this.animateWrongMatch(t2.id)
+                ]);
+            }
+            this.uncoverSelected = false;
+            this.blockUI = false;
+            this.selected = [];
+        }
+    }
+    markAsMatched(id) {
+        return new Promise(resolve => {
+            const slot = this.slots.get(id);
+            if (!slot)
+                return;
+            const tile = slot.children[0];
+            const anim = tile.animate([], { duration: 1000 });
+            anim.addEventListener('finish', () => {
+                resolve();
+            });
+            anim.addEventListener('cancel', () => {
+                resolve();
+            });
+        });
+    }
+    animateWrongMatch(id) {
+        return new Promise(resolve => {
+            const slot = this.slots.get(id);
+            if (!slot)
+                return;
+            const tile = slot.children[0];
+            const anim = tile.animate([
+                { rotate: "0deg" },
+                { rotate: "0deg" },
+                { rotate: "30deg" },
+                { rotate: "0deg" },
+                { rotate: "-30deg" },
+                { rotate: "0deg" },
+                { rotate: "0deg" },
+            ], { duration: 1500 });
+            anim.addEventListener('finish', () => {
+                resolve();
+            });
+            anim.addEventListener('cancel', () => {
+                resolve();
+            });
+        });
+    }
+    render() {
+        return h("div", { key: 'bb7b898014606de493fd580e50ef685f529ac2bb', part: "container", style: {
+                '--aspect': `${this.gridAspectRatio}`
+            } }, h("div", { key: '0c677fb539e7af023c21411e70adf64050c97077', 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) }));
+        })));
+    }
+    static get is() { return "mb-memory-game"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["memory-game.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["memory-game.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tileGroups": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TileGroup[]",
+                    "resolved": "TileGroup[]",
+                    "references": {
+                        "TileGroup": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sliding-puzzle/types.ts::TileGroup",
+                            "referenceLocation": "TileGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "reverseTile": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TileDefinition",
+                    "resolved": "TileDefinition",
+                    "references": {
+                        "TileDefinition": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sliding-puzzle/types.ts::TileDefinition",
+                            "referenceLocation": "TileDefinition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{ type: 'text', text: '?' }"
+            },
+            "init": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "init",
+                "defaultValue": "true"
+            },
+            "cols": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tiles": {},
+            "selected": {},
+            "matchedTiles": {},
+            "uncoverSelected": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "completed",
+                "name": "completed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "matched",
+                "name": "matched",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MatchedEvent",
+                    "resolved": "MatchedEvent",
+                    "references": {
+                        "MatchedEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sliding-puzzle/types.ts::MatchedEvent",
+                            "referenceLocation": "MatchedEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "initGame": {
+                "complexType": {
+                    "signature": "(tileGroups?: TileGroup[], reverseTile?: TileDefinition) => Promise<void>",
+                    "parameters": [{
+                            "name": "tileGroups",
+                            "type": "TileGroup[]",
+                            "docs": ""
+                        }, {
+                            "name": "reverseTile",
+                            "type": "TileDefinition",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TileGroup": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sliding-puzzle/types.ts::TileGroup",
+                            "referenceLocation": "TileGroup"
+                        },
+                        "TileDefinition": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sliding-puzzle/types.ts::TileDefinition",
+                            "referenceLocation": "TileDefinition"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "board",
+                "methodName": "watchBoard"
+            }, {
+                "propName": "matchedTiles",
+                "methodName": "watchMatchedTiles"
+            }];
+    }
+}