Dan-Q/jigidi-helper.js

## readme.md

      
    Raw
  

              readme.md
            
          
    Jigidi Helper (Experimental)

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

How to use


Begin a Jigidi puzzle.
Run the code in your browser debug console.
Restart the puzzle by pressing the Restart button in the Jigidi sidebar.
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++;
}
	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++;
	}