Persistent

Code

const exportArea = document.getElementById('export-area');

function readDump() {
  return JSON.parse(exportArea.value);
}

function writeDump(dump) {
  exportArea.value = JSON.stringify(dump, null, 2);
}

const persistent = new headbreaker.Canvas('persistent-canvas', {
  width: 500, height: 400, strokeWidth: 0, borderFill: 4
});
persistent.autogenerate({metadata: [
  {color: '#6F04C7'}, {color: '#0498D1'}, {color: '#16BA0D'},
  {color: '#D1A704'}, {color: '#C72C07'},
  {color: '#000000'}, {color: '#6F04C7'}, {color: '#0498D1'},
  {color: '#16BA0D'}, {color: '#D1A704'},
  {color: '#C72C07'}, {color: '#000000'}, {color: '#6F04C7'},
  {color: '#0498D1'}, {color: '#16BA0D'},
  {color: '#D1A704'}, {color: '#C72C07'}, {color: '#000000'},
  {color: '#6F04C7'}, {color: '#0498D1'},
  {color: '#16BA0D'}, {color: '#D1A704'}, {color: '#C72C07'},
  {color: '#000000'}, {color: '#6F04C7'}
]});
persistent.draw();

document.getElementById('persistent-import').addEventListener('click', function() {
  persistent.clear();
  persistent.renderPuzzle(headbreaker.Puzzle.import(readDump()));
  persistent.draw();
});

document.getElementById('persistent-export').addEventListener('click', function() {
  writeDump(persistent.puzzle.export({compact: true}));
});

Demo

ExportImportShuffleShuffle GridShuffle ColumnsSolve