summary refs log tree commit diff stats
path: root/index.html
diff options
context:
space:
mode:
authorStar Rauchenberger <fefferburbia@gmail.com>2023-11-02 20:11:53 -0400
committerStar Rauchenberger <fefferburbia@gmail.com>2023-11-02 20:11:53 -0400
commit84c305819930713603124d984acb51df87761246 (patch)
tree435bbb75392311eea42d5d46d6b00caa36b35a8a /index.html
parenta59fcafb2e81f3cb40ff320b106030e8fed4bd66 (diff)
downloadmazeoflife-emscripten.tar.gz
mazeoflife-emscripten.tar.bz2
mazeoflife-emscripten.zip
emscripten port emscripten
Diffstat (limited to 'index.html')
-rw-r--r--index.html143
1 files changed, 143 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..a63d720 --- /dev/null +++ b/index.html
@@ -0,0 +1,143 @@
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 <title>Emscripten-Generated Code</title>
7 <style>
8 .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
9 textarea.emscripten { font-family: monospace; width: 80%; }
10 div.emscripten { text-align: center; }
11 div.emscripten_border { border: 1px solid black; }
12 /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
13 canvas.emscripten { border: 1px solid black; background-color: transparent; position: absolute; top: 0; left: 0; }
14
15 .spinner {
16 height: 50px;
17 width: 50px;
18 margin: 0px auto;
19 -webkit-animation: rotation .8s linear infinite;
20 -moz-animation: rotation .8s linear infinite;
21 -o-animation: rotation .8s linear infinite;
22 animation: rotation 0.8s linear infinite;
23 border-left: 10px solid rgb(0,150,240);
24 border-right: 10px solid rgb(0,150,240);
25 border-bottom: 10px solid rgb(0,150,240);
26 border-top: 10px solid rgb(100,0,200);
27 border-radius: 100%;
28 background-color: rgb(200,100,250);
29 }
30 @-webkit-keyframes rotation {
31 from {-webkit-transform: rotate(0deg);}
32 to {-webkit-transform: rotate(360deg);}
33 }
34 @-moz-keyframes rotation {
35 from {-moz-transform: rotate(0deg);}
36 to {-moz-transform: rotate(360deg);}
37 }
38 @-o-keyframes rotation {
39 from {-o-transform: rotate(0deg);}
40 to {-o-transform: rotate(360deg);}
41 }
42 @keyframes rotation {
43 from {transform: rotate(0deg);}
44 to {transform: rotate(360deg);}
45 }
46
47 </style>
48 </head>
49 <body>
50 <hr/>
51 <figure style="overflow:visible;" id="spinner"><div class="spinner"></div><center style="margin-top:0.5em"><strong>emscripten</strong></center></figure>
52 <div class="emscripten" id="status">Downloading...</div>
53 <div class="emscripten">
54 <progress value="0" max="100" id="progress" hidden=1></progress>
55 </div>
56 <div class="emscripten_border">
57 <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
58 </div>
59 <hr/>
60 <div class="emscripten">
61 <input type="checkbox" id="resize">Resize canvas
62 <input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer
63 &nbsp;&nbsp;&nbsp;
64 <input type="button" value="Fullscreen" onclick="Module.requestFullscreen(document.getElementById('pointerLock').checked,
65 document.getElementById('resize').checked)">
66 </div>
67
68 <hr/>
69 <textarea class="emscripten" id="output" rows="8"></textarea>
70 <hr>
71 <script type='text/javascript'>
72 var statusElement = document.getElementById('status');
73 var progressElement = document.getElementById('progress');
74 var spinnerElement = document.getElementById('spinner');
75
76 var Module = {
77 print: (function() {
78 var element = document.getElementById('output');
79 if (element) element.value = ''; // clear browser cache
80 return function(text) {
81 if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
82 // These replacements are necessary if you render to raw HTML
83 //text = text.replace(/&/g, "&amp;");
84 //text = text.replace(/</g, "&lt;");
85 //text = text.replace(/>/g, "&gt;");
86 //text = text.replace('\n', '<br>', 'g');
87 console.log(text);
88 if (element) {
89 element.value += text + "\n";
90 element.scrollTop = element.scrollHeight; // focus on bottom
91 }
92 };
93 })(),
94 canvas: (() => {
95 var canvas = document.getElementById('canvas');
96
97 // As a default initial behavior, pop up an alert when webgl context is lost. To make your
98 // application robust, you may want to override this behavior before shipping!
99 // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
100 canvas.addEventListener("webglcontextlost", (e) => { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
101
102 return canvas;
103 })(),
104 setStatus: (text) => {
105 if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
106 if (text === Module.setStatus.last.text) return;
107 var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
108 var now = Date.now();
109 if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
110 Module.setStatus.last.time = now;
111 Module.setStatus.last.text = text;
112 if (m) {
113 text = m[1];
114 progressElement.value = parseInt(m[2])*100;
115 progressElement.max = parseInt(m[4])*100;
116 progressElement.hidden = false;
117 spinnerElement.hidden = false;
118 } else {
119 progressElement.value = null;
120 progressElement.max = null;
121 progressElement.hidden = true;
122 if (!text) spinnerElement.hidden = true;
123 }
124 statusElement.innerHTML = text;
125 },
126 totalDependencies: 0,
127 monitorRunDependencies: (left) => {
128 this.totalDependencies = Math.max(this.totalDependencies, left);
129 Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
130 }
131 };
132 Module.setStatus('Downloading...');
133 window.onerror = () => {
134 Module.setStatus('Exception thrown, see JavaScript console');
135 spinnerElement.style.display = 'none';
136 Module.setStatus = (text) => {
137 if (text) console.error('[post-exception status] ' + text);
138 };
139 };
140 </script>
141 <script async type="text/javascript" src="mazeoflife.js"></script>
142 </body>
143</html>