diff options
| author | Charlie Stanton <charlie@shtanton.xyz> | 2025-04-05 08:10:21 +0100 |
|---|---|---|
| committer | Charlie Stanton <charlie@shtanton.xyz> | 2025-04-05 08:10:21 +0100 |
| commit | 935f69ca25bca24fd36166e7192ebb69af2d35e9 (patch) | |
| tree | 182cd864dc0d486ca64868f037da306b60ec51e2 /src/index.html.in | |
| parent | f0bf72a54477fb18b1666293a652b52f53320a1d (diff) | |
| download | ldjam57-935f69ca25bca24fd36166e7192ebb69af2d35e9.tar | |
Get web assembly working
Diffstat (limited to 'src/index.html.in')
| -rw-r--r-- | src/index.html.in | 105 |
1 files changed, 105 insertions, 0 deletions
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> |