mumuki-puzzle-runner 0.0.1 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d03d2bd46ce0352ca4c5ad1f58d58fa1ae6a46abc0b817e09ae39d105e7a192d
-  data.tar.gz: ccb6886006ec2242006efcbffb9d96035edcc14e6146633bc6155c6a3a8f03c8
+  metadata.gz: c06f3a9c0ab060ce1746fbd08687e44bdd3edc9d2bd7bc9f27991cfa56d34e96
+  data.tar.gz: 3fd982c69ed60580166016ad4824be96a67b5480d238311e347c7588e86ededd
 SHA512:
-  metadata.gz: 52de2959fbee8ccabdd04d01fc1881b0ec1e58e39c58a9c45dd9d59ac1f4ef8a38f388dcda54419875c869f6f11cad916ab4c82041c66a2f8f5bad7103f22f80
-  data.tar.gz: e0287cc443813d18bf5449da8dbf2c7383490ddc09bf0c1d1c179590d7d8d8b38e865ec16a4d41701e9b9b5d66121aaeda3f2f84eda2ea21f4d92de9a903938f
+  metadata.gz: 594855995d69d145ceb3294c3bfc571d681a18e5983e9130884bde9508feea77519764066ceb7fa6b843923dfebc728bfe8a5cf3f08058c9aacc5362f4e784c5
+  data.tar.gz: 6f2d79e5203433e39a8d0bcea6ca80442f8eac32e3eb3d72f04fbadd82490578836444f0c57ad93163d74c9bbbcbcec268b04c97a77d33a2152d191b73cdfba8

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

