mumuki-puzzle-runner 0.4.0 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5da4e03efe5edbeb4e6eadfaf79f5d37e4f5bea50127a26e91c5f6d2cedb2438
-  data.tar.gz: f0eeb8f873165d98ecfcc04854aa4fb781d4753fc4350bcfed90fd24c184744b
+  metadata.gz: babd3a8ed60a9345983363242f5e1fc1bee0bb36a471d136c314ba5fba8c4ed1
+  data.tar.gz: 62d411ca5bfeca771b9b78e113be587c72fdbea23d811e91635cae4a9c703e9d
 SHA512:
-  metadata.gz: c98b0e5f9fe633c8fb0587b3c948ce0a6d6d79b80619befc28bc4c583578be596b1d8d2d9f61fddbb3241a320424b602af417fca96827c632a9537342d2a62e9
-  data.tar.gz: f40b2c76b102651f25ca76eda5b82d24f6cb037e92efcbd68299d634ec8a4f8a22477f4639893b780f6e8f44e790761189c43c12a925a5421f8e33416b3273af
+  metadata.gz: 5baff4c0cdac71f1d0038d3cced0c45fd852be5e6712cb470cdb601981d01dbf0f230bea99c07cca85d914bbcff2a84a042ee853f18ed94f7e1583559142861f
+  data.tar.gz: fa0b70e5c7ce9529c28fda9bb9b1f464c62bcc2f768fa4bd082fe2193684267e2c3e239361c7a4645b18bbbf7f9ab27dd374be0978711e53634e6858d83135a7

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

@@ -1,3 +1,19 @@
+
+/*
+ * ============
+ * Initial size
+ * ============
+ */
+
+.mu-exercise-content {
+    border-radius: 10px;
+    border: 1px solid #dddddd;
+}
+
+.mu-kids-exercise-workspace.muzzle-simple .mu-kids-submit-button {
+  display: none;
+}
+
 .mu-kids-state-image img {
   height: 100%;
   width: auto;
@@ -8,6 +24,33 @@
   width: 100%;
 }
 
