Add SharedData to share data more easily

AntonPieper · AntonPieper · commit cf05fa83a96f · 2024-02-23T11:47:13.000+01:00
- automatically creates properties on both sides
- types are synchronized for IDE users
diff --git a/SharedData.js b/SharedData.js
@@ -0,0 +1,95 @@
+/**
+ * @typedef {keyof typeof SchemaType} SchemaKey
+ * @typedef {(typeof SchemaType)[SchemaKey]} SchemaType
+ */
+export const SchemaType = {
+    u8: Uint8Array,
+    i32: Int32Array,
+    u32: Uint32Array,
+    f32: Float32Array,
+    f64: Float64Array,
+};
+
+/**
+ * @typedef {Record<string, { type: SchemaKey, count: number}} Schema
+ *//**
+ * @typedef {{schema: T, buffer: SharedArrayBuffer}} SharedBufferData
+ * @template {Schema} T
+ */
+
+/**
+ * Schema builder.
+ */
+export class DataSchema {
+    /** @param {Schema} schema  */
+    static byteSize(schema) {
+        return Object.values(schema).reduce((acc, el) => {
+            const bytes = SchemaType[el.type].BYTES_PER_ELEMENT;
+            const mod = acc % bytes;
+            if (mod !== 0) {
+                acc += bytes - mod;
+            }
+            acc += bytes * el.count;
+            return acc;
+        }, 0);
+    }
+
+    /**
+     * @returns {SharedBufferData} The data to be sahred across workers.
+     */
+    build() {
+        return {
+            schema: this.schema,
+            buffer: new SharedArrayBuffer(this.byteSize()),
+        };
+    }
+
+    /**
+     * Build a schema.
+     * @param {T} schema
+     * @template {Record<string, [SchemaKey, number] | SchemaKey>} T
+     * @returns {{[P in keyof T]: T[P] extends string ? {type: T[P], count: 1} : {type: T[P][0], count: T[P][1]}}
+     */
+    static buildSchema(schema) {
+        const result = {};
+        for (const key in schema) {
+            if (typeof schema[key] === "string") {
+                result[key] = { type: schema[key], count: 1 };
+            } else {
+                result[key] = { type: schema[key][0], count: schema[key][1] };
+            }
+        }
+        return result;
+    }
+    /**
+     * @param {T} schema
+     * @template {Parameters<typeof DataSchema.buildSchema>[0]} T
+     * @returns {SharedBufferData<ReturnType<typeof DataSchema.buildSchema<T>>}
+     */
+    static build(schema) {
+        const s = this.buildSchema(schema);
+        return { buffer: new SharedArrayBuffer(this.byteSize(s)), schema: s };
+    }
+
+    /**
+     * Build views around a schema.
+     * @param {{schema: T, buffer: SharedArrayBuffer}} data
+     * @template {Schema} T
+     * @returns {{[P in keyof T]: InstanceType<(typeof SchemaType)[T[P]["type"]]>}}
+     */
+    static view(data) {
+        let offset = 0;
+        const views = {};
+        for (const [name, el] of Object.entries(data.schema)) {
+            const constructor = SchemaType[el.type];
+            const bytes = constructor.BYTES_PER_ELEMENT;
+            const mod = offset % bytes;
+            if (mod !== 0) {
+                offset += bytes - mod;
+            }
+            views[name] = new constructor(data.buffer, offset, el.count);
+            offset += views[name].byteLength;
+        }
+        return views;
+    }
+}
diff --git a/index.html b/index.html
@@ -60,15 +60,15 @@
     </style>
     <!-- Hack for GitHub Pages found on https://github.com/orgs/community/discussions/13309#discussioncomment-3844940 -->
     <script src="enable-threads.js"></script>
-    <script src="raylib-wrapper.js"></script>
 </head>
 <body>
     <label for="raylib-example-select">Choose an Example:</label>
-        <select id="raylib-example-select" onchange="startRaylib(this.value)">
+        <select id="raylib-example-select">
         <!-- This is populated by js -->
         </select>
     <canvas id="game"></canvas>
-    <script>
+    <script type="module">
+        import RaylibJs from "./raylib-wrapper.js";
         const wasmPaths = {
             "tsoding": ["tsoding_ball", "tsoding_snake",],
             "core": ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel",],
@@ -87,6 +87,7 @@
             }
             raylibExampleSelect.innerHTML += "</optgroup>"
         }
+        raylibExampleSelect.onchange = (ev) => startRaylib(ev.currentTarget.value);
 
         const { protocol } = window.location;
         const isHosted = protocol !== "file:";
