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++;
}

@letsjigidi I'm the original author of the blog posts about this tool. I have no interest in Jigidi except where I have to solve them in order to find geocache coordinates. You won't hear any solution from me that doesn't produce the popup at the end!

Dan Q's 20 lines of code stopped working for me a few days ago, so something changed. I just tried rambii's code posted 4 days ago and it works! Nice. I would love it if the numbers could be made larger so I can read them, but I suspect that's not possible or it would have been done already.

@rteitelman
You can make the numbers larger. Change this line:
this.font = 'bold 11px sans-serif'; to this.font = 'bold 18px sans-serif'; or something that works for you.

But I found larger numbers are more likely to be cut off and be unreadable. That's why I chose a smaller font size.

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/*