JSFiddle - React, Tailwind, and code Playground

by David Marshall

HTML

<input type="text" id="seed">
<div id="grid-container">

</div>

CSS

table {
  line-height: 120%;
}
.spacertd {
  width: 0px;
  height: 22px;
  background: #8c8;
}
.bordertd{
  width: 1.5em;
    text-align: center;
    color: #888;
}
.globaltd{
  width: 1.5em;
    text-align: center;
    line-height: 120%;
}
.border td:nth-child(2):not(.bordertd):not(.spacertd){
  border-left:1px solid #8c8;
}
.border td:nth-child(27):not(.bordertd):not(.spacertd){
  border-right:1px solid #8c8;
}
.border tr:nth-child(2n+0) td.globaltd{
  border-bottom:1px solid #8c8;
}
.normal tr:nth-child(2n+0) td.globaltd{
  border-bottom:1px solid #8c8;
}
.normal td:first-child{
  border-left:1px solid #8c8;
}
.normal tr:first-child td{
  border-top:1px solid #8c8
}
.normal td:last-child{
  border-right:1px solid #8c8;
}

.char2{
  background:#DDFFDD;
}

JavaScript

async function sha256(message) {
  // encode as UTF-8
  const msgBuffer = new TextEncoder().encode(message);

  // hash the message
  const hashBuffer = await crypto.subtle.digest('SHA-512', msgBuffer);

  // convert ArrayBuffer to Array
  const hashArray = Array.from(new Uint8Array(hashBuffer));

  // convert bytes to hex string                  
  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
  return hashHex;
}

function Mash() {
  var n = 0xefc8249d;

  var mash = function(data) {
    data = data.toString();
    for (var i = 0; i < data.length; i++) {
      n += data.charCodeAt(i);
      var h = 0.02519603282416938 * n;
      n = h >>> 0;
      h -= n;
      h *= n;
      n = h >>> 0;
      h -= n;
      n += h * 0x100000000; // 2^32
    }
    return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
  };

  mash.version = 'Mash 0.9';
  return mash;

}

function Alea(...args) {
  let s0 = 0;
  let s1 = 0;
  let s2 = 0;
  let c = 1;

  if (args.length == 0) {
    args = [+new Date];
  }
  var mash = Mash();
  s0 = mash(' ');
  s1 = mash(' ');
  s2 = mash(' ');

  for (var i = 0; i < args.length; i++) {
    s0 -= mash(args[i]);
    if (s0 < 0) {
      s0 += 1;
    }
    s1 -= mash(args[i]);
    if (s1 < 0) {
      s1 += 1;
    }
    s2 -= mash(args[i]);
    if (s2 < 0) {
      s2 += 1;
    }
  }
  mash = null;

  var random = function() {
    var t = 2091639 * s0 + c * 2.3283064365386963e-10; // 2^-32
    s0 = s1;
    s1 = s2;
    return s2 = t - (c = t | 0);
  };
  random.int = function(max) {
    return Math.floor(random() * max);
  }
  random.uint32 = function() {
    return random() * 0x100000000; // 2^32
  };
  random.fract53 = function() {
    return random() +
      (random() * 0x200000 | 0) * 1.1102230246251565e-16; // 2^-53
  };
  random.args = args;
  return random;
}

function switchRow(table, pos1, pos2) {
  let temp = table[pos1]
  table[pos1] = [...table[pos2]]
  table[pos2] = [...temp]
}

function switchCol(table, pos1,...