@mborecki/sliding-puzzle 0.1.0 → 0.3.0

package/dist/esm/{index-CoGw-MK9.js → index-D-FhYfR4.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'sliding-puzzle';
-const BUILD = /* sliding-puzzle */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", propChangeCallback: false, state: true, updatable: true};
+const BUILD = /* sliding-puzzle */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: false, state: true, updatable: true};
 
 /*
  Stencil Client Platform v4.41.0 | MIT Licensed | https://stenciljs.com
@@ -2108,6 +2108,11 @@ createSupportsRuleRe(":host");
 createSupportsRuleRe(":host-context");
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   if (propValue != null && !isComplexType(propValue)) {
+    if (propType & 4 /* Boolean */) {
+      {
+        return propValue === "false" ? false : propValue === "" || !!propValue;
+      }
+    }
     return propValue;
   }
   return propValue;
@@ -2658,7 +2663,8 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const flags = hostRef.$flags$;
   const instance = hostRef.$lazyInstance$ ;
   newVal = parsePropertyValue(
-    newVal);
+    newVal,
+    cmpMeta.$members$[propName][0]);
   const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
@@ -2676,7 +2682,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 
 // src/runtime/proxy-component.ts
 var proxyComponent = (Cstr, cmpMeta, flags) => {
-  var _a;
+  var _a, _b;
   const prototype = Cstr.prototype;
   if (cmpMeta.$members$ || BUILD.propChangeCallback) {
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
@@ -2715,7 +2721,8 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               }
               origSetter.apply(this, [
                 parsePropertyValue(
-                  newValue)
+                  newValue,
+                  memberFlags)
               ]);
               newValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               setValue(this, memberName, newValue, cmpMeta);
@@ -2739,7 +2746,8 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
                   ref.$instanceValues$.set(memberName, currentValue);
                 }
                 ref.$lazyInstance$[memberName] = parsePropertyValue(
-                  newValue);
+                  newValue,
+                  memberFlags);
                 setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
               };
               if (ref.$lazyInstance$) {
@@ -2765,6 +2773,55 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         });
       }
     });
