Experimental under-development code to streamline Jigidi solving.

readme.md

Jigidi Helper (Experimental)

Replaces the image of a jigsaw puzzle with a predictable, (theoretically) easier-to-solve design.

How to use

1. Begin a Jigidi puzzle.
2. Run the code in your browser debug console.
3. Restart the puzzle by pressing the Restart button in the Jigidi sidebar.
4. The puzzle will be replaced with a predictable patterned one.

How does this help?

The predictable pattern has a number of features that make it easier to solve that most other jigsaws:

• Each piece has two numbers printed on it: the first is the row in which it belongs, the second is the column, making it possible to identify the exact location that a given piece belongs in.
• Each column is a different colour, streamlining presorting.
• Rows within a column alternate between lighter and darker variants ("striping").
• Stripes of alternating thickness and a cycle of colours form long horizonal and vertical bands across the image, streamlining identification.
• No information is sent back to the server to indicate that the puzzle has been tampered with.

jigidi-helper.js

window.jColors = ['red', 'blue', 'brown', 'orange', 'yellow', 'pink', 'lightblue', 'lightgreen', 'lightgray'];
window.lColors = ['white', 'black', 'purple', 'darkgray', '#009'];
window.lWidths = [5, 10, 20];
window.jCols = parseInt(document.getElementById('info-creator').innerText.match(/(\d+)×/)[1]);
window.jC = 0;
CanvasRenderingContext2D.prototype.putImageData = function(imageData, dx, dy){
    const col = window.jC % window.jCols;
    const row = Math.floor(window.jC / window.jCols);
    this.fillStyle = window.jColors[col % window.jColors.length];
    this.fillRect(-1000,-1000,2000,2000);
    if(0 == (row % 2)){ this.fillStyle = '#ffffff33'; this.fillRect(-1000,-1000,2000,2000); }
    this.fillStyle = window.lColors[row % window.lColors.length];
    this.fillRect(-1000, -35, 2000, window.lWidths[row % window.lWidths.length]);
    this.fillStyle = window.lColors[col % window.lColors.length];
    this.fillRect(-35, -1000, window.lWidths[col % window.lWidths.length], 2000);
    this.font = 'bold 14px sans-serif';
    this.fillStyle = 'black';
    this.fillText(`${row+1},${col+1}`, -5, 0);
    window.jC++;
}

Hi Guys,
First off Happy New Year - when trying Rambii code I keep getting an error on my console on Google Chrome that says?
VM1242:1 Uncaught ReferenceError: mokole is not defined
at :1:62

Any ideas?

@NeilandJen
Seems like the hyperlink in the comment I included in the code snippet got interpreted in a wrong way.
I updated the snippet without the comments (the lines starting with // ). You can copy it again and it should work.

Hi @Dan-Q, I have already partially completed the puzzle. Is there a way to have the script start from there instead of starting from scratch?

Some adjustments I found useful:

* generated more contrasting colors using this tool: https://mokole.com/palette.html

* found  the light colors hard to distinguish

window.jColors = ['red', 'seagreen', 'gold', 'mediumvioletred', 'lime', 'blue', 'dodgerblue'];
window.lColors = ['white', 'black', 'purple', 'darkgray', '#009'];
window.lWidths = [3, 8, 13];
window.jCols = parseInt(document.getElementById('info-creator').innerText.match(/(\d+)×/)[1]);
window.jC = 0;
CanvasRenderingContext2D.prototype.putImageData = function (imageData, dx, dy) {
    const col = window.jC % window.jCols;
    const row = Math.floor(window.jC / window.jCols);
    this.fillStyle = window.jColors[col % window.jColors.length];
    this.fillRect(-1000, -1000, 2000, 2000);
    if (0 == (row % 2)) { this.fillStyle = '#ffffff33'; this.fillRect(-1000, -1000, 2000, 2000); }	
    this.fillStyle = window.lColors[row % window.lColors.length];
    // adjust position of vertical line - won't be aligned but still help differentiate columns with the same color
    this.fillRect(-1000, 35, 2000, window.lWidths[row % window.lWidths.length]);
    this.fillStyle = window.lColors[col % window.lColors.length];
    this.fillRect(35, -1000, window.lWidths[col % window.lWidths.length], 2000);
    // little smaller font so that the numbers are less likely to be cut of on the edge of the tile
    this.font = 'bold 11px sans-serif';

    // print the col first since i sort the cols first by color and it makes it more readable
    // print it a few times since not sure where the center of the tile is 
    // print it in black and white for better contrast with darker and lighter colors (and simplicity ;) )
    this.fillStyle = 'black';
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 25);
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 50);
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 75);

    this.fillStyle = 'white';
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 38);
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 63);
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 88);

    window.jC++;	
}

Hi Rambii
I love this Code.
small Question - would it also be possible to staple (group) the different columns together automatically ?
This would make thing much easier.

Regards

Hi all,

There’s an excellent Facebook group where people share answers to solved Jigidi puzzles. It may be worth a look there before trying to solve it yourself.

https://www.facebook.com/share/g/V46nhEo91YcEc3Qw/?mibextid=K35XfP

thanks @Gabrielhj17
I am also member of this Group ;)

Doesn't work for jigsaw puzzles like https://www.jigidi.com/s/*

where can i find the console code for sorting and put all on one place

Hi all,

There’s an excellent Facebook group where people share answers to solved Jigidi puzzles. It may be worth a look there before trying to solve it yourself.

https://www.facebook.com/share/g/V46nhEo91YcEc3Qw/?mibextid=K35XfP

Hi @Gabrielhj17
i somehow got banned from that Group :(
i have no clue why - i tried to follow the rules - and think i did.
I tried to contact the Admin - but he also blocked me :(