basic html with canvas setup
authorBrendan Hansen <brendan.f.hansen@gmail.com>
Tue, 16 Feb 2021 18:22:30 +0000 (12:22 -0600)
committerBrendan Hansen <brendan.f.hansen@gmail.com>
Tue, 16 Feb 2021 18:22:30 +0000 (12:22 -0600)
build.sh
dist/index.html [new file with mode: 0644]
dist/index.js [new file with mode: 0644]
src/prez.onyx

index e1fc15780f70671a315473c73bbea8301027170d..77aba6efb3b7770a9b7469de9ab1f67ace1fac80 100755 (executable)
--- 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 (file)
index 0000000..fd3b353
--- /dev/null
@@ -0,0 +1,22 @@
+<html>
+    <head>
+        <script defer src="index.js"></script>
+
+        <style>
+            html, body, canvas {
+                margin: 0;
+                padding: 0;
+                width: 100vw;
+                height: 100vh;
+                overflow: hidden;
+            }
+
+            #prez_canvas {
+            }
+        </style>
+    </head>
+
+    <body>
+        <canvas id="prez_canvas">This browser does not support the HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/dist/index.js b/dist/index.js
new file mode 100644 (file)
index 0000000..df5e9cb
--- /dev/null
@@ -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;
index 2b2ba314f88b04a87fd0b78cb0e4358ab8b7bcdf..848733503d47846806d02a251f0f872205017c6b 100644 (file)
@@ -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();
 }