mumuki-puzzle-runner 0.1.2 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 441d4b26b7b8308cc9ed1ec7aca6de3c03905a6018af2db5d1d5e9889b72b55d
-  data.tar.gz: 5ccb1d263bc6e5c60f62d247006faa81d9a5647518939c0e9b2159092a3fdc45
+  metadata.gz: 20cbf33422b40662d79aa0662f45011525a7260454eccfb1f64e5f0a4cdab780
+  data.tar.gz: e84cc1ba0a61dffe0be0ccb9bd26840ff5e9de7dc3b2d1ecff7a9010ac1a36ef
 SHA512:
-  metadata.gz: d68ffd2617b06416d0e377a46c0bbb89f2728267d79866e31dc7afbaea88d9c22f1df2390ae0bac3a662c610ecc1f8234dec6bd9ca658d9714eea4412ef8e2fb
-  data.tar.gz: 5c83e99fc78f6f4043e65b5da66a1587a4398a3247d322985d5140976601d69feec3ebadcf9c1de0e86b1ce2208055414af1c87da08e97bf809ee256ff856877
+  metadata.gz: ac96c26344814c63d596c1cb012781b18799eb683603ec738beea160ace4e677dd650926cd2720a3e4fb85e712d19a432137040233be99a7a69534823c82d655
+  data.tar.gz: c56d817d8240de55674cad90192c59f823da755ce9d3eabdf8a4f373cf84be5c22b1e15fdad64c1c5ff0f40770d9102c11fcd65674621910a07bbdccd95ed065

data/lib/public/css/muzzle-editor.css

@@ -1,4 +1,28 @@
 .mu-kids-state-image img {
-  width: 90%;
+  height: 100%;
+  width: auto;
   padding: 30px;
 }
+
+.mu-kids-state.mu-state-initial {
+  width: 100%;
+}
+
+.mu-kids-exercise-workspace.muzzle-simple .mu-kids-submit-button {
+  display: none;
+}
+
+.mu-kids-exercise-workspace.muzzle-simple .mu-kids-blocks {
+  overflow: hidden;
+}
+
+.mu-kids-exercise-workspace.muzzle-simple .mu-kids-blocks:after {
+   content: ' ';
+   box-shadow: inset 0 0 30px 30px #FFFFFF;
+   position: absolute;
+   top: 0;
+   left: 0;
+   right: 0;
+   bottom: 0;
+   pointer-events: none;
+ }

data/lib/public/js/muzzle-editor.js