diff --git a/raylib-wrapper.js b/raylib-wrapper.js
@@ -1,10 +1,13 @@
-let frameCounter = 0;
+import EventWorker from "./EventWorker.js";
+import { DataSchema } from "./SharedData.js";
+
 function setListeners(eventWorker, handlers, ctx = handlers) {
     for (const prop in handlers) {
         eventWorker.setListener(prop, handlers[prop].bind(ctx));
     }
 }
-class RaylibJs {
+
+export default class RaylibJs {
     async start({ wasmPath, canvasId }) {
         /** @type {HTMLCanvasElement} */
         const canvas = document.getElementById(canvasId);
@@ -15,21 +18,19 @@ class RaylibJs {
         }
         this.ctx = canvas.getContext("bitmaprenderer");
         if (this.worker === undefined) {
-            this.worker = new (await import("./EventWorker.js")).default(
-                "./raylib.js",
-                { type: "module" },
-            );
+            this.worker = new EventWorker("./raylib.js", { type: "module" });
         } else {
             throw new Error("raylib.js worker already exists!");
         }
-
-        this.buffer = new SharedArrayBuffer(20);
-        const keys = new SharedArrayBuffer(GLFW_KEY_LAST + 1);
-        const mouse = new SharedArrayBuffer(4 * 3);
-        const boundingRect = new SharedArrayBuffer(4 * 4);
-        this.keys = new Uint8Array(keys);
-        this.mouse = new Float32Array(mouse);
-        this.boundingRect = new Float32Array(boundingRect);
+        const shared = DataSchema.build({
+            asyncFlag: "i32",
+            time: "f64",
+            stop: "u8",
+            keys: ["u8", GLFW_KEY_LAST + 1],
+            mouse: ["f32", 3],
+            boundingRect: ["f32", 4],
+        });
+        this.views = DataSchema.view(shared);
         // bind listeners
         setListeners(
             this.worker,
@@ -42,18 +43,18 @@ class RaylibJs {
         );
         window.addEventListener("keydown", (e) => {
             const key = glfwKeyMapping[e.code];
-            this.keys[~~(key / 8)] |= 1 << key % 8;
+            this.views.keys[~~(key / 8)] |= 1 << key % 8;
         });
         window.addEventListener("keyup", (e) => {
             const key = glfwKeyMapping[e.code];
-            this.keys[~~(key / 8)] &= ~(1 << key % 8);
+            this.views.keys[~~(key / 8)] &= ~(1 << key % 8);
         });
         window.addEventListener("mousemove", (e) => {
-            this.mouse[0] = e.clientX;
-            this.mouse[1] = e.clientY;
+            this.views.mouse[0] = e.clientX;
+            this.views.mouse[1] = e.clientY;
         });
         window.addEventListener("wheel", (e) => {
-            this.mouse[2] = e.deltaY;
+            this.views.mouse[2] = e.deltaY;
         });
 
         // Initialize raylib.js worker
@@ -65,18 +66,12 @@ class RaylibJs {
                 this.#setBoundingRect();
                 resolve();
             });
-            this.worker.send("init", {
-                wasmPath,
-                buffer: this.buffer,
-                keys,
-                mouse,
-                boundingRect,
-            });
+            this.worker.send("init", { wasmPath, shared });
         });
     }
 
     stop() {
-        new Uint8Array(this.buffer, this.buffer.byteLength - 1, 1).set([1]);
+        this.views.stop.set([1]);
         // TODO: gracefully shut down
         this.worker.terminate();
     }
@@ -95,20 +90,24 @@ class RaylibJs {
 
     #onRequestAnimationFrame() {
         requestAnimationFrame((timestamp) => {
-            new Float64Array(this.buffer, 8, 1).set([timestamp]);
+            this.views.time.set([timestamp]);
             this.#wake();
         });
     }
 
     #wake() {
-        const flag = new Int32Array(this.buffer, 0, 1);
-        Atomics.store(flag, 0, 1);
-        Atomics.notify(flag, 0);
+        Atomics.store(this.views.asyncFlag, 0, 1);
+        Atomics.notify(this.views.asyncFlag, 0);
     }
 
     #setBoundingRect() {
         const rect = this.ctx.canvas.getBoundingClientRect();
-        this.boundingRect.set([rect.left, rect.top, rect.width, rect.height]);
+        this.views.boundingRect.set([
+            rect.left,
+            rect.top,
+            rect.width,
+            rect.height,
+        ]);
     }
 }
 
diff --git a/raylib.js b/raylib.js
@@ -1,4 +1,5 @@
 import { registerWorkerEvents, reply } from "./EventWorker.js";
