diff options
| author | Mitya Selivanov <automainint@guattari.tech> | 2024-11-01 22:30:29 +0100 |
|---|---|---|
| committer | Mitya Selivanov <automainint@guattari.tech> | 2024-11-01 22:30:29 +0100 |
| commit | 2afdeaedbfb488f20cdc1cca7ce01a915df4d53a (patch) | |
| tree | 76fc484f3663d54a158cda305e74d94ddcc12782 /index.htm | |
| parent | 63c3b9bda3fe7eb8750f084ff070f40b967f9532 (diff) | |
| download | reduced_system_layer-2afdeaedbfb488f20cdc1cca7ce01a915df4d53a.zip | |
wasm: Implement some events
Diffstat (limited to 'index.htm')
| -rw-r--r-- | index.htm | 106 |
1 files changed, 89 insertions, 17 deletions
@@ -9,15 +9,27 @@ <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() { + function string_from_memory(memory, offset) { + let len = 0; + console.log(memory); + while (memory[offset + len] != 0) { + ++len; + } + return new TextDecoder().decode(memory.subarray(offset, offset + len)); + } + + async function run(attrs) { + let wait_for_events = false; + let sleep_duration = 0; + let canvas; let program; - let memory_view; + let memory; let pixels_address; let context; let animation_frame; - canvas = document.getElementById("frame"); + canvas = document.getElementById(attrs.id); context = canvas.getContext("2d"); program = await WebAssembly.instantiateStreaming( @@ -35,16 +47,14 @@ "env" : { p_init : () => { program.instance.exports.js_init(); - memory_view = new Uint8Array(program.instance.exports.memory.buffer); + memory = new Uint8Array(program.instance.exports.memory.buffer); pixels_address = program.instance.exports.js_pixels(); + document.title = string_from_memory(memory, program.instance.exports.js_title()); }, p_render_frame_impl : () => { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - let data = new ImageData( new Uint8ClampedArray( - memory_view.subarray( + memory.subarray( pixels_address, pixels_address + 4 * canvas.width * canvas.height ) @@ -55,18 +65,23 @@ context.putImageData(data, 0, 0); }, - p_cleanup : () => {}, - p_handle_events : () => {}, - p_wait_events : () => {}, - p_sleep_for : (time) => {}, - p_time : Date.now, + p_clipboard_write : (size, text) => { + navigator.clipboard.writeText( + new TextDecoder().decode(memory.subarray(text, text + size)) + ).catch((e) => { console.error(e); }); + }, + p_cleanup : () => {}, + p_wait_events_impl : () => { wait_for_events = true; }, + p_sleep_for : (time) => { sleep_duration += time; }, + p_time : Date.now, + sqrt : Math.sqrt, + floor : Math.floor, + ceil : Math.ceil, memset : (dst, val, num) => { - // FIXME PERF for (let i = 0; i < num; ++i) dst[i] = val; }, memcpy : (dst, src, num) => { - // FIXME PERF for (let i = 0; i < num; ++i) dst[i] = src[i]; }, @@ -77,14 +92,71 @@ program.instance.exports.js_main(); animation_frame = (time) => { + if (attrs.fit_window) { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + } + + wait_for_events = false; program.instance.exports.js_frame(canvas.width, canvas.height); - window.requestAnimationFrame(animation_frame); + + if (!wait_for_events) { + if (sleep_duration > 0) { + sleep_duration = 0; + setTimeout(() => { + window.requestAnimationFrame(animation_frame); + }, sleep_duration); + } else + window.requestAnimationFrame(animation_frame); + } }; + window.addEventListener("resize", (ev) => { + window.requestAnimationFrame(animation_frame); + }); + + canvas.addEventListener("mousedown", (ev) => { + program.instance.exports.js_mousedown(ev.buttons); + window.requestAnimationFrame(animation_frame); + }); + + canvas.addEventListener("mouseup", (ev) => { + program.instance.exports.js_mouseup(ev.buttons); + window.requestAnimationFrame(animation_frame); + }); + + canvas.addEventListener("mousemove", (ev) => { + program.instance.exports.js_mousemove(ev.clientX, ev.clientY); + window.requestAnimationFrame(animation_frame); + }); + + canvas.addEventListener("mouseenter", (ev) => { + console.log(ev); + window.requestAnimationFrame(animation_frame); + }); + + canvas.addEventListener("mouseleave", (ev) => { + console.log(ev); + window.requestAnimationFrame(animation_frame); + }); + + window.addEventListener("keydown", (ev) => { + console.log(ev); + window.requestAnimationFrame(animation_frame); + }); + + window.addEventListener("keyup", (ev) => { + console.log(ev); + window.requestAnimationFrame(animation_frame); + }); + window.requestAnimationFrame(animation_frame); } - run().catch((e) => console.error(e)); + run({ + id : "frame", + fit_window : true, + }).catch((e) => console.error(e)); </script> </body> </html> |