@@ -1,5 +1,13 @@
 // @ts-nocheck
 $(() => {
+  function register(event, callback) {
+    const _event = Muzzle[event];
+    Muzzle[event] = (...args) => {
+      callback(...args);
+      _event(...args);
+    }
+  }
+
   // ================
   // Muzzle rendering
   // ================
@@ -27,40 +35,51 @@ $(() => {
     getContent() { return { name: "client_result[status]", value: Muzzle.clientResultStatus }; }
   })
 
-  // Requiered to actually bind Muzzle's submit to
+  // Required to actually bind Muzzle's submit to
   // mumuki's solution processing
-  const _onSubmit = Muzzle.onSubmit;
-  Muzzle.onSubmit = (submission) => {
-    console.log(`submitting ${submission}`)
+  register('onSubmit', (submission) => {
     mumuki.submission.processSolution(submission);
-    _onSubmit(submission);
-  }
+  });
 
   // ===========
   // Kids config
   // ===========
 
-  // Required to make scaler work
-  mumuki.kids.registerStateScaler(($state, fullMargin, preferredWidth, preferredHeight) => {
-    // nothing
-    // no state scaling needed
+  mumuki.kids.registerStateScaler(($state, fullMargin) => {
+    const $image = $state.find('img');
+
+    $image.css('transform', 'scale(1)');
+    const width = ($state.width() - fullMargin) / $image.width();
+    const height = ($state.height() - fullMargin) / $image.height();
+    $image.css('transform', 'scale(' + Math.min(width, height) + ')');
   });
+
   mumuki.kids.registerBlocksAreaScaler(($blocks) => {
-    // nothing
-    // no blocks scaling needed
+    const maxHeight = $('.mu-kids-exercise').height() - $('.mu-kids-exercise-description').height();
+    Muzzle.scale($blocks.width(), Math.min($blocks.height(), maxHeight));
+  });
+
+  Muzzle.manualScale = true;
+
+  // ====================
+  // Submit button hiding
+  // ====================
+
+  register('onReady', () => {
+    if (Muzzle.simple) {
+      $('.mu-kids-exercise-workspace').addClass('muzzle-simple');
+    }
   });
 
   // ==============
   // Assets loading
   // ==============
 
-  const _onReady = Muzzle.onReady;
-  Muzzle.onReady = () => {
+  register('onReady', () => {
     mumuki.assetsLoadedFor('editor');
     // although layout assets
     // are actually loaded before this script, puzzle runner is not aimed
     // to be used without a custom editor
     mumuki.assetsLoadedFor('layout');
-    _onReady();
-  };
+  });
 });

data/lib/public/js/muzzle.js

@@ -73,6 +73,14 @@ class MuzzleCanvas {
      */
     this.canvasHeight = 600;
 
+    /**
+     * Wether canvas shoud **not** be resized.
+     * Default is `false`
+     *
+     * @type {boolean}
+     */
+    this.fixedDimensions = false;
+
     /**
      * Size of fill. Set null for perfect-match
      *
@@ -85,7 +93,7 @@ class MuzzleCanvas {
      *
      * @type {number}
      */
-    this.strokeWidth = 1.5;
+    this.strokeWidth = 3;
 
     /**
      * Piece size
@@ -95,11 +103,22 @@ class MuzzleCanvas {
     this.pieceSize = 100;
 
     /**
-     * * Whether image's width should be scaled to piece
+     * The x:y aspect ratio of the piece. Set null for automatic
+     * aspectRatio
+     *
+     * @type {number}
+     */
+    this.aspectRatio = null;
+
+    /**
+     * If the images should be adjusted vertically instead of horizontally
+     * to puzzle dimensions. `false` by default
      *
      * @type {boolean}
      */
-    this.scaleImageWidthToFit = true;
+    this.fitImagesVertically = false;
+
+    this.manualScale = false;
 
     /**
      * Callback that will be executed
@@ -117,7 +136,28 @@ class MuzzleCanvas {
      *
      * @type {string}
      */
-    this.previousSolutionContent = null
+    this.previousSolutionContent = null;
+
+    /**
+     * Whether the current puzzle can be solved in very few tries.
+     *
+     * Set null for automatic configuration of this property. Basic puzzles will be considered
+     * basic and match puzzles will be considered non-basic.
+     *
+     * @type {boolean}
+     */
+    this.simple = null;
+
+    this.spiky = false;
+
+    /**
+     * The reference insert axis, used at rounded outline to compute insert internal and external diameters
+     * Set null for default computation of axis - no axis reference for basic boards
+     * and vertical axis for match
+     *
+     * @type {Axis}
+     * */
+    this.referenceInsertAxis = null;
 
     /**
      * Callback to be executed when submitting puzzle.
@@ -139,18 +179,59 @@ class MuzzleCanvas {
     this.onValid = () => {};
   }
 
+
+
   /**
    */
   get baseConfig() {
-    return {
+    return Object.assign({
       width: this.canvasWidth,
       height: this.canvasHeight,
-      pieceSize: this.pieceSize,
-      proximity: this.pieceSize / 5,
-      borderFill: this.borderFill === null ? this.pieceSize / 10 : this.borderFill,
+      pieceSize: this.adjustedPieceSize,
+      proximity: Math.min(this.adjustedPieceSize.x, this.adjustedPieceSize.y) / 5,
       strokeWidth: this.strokeWidth,
       lineSoftness: 0.18
-    };
+    }, this.outlineConfig);
+  }
+
+  /**
+   */
+  get outlineConfig() {
+    if (this.spiky) {
+      return {
+        borderFill: this.borderFill === null ? headbreaker.Vector.divide(this.adjustedPieceSize, 10) : this.borderFill,
+      }
+    } else {
+      return {
+        borderFill: 0,
+        outline: new headbreaker.outline.Rounded({
+          bezelize: true,
+          insertDepth: 3/5,
+          bezelDepth: 9/10,
+          referenceInsertAxis: this.referenceInsertAxis
+        }),
+      }
+    }
+  }
+
+  /**
+   * The piece size, adjusted to the aspect ratio
+   *
+   * @returns {Vector}
+   */
+  get adjustedPieceSize() {
+    if (!this._adjustedPieceSize) {
+      const aspectRatio = this.aspectRatio || 1;
+      this._adjustedPieceSize = headbreaker.vector(this.pieceSize / aspectRatio, this.pieceSize);
+    }
+    return this._adjustedPieceSize;
+  }
+
+  /**
+   * @type {Axis}
+   */
+  get imageAdjustmentAxis() {
+    return this.fitImagesVertically ? headbreaker.Vertical : headbreaker.Horizontal;
   }
 
   /**
@@ -195,15 +276,25 @@ class MuzzleCanvas {
    * @returns {Promise<Canvas>} the promise of the built canvas
    */
   async basic(x, y, imagePath) {
+    if (!this.aspectRatio) {
+      this.aspectRatio = x / y;
+    }
+
+    if (this.simple === null) {
+      this.simple = true;
+    }
+
     /**
      * @todo take all container size
      **/
     const image = await this._loadImage(imagePath);
     /** @type {Canvas} */
     // @ts-ignore
-    const canvas = this._createCanvas(image);
+    const canvas = this._createCanvas({ image: image });
+    canvas.adjustImagesToPuzzle(this.imageAdjustmentAxis);
     canvas.autogenerate({ horizontalPiecesCount: x, verticalPiecesCount: y });
     this._attachBasicValidator(canvas);
+    canvas.shuffleGrid(0.8);
     this._configCanvas(canvas);
     canvas.onValid(() => {
       setTimeout(() => {
@@ -225,7 +316,7 @@ class MuzzleCanvas {
     const count = imagePaths.length;
     const images = await Promise.all(imagePaths.map(imagePath => this._loadImage(imagePath)));
 
-    const canvas = this._createCanvas(null);
+    const canvas = this._createCanvas();
     canvas.autogenerate({ horizontalPiecesCount: x, verticalPiecesCount: y * count });
 
     // todo validate
@@ -243,30 +334,70 @@ class MuzzleCanvas {
    * @param {string[]} rightUrls must be of the same size of lefts
    * @param {string[]} leftOddUrls
    * @param {string[]} rightOddUrls
+   * @param {number?} rightWidthRatio a multiplicator to apply to the right piece's width
    * @returns {Promise<Canvas>} the promise of the built canvas
    */
-  async match(leftUrls, rightUrls, leftOddUrls = [], rightOddUrls = []) {
+  async match(leftUrls, rightUrls, leftOddUrls = [], rightOddUrls = [], rightWidthRatio = 1) {
+    if (!this.referenceInsertAxis) {
+      this.referenceInsertAxis = headbreaker.Vertical;
+    }
+
     /** @private @type {(Promise<Template>)[]} */
     const templatePromises = [];
-    const pushTemplate = (config, options) =>
-      templatePromises.push(this._createMatchTemplate(config, options));
+
+    const rightSize = headbreaker.diameter(headbreaker.Vector.multiply(this.adjustedPieceSize, headbreaker.vector(rightWidthRatio, 1)));
+
+    const pushTemplate = (path, options) =>
+      templatePromises.push(this._createMatchTemplate(path, options));
+
+    const pushLeftTemplate = (index, path, options) =>
+      pushTemplate(path, {
+        left: true,
+        targetPosition: headbreaker.Vector.multiply(this.pieceSize, headbreaker.vector(1, index)),
+        ...options
+      });
+
+    const pushRightTemplate = (index, path, options) =>
+      pushTemplate(path, {
+        size: rightSize,
+        targetPosition: headbreaker.Vector.multiply(this.pieceSize, headbreaker.vector(2, index)),
+        ...options
+      });
 
     const last = leftUrls.length - 1;
     for (let i = 0; i <= last; i++) {
       const leftId = `l${i}`;
       const rightId = `r${i}`;
 
-      pushTemplate(leftUrls[i], {id: leftId, left: true, rightTargetId: rightId});
-      pushTemplate(rightUrls[i], {id: rightId});
+      pushLeftTemplate(i + 1, leftUrls[i], {
+        id: leftId,
+        rightTargetId: rightId
+      });
+      pushRightTemplate(i + 1, rightUrls[i], {
+        id: rightId
+      });
     }
 
-    leftOddUrls.forEach((it, i) =>  pushTemplate(it, {id: `lo${i}`, left: true, odd: true}));
-    rightOddUrls.forEach((it, i) => pushTemplate(it, {id: `ro${i}`, odd: true}));
-
+    leftOddUrls.forEach((it, i) =>
+      pushLeftTemplate(i + leftUrls.length, it, {
+        id: `lo${i}`,
+        odd: true
+      })
+    );
+    rightOddUrls.forEach((it, i) =>
+      pushRightTemplate(i + rightUrls.length, it, {
+        id: `ro${i}`,
+        odd: true
+      })
+    );
+
+    //  + Math.max(leftOddUrls.length, rightOddUrls.length)
     const templates = await Promise.all(templatePromises);
     /** @type {Canvas} */
-    const canvas = this._createCanvas();
+    const canvas = this._createCanvas({ maxPiecesCount: {x: 2, y: leftUrls.length} });
+    canvas.adjustImagesToPiece(this.imageAdjustmentAxis);
     templates.forEach(it => canvas.sketchPiece(it));
+    canvas.shuffleColumns(0.8);
     this._attachMatchValidator(canvas);
     this._configCanvas(canvas);
     return canvas;
@@ -283,19 +414,11 @@ class MuzzleCanvas {
 
   /**
    * @private
-   * @param {HTMLImageElement} image
+   * @param {any} config
    * @return {Canvas}
    */
-  _createCanvas(image = null) {
-    return new headbreaker.Canvas(this.canvasId, this._canvasConfig(image));
-  }
-
-  /**
-   * @private
-   * @param {HTMLImageElement} image
-   */
-  _canvasConfig(image) {
-    return Object.assign({ image }, this.baseConfig);
+  _createCanvas(config = {}) {
+    return new headbreaker.Canvas(this.canvasId, Object.assign(config, this.baseConfig));
   }
 
   /**
@@ -339,37 +462,17 @@ class MuzzleCanvas {
    * @param {object} options
    * @returns {Promise<object>}
    */
-  _createMatchTemplate(imagePath, {id, left = false, rightTargetId = null, odd = false}) {
+  _createMatchTemplate(imagePath, {id, left = false, targetPosition = null, rightTargetId = null, odd = false, size = null}) {
     const structure = left ? 'T-N-' : `N-S-`;
-
     return this._loadImage(imagePath).then((image) => {
-      const scale = this._imageScale(image);
-      const offset = this.baseConfig.borderFill / scale;
       return {
+        ...(size ? {size} : {}),
         structure,
-        metadata: {
-          id,
-          left,
-          odd,
-          rightTargetId,
-          image: {
-            scale,
-            content: image,
-            offset: { x: offset, y: offset }
-          }
-        }
+        metadata: { id, left, odd, rightTargetId, image, targetPosition }
       }
     });
   }
 
-  /**
-   * @private
-   * @param {HTMLImageElement} image
-   */
-  _imageScale(image) {
-    return this.scaleImageWidthToFit ? this.pieceSize / image.width  : 1;
-  }
-
   /**
    * @private
    * @param {Canvas} canvas
@@ -379,15 +482,86 @@ class MuzzleCanvas {
     this._canvas.onValid(() => {
       setTimeout(() => this.onValid(), 0);
     });
+    this._setUpScaler();
     this.ready();
   }
 
+  _setUpScaler() {
+    if (this.manualScale) return;
+
+    ['resize', 'load'].forEach((event) => {
+      window.addEventListener(event, () => {
+        var container = document.getElementById(this.canvasId);
+        this.scale(container.offsetWidth, container.scrollHeight);
+      });
+    });
+  }
+
+  /**
+   * Scales the canvas to the given width and height
+   *
+   * @param {number} width
+   * @param {number} height
+   */
+  scale(width, height) {
+    if (this.fixedDimensions || !this.canvas) return;
+    const factor = this.optimalScaleFactor(width, height);
+    this.canvas.resize(width, height);
+    this.canvas.scale(factor);
+    this.canvas.redraw();
+    this.focus();
+  }
+
+  /**
+   * Focuses the stage around the canvas center
+   */
+  focus() {
+    const stage = this.canvas['__konvaLayer__'].getStage();
+
+    const area = headbreaker.Vector.divide(headbreaker.vector(stage.width(), stage.height()), stage.scaleX());
+    const realDiameter = (() => {
+      const [xs, ys] = this.coordinates;
+
+      const minX = Math.min(...xs);
+      const minY = Math.min(...ys);
+
+      const maxX = Math.max(...xs);
+      const maxY = Math.max(...ys);
+
+      return headbreaker.Vector.plus(headbreaker.vector(maxX - minX, maxY - minY), this.canvas.puzzle.pieceDiameter);
+    })();
+    const diff = headbreaker.Vector.minus(area, realDiameter);
+    const semi = headbreaker.Vector.divide(diff, -2);
+
+    stage.setOffset(semi);
+    stage.draw();
+  }
+
+  /**
+   * @private
+   */
+  get coordinates() {
+    const points = this.canvas.puzzle.points;
+    return [points.map(([x, _y]) => x), points.map(([_x, y]) => y)];
+  }
+
+  /**
+   * @private
+   * @param {number} width
+   * @param {number} height
+   */
+  optimalScaleFactor(width, height) {
+    const factors = headbreaker.Vector.divide(headbreaker.vector(width, height), this.canvas.puzzleDiameter);
+    return Math.min(factors.x, factors.y) / 1.75;
+  }
+
   /**
    * Mark Muzzle as ready, loading previous solution
    * and drawing the canvas
    */
   ready() {
     this.loadPreviousSolution();
+    this.resetCoordinates();
     this.draw();
     this.onReady();
   }
@@ -413,6 +587,7 @@ class MuzzleCanvas {
    */
   loadSolution(solution) {
     this.canvas.puzzle.relocateTo(solution.positions);
+    this.canvas.puzzle.autoconnect();
   }
 
   /**
@@ -426,11 +601,20 @@ class MuzzleCanvas {
       } catch (e) {
         console.warn("Ignoring unparseabe editor value");
       }
-    } else {
-      this.canvas.shuffle(0.8);
     }
   }
 
+  /**
+   * Translates the pieces so that
+   * they start at canvas' coordinates origin
+   */
+  resetCoordinates() {
+    const [xs, ys] = this.coordinates;
+    const minX = Math.min(...xs);
+    const minY = Math.min(...ys);
+    this.canvas.puzzle.translate(-minX, -minY);
+  }
+
   // ==========
   // Submitting
   // ==========
@@ -491,3 +675,5 @@ const Muzzle = new class extends MuzzleCanvas {
     return muzzle;
   }
 }
+
+window['Muzzle'] = Muzzle;