@mborecki/sliding-puzzle 0.2.0 → 0.3.0

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

@@ -144,6 +144,8 @@ const MbSlidingPuzzle = class {
     }
     onTileClicked(id) {
         const tile = this.getTileById(id);
+        if (tile.blocked)
+            return;
         const v = Grid.getVecFromIndex(tile.position, this.size.width);
         const target = this.getMoveTarget(v);
         if (target) {
@@ -155,7 +157,6 @@ const MbSlidingPuzzle = class {
             const cells = Grid.getAllCells(this.size);
             const emptyCell = cells.find(c => {
                 const index = Grid.getIndexFromVec(c, this.size.width);
-                console.log(index);
                 return this.tiles.every(t => t.position !== index);
             });
             return emptyCell ?? null;
@@ -181,7 +182,7 @@ const MbSlidingPuzzle = class {
         });
     }
     render() {
-        return index.h("div", { key: '52a3da12a2b29974e6c2683d8cfb46eb282d3424', class: "board", style: {
+        return index.h("div", { key: 'd6042863922edef06b51cf3897c4cdad5b39b3c7', class: "board", style: {
                 '--width': `${this.size.width}`,
                 '--height': `${this.size.height}`,
             } }, this.tiles.map(tile => {

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

@@ -17,6 +17,8 @@ export class MbSlidingPuzzle {
     }
     onTileClicked(id) {
         const tile = this.getTileById(id);
+        if (tile.blocked)
+            return;
         const v = Grid.getVecFromIndex(tile.position, this.size.width);
         const target = this.getMoveTarget(v);
         if (target) {
@@ -28,7 +30,6 @@ export class MbSlidingPuzzle {
             const cells = Grid.getAllCells(this.size);
             const emptyCell = cells.find(c => {
                 const index = Grid.getIndexFromVec(c, this.size.width);
-                console.log(index);
                 return this.tiles.every(t => t.position !== index);
             });
             return emptyCell ?? null;
@@ -54,7 +55,7 @@ export class MbSlidingPuzzle {
         });
     }
     render() {
-        return h("div", { key: '52a3da12a2b29974e6c2683d8cfb46eb282d3424', 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/components/mb-sliding-puzzle.js

@@ -1 +1 @@
-import{t,p as e,H as i,h as s}from"./index.js";class r{x;y;get 0(){return this.x}set 0(t){this.x=t}get 1(){return this.y}set 1(t){this.y=t}get width(){return this.x}set width(t){this.x=t}get height(){return this.y}set height(t){this.y=t}get xy(){return[this.x,this.y]}*[Symbol.iterator](){yield this.x,yield this.y}constructor(t,e){this.x=t,this.y=e}add(t){return new r(this.x+t.x,this.y+t.y)}eq(t){return this.x===t.x&&this.y===t.y}clone(){return new r(this.x,this.y)}static from(t){if("number"==typeof t)return new r(t,t);if(Array.isArray(t))return new r(t[0]??0,t[1]??0);if("object"==typeof t&&"number"==typeof t.x&&"number"==typeof t.y)return new r(t.x,t.y);throw Error("Wrong Vec2 source")}}class n{size;constructor(t){if(t.x<=0||t.y<=0)throw Error(`Invalid grid size: width and height must be positive (got ${t.x}x${t.y})`);this.size=t}getIndexFromVec(t){return n.getIndexFromVec(t,this.size.width)}getVecFromIndex(t){return n.getVecFromIndex(t,this.size.width)}getAllIndexes(){return n.getAllIndexes(this.size)}getAllCells(){return n.getAllCells(this.size)}isBlack(t){return!!((t.x+t.y)%2)}isWhite(t){return!((t.x+t.y)%2)}isInGrid(t){return n.isInGrid(t,this.size)}static getAllIndexes(t){return Array(t.width*t.height).fill(!0).map(((t,e)=>e))}static getAllCells(t){return Array(t.width*t.height).fill(!0).map(((e,i)=>n.getVecFromIndex(i,t.width)))}static getVecFromIndex(t,e){const i=e instanceof r?e.width:e;return new r(t%i,Math.floor(t/i))}static getIndexFromVec(t,e){return t.y*(e instanceof r?e.width:e)+t.x}static isInGrid(t,e){return t.x>=0&&e.x>t.x&&t.y>=0&&e.y>t.y}static getOrtoSiblings(t,e){return[new r(-1,0),new r(1,0),new r(0,-1),new r(0,1)].map((e=>e.add(t))).filter((t=>n.isInGrid(t,e)))}}const h=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}size=new r(3,3);tiles=[];freeMove=!1;async checkAnswer(){return this.tiles.every((t=>t.position===t.correctPosition))}getTileById(t){const e=this.tiles.find((e=>e.id===t));if(!e)throw Error("Tile not found");return e}onTileClicked(t){const e=this.getTileById(t),i=n.getVecFromIndex(e.position,this.size.width),s=this.getMoveTarget(i);s&&this.setTilePosition(e,n.getIndexFromVec(s,this.size))}getMoveTarget(t){return this.freeMove?n.getAllCells(this.size).find((t=>{const e=n.getIndexFromVec(t,this.size.width);return console.log(e),this.tiles.every((t=>t.position!==e))}))??null:n.getOrtoSiblings(t,this.size).find((t=>{const e=n.getIndexFromVec(t,this.size.width);return this.tiles.every((t=>t.position!==e))}))??null}setTilePosition(t,e){const i="string"==typeof t?t:t.id;this.tiles=this.tiles.map((t=>t.id!==i?t:{...t,position:e}))}render(){return s("div",{key:"52a3da12a2b29974e6c2683d8cfb46eb282d3424",class:"board",style:{"--width":""+this.size.width,"--height":""+this.size.height}},this.tiles.map((t=>{const e=n.getVecFromIndex(t.position,this.size.width);return s("button",{key:t.id,class:"tile",style:{"--x":""+e.x,"--y":""+e.y},onClick:this.onTileClicked.bind(this,t.id)},s("img",{src:t.imageSrc,alt:""}))})))}static get style(){return".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}"}},[513,"mb-sliding-puzzle",{tiles:[1040],freeMove:[4,"free-move"],size:[32],checkAnswer:[64]}]);function o(){"undefined"!=typeof customElements&&["mb-sliding-puzzle"].forEach((e=>{"mb-sliding-puzzle"===e&&(customElements.get(t(e))||customElements.define(t(e),h))}))}o();const c=h,l=o;export{c as MbSlidingPuzzle,l as defineCustomElement}
+import{t,p as e,H as i,h as s}from"./index.js";class r{x;y;get 0(){return this.x}set 0(t){this.x=t}get 1(){return this.y}set 1(t){this.y=t}get width(){return this.x}set width(t){this.x=t}get height(){return this.y}set height(t){this.y=t}get xy(){return[this.x,this.y]}*[Symbol.iterator](){yield this.x,yield this.y}constructor(t,e){this.x=t,this.y=e}add(t){return new r(this.x+t.x,this.y+t.y)}eq(t){return this.x===t.x&&this.y===t.y}clone(){return new r(this.x,this.y)}static from(t){if("number"==typeof t)return new r(t,t);if(Array.isArray(t))return new r(t[0]??0,t[1]??0);if("object"==typeof t&&"number"==typeof t.x&&"number"==typeof t.y)return new r(t.x,t.y);throw Error("Wrong Vec2 source")}}class n{size;constructor(t){if(t.x<=0||t.y<=0)throw Error(`Invalid grid size: width and height must be positive (got ${t.x}x${t.y})`);this.size=t}getIndexFromVec(t){return n.getIndexFromVec(t,this.size.width)}getVecFromIndex(t){return n.getVecFromIndex(t,this.size.width)}getAllIndexes(){return n.getAllIndexes(this.size)}getAllCells(){return n.getAllCells(this.size)}isBlack(t){return!!((t.x+t.y)%2)}isWhite(t){return!((t.x+t.y)%2)}isInGrid(t){return n.isInGrid(t,this.size)}static getAllIndexes(t){return Array(t.width*t.height).fill(!0).map(((t,e)=>e))}static getAllCells(t){return Array(t.width*t.height).fill(!0).map(((e,i)=>n.getVecFromIndex(i,t.width)))}static getVecFromIndex(t,e){const i=e instanceof r?e.width:e;return new r(t%i,Math.floor(t/i))}static getIndexFromVec(t,e){return t.y*(e instanceof r?e.width:e)+t.x}static isInGrid(t,e){return t.x>=0&&e.x>t.x&&t.y>=0&&e.y>t.y}static getOrtoSiblings(t,e){return[new r(-1,0),new r(1,0),new r(0,-1),new r(0,1)].map((e=>e.add(t))).filter((t=>n.isInGrid(t,e)))}}const h=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}size=new r(3,3);tiles=[];freeMove=!1;async checkAnswer(){return this.tiles.every((t=>t.position===t.correctPosition))}getTileById(t){const e=this.tiles.find((e=>e.id===t));if(!e)throw Error("Tile not found");return e}onTileClicked(t){const e=this.getTileById(t);if(e.blocked)return;const i=n.getVecFromIndex(e.position,this.size.width),s=this.getMoveTarget(i);s&&this.setTilePosition(e,n.getIndexFromVec(s,this.size))}getMoveTarget(t){return this.freeMove?n.getAllCells(this.size).find((t=>{const e=n.getIndexFromVec(t,this.size.width);return this.tiles.every((t=>t.position!==e))}))??null:n.getOrtoSiblings(t,this.size).find((t=>{const e=n.getIndexFromVec(t,this.size.width);return this.tiles.every((t=>t.position!==e))}))??null}setTilePosition(t,e){const i="string"==typeof t?t:t.id;this.tiles=this.tiles.map((t=>t.id!==i?t:{...t,position:e}))}render(){return s("div",{key:"d6042863922edef06b51cf3897c4cdad5b39b3c7",class:"board",style:{"--width":""+this.size.width,"--height":""+this.size.height}},this.tiles.map((t=>{const e=n.getVecFromIndex(t.position,this.size.width);return s("button",{key:t.id,class:"tile",style:{"--x":""+e.x,"--y":""+e.y},onClick:this.onTileClicked.bind(this,t.id)},s("img",{src:t.imageSrc,alt:""}))})))}static get style(){return".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}"}},[513,"mb-sliding-puzzle",{tiles:[1040],freeMove:[4,"free-move"],size:[32],checkAnswer:[64]}]);function o(){"undefined"!=typeof customElements&&["mb-sliding-puzzle"].forEach((e=>{"mb-sliding-puzzle"===e&&(customElements.get(t(e))||customElements.define(t(e),h))}))}o();const c=h,l=o;export{c as MbSlidingPuzzle,l as defineCustomElement}

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

@@ -142,6 +142,8 @@ const MbSlidingPuzzle = class {
     }
     onTileClicked(id) {
         const tile = this.getTileById(id);
+        if (tile.blocked)
+            return;
         const v = Grid.getVecFromIndex(tile.position, this.size.width);
         const target = this.getMoveTarget(v);
         if (target) {
@@ -153,7 +155,6 @@ const MbSlidingPuzzle = class {
             const cells = Grid.getAllCells(this.size);
             const emptyCell = cells.find(c => {
                 const index = Grid.getIndexFromVec(c, this.size.width);
-                console.log(index);
                 return this.tiles.every(t => t.position !== index);
             });
             return emptyCell ?? null;
@@ -179,7 +180,7 @@ const MbSlidingPuzzle = class {
         });
     }
     render() {
-        return h("div", { key: '52a3da12a2b29974e6c2683d8cfb46eb282d3424', 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/sliding-puzzle/{p-ee89c4f7.entry.js → p-a976746c.entry.js}

@@ -1 +1 @@
-import{r as t,h as e}from"./p-D-FhYfR4.js";class i{x;y;get 0(){return this.x}set 0(t){this.x=t}get 1(){return this.y}set 1(t){this.y=t}get width(){return this.x}set width(t){this.x=t}get height(){return this.y}set height(t){this.y=t}get xy(){return[this.x,this.y]}*[Symbol.iterator](){yield this.x,yield this.y}constructor(t,e){this.x=t,this.y=e}add(t){return new i(this.x+t.x,this.y+t.y)}eq(t){return this.x===t.x&&this.y===t.y}clone(){return new i(this.x,this.y)}static from(t){if("number"==typeof t)return new i(t,t);if(Array.isArray(t))return new i(t[0]??0,t[1]??0);if("object"==typeof t&&"number"==typeof t.x&&"number"==typeof t.y)return new i(t.x,t.y);throw new Error("Wrong Vec2 source")}}class r{size;constructor(t){if(t.x<=0||t.y<=0)throw new Error(`Invalid grid size: width and height must be positive (got ${t.x}x${t.y})`);this.size=t}getIndexFromVec(t){return r.getIndexFromVec(t,this.size.width)}getVecFromIndex(t){return r.getVecFromIndex(t,this.size.width)}getAllIndexes(){return r.getAllIndexes(this.size)}getAllCells(){return r.getAllCells(this.size)}isBlack(t){return Boolean((t.x+t.y)%2)}isWhite(t){return!Boolean((t.x+t.y)%2)}isInGrid(t){return r.isInGrid(t,this.size)}static getAllIndexes(t){return Array(t.width*t.height).fill(!0).map(((t,e)=>e))}static getAllCells(t){return Array(t.width*t.height).fill(!0).map(((e,i)=>r.getVecFromIndex(i,t.width)))}static getVecFromIndex(t,e){const r=e instanceof i?e.width:e,s=t%r,n=Math.floor(t/r);return new i(s,n)}static getIndexFromVec(t,e){return t.y*(e instanceof i?e.width:e)+t.x}static isInGrid(t,e){return t.x>=0&&e.x>t.x&&t.y>=0&&e.y>t.y}static getOrtoSiblings(t,e){return[new i(-1,0),new i(1,0),new i(0,-1),new i(0,1)].map((e=>e.add(t))).filter((t=>r.isInGrid(t,e)))}}const s=class{constructor(e){t(this,e)}size=new i(3,3);tiles=[];freeMove=!1;async checkAnswer(){return this.tiles.every((t=>t.position===t.correctPosition))}getTileById(t){const e=this.tiles.find((e=>e.id===t));if(!e)throw new Error("Tile not found");return e}onTileClicked(t){const e=this.getTileById(t),i=r.getVecFromIndex(e.position,this.size.width),s=this.getMoveTarget(i);s&&this.setTilePosition(e,r.getIndexFromVec(s,this.size))}getMoveTarget(t){return this.freeMove?r.getAllCells(this.size).find((t=>{const e=r.getIndexFromVec(t,this.size.width);return console.log(e),this.tiles.every((t=>t.position!==e))}))??null:r.getOrtoSiblings(t,this.size).find((t=>{const e=r.getIndexFromVec(t,this.size.width);return this.tiles.every((t=>t.position!==e))}))??null}setTilePosition(t,e){const i="string"==typeof t?t:t.id;this.tiles=this.tiles.map((t=>t.id!==i?t:{...t,position:e}))}render(){return e("div",{key:"52a3da12a2b29974e6c2683d8cfb46eb282d3424",class:"board",style:{"--width":`${this.size.width}`,"--height":`${this.size.height}`}},this.tiles.map((t=>{const i=r.getVecFromIndex(t.position,this.size.width);return e("button",{key:t.id,class:"tile",style:{"--x":`${i.x}`,"--y":`${i.y}`},onClick:this.onTileClicked.bind(this,t.id)},e("img",{src:t.imageSrc,alt:""}))})))}};s.style=".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}";export{s as mb_sliding_puzzle}
+import{r as t,h as e}from"./p-D-FhYfR4.js";class i{x;y;get 0(){return this.x}set 0(t){this.x=t}get 1(){return this.y}set 1(t){this.y=t}get width(){return this.x}set width(t){this.x=t}get height(){return this.y}set height(t){this.y=t}get xy(){return[this.x,this.y]}*[Symbol.iterator](){yield this.x,yield this.y}constructor(t,e){this.x=t,this.y=e}add(t){return new i(this.x+t.x,this.y+t.y)}eq(t){return this.x===t.x&&this.y===t.y}clone(){return new i(this.x,this.y)}static from(t){if("number"==typeof t)return new i(t,t);if(Array.isArray(t))return new i(t[0]??0,t[1]??0);if("object"==typeof t&&"number"==typeof t.x&&"number"==typeof t.y)return new i(t.x,t.y);throw new Error("Wrong Vec2 source")}}class r{size;constructor(t){if(t.x<=0||t.y<=0)throw new Error(`Invalid grid size: width and height must be positive (got ${t.x}x${t.y})`);this.size=t}getIndexFromVec(t){return r.getIndexFromVec(t,this.size.width)}getVecFromIndex(t){return r.getVecFromIndex(t,this.size.width)}getAllIndexes(){return r.getAllIndexes(this.size)}getAllCells(){return r.getAllCells(this.size)}isBlack(t){return Boolean((t.x+t.y)%2)}isWhite(t){return!Boolean((t.x+t.y)%2)}isInGrid(t){return r.isInGrid(t,this.size)}static getAllIndexes(t){return Array(t.width*t.height).fill(!0).map(((t,e)=>e))}static getAllCells(t){return Array(t.width*t.height).fill(!0).map(((e,i)=>r.getVecFromIndex(i,t.width)))}static getVecFromIndex(t,e){const r=e instanceof i?e.width:e,s=t%r,n=Math.floor(t/r);return new i(s,n)}static getIndexFromVec(t,e){return t.y*(e instanceof i?e.width:e)+t.x}static isInGrid(t,e){return t.x>=0&&e.x>t.x&&t.y>=0&&e.y>t.y}static getOrtoSiblings(t,e){return[new i(-1,0),new i(1,0),new i(0,-1),new i(0,1)].map((e=>e.add(t))).filter((t=>r.isInGrid(t,e)))}}const s=class{constructor(e){t(this,e)}size=new i(3,3);tiles=[];freeMove=!1;async checkAnswer(){return this.tiles.every((t=>t.position===t.correctPosition))}getTileById(t){const e=this.tiles.find((e=>e.id===t));if(!e)throw new Error("Tile not found");return e}onTileClicked(t){const e=this.getTileById(t);if(e.blocked)return;const i=r.getVecFromIndex(e.position,this.size.width),s=this.getMoveTarget(i);s&&this.setTilePosition(e,r.getIndexFromVec(s,this.size))}getMoveTarget(t){return this.freeMove?r.getAllCells(this.size).find((t=>{const e=r.getIndexFromVec(t,this.size.width);return this.tiles.every((t=>t.position!==e))}))??null:r.getOrtoSiblings(t,this.size).find((t=>{const e=r.getIndexFromVec(t,this.size.width);return this.tiles.every((t=>t.position!==e))}))??null}setTilePosition(t,e){const i="string"==typeof t?t:t.id;this.tiles=this.tiles.map((t=>t.id!==i?t:{...t,position:e}))}render(){return e("div",{key:"d6042863922edef06b51cf3897c4cdad5b39b3c7",class:"board",style:{"--width":`${this.size.width}`,"--height":`${this.size.height}`}},this.tiles.map((t=>{const i=r.getVecFromIndex(t.position,this.size.width);return e("button",{key:t.id,class:"tile",style:{"--x":`${i.x}`,"--y":`${i.y}`},onClick:this.onTileClicked.bind(this,t.id)},e("img",{src:t.imageSrc,alt:""}))})))}};s.style=".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}";export{s as mb_sliding_puzzle}

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

@@ -1 +1 @@
-import{p as e,b as r}from"./p-D-FhYfR4.js";export{s as setNonce}from"./p-D-FhYfR4.js";import{g as o}from"./p-DQuL1Twl.js";(()=>{const s=import.meta.url,r={};return""!==s&&(r.resourcesUrl=new URL(".",s).href),e(r)})().then((async e=>(await o(),r([["p-ee89c4f7",[[513,"mb-sliding-puzzle",{tiles:[1040],freeMove:[4,"free-move"],size:[32],checkAnswer:[64]}]]]],e))));
+import{p as e,b as r}from"./p-D-FhYfR4.js";export{s as setNonce}from"./p-D-FhYfR4.js";import{g as o}from"./p-DQuL1Twl.js";(()=>{const s=import.meta.url,r={};return""!==s&&(r.resourcesUrl=new URL(".",s).href),e(r)})().then((async e=>(await o(),r([["p-a976746c",[[513,"mb-sliding-puzzle",{tiles:[1040],freeMove:[4,"free-move"],size:[32],checkAnswer:[64]}]]]],e))));

package/dist/types/components/sliding-puzzle/types.d.ts

@@ -7,4 +7,5 @@ export type TileData = {
     position: number;
     correctPosition: number;
     imageSrc: string;
+    blocked?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mborecki/sliding-puzzle",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "type": "module",
   "description": "Sliding Puzzle",
@@ -40,8 +40,8 @@
     "tslib": "^2.8.1",
     "typescript": "5.9.3",
     "vitest": "4.0.16",
-    "@mb-puzzle/vec2": "0.5.0",
-    "@mb-puzzle/grid": "0.1.0"
+    "@mb-puzzle/grid": "0.1.0",
+    "@mb-puzzle/vec2": "0.5.0"
   },
   "license": "MIT",
   "scripts": {