1 files changed, 76 insertions, 3 deletions
diff --git a/index.htm b/index.htm
index 7753a28..35fd8ca 100644
--- a/index.htm
+++ b/index.htm
@@ -1,7 +1,80 @@
-<html>
+<!DOCTYPE html>
+<html style="height: 100%; overflow: hidden; overflow-x: hidden;">
   <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel='icon' type='image/gif' href='/favicon.gif'>
+    <title> Reduced System Layer </title>
   </head>
-  <body>
-    Hello, Sailor!
+  <body style="margin: 0; height: 100%; overflow: hidden; overflow-x: hidden;">
+    <canvas style="margin: 0; width: 100%; height: 100%;" id="frame" oncontextmenu="event.preventDefault()"></canvas>
+    <script type="text/javascript">
+      async function run() {
+        let canvas;
+        let program;
+        let memory_view;
+        let pixels_address;
+        let context;
+        let animation_frame;
+
+        canvas  = document.getElementById("frame");
+        context = canvas.getContext("2d");
+
+        program = await WebAssembly.instantiateStreaming(
+          fetch("index.wasm"),
+          {
+            "wasi_snapshot_preview1" : {
+              args_sizes_get : (...args) => { console.log(`args_sizes_get: ${args}`); },
+              args_get       : (...args) => { console.log(`args_get: ${args}`); },
+              proc_exit      : (...args) => { console.log(`proc_exit: ${args}`); },
+              clock_time_get : () => { return Date.now(); },
+              fd_close       : (...args) => { console.log(`fd_close: ${args}`); },
+              fd_write       : (...args) => { console.log(`fd_write: ${args}`); },
+              fd_seek        : (...args) => { console.log(`fd_seek: ${args}`); },
+            },
+            "env" : {
+              p_init : () => {
+                program.instance.exports.js_init();
+                memory_view    = new Uint8Array(program.instance.exports.memory.buffer);
+                pixels_address = program.instance.exports.js_pixels();
+              },
+              p_render_frame_impl : () => {
+                canvas.width  = window.innerWidth;
+                canvas.height = window.innerHeight;
+
+                let data = new ImageData(
+                  new Uint8ClampedArray(
+                    memory_view.subarray(
+                      pixels_address,
+                      pixels_address + 4 * canvas.width * canvas.height
+                    )
+                  ),
+                  canvas.width,
+                  canvas.height
+                );
+
+                context.putImageData(data, 0, 0);
+              },
+              p_cleanup       : () => {},
+              p_handle_events : () => {},
+              p_wait_events   : () => {},
+              p_sleep_for     : (time) => {},
+              p_time          : Date.now,
+            },
+          }
+        );
+
+        program.instance.exports.js_main();
+
+        animation_frame = (time) => {
+          program.instance.exports.js_frame(canvas.width, canvas.height);
+          window.requestAnimationFrame(animation_frame);
+        };
+
+        window.requestAnimationFrame(animation_frame);
+      }
+
+      run().catch((e) => console.error(e));
+    </script>
   </body>
 </html>