<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Nimbus state transition function</title>
  <style>
    body,
    html {
      font-family: monospace;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .row-container {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      flex-direction: column;
      overflow: hidden;
    }

    .first-row {
    }

    .second-row {
      flex-grow: 1;
      border: none;
      margin: 0;
      padding: 0;
    }

    textarea.emscripten {
      font-family: monospace;
      background-color: beige;
      width: 95%;
    }

    div.emscripten_border {
      border: 1px solid black;
    }
  </style>
</head>

<body height="100%" class="row-container">
  <div class="first-row">
    <div class="emscripten" id="status">Running...</div>
    <hr />
  </div>
  <textarea class="emscripten second-row" id="output" rows=50></textarea>
  <script type='text/javascript'>
    var statusElement = document.getElementById('status');
    var progressElement = document.getElementById('progress');

    var Module = {
      arguments: window.location.search.substr(1).trim().split('&').concat(["--write_last_json:true"]),

      preRun: [],
      postRun: [() => offerFileAsDownload("state.json", "mime/type")],
      print: (function () {
        var element = document.getElementById('output');
        if (element) element.value = ''; // clear browser cache
        return function (text) {
          if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
          // These replacements are necessary if you render to raw HTML
          //text = text.replace(/&/g, "&amp;");
          //text = text.replace(/</g, "&lt;");
          //text = text.replace(/>/g, "&gt;");
          //text = text.replace('\n', '<br>', 'g');
          console.log(text);
          if (element) {
            element.value += text + "\n";
            element.scrollTop = element.scrollHeight; // focus on bottom
          }
        };
      })(),
      printErr: function (text) {
        if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
        console.error(text);
      },
      canvas: (function () { return null; })(),
      setStatus: function (text) {
        if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
        if (text === Module.setStatus.last.text) return;
        statusElement.innerHTML = text;
      },
      totalDependencies: 0,
      monitorRunDependencies: function (left) {
        this.totalDependencies = Math.max(this.totalDependencies, left);
        Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies - left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
      }
    };
    Module.setStatus('Downloading...');
    window.onerror = function () {
      Module.setStatus('Exception thrown, see JavaScript console');

      Module.setStatus = function (text) {
        if (text) Module.printErr('[post-exception status] ' + text);
      };
    };

    function offerFileAsDownload(filename, mime) {
      mime = mime || "application/octet-stream";

      let content = Module.FS.readFile(filename);
      console.log(`Offering download of "${filename}", with ${content.length} bytes...`);

      var a = document.createElement('a');
      a.download = filename;
      a.innerText = "Download state.json";
      a.href = URL.createObjectURL(new Blob([content], { type: mime }));
      statusElement.innerHTML = ""
      statusElement.appendChild(a)
    }

  </script>
  {{{ SCRIPT }}}
</body>

</html>