dist/fsdemo_shell.html

   1 <!doctype html>
   2 <html lang="en-us">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   7     <title>FreeSpace Demo</title>
   8     <style>
   9       html {
  10         box-sizing: border-box;
  11       }
  12       * {
  13         box-sizing: inherit;
  14       }
  15       html, body {
  16         height: 100%;
  17         margin: 0;
  18         padding: 0;
  19         background-color: #222;
  20       }
  21       #progress {
  22         background: url(demotitle.jpg);
  23         background-repeat: no-repeat;
  24         background-size: cover;
  25         z-index: 10;
  26       }
  27       #progress_container {
  28         width: 70%;
  29         margin: 0 auto;
  30         position: relative;
  31         top: 50%;
  32       }
  33       #progress_bar_back {
  34         width: 100%;
  35         background-color: #353B4C;
  36         margin: 0 auto;
  37         padding: 3px;
  38       }
  39       #progress_bar {
  40         padding-left: 20px;
  41         line-height: 30px;
  42         height: 30px;
  43         width: 0%;
  44         background-color: #798199;
  45       }
  46       #progress_text, #progress_bar {
  47         font-family: 'Noto Sans', sans-serif;
  48         color: #4C442D;
  49
  50       }
  51       canvas, #progress {
  52         width: 100vw;
  53         height: 75vw;
  54         background-color: #000;
  55         max-height: 100vh;
  56         max-width: 133.333333vh;
  57         margin: auto;
  58         position: absolute;
  59         top: 0;
  60         bottom: 0;
  61         left: 0;
  62         right: 0;
  63       }
  64     </style>
  65   </head>
  66   <body>
  67     <div id="progress">
  68       <div id="progress_container">
  69         <div id="progress_bar_back"><div id="progress_bar"></div></div>
  70         <div id="progress_text"></div>
  71       </div>
  72     </div>
  73     <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
  74     <script type='text/javascript'>
  75       var progress = document.getElementById('progress');
  76       var progress_bar = document.getElementById('progress_bar');
  77       var progress_text = document.getElementById('progress_text');
  78
  79       var Module = {
  80         preRun: [],
  81         postRun: [],
  82         print: (function() {
  83           return function(text) {
  84             if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
  85             // These replacements are necessary if you render to raw HTML
  86             //text = text.replace(/&/g, "&amp;");
  87             //text = text.replace(/</g, "&lt;");
  88             //text = text.replace(/>/g, "&gt;");
  89             //text = text.replace('\n', '<br>', 'g');
  90             console.log(text);
  91           };
  92         })(),
  93         printErr: function(text) {
  94           if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
  95           if (0) { // XXX disabled for safety typeof dump == 'function') {
  96             dump(text + '\n'); // fast, straight to the real console
  97           } else {
  98             console.error(text);
  99           }
 100         },
 101         canvas: (function() {
 102           var canvas = document.getElementById('canvas');
 103
 104           // As a default initial behavior, pop up an alert when webgl context is lost. To make your
 105           // application robust, you may want to override this behavior before shipping!
 106           // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
 107           canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
 108
 109           return canvas;
 110         })(),
 111         setStatus: function(text) {
 112           if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
 113           if (text === Module.setStatus.text) return;
 114           var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
 115           if (m) {
 116             text = m[1];
 117             var perc = parseInt(m[2]) / parseInt(m[4]) * 100;
 118             progress_bar.style.width = perc + '%';
 119             progress_bar.innerHTML = perc.toFixed(1) + '%';
 120           }
 121           progress_text.innerHTML = text;
 122         },
 123         totalDependencies: 0,
 124         monitorRunDependencies: function(left) {
 125           this.totalDependencies = Math.max(this.totalDependencies, left);
 126           Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
 127         }
 128       };
 129       Module.setStatus('Downloading...');
 130       window.onerror = function() {
 131         Module.setStatus('Exception thrown, see JavaScript console');
 132         Module.setStatus = function(text) {
 133           if (text) Module.printErr('[post-exception status] ' + text);
 134         };
 135       };
 136     </script>
 137     {{{ SCRIPT }}}
 138   </body>
 139 </html>