brccabral · October 17, 2025 21:22
diff --git a/01_README.md b/01_README.md
diff --git a/bare_shell.html b/bare_shell.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        canvas {
            display: block;
            margin: auto;
            text-align: center;
        }
    </style>
 </head>

 <body>

 <!-- Create the canvas that the C++ code will draw into -->
 <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>

 <!-- Allow the C++ to access the canvas element -->
 <script type='text/javascript'>
    var Module = {
        canvas: (function() { return document.getElementById('canvas'); })()
    };
 </script>

 <!-- Add the javascript glue code (index.js) as generated by Emscripten -->
 {{{ SCRIPT }}}
 </body>
 </html>
diff --git a/shell_essential.html b/shell_essential.html
 <!DOCTYPE html>
 <html>

 <head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="icon" type="image/png" href="images/favico.ico">
  <style>
    canvas {
      display: block;
      margin: auto;
      text-align: center
    }

    body {
      height: 100%;
    }

    body {
      margin: 0;
      font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--fg);
      display: grid;
      place-items: start center;
      background-image: url('images/background.jpg') !important;
      background-size: cover !important;
      background-attachment: fixed !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
    }

    @-webkit-keyframes rotation {
      from {-webkit-transform: rotate(0deg);}
      to {-webkit-transform: rotate(360deg);}
    }
    @-moz-keyframes rotation {
      from {-moz-transform: rotate(0deg);}
      to {-moz-transform: rotate(360deg);}
    }
    @-o-keyframes rotation {
      from {-o-transform: rotate(0deg);}
      to {-o-transform: rotate(360deg);}
    }
    @keyframes rotation {
      from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
    }

    .spinner {
      height: 50px;
      width: 50px;
      margin: 0px auto;
      -webkit-animation: rotation .8s linear infinite;
      -moz-animation: rotation .8s linear infinite;
      -o-animation: rotation .8s linear infinite;
      animation: rotation 0.8s linear infinite;
      border-left: 10px solid rgb(0, 240, 0);
      border-right: 10px solid rgb(0, 240, 0);
      border-bottom: 10px solid rgb(0, 240, 0);
      border-top: 10px solid rgb(1, 110, 1);
      border-radius: 100%;
      background-color: rgb(0, 0, 0);
    }

    .status {
      color: #0f0;
    }

    progress{
      background-color: #0F0;
    }
  </style>
 </head>

 <body>

  <figure style="overflow:visible;" id="spinner">
    <div class="spinner"></div>
    <center style="margin-top:0.5em"><strong>.</strong></center>
  </figure>
  <div class="status" id="status">Downloading...</div>
  <div class="status">
    <progress value="0" max="100" id="progress" hidden=1></progress>
  </div>
  <!-- Create the canvas that the C++ code will draw into -->
  <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>

  <!-- Allow the C++ to access the canvas element -->
  <script type='text/javascript'>
    var statusElement = document.getElementById('status');
    var progressElement = document.getElementById('progress');
    var spinnerElement = document.getElementById('spinner');
    var canvasElement = document.getElementById('canvas');

    // As a default initial behavior, pop up an alert when webgl context is lost. To make your
    // application robust, you may want to override this behavior before shipping!
    // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
    canvasElement.addEventListener("webglcontextlost", (e) => {
      alert('WebGL context lost. You will need to reload the page.');
      e.preventDefault();
    }, false);


    var Module = {
      print(...args) {
        console.log(...args);
      },
      canvas: canvasElement,
      setStatus(text) {
        Module.setStatus.last ??= { time: Date.now(), text: '' };
        if (text === Module.setStatus.last.text) return;
        var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
        var now = Date.now();
        if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
        Module.setStatus.last.time = now;
        Module.setStatus.last.text = text;
        if (m) {
          text = m[1];
          progressElement.value = parseInt(m[2]) * 100;
          progressElement.max = parseInt(m[4]) * 100;
          progressElement.hidden = false;
          spinnerElement.hidden = false;
        } else {
          progressElement.value = null;
          progressElement.max = null;
          progressElement.hidden = true;
          if (!text) spinnerElement.hidden = true;
        }
        statusElement.innerHTML = text;
      },
      totalDependencies: 0,
      monitorRunDependencies(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 = () => {
      Module.setStatus('Exception thrown, see JavaScript console');
      spinnerElement.style.display = 'none';
      Module.setStatus = (text) => {
        if (text) console.error('[post-exception status] ' + text);
      };
    };
  </script>

  <!-- Add the javascript glue code (index.js) as generated by Emscripten -->
  {{{ SCRIPT }}}
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
	canvas {
	display: block;
	margin: auto;
	text-align: center;
	}
	</style>
	</head>

	<body>

	<!-- Create the canvas that the C++ code will draw into -->
	<canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>

	<!-- Allow the C++ to access the canvas element -->
	<script type='text/javascript'>
	var Module = {
	canvas: (function() { return document.getElementById('canvas'); })()
	};
	</script>

	<!-- Add the javascript glue code (index.js) as generated by Emscripten -->
	{{{ SCRIPT }}}
	</body>
	</html>