From 935f69ca25bca24fd36166e7192ebb69af2d35e9 Mon Sep 17 00:00:00 2001
From: Charlie Stanton <charlie@shtanton.xyz>
Date: Sat, 5 Apr 2025 08:10:21 +0100
Subject: Get web assembly working

---
 src/index.html.in | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 src/index.html.in

(limited to 'src/index.html.in')
diff --git a/src/index.html.in b/src/index.html.in
new file mode 100644
index 0000000..fcfb8ef
--- /dev/null
+++ b/src/index.html.in
@@ -0,0 +1,105 @@
+<!doctype html>
+<title>LDJam 57</title>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width">
+<style>
+html, body {
+    background: #222222;
+    font-family: sans-serif;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    text-align: center;
+    width: 100%;
+}
+h1 {
+    color: white;
+    margin: 0;
+}
+button {
+    font-size: 150%;
+    height: 8%;
+    margin: 0.3em;
+    width: 25%;
+}
+</style>
+
+<canvas></canvas>
+
+<script>
+// Mirror these in src/all.c
+const INPUT_NONE  = 0;
+const INPUT_UP = 1;
+const INPUT_DOWN  = 2;
+const INPUT_LEFT = 3;
+const INPUT_RIGHT  = 4;
+
+const WASM =
+#include "../build/main.wasm.b64"
+
+async function main() {
+    let bytes   = Uint8Array.from(atob(WASM), function(c) {
+        return c.charCodeAt(0);
+    });
+    let module  = await WebAssembly.compile(bytes);
+    let wasm    = await WebAssembly.instantiate(module);
+    let exports = wasm.exports;
+    let html    = document.querySelector("html");
+    let canvas  = document.querySelector("canvas");
+    let ctx     = canvas.getContext("2d");
+    let memory  = exports.memory;
+
+    function min(a, b) {
+        return b<a ? b : a;
+    }
+
+    function max_width() {
+        return html.clientHeight * 0.7 | 0;
+    }
+
+    function render() {
+        let width  = canvas.width  = min(html.clientWidth, max_width());
+        let height = canvas.height = width;
+        let ptr    = exports.game_render(width, height);
+        let dl     = new Int32Array(memory.buffer, ptr);
+        let len    = dl[0];
+        let ops    = dl.subarray(1);
+
+        for (let i = 0; i < len; i++) {
+            let op    = ops.subarray(5*i, 5*i+5);
+					const color = new Uint8Array(new Uint32Array(ops.subarray(4, 5)).buffer);
+					let style = `#${color[0].toString(16).padStart(2, "0")}${color[1].toString(16).padStart(2, "0")}${color[2].toString(16).padStart(2, "0")}`;
+						ctx.fillStyle = style;
+						ctx.fillRect(op[0], op[1], op[2], op[3]);
+        }
+    }
+
+    function onresize() { html.style.maxWidth = `${max_width()}px`; }
+    window.addEventListener("resize", onresize);
+    onresize();
+
+    document.addEventListener("keydown", function(e) {
+        if (e.key == "w") {
+            exports.game_update(INPUT_UP);
+        } else if (e.key == "a") {
+            exports.game_update(INPUT_LEFT);
+        } else if (e.key == "s") {
+            exports.game_update(INPUT_DOWN);
+        } else if (e.key == "d") {
+            exports.game_update(INPUT_RIGHT);
+        }
+    })
+
+    function animate() {
+        // TODO: stop requesting frames when state is static
+        requestAnimationFrame(animate);
+        exports.game_update(INPUT_NONE);
+        render();
+    }
+    requestAnimationFrame(animate);
+
+	exports.game_init();
+}
+
+main()
+</script>
-- 
cgit v1.2.3

