Instantly share code, notes, and snippets.

# Dan-Q/jigidi-helper.js

Last active April 4, 2024 20:31
Show Gist options
• Save Dan-Q/e9bfe5c2ca4b13fae4994c5e84685761 to your computer and use it in GitHub Desktop.
Experimental under-development code to streamline Jigidi solving.

# 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
 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++; }

### tintin49 commented Apr 5, 2023

Hi Dan

Congratulation for this code.

Now, do you think that should be possible to build automatically the puzzle ?

Didier

### Dan-Q commented Apr 5, 2023

Starting from here? No. But others have done pretty-well at cracking that problem already, though they've not published it publicly on the open Internet. My aim is to find solutions that simplify the solving of jigsaws, because these approaches seem to survive longer than entirely-automated solutions which quickly get detected and blocked.

(In fact, it's probably that openly-published solutions get blocked that makes people not publish their fully-automated solutions in places where they can be easily found! The approach above isn't even the one I use - I use one which "stripes" one column at a time, turning the rest of the jigsaw white, which is even faster to visually process than striping the entire jigsaw, for example!)

Hi Dan

Kind regards

Didier

### Gabrielhj17 commented May 1, 2023 • edited

Hello all,

I have added a fork to this repo so that this code can be added as a chrome bookmark and run much more easily.
The fork can be found here: https://gist.github.com/Gabrielhj17/3b442bfed270e6762b819b1478f574ee

I hope this helps,

Gabriel

### rambii commented May 29, 2023

In case the row and col numbers are not showing anymore, I adjusted it like this:

``````    this.fillText(`\${row+1},\${col+1}  --  `.repeat(10), 0, 25);
this.fillText(`\${row+1},\${col+1}  --  `.repeat(10), 0, 75);
``````

### rambii commented May 30, 2023 • edited

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

### letsjigidi commented May 31, 2023

Is it possible to make it a Tampermonkey script please?

### Dan-Q commented Jun 1, 2023 • edited

@letsjigidi this alternative tool I also made already is a userscript, if that helps. @tintin49 it's the one you're asking for, too, if that matters!

### Dan-Q commented Jun 1, 2023

@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!

### rteitelman commented Jun 3, 2023

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.

### rambii commented Jun 9, 2023

@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.

### medovy commented Aug 8, 2023 • edited

// ==UserScript==
// @name Jigidi Magic Stripes
// @namespace me.danq.com.jigidi.magicstripes
// @match https://www.jigidi.com/solve/*
// @grant GM_getValue
// @grant GM_setValue
// @Version 1.0
// @author Dan Q https://danq.me
// @description 23/03/2023, 14:32:30
// ==/UserScript==

/*
RainbowVis-JS ()Eclipse Public License - v 1.0) | https://github.com/anomal/RainbowVis-JS/blob/master/rainbowvis.js
*/

