pcbjam/tests/wasm-app/minimal_test.html

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style>
      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
      div.emscripten { text-align: center; }
      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
      canvas.emscripten { border: 0px none; }

      .window {
        position: absolute;
        pointer-events: none;
        z-index: 10;
        background-color: black;
        overflow: hidden;
        width: 0;
        height: 0;
      }

      .window-canvas {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
      }
    </style>
  </head>
  <body style="margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden">
  <div id="main-window"></div>

  <div id="progress-container" class="centered">
    <div id="progress-text">Loading...</div>
    <div id="progress-bar">
      <div id="progress-bar-position">
      </div>
    </div>
  </div>

  <div id="window-container"></div>
  
  <script>
    var mainWindow = document.getElementById('main-window');
    var statusElement = document.getElementById('progress-text');
    var progressElement = document.getElementById('progress-bar-position');

    var createCanvas = function () {
      var canvas = document.createElement('canvas');
      canvas.id = 'canvas';
      canvas.style.display = 'none';
      canvas.style.width = window.innerWidth + 'px';
      canvas.style.height = window.innerHeight + 'px';
      canvas.oncontextmenu = function () { event.preventDefault(); }
      canvas.addEventListener("webglcontextlost", function (e) {
        showError('WebGL context lost. You will need to reload the page.');
        e.preventDefault();
      }, false);

      mainWindow.appendChild(canvas);

      Module.canvas = canvas;
    };

    var onRuntimeInitialized = function () {
      var canvas = Module.canvas;
      canvas.style.display = 'block';
    };

    var Module = {
      preRun: [createCanvas],
      postRun: [],
      print: function(text) {
        if (arguments.length > 1)
          text = Array.prototype.slice.call(arguments).join(' ');
        console.log(text);
      },
      printErr: function(text) {
        if (arguments.length > 1)
          text = Array.prototype.slice.call(arguments).join(' ');
        console.error(text);
      },
      setStatus: function(text) {
        if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
        if (text === Module.setStatus.text) return;
        var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
        if (m) {
          text = m[1];
          progressElement.style.width = m[2] / m[4] + '%';
          progressElement.hidden = false;
        } else {
          progressElement.hidden = true;
        }
        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.');
      },
      onRuntimeInitialized: onRuntimeInitialized
    };
    Module.setStatus('Downloading...');
    window.onerror = function() {
      showError('Exception thrown, see JavaScript console');
      Module.setStatus = function(text) {
        if (text) Module.printErr('[post-exception status] ' + text);
      };
    };
  </script>
  <script async type="text/javascript" src="minimal_test.js"></script>
  </body>
</html>