Implement motion_gotoxy and some pen blocks (#6)

* add scratch-renderer

* make scratch-render work

* add some pen functionality to test project

* add some pen blocks to ir and wasm gen; not implemented n runtime yet

* start to move all runtime js out of rust
blocked by rustwasm/wasm-bindgen@4d4851d

* use latest (unreleased) version of wasm-bindgen

* stub js implementations for pen

* fix README table formatting

* fix everything being broken

* attempt to use drawables corrwctly

* make the render work

* store sprite info, implement pen_setcolor

* implement pen_setColorParamTo

* fi actualx pen colour not bein used in pen_penDown

* get rid of some typescript lint errors

* remove unused `use`s

* attempt to store sprite info in linear memory instead of js

* account for sprite info when finding threads offset

* correctly reset redrawrequested

* start to implement hsv->rgb in wasm

* finish implementing hsv-rbg in wasm gen

* fix some stu by e.g. using f32s rather than f64s

* format & start mini refactor

* fix some stuff

* add supc_locals constants

* fix hsv->rgb

* move pen_setPenSizeTo to wasm

* start implementing motion_goto

* fix motion_gotoxy

Cargo.toml

@@ -8,13 +8,16 @@ serde = { version = "1.0", default-features = false, features = ["derive", "allo
 serde_json = { version = "1.0", default-features = false, features = ["alloc"] }
 enum-field-getter = { path = "enum-field-getter" }
 wasm-encoder = "0.25.0"
-wasm-bindgen = "0.2.84"
+wasm-bindgen = { git = "https://github.com/rustwasm/wasm-bindgen.git" }
 indexmap = { version = "2.0.0", default-features = false }
 hashers = "1.0.1"
 uuid = { version = "1.4.1", default-features = false, features = ["v4", "js"] }
 
-[dev-dependencies]
-reqwest = { version = "0.11", features = ["blocking"] }
+[patch.crates-io]
+wasm-bindgen = { git = "https://github.com/rustwasm/wasm-bindgen.git" }
+
+#[dev-dependencies]
+#reqwest = { version = "0.11", features = ["blocking"] }
 
 [lib]
 crate-type = ["cdylib", "rlib"]

README.md

@@ -26,22 +26,39 @@ The build script has additonal configuration options; run `./build.sh -h` for in
 | redraw_requested |                                 4                                  |    no     | if a redraw has been requested or not                                                                                                                                                                                                                                                                            |
 | thread_num | 4 | no | the number of currently running threads |
 | vars | 12 \* number of global & local variables | yes | see [variables](#variables) |
-| threads | 4 \* thread_num | imdices of the next step funcs of currently running threads |
+| sprite_info | 56 \* number of sprites (i.e. target num -1) | yes | see [sprite info](#sprite-info)
+| threads | 4 \* thread_num | no | imdices of the next step funcs of currently running threads |
 <!--|    pen        |                       360 \* 480 \* 4 = 691200                       |    yes    | present if pen is used; the pen layer: 4 bytes for each rgba pixel, from left to right, top to bottom                                                                                                                                                                                                              |
 | spriteData    |                      43(?) \* number of sprites                      |    yes    | for each sprite (**not target**), 4 bytes each (1 f32 each) for: x, y, size, direction, costume number, pitch, pan,layer number; plus 1 byte each for: colour effect, ghost effect, mosaic effect, whirl effect, pixelate effect, fisheye effect, brightness effect, volume, visibility, rotation style, draggable |
 | stageData     |                                  8                                   |    no     | 4 bytes each for: backdrop number; plus 1 byte each for: volume, video state, tempo, video transparency                                                                                                                                                                                                            |
 | cloneData     |                         43(?) \* 300 = 12900                         |    yes    | if a `create clone of ()` block is present, same as above, but for each clone.                                                                                                                                                                                                                                     |
 -->
 <!--| cloneVars     | 300 \* 12 \* max amount of local variables in any one sprite |    yes    | if clones can be present, local variables for those clones                                                                                                                                                                                                                                                         |
 -->
+### Sprite info
+
+| byte | type | name | description |
+| :--: | :--: | :--: | :---------: |
+| 0-7  | f64  |  x   | x pos       |
+| 8-15  | f64 |  y   | y pos       |
+| 16-19 | f32 | pen_color | hue of pen (0-100) |
+| 20-23 | f32 | pen_saturation | saturation of pen (0-100) |
+| 24-27 | f32 | pen_brightness | value of pen (0-100) |
+| 28-31 | f32 | pen_transparency | transparency of pen (0-100) |
+| 32-47 | f32(x4) | pen_color4f | rgba color of pen [(0-1)x4] |
+| 48-55 | f64 | pen_size | pen radius |
+| 56    | u8  | pen_down | whether the pen is down (1) or not (0) |
+| 57-63 | ?   | padding | padding |
+<!--| 56-57 | ?   | padding | padding |--> 
+
 ### Variables
 
 | byte | description                          |
 | :--: | :-----------------------------------: |
 | 0-3  | identifies the [type](#variable-types) of the variable  |
 | 4-11 | identifies the value of the variable |
 
-### Variable types
+#### Variable types
 
 | value |            type           | variable value type | value description                                                         |
 | :---: | :-----------------------: | :-----------------: | :-----------------------------------------------------------------------: |

playground/components/ProjectPlayer.vue

@@ -6,39 +6,49 @@
     <summary>An error occured whilst trying to load the project.</summary>
     {{ error }}
   </details>
-  <template v-else>
+  <!--<template v-else>-->
     <br>
     <br>
     <button @click="greenFlag">green flag</button> <button>stop</button>
-    <canvas width="480" height="360"></canvas>
+    <canvas width="480" height="360" ref="canvas"></canvas>
     <div id="hq-output">Project output:<br></div>
-  </template>
+  <!--</template>-->
 </template>
 
 <script setup>
-  import { sb3_to_wasm } from '@/../js/hyperquark.js';
-  import { ref, nextTick } from 'vue';
-  
+  import { sb3_to_wasm, WasmProject } from '@/../js/hyperquark.js';
+  import runProject from '@/lib/project-runner.js';
+  import { ref, onMounted } from 'vue';
+  const Renderer = window.ScratchRender;
   const props = defineProps(['json', 'title', 'author', 'assets']);
   let error = ref(null);
   let turbo = ref(false);
-  let wasm;
+  let canvas = ref(null);
+  let renderer;
+  let wasmProject;
   let start;
+  onMounted(() => {
+    renderer = new Renderer(canvas.value);
+  });
   try {
-    wasm = sb3_to_wasm(JSON.stringify(props.json));
-    start = eval(wasm);
-    if (!typeof start === 'function') {
-      throw start;
+    wasmProject = sb3_to_wasm(JSON.stringify(props.json));
+    if (!wasmProject instanceof WasmProject) {
+      throw new Error("unknown error occurred when compiling project");
     }
   } catch (e) {
     error.value = e.toString();
     if (e.stack) {
       error.value += '\n' + e.stack;
     }
   }
-  console.log(start);
   function greenFlag() {
-    start({ framerate: turbo ? Infinity : 30 }).then(_=>alert('done')).catch(e => {
+    runProject({
+      framerate: turbo ? Infinity : 30,
+      renderer,
+      wasm_bytes: wasmProject.wasm_bytes,
+      string_consts: wasmProject.string_consts,
+      target_names: wasmProject.target_names,
+    }).then(_=>alert('done')).catch(e => {
       error.value = e.toString();
       if (e.stack) {
         error.value += '\n' + e.stack;

playground/index.html

@@ -5,9 +5,12 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HyperQuark</title>
+    <script src="//cdn.jsdelivr.net/npm/eruda"></script>
+<script>eruda.init();</script>
   </head>
   <body>
     <div id="app"></div>
+    <script src="/renderer.js"></script>
     <script type="module" src="/main.js"></script>
   </body>
 </html>