+    if ((flags & 1 /* isElementConstructor */)) {
+      const attrNameToPropName = /* @__PURE__ */ new Map();
+      prototype.attributeChangedCallback = function(attrName, oldValue, newValue) {
+        plt.jmp(() => {
+          var _a2;
+          const propName = attrNameToPropName.get(attrName);
+          const hostRef = getHostRef(this);
+          if (this.hasOwnProperty(propName) && BUILD.lazyLoad) {
+            newValue = this[propName];
+            delete this[propName];
+          }
+          if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
+          this[propName] == newValue) {
+            return;
+          } else if (propName == null) {
+            const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
+            if (hostRef && flags2 && !(flags2 & 8 /* isConstructingInstance */) && newValue !== oldValue) {
+              const instance = hostRef.$lazyInstance$ ;
+              const entry = (_a2 = cmpMeta.$watchers$) == null ? void 0 : _a2[attrName];
+              entry == null ? void 0 : entry.forEach((watcher) => {
+                const [[watchMethodName, watcherFlags]] = Object.entries(watcher);
+                if (instance[watchMethodName] != null && (flags2 & 128 /* isWatchReady */ || watcherFlags & 1 /* Immediate */)) {
+                  instance[watchMethodName].call(instance, newValue, oldValue, attrName);
+                }
+              });
+            }
+            return;
+          }
+          const propFlags = members.find(([m]) => m === propName);
+          if (propFlags && propFlags[1][0] & 4 /* Boolean */) {
+            newValue = newValue === null || newValue === "false" ? false : true;
+          }
+          const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
+          if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
+            this[propName] = newValue;
+          }
+        });
+      };
+      Cstr.observedAttributes = Array.from(
+        /* @__PURE__ */ new Set([
+          ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
+          ...members.filter(([_, m]) => m[0] & 31 /* HasAttribute */).map(([propName, m]) => {
+            const attrName = m[1] || propName;
+            attrNameToPropName.set(attrName, propName);
+            return attrName;
+          })
+        ])
+      );
+    }
   }
   return Cstr;
 };

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-CoGw-MK9.js';
-export { s as setNonce } from './index-CoGw-MK9.js';
+import { b as bootstrapLazy } from './index-D-FhYfR4.js';
+export { s as setNonce } from './index-D-FhYfR4.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["mb-sliding-puzzle",[[513,"mb-sliding-puzzle",{"tiles":[1040],"size":[32],"checkAnswer":[64]}]]]], options);
+  return bootstrapLazy([["mb-sliding-puzzle",[[513,"mb-sliding-puzzle",{"tiles":[1040],"freeMove":[4,"free-move"],"size":[32],"checkAnswer":[64]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/mb-sliding-puzzle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CoGw-MK9.js';
+import { r as registerInstance, h } from './index-D-FhYfR4.js';
 
 class Vec2 {
     x;
@@ -75,6 +75,12 @@ class Grid {
     getVecFromIndex(index) {
         return Grid.getVecFromIndex(index, this.size.width);
     }
+    getAllIndexes() {
+        return Grid.getAllIndexes(this.size);
+    }
+    getAllCells() {
+        return Grid.getAllCells(this.size);
+    }
     isBlack(v) {
         return Boolean((v.x + v.y) % 2);
     }
@@ -84,6 +90,12 @@ class Grid {
     isInGrid(v) {
         return Grid.isInGrid(v, this.size);
     }
+    static getAllIndexes(v) {
+        return Array(v.width * v.height).fill(true).map((_, i) => i);
+    }
+    static getAllCells(v) {
+        return Array(v.width * v.height).fill(true).map((_, i) => Grid.getVecFromIndex(i, v.width));
+    }
     static getVecFromIndex(index, width) {
         const _w = width instanceof Vec2 ? width.width : width;
         const x = index % _w;
@@ -109,7 +121,7 @@ class Grid {
     }
 }
 
-const slidingPuzzleCss = () => `.board{width:100%;height:100%;display:inline-block;aspect-ratio:calc(var(--width, 1) / var(--height, 1));border:1px solid black;position:relative;container-type:size}.tile{position:absolute;width:calc(100cqw / var(--width, 1));height:calc(100cqh / var(--height, 1));padding:0;border:none;transform:translate(calc(100% * var(--x)), calc(100% * var(--y)));transition:transform 0.5s}.tile img{display:block;width:100%;height:100%;pointer-events:none}`;
+const slidingPuzzleCss = () => `.board{width:100%;height:100%;display:inline-block;aspect-ratio:calc(var(--width, 1) / var(--height, 1));border:1px solid black;position:relative}.tile{position:absolute;width:calc(100% / var(--width, 1));height:calc(100% / var(--height, 1));padding:0;border:none;transform:translate(calc(100% * var(--x)), calc(100% * var(--y)));transition:transform 0.5s}.tile img{display:block;width:100%;height:100%;pointer-events:none}`;
 
 const MbSlidingPuzzle = class {
     constructor(hostRef) {
@@ -117,6 +129,7 @@ const MbSlidingPuzzle = class {
     }
     size = new Vec2(3, 3);
     tiles = [];
+    freeMove = false;
     async checkAnswer() {
         return this.tiles.every(t => t.position === t.correctPosition);
     }
@@ -129,14 +142,30 @@ const MbSlidingPuzzle = class {
     }
     onTileClicked(id) {
         const tile = this.getTileById(id);
+        if (tile.blocked)
+            return;
         const v = Grid.getVecFromIndex(tile.position, this.size.width);
-        const siblings = Grid.getOrtoSiblings(v, this.size);
-        const emptySibling = siblings.find(v => {
-            const index = Grid.getIndexFromVec(v, this.size.width);
-            return this.tiles.every(t => t.position !== index);
-        });
-        if (emptySibling) {
-            this.setTilePosition(tile, Grid.getIndexFromVec(emptySibling, this.size));
+        const target = this.getMoveTarget(v);
+        if (target) {
+            this.setTilePosition(tile, Grid.getIndexFromVec(target, this.size));
+        }
+    }
+    getMoveTarget(source) {
+        if (this.freeMove) {
+            const cells = Grid.getAllCells(this.size);
+            const emptyCell = cells.find(c => {
+                const index = Grid.getIndexFromVec(c, this.size.width);
+                return this.tiles.every(t => t.position !== index);
+            });
+            return emptyCell ?? null;
+        }
+        else {
+            const siblings = Grid.getOrtoSiblings(source, this.size);
+            const emptySibling = siblings.find(v => {
+                const index = Grid.getIndexFromVec(v, this.size.width);
+                return this.tiles.every(t => t.position !== index);
+            });
+            return emptySibling ?? null;
         }
     }
     setTilePosition(tile, position) {
@@ -151,7 +180,7 @@ const MbSlidingPuzzle = class {
         });
     }
     render() {
-        return h("div", { key: 'b22497e26d2ce6f7aeadc788f9475bb9fcd92e76', class: "board", style: {
+        return h("div", { key: 'd6042863922edef06b51cf3897c4cdad5b39b3c7', class: "board", style: {
                 '--width': `${this.size.width}`,
                 '--height': `${this.size.height}`,
             } }, this.tiles.map(tile => {

package/dist/esm/sliding-puzzle.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-CoGw-MK9.js';
-export { s as setNonce } from './index-CoGw-MK9.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-D-FhYfR4.js';
+export { s as setNonce } from './index-D-FhYfR4.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*
@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["mb-sliding-puzzle",[[513,"mb-sliding-puzzle",{"tiles":[1040],"size":[32],"checkAnswer":[64]}]]]], options);
+  return bootstrapLazy([["mb-sliding-puzzle",[[513,"mb-sliding-puzzle",{"tiles":[1040],"freeMove":[4,"free-move"],"size":[32],"checkAnswer":[64]}]]]], options);
 });