Display Dose Response on the page

dose-response.js

@@ -1,10 +1,8 @@
-var width = 80;
-var height = 60;
+var width = 63;
+var height = 43;
 var squareSize = 10;
 var c = document.createElement('canvas');
 
-
-
 c.width = width*squareSize;
 c.height = height*squareSize;
 document.body.append(c);
@@ -24,12 +22,24 @@ fetch('target/wasm32-unknown-unknown/release/dose-response.wasm')
     env: {
       draw: function(ptr, len) {
         console.log("Called draw with ptr:", ptr, "len:", len);
+        if(len % 6 != 0) {
+          throw new Error("The drawcalls vector must have a multiple of 6 elements!");
+        }
 
         memory = new Uint8Array(wasm_instance.exports.memory.buffer, ptr, len);
         console.log("memory:", memory);
 
-        for(let n of memory.values()) {
-          console.log(n);
+        for(let i = 0; i < len; i += 6) {
+          let x = memory[i + 0];
+          let y = memory[i + 1];
+          let glyph = String.fromCharCode(memory[i + 2]);
+          let r = memory[i + 3];
+          let g = memory[i + 4];
+          let b = memory[i + 5];
+
+          ctx.fillStyle = `rgb(${r},${g},${b})`;
+          ctx.clearRect(x * squareSize, y * squareSize, squareSize, squareSize);
+          ctx.fillText(glyph, x*squareSize + squareSize / 2, y*squareSize + squareSize / 2);
         }
 
       }

src/main.rs

@@ -405,8 +405,24 @@ pub fn update(state_ptr: *mut State) {
     );
 
 
-    //  TODO: put the data from real drawcalls here
-    let js_drawcalls = vec![42; 10];
+    // Each "drawcall" will be 6 u8 values: x, y, char, r, g, b
+    let mut js_drawcalls = Vec::with_capacity(drawcalls.len() * 6);
+    for dc in &drawcalls {
+        match dc {
+            &engine::Draw::Char(point, glyph, color) => {
+                assert!(point.x >= 0 && point.x < 255);
+                assert!(point.y >= 0 && point.y < 255);
+                assert!(glyph.is_ascii());
+                js_drawcalls.push(point.x as u8);
+                js_drawcalls.push(point.y as u8);
+                js_drawcalls.push(glyph as u8);
+                js_drawcalls.push(color.r);
+                js_drawcalls.push(color.g);
+                js_drawcalls.push(color.b);
+            }
+            _ => {}  // TODO
+        }
+    }
 
     #[allow(unsafe_code)]
     unsafe {