@mborecki/memory-game 0.4.0 → 0.4.1

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],"keepMatched":[4,"keep-matched"],"tiles":[32],"selected":[32],"matchedTiles":[32],"lastMatched":[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

@@ -0,0 +1,217 @@
+'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;
+    keepMatched = false;
+    completed;
+    matched;
+    componentWillLoad() {
+        console.log('componentDidLoad', this.init, this.tileGroups, this.reverseTile);
+        if (this.init && this.tileGroups.length) {
+            this.initGame();
+        }
+    }
+    slots = new Map();
+    lastMatched = null;
+    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;
+        this.lastMatched = null;
+        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 });
+                if (this.keepMatched) {
+                    this.lastMatched = 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: '0919333971e5a2a625da795a16243209a4d4f861', part: "container", style: {
+                '--aspect': `${this.gridAspectRatio}`
+            } }, index.h("div", { key: 'fcfba146bb8304d9da1a749509bb84a5650d08e7', 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) || t.groupId === this.lastMatched, matched: this.matchedTiles.includes(t.id) && t.groupId !== this.lastMatched, reversTile: this.reverseTile, uncovered: this.selected.includes(t.id) || t.groupId === this.lastMatched }));
+        })));
+    }
+    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

@@ -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],"keepMatched":[4,"keep-matched"],"tiles":[32],"selected":[32],"matchedTiles":[32],"lastMatched":[32],"initGame":[64]},null,{"tileGroups":[{"watchTileGroups":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;
+}
+
+[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;
+}