mumuki-puzzle-runner

Install the server

bundle install

Run the server

RACK_ENV=development rackup -p 4567

Updating the docs

You will need instaling jsdoc-to-markdown first
npm install --global jsdoc-to-markdown

jsdoc2md lib/public/js/muzzle.js 2>&1

Live examples

You can see live examples here 🎊

Test format

Basic puzzle

// standard basic puzzle
Muzzle.basic(3, 2, 'https://flbulgarelli.github.io/headbreaker/static/berni.jpg');

// standard basic puzzle, but forcing submit button to show off
Muzzle.simple = false;
Muzzle.basic(3, 2, 'https://flbulgarelli.github.io/headbreaker/static/berni.jpg');

// standard basic puzzle, but forcing puzzle aspect ratio to be keep
// instead of being calculated to make it squared
Muzzle.aspectRatio = 1;
Muzzle.basic(1, 2, 'https://flbulgarelli.github.io/headbreaker/static/berni.jpg');

// standard basic puzzle, but using triangle-like inserts
Muzzle.spiky = true;
Muzzle.basic(1, 2, 'https://flbulgarelli.github.io/headbreaker/static/berni.jpg');

Match-pairs puzzle

const baseUrl = 'https://raw.githubusercontent.com/MumukiProject/mumuki-guia-gobstones-alternativa-kids/master/assets/attires/';

// with left and right pieces
Muzzle.match([
  `${baseUrl}/va_vacio.png`,
  `${baseUrl}/cu_vacio.png`,
  `${baseUrl}/chips_poco.png`
], [
  `${baseUrl}/va_fru.png`,
  `${baseUrl}/cu_vai.png`,
  `${baseUrl}/chips_mucho.png`,
]);

// like the previous one, but forcing submit button to hide
Muzzle.simple = true;
Muzzle.match([
  `${baseUrl}/va_vacio.png`,
  `${baseUrl}/cu_vacio.png`,
  `${baseUrl}/chips_poco.png`
], [
  `${baseUrl}/va_fru.png`,
  `${baseUrl}/cu_vai.png`,
  `${baseUrl}/chips_mucho.png`,
]);

// with left and right pieces, and left odd pieces
Muzzle.match([
  `${baseUrl}/va_vacio.png`,
  `${baseUrl}/cu_vacio.png`,
  `${baseUrl}/chips_poco.png`
], [
  `${baseUrl}/va_fru.png`,
  `${baseUrl}/cu_vai.png`,
  `${baseUrl}/chips_mucho.png`,
], {
  leftOddUrls: [ `${baseUrl}/choc_mitad_vacio2.png` ]
});

// with left and right pieces, and right odd pieces
Muzzle.match([
  `${baseUrl}/va_vacio.png`,
  `${baseUrl}/cu_vacio.png`,
  `${baseUrl}/chips_poco.png`
], [
  `${baseUrl}/va_fru.png`,
  `${baseUrl}/cu_vai.png`,
  `${baseUrl}/chips_mucho.png`,
], {
  rightOddUrls: [ `${baseUrl}/choc_mitad_vacio2.png` ]
});

// using a different aspect ratio for right pieces
Muzzle.match([
  `${baseUrl}/va_vacio.png`,
  `${baseUrl}/cu_vacio.png`,
  `${baseUrl}/chips_poco.png`
], [
  `${baseUrl}/va_fru.png`,
  `${baseUrl}/cu_vai.png`,
  `${baseUrl}/chips_mucho.png`,
], {
  rightAspectRatio: 2
});

// using a different shuffler
Muzzle.shuffler = Muzzle.Shuffler.line;
Muzzle.match([
  `${baseUrl}/va_vacio.png`,
  `${baseUrl}/cu_vacio.png`,
], [
  `${baseUrl}/va_fru.png`,
  `${baseUrl}/cu_vai.png`,
], {
  leftOddUrls: [ `${baseUrl}/choc_mitad_vacio2.png`, `${baseUrl}/chips_poco.png` ],
});

Choose puzzle

const baseUrl = 'https://raw.githubusercontent.com/MumukiProject/mumuki-guia-gobstones-primeros-programas-kinder-2/master/assets/';
// left pieces are 1:2 (0.5) and right pieces are 1:1 (1)
Muzzle.aspectRatio = 0.5;
Muzzle.choose(
  `${baseUrl}/match12_prog_si_1606331704226.svg`,
  `${baseUrl}/match12_tab_1606331726883.svg`,
  [ `${baseUrl}/match12_prog_no_1606331627470.svg`, ],
  1);

Solution format

The solution accepted by this runner is a JSON string with the following format:

{
  "positions": [
    [10, 20],
    [15, 20],
    [20, 20],
    [10, 25],
    [15, 25],
    [20, 25]
  ]
}:

Muzzle API 💪

Classes

MuzzleCanvas: Facade for referencing and creating a global puzzle canvas, handling solutions persistence and submitting them

Functions

another(id) ⇒ MuzzleCanvas: Creates a suplementary canvas at the element of the given id

Typedefs

Point : Array.<number>
Solution : object

MuzzleCanvas

Facade for referencing and creating a global puzzle canvas, handling solutions persistence and submitting them

Kind: global class

MuzzleCanvas
- .canvasId : string
- .expectedRefsAreOnlyDescriptive : boolean
- .canvasWidth : number
- .canvasHeight : number
- .fixedDimensions : boolean
- .borderFill : number
- .strokeWidth : number
- .pieceSize : number
- .aspectRatio : number
- .fitImagesVertically : boolean
- .manualScale
- .shuffler
- .previousSolutionContent : string
- .simple : boolean
- .referenceInsertAxis : Axis
- .baseConfig
- .outlineConfig
- .adjustedPieceSize ⇒ Vector
- .imageAdjustmentAxis : Axis
- .effectiveAspectRatio : number
- .canvas ⇒ Canvas
- .solution ⇒ Solution
- .solutionContent
- .clientResultStatus ⇒ "passed" | "failed"
- .onReady()
- .onSubmit(submission)
- .onValid()
- .draw()
- .expect(refs)
- .basic(x, y, imagePath) ⇒ Promise.<Canvas>
- .choose(leftUrl, rightUrl, leftOddUrls, [rightAspectRatio]) ⇒ Promise.<Canvas>
- .match(leftUrls, rightUrls, [options]) ⇒ Promise.<Canvas>
- .custom(canvas) ⇒ Promise.<Canvas>
- .scale(width, height)
- .focus()
- .ready()
- .loadSolution(solution)
- .loadPreviousSolution()
- .resetCoordinates()
- .submit()
- ._config(key, value)
- .register(event)
- .run()

muzzleCanvas.canvasId : `string`

The id of the HTML element that will contain the canvas Override it you are going to place in a non-standard way