JSFiddle - React, Tailwind, and code Playground

by asemahle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.js"></script>
<div class="fixed">
  <div class="wrap">
    <canvas id="enigma" width="1150" height="550"></canvas>
  </div>
  <p id='string'></p>
</div>

CSS

.fixed {
  position:fixed;
  top: 5;
}

.wrap {
  height: 275px;
  
}
canvas {
  transform: scale(0.45);
  transform-origin: 0 0;
}
.main {
  width: 360px !important
}

JavaScript

var canvas = document.getElementById('enigma');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var user = parseInt('B010F3CA1', 16);
var settings = {str: 'This chain has been broken'};
var gui = new dat.GUI();

function setup() {
	gui.add(settings, 'str').onChange(updateStr).listen();
  for (let i=1; i<=32; i++) {
  	settings['c'+i] = ascii(settings.str[i-1]);
    gui.add(settings, 'c'+i).onChange(updateNum).step(1).listen();
  }
  updateStr();
}

function updateNum() {
	str = '';
  for (let i=1; i<=32; i++) {
  	let val = settings['c'+i];
    if (val) {
    	str += String.fromCharCode(val);
      console.log(val, String.fromCharCode(val))
    } else {
    	break;
    }
  }
  settings.str = str;
  document.getElementById('string').textContent = settings.str;
  enigma(str);
}

function updateStr() {
	for (let i=1; i<=32; i++) {
  	settings['c'+i] = ascii(settings.str[i-1]);
  }
  document.getElementById('string').textContent = settings.str;
  enigma(settings.str);
}

function ascii(c) {
    return (c === undefined) ? 0 : c.charCodeAt();
}

function enigma(pass){for(var sum=0,i=0;i<32;i++){var n=ascii(pass[i]);eval("var c"+(i+1)+" =...