-.mu-kids-exercise-workspace.muzzle-simple .mu-kids-submit-button {
-  display: none;
+/*
+ * ====================
+ * Submit button hiding
+ * ====================
+ */
+
+/*
+ * ===========
+ * Blur effect
+ * ===========
+ */
+
+.mu-kids-exercise-workspace.mu-full-workspace .mu-kids-submit-button {
+  margin: 0 30px 30px;
+}
+
+.mu-kids-exercise-workspace .mu-kids-blocks {
+  overflow: hidden;
+}
+
+.mu-kids-exercise-workspace .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,12 +1,5 @@
 // @ts-nocheck
 $(() => {
-  function register(event, callback) {
-    const _event = Muzzle[event];
-    Muzzle[event] = (...args) => {
-      callback(...args);
-      _event(...args);
-    }
-  }
 
   // ================
   // Muzzle rendering
@@ -35,9 +28,9 @@ $(() => {
     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
-  register('onSubmit', (submission) => {
+  Muzzle.register('onSubmit', (submission) => {
     mumuki.submission.processSolution(submission);
   });
 
@@ -45,13 +38,20 @@ $(() => {
   // Kids config
   // ===========
 
-  mumuki.kids.registerStateScaler(($state, fullMargin, preferredWidth, preferredHeight) => {
-    //  no manul image scalling. Leave it to css
+  mumuki.kids.registerStateScaler(($state, fullMargin) => {
+    const $image = $state.find('img');
+    if (!$image.length) return;
+
+    $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) => {
+    console.debug("Scaler fired");
     const maxHeight = $('.mu-kids-exercise').height() - $('.mu-kids-exercise-description').height();
-    Muzzle.scale($blocks.width(), Math.min($blocks.height(), maxHeight));
+    Muzzle.run(() => Muzzle.scale($blocks.width(), Math.min($blocks.height(), maxHeight)));
   });
 
   Muzzle.manualScale = true;
@@ -60,7 +60,7 @@ $(() => {
   // Submit button hiding
   // ====================
 
-  register('onReady', () => {
+  Muzzle.register('onReady', () => {
     if (Muzzle.simple) {
       $('.mu-kids-exercise-workspace').addClass('muzzle-simple');
     }
@@ -70,7 +70,9 @@ $(() => {
   // Assets loading
   // ==============
 
-  register('onReady', () => {
+  Muzzle.register('onReady', () => {
+    console.debug("Muzzle is ready");
+
     mumuki.assetsLoadedFor('editor');
     // although layout assets
     // are actually loaded before this script, puzzle runner is not aimed

data/lib/public/js/muzzle.js

@@ -1,9 +1,3 @@
-/**
- * @typedef {object} PieceConfig
- * @property {string} imagePath
- * @property {string} structure
- */
-
 /**
  * @typedef {number[]} Point
  */
@@ -14,6 +8,14 @@
  */
 
 
+class MuzzlePainter extends headbreaker.painters.Konva {
+  _newLine(options) {
+
+    const line = super._newLine(options);
+    line.strokeScaleEnabled(false);
+    return line;
+  }
+}
 
 /**
  * Facade for referencing and creating a global puzzle canvas,
@@ -93,7 +95,7 @@ class MuzzleCanvas {
      *
      * @type {number}
      */
-    this.strokeWidth = 1.5;
+    this.strokeWidth = 3;
 
     /**
      * Piece size
@@ -103,7 +105,7 @@ class MuzzleCanvas {
     this.pieceSize = 100;
 
     /**
-     * The x:y aspect ratio of the piece. Set null for automatic
+     * The `x:y` aspect ratio of the piece. Set null for automatic
      * aspectRatio
      *
      * @type {number}
@@ -112,14 +114,27 @@ class MuzzleCanvas {
 
     /**
      * If the images should be adjusted vertically instead of horizontally
-     * to puzzle dimensions. `false` by default
+     * to puzzle dimensions.
+     *
+     * Set null for automatic fit.
      *
      * @type {boolean}
      */
-    this.fitImagesVertically = false;
+    this.fitImagesVertically = null;
 
+    /**
+     * Wether the scaling should ignore the scaler
+     * rise events
+     */
     this.manualScale = false;
 
+    /**
+     * The canvas shuffler.
+     *
+     * Set it null to automatic shuffling algorithm selection.
+     */
+    this.shuffler = null;
+
     /**
      * Callback that will be executed
      * when muzzle has fully loaded and rendered its first
@@ -142,12 +157,24 @@ class MuzzleCanvas {
      * 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.
+     * basic and match puzzles will be considered non-simple.
      *
      * @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.
      *
@@ -166,32 +193,81 @@ class MuzzleCanvas {
      * property with any code you need the be called here
      */
     this.onValid = () => {};
+
+    /**
+     * @private
+     */
+    this._ready = false;
+  }
+
+  get painter() {
+    return new MuzzlePainter();
   }
 
   /**
    */
   get baseConfig() {
-    const aspectRatio = this.aspectRatio || 1;
-    const pieceSize = headbreaker.vector(this.pieceSize / aspectRatio, this.pieceSize);
-    return {
+    return Object.assign({
+      preventOffstageDrag: true,
       width: this.canvasWidth,
       height: this.canvasHeight,
-      pieceSize: pieceSize,
-      proximity: Math.min(pieceSize.x, pieceSize.y) / 5,
-      borderFill: this.borderFill === null ? headbreaker.Vector.divide(pieceSize, 10) : this.borderFill,
+      pieceSize: this.adjustedPieceSize,
+      proximity: Math.min(this.adjustedPieceSize.x, this.adjustedPieceSize.y) / 5,
       strokeWidth: this.strokeWidth,
-      lineSoftness: 0.18
-    };
+      lineSoftness: 0.18,
+      painter: this.painter
+    }, 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.effectiveAspectRatio;
+      this._adjustedPieceSize = headbreaker.vector(this.pieceSize * aspectRatio, this.pieceSize);
+    }
+    return this._adjustedPieceSize;
   }
 
   /**
    * @type {Axis}
    */
   get imageAdjustmentAxis() {
-    console.log(this.fitImagesVertically)
     return this.fitImagesVertically ? headbreaker.Vertical : headbreaker.Horizontal;
   }
 
+  /**
+   * The configured aspect ratio, or 1
+   *
+   * @type {number}
+   */
+  get effectiveAspectRatio() {
+    return this.aspectRatio || 1;
+  }
+
   /**
    * The currently active canvas, or null if
    * it has not yet initialized
@@ -205,7 +281,7 @@ class MuzzleCanvas {
   /**
    * Draws the - previusly built - current canvas.
    *
-   * Prefer {@code this.currentCanvas.redraw()} when performing
+   * Prefer `this.currentCanvas.redraw()` when performing
    * small updates to the pieces.
    */
   draw() {
@@ -234,13 +310,9 @@ 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;
-    }
+    this._config('aspectRatio', y / x);
+    this._config('simple', true);
+    this._config('shuffler', Muzzle.Shuffler.grid);
 
     /**
      * @todo take all container size
@@ -252,7 +324,6 @@ class MuzzleCanvas {
     canvas.adjustImagesToPuzzle(this.imageAdjustmentAxis);
     canvas.autogenerate({ horizontalPiecesCount: x, verticalPiecesCount: y });
     this._attachBasicValidator(canvas);
-    canvas.shuffleGrid(0.8);
     this._configCanvas(canvas);
     canvas.onValid(() => {
       setTimeout(() => {
@@ -265,52 +336,94 @@ class MuzzleCanvas {
   }
 
   /**
-   * @param {number} x
-   * @param {number} y
-   * @param {string[]} [imagePaths]
+   * Creates a choose puzzle, where a single right piece must match the single left piece,
+   * choosing the latter from a bunch of other left odd pieces. By default, `Muzzle.Shuffler.line` shuffling is used.
+   *
+   * This is a particular case of a match puzzle with line
+   *
+   * @param {string} leftUrl the url of the left piece
+   * @param {string} rightUrl the url of the right piece
+   * @param {string[]} leftOddUrls the urls of the off left urls
+   * @param {number} [rightAspectRatio] the `x:y` ratio of the right pieces, that override the general `aspectRatio` of the puzzle.
+   *                                    Use null to have the same aspect ratio as left pieces
+   *
    * @returns {Promise<Canvas>} the promise of the built canvas
    */
-  async multi(x, y, imagePaths) {
-    const count = imagePaths.length;
-    const images = await Promise.all(imagePaths.map(imagePath => this._loadImage(imagePath)));
-
-    const canvas = this._createCanvas();
-    canvas.autogenerate({ horizontalPiecesCount: x, verticalPiecesCount: y * count });
-
-    // todo validate
-    // todo set images
-
-    this._configCanvas(canvas);
-    return canvas;
+  async choose(leftUrl, rightUrl, leftOddUrls, rightAspectRatio = null) {
+    this._config('shuffler', Muzzle.Shuffler.line);
+    return this.match([leftUrl], [rightUrl], {leftOddUrls, rightAspectRatio});
   }
 
   /**
-   * Craates a match puzzle, where left pieces are matched against right pieces,
-   * with optional odd left and right pieces that don't match
+   * Creates a match puzzle, where left pieces are matched against right pieces,
+   * with optional odd left and right pieces that don't match. By default, `Muzzle.Shuffler.columns`
+   * shuffling is used.
    *
    * @param {string[]} leftUrls
    * @param {string[]} rightUrls must be of the same size of lefts
-   * @param {string[]} leftOddUrls
-   * @param {string[]} rightOddUrls
+   * @param {object} [options]
+   * @param {string[]} [options.leftOddUrls]
+   * @param {string[]} [options.rightOddUrls]
+   * @param {number?} [options.rightAspectRatio] the aspect ratio of the right pieces. Use null to have the same aspect ratio as left pieces
    * @returns {Promise<Canvas>} the promise of the built canvas
    */
-  async match(leftUrls, rightUrls, leftOddUrls = [], rightOddUrls = []) {
+  async match(leftUrls, rightUrls, {leftOddUrls = [], rightOddUrls = [], rightAspectRatio = this.effectiveAspectRatio} = {}) {
+    const rightWidthRatio = rightAspectRatio / this.effectiveAspectRatio;
+
+    this._config('simple', false);
+    this._config('shuffler', Muzzle.Shuffler.columns);
+    this._config('fitImagesVertically', rightWidthRatio > 1);
+    this._config('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, targetPosition: { x: this.pieceSize, y: this.pieceSize * (i + 1) }, left: true, rightTargetId: rightId});
-      pushTemplate(rightUrls[i], {id: rightId, targetPosition: { x: 2 * this.pieceSize, y: this.pieceSize * (i + 1) }});
+      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, targetPosition: { x: this.pieceSize, y: this.pieceSize * (i + leftUrls.length) }, }));
-    rightOddUrls.forEach((it, i) => pushTemplate(it, {id: `ro${i}`, odd: true, targetPosition: { x: 2 * this.pieceSize, y: this.pieceSize * (i + rightUrls.length) },}));
+    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);
@@ -318,7 +431,6 @@ class MuzzleCanvas {
     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;
@@ -383,11 +495,11 @@ class MuzzleCanvas {
    * @param {object} options
    * @returns {Promise<object>}
    */
-  _createMatchTemplate(imagePath, {id, left = false, targetPosition = null, 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) => {
       return {
+        ...(size ? {size} : {}),
         structure,
         metadata: { id, left, odd, rightTargetId, image, targetPosition }
       }
@@ -400,6 +512,7 @@ class MuzzleCanvas {
    */
   _configCanvas(canvas) {
     this._canvas = canvas;
+    this._canvas.shuffleWith(0.8, this.shuffler);
     this._canvas.onValid(() => {
       setTimeout(() => this.onValid(), 0);
     });
@@ -412,14 +525,23 @@ class MuzzleCanvas {
 
     ['resize', 'load'].forEach((event) => {
       window.addEventListener(event, () => {
+        console.debug("Scaler event fired:", 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;
+
+    console.debug("Scaling:", {width, height})
     const factor = this.optimalScaleFactor(width, height);
     this.canvas.resize(width, height);
     this.canvas.scale(factor);
@@ -427,6 +549,9 @@ class MuzzleCanvas {
     this.focus();
   }
 
+  /**
+   * Focuses the stage around the canvas center
+   */
   focus() {
     const stage = this.canvas['__konvaLayer__'].getStage();
 
@@ -440,7 +565,7 @@ class MuzzleCanvas {
       const maxX = Math.max(...xs);
       const maxY = Math.max(...ys);
 
-      return headbreaker.Vector.plus(headbreaker.vector(maxX - minX, maxY - minY), this.canvas.puzzle.pieceDiameter);
+      return headbreaker.vector(maxX - minX, maxY - minY);
     })();
     const diff = headbreaker.Vector.minus(area, realDiameter);
     const semi = headbreaker.Vector.divide(diff, -2);
@@ -449,11 +574,19 @@ class MuzzleCanvas {
     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;
@@ -467,9 +600,14 @@ class MuzzleCanvas {
     this.loadPreviousSolution();
     this.resetCoordinates();
     this.draw();
+    this._ready = true;
     this.onReady();
   }
 
+  isReady() {
+    return this._ready;
+  }
+
   // ===========
   // Persistence
   // ===========
@@ -508,6 +646,10 @@ class MuzzleCanvas {
     }
   }
 
+  /**
+   * Translates the pieces so that
+   * they start at canvas' coordinates origin
+   */
   resetCoordinates() {
     const [xs, ys] = this.coordinates;
     const minX = Math.min(...xs);
@@ -554,12 +696,58 @@ class MuzzleCanvas {
     };
   }
 
+  /**
+   * @param {string} key
+   * @param {any} value
+   */
+  _config(key, value) {
+    const current = this[key];
+    console.debug("Setting config: ", [key, value])
+
+    if (current === null) {
+      this[key] = value;
+    }
+  }
+
+  // ==============
+  // Event handling
+  // ==============
+
+
+  /**
+   * Registers an event handler
+   *
+   * @param {string} event
+   * @param {(...args: any) => void} callback
+   */
+  register(event, callback) {
+    const _event = this[event];
+    this[event] = (...args) => {
+      callback(...args);
+      _event(...args);
+    }
+  }
+
+  /**
+   * Runs the given action if muzzle is ready,
+   * queueing it otherwise
+   * @param {() => void} callback
+   */
+  run(callback) {
+    if (this.isReady()) {
+      callback();
+    } else {
+      this.register('onReady', callback);
+    }
+  }
 }
 
 const Muzzle = new class extends MuzzleCanvas {
   constructor() {
     super();
     this.aux = {};
+
+    this.Shuffler = headbreaker.Shuffler;
   }
 
   /**