+import { DataSchema } from "./SharedData.js";
 
 if (typeof importScripts !== "function") {
     throw new Error("raylib.js should be run in a Worker!");
@@ -44,35 +45,25 @@ class RaylibJs {
         this.dt = undefined;
         this.targetFPS = 60;
         this.entryFunction = undefined;
-        this.prevKeys = new Uint8Array(0);
-        this.keys = new Uint8Array(0);
-        this.mouse = new Float32Array(3);
         this.images = [];
-        this.boundingRect = new Float32Array(4);
     }
 
     constructor() {
         this.#reset();
     }
     
     get quit() {
-      return new Uint8Array(this.buffer, this.buffer.byteLength - 1, 1)[0] !== 0;
+      return this.views.stop[0] !== 0;
     }
 
-    async start({wasmPath, buffer, keys, mouse, boundingRect}) {
+    async start({wasmPath, shared}) {
         if (this.wasm !== undefined) {
             console.error("The game is already running. Please stop() it first.");
             return;
         }
-        /** @type {SharedArrayBuffer} */
-        this.buffer = buffer;
-
-        this.keys = new Uint8Array(keys);
-        this.prevKeys = new Uint8Array(this.keys.length);
-        this.mouse = new Float32Array(mouse);
-        this.boundingRect = new Float32Array(boundingRect);
-        this.asyncFlag = new Int32Array(this.buffer, 0, 1);
-        this.timeBuffer = new Float64Array(this.buffer, 8, 1);
+        /** @type {import("./raylib-wrapper.js").default["views"]} */
+        this.views = DataSchema.view(shared);
+        this.prevKeys = new Uint8Array(this.views.keys);
 
         const canvas = new OffscreenCanvas(0, 0);
         this.ctx = canvas.getContext("2d");
@@ -90,7 +81,7 @@ class RaylibJs {
         await grixel.load();
 
         this.#wait(() => reply("requestAnimationFrame"));
-        this.previous = this.timeBuffer[0];
+        this.previous = this.views.time[0];
         this.#wait(() => reply("requestAnimationFrame"));
         reply("initialized");
 
@@ -103,15 +94,15 @@ class RaylibJs {
     }
 
     get currentMouseWheelMoveState() {
-        return Math.sign(-this.mouse[2]);
+        return Math.sign(-this.views.mouse[2]);
     }
 
     set currentMouseWheelMoveState(v) {
-        this.mouse[2] = v;
+        this.views.mouse[2] = v;
     } 
 
     get currentMousePosition() {
-        return { x: this.mouse[0], y: this.mouse[1] };
+        return { x: this.views.mouse[0], y: this.views.mouse[1] };
     }
 
     InitWindow(width, height, title_ptr) {
@@ -151,13 +142,13 @@ class RaylibJs {
     }
 
     BeginDrawing() {
-        const timestamp = this.timeBuffer[0];
+        const timestamp = this.views.time[0];
         this.dt = (timestamp - this.previous)/1000.0;
         this.previous = timestamp;
     }
 
     EndDrawing() {
-        this.prevKeys.set(this.keys);
+        this.prevKeys.set(this.views.keys);
         this.currentMouseWheelMoveState = 0.0;
         const img = this.ctx.canvas.transferToImageBitmap();
         this.ctx.drawImage(img, 0, 0);
@@ -206,15 +197,15 @@ class RaylibJs {
     }
 
     IsKeyPressed(key) {
-        return !this.#isBitSet(this.prevKeys, key) && this.#isBitSet(this.keys, key);
+        return !this.#isBitSet(this.prevKeys, key) && this.IsKeyPressed(key);
     }
 
     #isBitSet(arr, place) {
         return arr[~~(place / 8)] & (1 << (place % 8)) !== 0;
     }
 
     IsKeyDown(key) {
-        return this.#isBitSet(this.keys, key);
+        return this.#isBitSet(this.views.keys, key);
     }
 
     GetMouseWheelMove() {
@@ -246,7 +237,7 @@ class RaylibJs {
     }
 
     GetMousePosition(result_ptr) {
-        const bcrect = this.boundingRect;
+        const bcrect = this.views.boundingRect;
         const x = this.currentMousePosition.x - bcrect[0];
         const y = this.currentMousePosition.y - bcrect[1];
 
@@ -376,9 +367,9 @@ class RaylibJs {
     }
     
     #wait(cmd) {
-        Atomics.store(this.asyncFlag, 0, 0);
+        Atomics.store(this.views.asyncFlag, 0, 0);
         cmd?.();
-        Atomics.wait(this.asyncFlag, 0, 0);
+        Atomics.wait(this.views.asyncFlag, 0, 0);
     }
     
     memcpy(dest_ptr, src_ptr, count) {