@@ -4,9 +4,7 @@ $(() => {
   // Muzzle rendering
   // ================
 
-  console.log('Registering Muzzle...')
-  const $customEditorValue = $('#mu-custom-editor-value');
-  Muzzle.previousSolutionJson = $customEditorValue.val();
+  Muzzle.previousSolutionContent = $('#mu-custom-editor-value').val();
 
   $('#mu-puzzle-custom-editor').append(`
     <div id="muzzle-canvas">
@@ -20,19 +18,21 @@ $(() => {
   // Submission config
   // =================
 
+
   // Required to sync state before submitting
-  mumuki.submission.registerContentSyncer(() => {
-    Muzzle.prepareSubmission();
-    $customEditorValue.val(Muzzle.previousSolutionJson);
+  mumuki.CustomEditor.addSource({
+    getContent() { return { name: "solution[content]", value: Muzzle.solutionContent }; }
   });
+  mumuki.CustomEditor.addSource({
+    getContent() { return { name: "client_result[status]", value: Muzzle.clientResultStatus }; }
+  })
 
   // Requiered to actually bind Muzzle's submit to
   // mumuki's solution processing
   const _onSubmit = Muzzle.onSubmit;
-  Muzzle.onSubmit = (solutionJson, valid) => {
-    console.log('submitting muzzle...')
-    mumuki.submission.processSolution({solution: {content: solutionJson}});
-    _onSubmit(solutionJson, valid);
+  Muzzle.onSubmit = (submission) => {
+    mumuki.submission.processSolution(submission);
+    _onSubmit(submission);
   }
 
   // ===========

data/lib/public/js/muzzle.js

@@ -32,19 +32,12 @@ class MuzzleCanvas {
      * @type {Canvas}
      **/
     this._canvas = null;
-    this.baseConfig = {
-      width: 800,
-      height: 650,
-      pieceSize: 100,
-      proximity: 20,
-      borderFill: 10,
-      strokeWidth: 1.5,
-      lineSoftness: 0.18
-    };
 
     /**
      * The id of the HTML element that will contain the canvas
      * Override it you are going to place in a non-standard way
+     *
+     * @type {string}
      */
     this.canvasId = id;
 
@@ -61,9 +54,46 @@ class MuzzleCanvas {
      * Wether expected refs shall be ignored by Muzzle.
      *
      * They will still be evaluated server-side.
+     *
+     * @type {boolean}
      */
     this.expectedRefsAreOnlyDescriptive = false;
 
+    /**
+     * Width of canvas
+     *
+     * @type {number}
+     */
+    this.canvasWidth = 800;
+
+    /**
+     * Height of canvas
+     *
+     * @type {number}
+     */
+    this.canvasHeight = 800;
+
+    /**
+     * Size of fill. Set null for perfect-match
+     *
+     * @type {number}
+     */
+    this.borderFill = null;
+
+    /**
+     * Piece size
+     *
+     * @type {number}
+     */
+    this.pieceSize = 100;
+
+    /**
+     * * Whether image's width should be scaled to piece
+     *
+     * @type {boolean}
+     */
+    this.scaleImageWidthToFit = true;
+
     /**
      * Callback that will be executed
      * when muzzle has fully loaded and rendered its first
@@ -75,12 +105,12 @@ class MuzzleCanvas {
     this.onReady = () => {};
 
     /**
-     * The previous solution to the current puzzle in this or a past session,
+     * The previous solution to the current puzzle in a past session,
      * if any
      *
      * @type {string}
      */
-    this.previousSolutionJson = null
+    this.previousSolutionContent = null
 
     /**
      * Callback to be executed when submitting puzzle.
@@ -88,15 +118,39 @@ class MuzzleCanvas {
      * Does nothing by default but you can
      * override it to perform additional actions
      *
-     * @param {string} solutionJson the solution, as a JSON
-     * @param {boolean} valid whether this puzzle is valid or nor
+     * @param {{solution: {content: string}, client_result: {status: "passed" | "failed"}}} submission
+     */
+    this.onSubmit = (submission) => {};
+
+     /**
+     * Callback that will be executed
+     * when muzzle's puzzle becomes valid
+     *
+     * It does nothing by default but you can override this
+     * property with any code you need the be called here
      */
-    this.onSubmit = (solutionJson, valid) => {};
+    this.onValid = () => {};
+  }
+
+  /**
+   */
+  get baseConfig() {
+    return {
+      width: this.canvasWidth,
+      height: this.canvasHeight,
+      pieceSize: this.pieceSize,
+      proximity: this.pieceSize / 5,
+      borderFill: this.borderFill === null ? this.pieceSize / 10 : this.borderFill,
+      strokeWidth: 1.5,
+      lineSoftness: 0.18
+    };
   }
 
   /**
    * The currently active canvas, or null if
    * it has not yet initialized
+   *
+   * @returns {Canvas}
    */
   get canvas() {
     return this._canvas;
@@ -140,47 +194,74 @@ class MuzzleCanvas {
     const image = await this._loadImage(imagePath);
     /** @type {Canvas} */
     // @ts-ignore
-    const canvas = new headbreaker.Canvas(this.canvasId, this._canvasConfig(image));
+    const canvas = this._createCanvas(image);
     canvas.autogenerate({ horizontalPiecesCount: x, verticalPiecesCount: y });
-    this._attachValidator(canvas);
+    this._attachBasicValidator(canvas);
+    this._configCanvas(canvas);
     canvas.onValid(() => {
       setTimeout(() => {
-        if (canvas.puzzle.isValid) {
-          this.submit()
+        if (canvas.valid) {
+          this.submit();
         }
       }, 1500);
     });
-    this._configInitialCanvas(canvas);
     return canvas;
   }
 
   /**
-   * @param {any} configs
+   * @param {number} x
+   * @param {number} y
+   * @param {string[]} [imagePaths]
    * @returns {Promise<Canvas>} the promise of the built canvas
    */
-  multi(configs) {
-    return Promise.reject("not implemented yet");
+  async multi(x, y, imagePaths) {
+    const count = imagePaths.length;
+    const images = await Promise.all(imagePaths.map(imagePath => this._loadImage(imagePath)));
+
+    const canvas = this._createCanvas(null);
+    canvas.autogenerate({ horizontalPiecesCount: x, verticalPiecesCount: y * count });
+
+    // todo validate
+    // todo set images
+
+    this._configCanvas(canvas);
+    return canvas;
   }
 
   /**
-   * @param {PieceConfig[]} lefts
-   * @param {PieceConfig[]} rights
+   * Craates a match puzzle, where left pieces are matched against right pieces,
+   * with optional odd left and right pieces that don't match
+   *
+   * @param {string[]} leftUrls
+   * @param {string[]} rightUrls must be of the same size of lefts
+   * @param {string[]} leftOddUrls
+   * @param {string[]} rightOddUrls
    * @returns {Promise<Canvas>} the promise of the built canvas
    */
-  async match(lefts, rights, leftOdds, rightOdds) {
-    /** @type {(Promise<Template>)[]} */
+  async match(leftUrls, rightUrls, leftOddUrls = [], rightOddUrls = []) {
+    /** @private @type {(Promise<Template>)[]} */
     const templatePromises = [];
-    const last = lefts.length - 1;
+    const pushTemplate = (config, options) =>
+      templatePromises.push(this._createMatchTemplate(config, options));
+
+    const last = leftUrls.length - 1;
     for (let i = 0; i <= last; i++) {
-      templatePromises.push(this._buildTemplate(lefts[i], `T-N-`));
-      templatePromises.push(this._buildTemplate(rights[i], `N-S-`));
+      const leftId = `l${i}`;
+      const rightId = `r${i}`;
+
+      pushTemplate(leftUrls[i], {id: leftId, left: true, rightTargetId: rightId});
+      pushTemplate(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}));
+
     const templates = await Promise.all(templatePromises);
     /** @type {Canvas} */
-    const canvas = new headbreaker.Canvas(this.canvasId, this._canvasConfig(null));
+    const canvas = this._createCanvas();
     templates.forEach(it => canvas.sketchPiece(it));
-    this._attachValidator(canvas);
-    this._configInitialCanvas(canvas);
+    this._attachMatchValidator(canvas);
+    this._configCanvas(canvas);
     return canvas;
   }
 
@@ -189,10 +270,19 @@ class MuzzleCanvas {
    * @returns {Promise<Canvas>} the promise of the built canvas
    */
   custom(canvas) {
-    this._configInitialCanvas(canvas);
+    this._configCanvas(canvas);
     return Promise.resolve(canvas);
   }
 
+  /**
+   * @private
+   * @param {HTMLImageElement} image
+   * @return {Canvas}
+   */
+  _createCanvas(image = null) {
+    return new headbreaker.Canvas(this.canvasId, this._canvasConfig(image));
+  }
+
   /**
    * @private
    * @param {HTMLImageElement} image
@@ -205,16 +295,26 @@ class MuzzleCanvas {
    * @private
    * @param {Canvas} canvas
    */
-  _attachValidator(canvas) {
+  _attachBasicValidator(canvas) {
     if (!this.expectedRefsAreOnlyDescriptive && this._expectedRefs) {
-      canvas.attachValidator(
-        new headbreaker.PuzzleValidator(
-          headbreaker.PuzzleValidator.relativeRefs(this._expectedRefs)));
+      canvas.attachRelativeRefsValidator(this._expectedRefs);
     } else {
       canvas.attachSolvedValidator();
     }
   }
 
+  /**
+   * @private
+   * @param {Canvas} canvas
+   */
+  _attachMatchValidator(canvas) {
+    canvas.attachValidator(new headbreaker.PuzzleValidator(
+      puzzle => puzzle.pieces
+                  .filter(it => !it.metadata.odd && it.metadata.left)
+                  .every(it => it.rightConnection && it.rightConnection.id === it.metadata.rightTargetId)
+    ));
+  }
+
   /**
    * @private
    * @param {string} path
@@ -226,21 +326,59 @@ class MuzzleCanvas {
     return new Promise((resolve, reject) => image.onload = () => resolve(image));
   }
 
-  _buildTemplate(config, structure) {
-    return this._loadImage(config.imagePath).then((image) =>({
-      structure: config.structure || structure,
-      metadata: {image}
-    }));
+  /**
+   * @private
+   * @param {string} imagePath
+   * @param {object} options
+   * @returns {Promise<object>}
+   */
+  _createMatchTemplate(imagePath, {id, left = false, rightTargetId = null, odd = false}) {
+    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 {
+        structure,
+        metadata: {
+          id,
+          left,
+          odd,
+          rightTargetId,
+          image: {
+            scale,
+            content: image,
+            offset: { x: offset, y: offset }
+          }
+        }
+      }
+    });
   }
 
   /**
+   * @private
+   * @param {HTMLImageElement} image
+   */
+  _imageScale(image) {
+    return this.scaleImageWidthToFit ? this.pieceSize / image.width  : 1;
+  }
+
+  /**
+   * @private
    * @param {Canvas} canvas
    */
-  _configInitialCanvas(canvas) {
+  _configCanvas(canvas) {
     this._canvas = canvas;
+    this._canvas.onValid(() => {
+      setTimeout(() => this.onValid(), 0);
+    });
     this.ready();
   }
 
+  /**
+   * Mark Muzzle as ready, loading previous solution
+   * and drawing the canvas
+   */
   ready() {
     this.loadPreviousSolution();
     this.draw();
@@ -262,6 +400,8 @@ class MuzzleCanvas {
   }
 
   /**
+   * Loads - but does not draw - a solution into the canvas.
+   *
    * @param {Solution} solution
    */
   loadSolution(solution) {
@@ -269,12 +409,13 @@ class MuzzleCanvas {
   }
 
   /**
-   * Loads the current canvas with the
+   * Loads - but does not draw - the current canvas with the previous solution, if available.
+   *
    */
   loadPreviousSolution() {
-    if (this.previousSolutionJson) {
+    if (this.previousSolutionContent) {
       try {
-        this.loadSolution(JSON.parse(this.previousSolutionJson));
+        this.loadSolution(JSON.parse(this.previousSolutionContent));
       } catch (e) {
         console.warn("Ignoring unparseabe editor value");
       }
@@ -283,11 +424,6 @@ class MuzzleCanvas {
     }
   }
 
-  prepareSubmission() {
-    this.canvas.puzzle.validate();
-    this.previousSolutionJson = this._solutionJson;
-  }
-
   // ==========
   // Submitting
   // ==========
@@ -297,24 +433,46 @@ class MuzzleCanvas {
    * validating it if necessary
    */
   submit() {
-    this.prepareSubmission();
-    this.onSubmit(this._solutionJson, this.canvas.puzzle.valid);
+    this.onSubmit(this._prepareSubmission());
   }
 
   /**
    * The current solution, expressed as a JSON string
    */
-  get _solutionJson() {
+  get solutionContent() {
     return JSON.stringify(this.solution);
   }
-}
 
+  /**
+   * The solution validation status
+   *
+   * @returns {"passed" | "failed"}
+   */
+  get clientResultStatus() {
+    return this.canvas.valid ? 'passed' : 'failed';
+  }
 
-const Muzzle = new MuzzleCanvas();
+  _prepareSubmission() {
+    return {
+      solution: {
+        content: this.solutionContent
+      },
+      client_result: {
+        status: this.clientResultStatus
+      }
+    };
+  }
+
+}
 
-Muzzle.aux = {};
-Muzzle.another = (id) => {
-  const muzzle = new MuzzleCanvas(id);
-  Muzzle.aux[id] = muzzle
-  return muzzle;
+const Muzzle = new class extends MuzzleCanvas {
+  constructor() {
+    super();
+    this.aux = {};
+  }
+  another = (id) => {
+    const muzzle = new MuzzleCanvas(id);
+    Muzzle.aux[id] = muzzle
+    return muzzle;
+  }
 }