colours=spectrum}}
this.setSpectrum=function(){setColours(arguments);return this}
this.setSpectrumByArray=function(array){setColours(array);return this}
this.colorAt=this.colourAt;this.setNumberRange=function(minNumber,maxNumber){if(maxNumber>minNumber){minNum=minNumber;maxNum=maxNumber;setColours(colours)}else{throw new RangeError('maxNumber ('+maxNumber+') is not greater than minNumber ('+minNumber+')')}
return this}}
this.setNumberRange=function(minNumber,maxNumber){if(maxNumber>minNumber){minNum=minNumber;maxNum=maxNumber}else{throw new RangeError('maxNumber ('+maxNumber+') is not greater than minNumber ('+minNumber+')')}}
this.colourAt=function(number){return calcHex(number,startColour.substring(0,2),endColour.substring(0,2))+calcHex(number,startColour.substring(2,4),endColour.substring(2,4))+calcHex(number,startColour.substring(4,6),endColour.substring(4,6))}
function calcHex(number,channelStart_Base16,channelEnd_Base16){var num=number;if(num<minNum){num=minNum}
if(num>maxNum){num=maxNum}
var numRange=maxNum-minNum;var cStart_Base10=parseInt(channelStart_Base16,16);var cEnd_Base10=parseInt(channelEnd_Base16,16);var cPerUnit=(cEnd_Base10-cStart_Base10)/numRange;var c_Base10=Math.round(cPerUnit*(num-minNum)+cStart_Base10);return formatHex(c_Base10.toString(16))}
function formatHex(hex){if(hex.length===1){return'0'+hex}else{return hex}}
function isHexColour(string){var regex=/^#?[0-9a-fA-F]{6}\$/i;return regex.test(string)}
function getHexColour(string){if(isHexColour(string)){return string.substring(string.length-6,string.length)}else{var name=string.toLowerCase();if(colourNames.hasOwnProperty(name)){return colourNames[name]}
throw new Error(string+' is not a valid colour.')}}

// Are we logged-in?
const loggedIn = !document.querySelector('account-status.guest');
console.log(`Magic Stripes: loggedIn=\${loggedIn ? 'true' : 'false'}`);

// Prepare Magic Stripes UI
const jigidiMagicStripes = document.createElement('div');
jigidiMagicStripes.id = 'jigidi-magic-stripes';

// Inject Magic Stripes UI
const creatorElem = document.getElementById('info-creator');
creatorElem.before(jigidiMagicStripes);

if(!loggedIn){
// Magic Stripes UI only works if logged in (we need Jigidi's state saving through page refreshes)
jigidiMagicStripes.innerHTML = '

Magic Stripes

';
} else {
// Logged in: jigsaw ID and settings for this jigsaw, enumerate lengths of jigsaw dimensions, and update Magic Stripes UI
const jigsawId = window.location.href.match(/solve/(\w+)//)[1];
const magicStripesSettings = GM_getValue(`magicStripesSettings_\${jigsawId}`, { col: 0 });
const jDimensions = creatorElem.innerText.match(/(\d+)×(\d+)/);
const jCols = parseInt(jDimensions[1]);
const jRows = parseInt(jDimensions[2]);
console.log(`Magic Stripes: jCols=\${jCols} jRows=\${jRows}`);
jigidiMagicStripes.innerHTML = `<p> <strong>Magic Stripes</strong><br> <label for="magicStripesCol">Help with column? (0 to disable)</label><br> <input type="number" id="magicStripesCol" value="\${magicStripesSettings.col}" min="0" max="\${jCols}" style="width: 4em;"> <button id="magicStripesGo">Go</button> <button id="magicStripesPlusOne">+1 and Go</button> </p>`;
const magicStripesCol = document.getElementById('magicStripesCol');
const magicStripesGo = document.getElementById('magicStripesGo');
magicStripesSettings.col = parseInt(magicStripesCol.value);
GM_setValue(`magicStripesSettings_\${jigsawId}`, magicStripesSettings);
});
magicStripesCol.value = (parseInt(magicStripesCol.value) + 1) % (jCols + 1);
magicStripesGo.dispatchEvent(new Event('click'));
});

// Generate spectrum to use:
var rainbow = new Rainbow();
let jColors = [];
rainbow.setNumberRange(1, jRows);
rainbow.setSpectrum('red', 'violet');
for(var i = 1; i <= jRows; i++) {
jColors.push(`#\${rainbow.colourAt(i)}`);
}
let jC = 0;

const targetCol = parseInt(magicStripesSettings.col);
if(targetCol > 0) {
CanvasRenderingContext2D.prototype.putImageData = function(imageData, dx, dy){
console.log('Magic Stripes: putImageData');
const targetCol = parseInt(magicStripesSettings.col);
const col = jC % jCols;
const row = Math.floor(jC / jCols);
if((col + 1) === targetCol) {
// Target column: color and number
this.fillStyle = jColors[row % jColors.length];
this.fillRect(-1000,-1000,2000,2000);
this.font = 'bold 30px sans-serif';
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);
} else if ((col + 2) === targetCol) {
// Previous column: lightly color, don't number
this.fillStyle = jColors[row % jColors.length];
this.fillRect(-1000,-1000,2000,2000);
this.fillStyle = '#ffffffbb';
this.fillRect(-1000,-1000,2000,2000);
this.font = 'bold 30px sans-serif';
this.fillStyle = 'black';
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);
} else {
// Other columns: white-out
this.fillStyle = '#ffffffdd';
this.fillRect(-1000,-1000,2000,2000);
}
jC++;
}
}
}

In this code, how do I remove the first number before the decimal point from the puzzles?
So that 2,10 becomes just 10?

### NeilandJen commented Jan 1, 2024

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?

### rambii commented Jan 2, 2024

@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.

### suyrulola commented Feb 20, 2024 • edited

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?