Experimental under-development code to streamline Jigidi solving. ADDED CODE AND DESCRIPTION SO THE ORIGINAL CODE CAN BE RUN THROUGH A CHROME BOOKMARK, INSTRUCTIONS IN README

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.

ABOUT THIS FORK

This fork provides a small update to the original code so that it can be added as a chrome bookmark. Step by step guide:

1. Open chrome and navigate to "chrome://bookmarks/"
2. Right click and then click "Add new bookmark"
3. Name the bookmark something like "Jigidi Helper" then in the "URL" field paste this fork revision of code
4. Save the bookmark
5. Navigate to a jigidi puzzle and open it so you are presented with the puzzle pieces to be solved
6. Click the bookmark you have just added (displayed underneath the URL field)
7. The bookmark will run the code to change the puzzle picture and then refresh automatically
8. The puzzle is now ready to solve!

jigidi-helper.js

javascript:
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++;
};
const target = document.querySelector('#restart');
target.click();

Hello and thank you so much, it's perfect.
I do have one question though.
I used it twice and everything worked fine.
But since then, the color columns are there, but the numbers are no longer displayed on the pieces.
The help is always valuable, but the numbers help even more.
Do you have any idea why the numbers have disappeared?

Thanks in advance

@sobersong74
Checkout my comment on the original gist.

https://gist.github.com/Dan-Q/e9bfe5c2ca4b13fae4994c5e84685761?permalink_comment_id=4583961#gistcomment-4583961