From: Brendan Hansen Date: Tue, 16 Feb 2021 18:22:30 +0000 (-0600) Subject: basic html with canvas setup X-Git-Url: https://git.brendanfh.com/?a=commitdiff_plain;h=796eed0cdf974370764bc6f44284e22dc9bd4eef;p=onyx-prez.git basic html with canvas setup --- diff --git a/build.sh b/build.sh index e1fc157..77aba6e 100755 --- a/build.sh +++ b/build.sh @@ -1,3 +1,3 @@ #!/bin/sh -onyx -V -r js src/build.onyx -o prez.wasm +onyx -V -r js src/build.onyx -o dist/prez.wasm diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..fd3b353 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,22 @@ + + + + + + + + +

+ + diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..df5e9cb --- /dev/null +++ b/dist/index.js @@ -0,0 +1,66 @@ + +let wasm_instance; +let canvasElem; +let canvasCtx; + +const MAGIC_CANVAS_NUMBER = 0x5052455A; + +let canvas_import_obj = { + + init(canvas_name, length) { + const data = new Uint8Array(wasm_instance.exports.memory.buffer, canvas_name, length); + const str = new TextDecoder().decode(data); + + canvasElem = document.getElementById(str); + if (canvasElem == null) return -1; + + canvasElem.width = window.innerWidth; + canvasElem.height = window.innerHeight; + + canvasCtx = canvasElem.getContext('2d'); + + return MAGIC_CANVAS_NUMBER; + }, + + clear(canvas, r, g, b, a) { + canvasCtx.fillStyle = `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${a})`; + canvasCtx.fillRect(0, 0, canvasElem.width, canvasElem.height); + }, + + get_width(canvas) { return canvasElem.width; }, + get_height(canvas) { return canvasElem.height; }, + + fillRect(canvas, x, y, w, h, r, g, b, a) { + canvasCtx.fillStyle = `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${a})`; + canvasCtx.fillRect(x, y, w, h); + } +} + +let import_obj = { + host: { + print_str(ptr, len) { + const data = new Uint8Array(wasm_instance.exports.memory.buffer, ptr, len); + const str = new TextDecoder().decode(data); + console.log(str); + }, + + exit(status) { console.warn("Attempted to call host.exit()."); } + }, + + canvas: canvas_import_obj +} + +function main() { + + fetch("prez.wasm") + .then(res => res.arrayBuffer()) + .then(res => WebAssembly.instantiate(res, import_obj)) + .then(({ instance }) => { + wasm_instance = instance; + + instance.exports._start(); + }); + +} + +window.onload = main; diff --git a/src/prez.onyx b/src/prez.onyx index 2b2ba31..8487335 100644 --- a/src/prez.onyx +++ b/src/prez.onyx @@ -1,7 +1,33 @@ - use package core +Canvas :: struct { + Handle :: #type u32; + + init :: (id: str) -> Handle #foreign "canvas" "init" --- + clear :: (handle: Handle, r: f32, g: f32, b: f32, a := 1.0f) -> Handle #foreign "canvas" "clear" --- + get_width :: (handle: Handle) -> u32 #foreign "canvas" "get_width" --- + get_height :: (handle: Handle) -> u32 #foreign "canvas" "get_height" --- + fill_rect :: (handle: Handle, + x: f32, y: f32, w: f32, h: f32, + r: f32, g: f32, b: f32, a := 1.0f) -> void #foreign "canvas" "fillRect" --- +} + +setup_canvas :: () { + use Canvas; + + canvas := init("prez_canvas"); + if canvas == -1 { + println("Failed to set up canvas."); + return; + } + + clear(canvas, 0.1, 0.1, 0.1); + + width, height := cast(f32) get_width(canvas), cast(f32) get_height(canvas); + fill_rect(canvas, width / 2, height / 2, width / 2, height / 2, 1, 0, 0); +} + main :: (args: [] cstr) { - println("Got to main!"); + setup_canvas(); }