@mborecki/memory-game 0.3.4 → 0.4.0

package/dist/cjs/index.cjs.js

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

package/dist/cjs/loader.cjs.js

@@ -1,13 +0,0 @@
-'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],"initGame":[64]},null,{"tileGroups":[{"watchTileGroups":0}],"matchedTiles":[{"watchMatchedTiles":0}]}]]]], options);
-};
-
-exports.setNonce = index.setNonce;
-exports.defineCustomElements = defineCustomElements;

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

@@ -1,211 +0,0 @@
-'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", { part: "tile", 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}[part=list]{width:100cqw;height:100cqh;display:grid;grid-template-columns:repeat(var(--cols, 4), 1fr);grid-template-rows:repeat(var(--rows, 4), 1fr)}[part=tile-slot]{display:block;aspect-ratio:1;padding:5%}.tile-container{min-width:0;transition:scale 0.3s;width:100%;height:100%}.tile-container:hover{scale:1.05}.tile-container.selected{scale:1.1}.tile-container.matched{scale:0}.tile{border-radius:var(--tile-border-radius, 5px);border:var(--tile-border-width, 2px) solid var(--tile-border-color, black);overflow:hidden;padding:0;margin:0}.tile-text{width:100%;height:100%;aspect-ratio:1;background:#d9d9d9;display:grid;place-content:center}.tile-image{width:100%;height:100%}.tile-image img{display:block;width:100%;height:100%;object-fit:cover}`;
-
-const MbMemoryGame = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.completed = index.createEvent(this, "completed");
-        this.matched = index.createEvent(this, "matched");
-    }
-    tileGroups = [];
-    watchTileGroups() {
-        console.log('watchTileGroups');
-        if (this.init) {
-            this.initGame();
-        }
-    }
-    reverseTile = { type: 'text', text: '?' };
-    init = true;
-    tiles = [];
-    selected = [];
-    matchedTiles = [];
-    watchMatchedTiles() {
-        if (this.matchedTiles.length === this.tiles.length) {
-            this.completed.emit();
-        }
-    }
-    cols;
-    blockUI = false;
-    completed;
-    matched;
-    componentWillLoad() {
-        console.log('componentDidLoad', this.init, this.tileGroups, this.reverseTile);
-        if (this.init && this.tileGroups.length) {
-            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.gridRows / this.gridCols;
-    }
-    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;
-            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.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: '18002b4e8ba84bb065f5ecbff5e1a3cde40065bd', part: "container", style: {
-                '--aspect': `${this.gridAspectRatio}`
-            } }, index.h("div", { key: '2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4', part: "list", style: {
-                '--cols': `${this.gridCols}`,
-                '--rows': `${this.gridRows}`
-            } }, this.tiles.map(t => {
-            return index.h("div", { part: "tile-slot", onClick: () => this.onTileClick(t.id), ref: el => this.slots.set(t.id, el) }, index.h(Tile, { tile: t, selected: this.selected.includes(t.id), matched: this.matchedTiles.includes(t.id), reversTile: this.reverseTile, uncovered: this.selected.includes(t.id) }));
-        })));
-    }
-    static get watchers() { return {
-        "tileGroups": [{
-                "watchTileGroups": 0
-            }],
-        "matchedTiles": [{
-                "watchMatchedTiles": 0
-            }]
-    }; }
-};
-MbMemoryGame.style = memoryGameCss();
-
-exports.mb_memory_game = MbMemoryGame;

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

@@ -1,25 +0,0 @@
-'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],"initGame":[64]},null,{"tileGroups":[{"watchTileGroups":0}],"matchedTiles":[{"watchMatchedTiles":0}]}]]]], options);
-});
-
-exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,12 +0,0 @@
-{
-  "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

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

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

@@ -1,354 +0,0 @@
-import { h } from "@stencil/core";
-import { getSet } from "../../utils/get-set";
-import { Tile } from "./tile";
-export class MbMemoryGame {
-    tileGroups = [];
-    watchTileGroups() {
-        console.log('watchTileGroups');
-        if (this.init) {
-            this.initGame();
-        }
-    }
-    reverseTile = { type: 'text', text: '?' };
-    init = true;
-    tiles = [];
-    selected = [];
-    matchedTiles = [];
-    watchMatchedTiles() {
-        if (this.matchedTiles.length === this.tiles.length) {
-            this.completed.emit();
-        }
-    }
-    cols;
-    blockUI = false;
-    completed;
-    matched;
-    componentWillLoad() {
-        console.log('componentDidLoad', this.init, this.tileGroups, this.reverseTile);
-        if (this.init && this.tileGroups.length) {
-            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.gridRows / this.gridCols;
-    }
-    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;
-            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.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: '18002b4e8ba84bb065f5ecbff5e1a3cde40065bd', part: "container", style: {
-                '--aspect': `${this.gridAspectRatio}`
-            } }, h("div", { key: '2ac6345adfd73b0690d3e5e3fc34e351c9f9bfd4', part: "list", style: {
-                '--cols': `${this.gridCols}`,
-                '--rows': `${this.gridRows}`
-            } }, this.tiles.map(t => {
-            return h("div", { part: "tile-slot", onClick: () => this.onTileClick(t.id), ref: el => this.slots.set(t.id, el) }, h(Tile, { tile: t, selected: this.selected.includes(t.id), matched: this.matchedTiles.includes(t.id), reversTile: this.reverseTile, uncovered: this.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": {}
-        };
-    }
-    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": "tileGroups",
-                "methodName": "watchTileGroups"
-            }, {
-                "propName": "matchedTiles",
-                "methodName": "watchMatchedTiles"
-            }];
-    }
-}