Events queue

x0k · Feb 21, 2024 · 2831744 · 2831744
1 parent 82e10fd
commit 2831744
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ We have no plans to replace the official Emscripten version of Raylib. This is a
 The demo is deployed to GitHub pages: https://tsoding.github.io/raylib.js/ But you can run it locally.
 
 ```console
-$ python3 -m http.server 6969
+$ python3 server.py
 $ <browser> http://localhost:6969/
 ```
 

diff --git a/index.html b/index.html
@@ -56,9 +56,17 @@
             font-family: grixel;
             src: url(fonts/acme_7_wide_xtnd.woff);
         }
+
+        .warning-msg {
+            color: red;
+            font-weight: bold;
+        }
     </style>
 </head>
 <body>
+    <div id="buffer-warning" class="warning-msg">
+        SharedArrayBuffer is not available.
+    </div>
     <label for="raylib-example-select">Choose an Example:</label>
     <select id="raylib-example-select" class="raylib-select" onchange="run()">
         <!-- This is populated by js -->
@@ -193,6 +201,12 @@
             }
         }
 
+        function makeWarningShower(element) {
+            return () => {
+                element.style.display = window.SharedArrayBuffer ? "none" : "block";
+            }
+        }
+
         const wasmPaths = {
             "tsoding": ["tsoding_ball", "tsoding_snake",],
             "core": ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel",],
@@ -298,7 +312,11 @@
                 isValid: (value) => value in renderers
             }
         )
+        const showWarning = makeWarningShower(
+            document.getElementById("buffer-warning")
+        )
         window.run = () => {
+            showWarning()
             updateQuery()
             run()
         }
@@ -314,7 +332,7 @@
                         <p>Please navigate to this location using a web server.</p>
                         <p>If you have Python 3 on your system you can just do:</p>
                     </div>
-                    <code>$ python3 -m http.server 6969</code>
+                    <code>$ python3 server.py</code>
                 </div>
                 `;
         })

diff --git a/raylib_worker.js b/raylib_worker.js
@@ -283,7 +283,9 @@ export class RaylibJsWorker {
             platform.addFont(new FontFace(family, source), source)
         }
 
-        const eventsBuffer = new SharedArrayBuffer(4096)
+        const eventsBuffer = window.SharedArrayBuffer
+            ? new SharedArrayBuffer(1024)
+            : new ArrayBuffer(1024)
         this.eventsQueue = new EventsQueue(eventsBuffer)
         this.eventsSender = {
             [IMPL.GAME_FRAME]: (event) => this.worker.postMessage(event),
@@ -419,14 +421,31 @@ class EventsQueue extends SharedQueue {
   }
 
   push({ type, data }) {
-    // TODO: properly encode the mouse position
-    super.push((MESSAGE_TYPE_TO_EVENT_TYPE[type] << 16) | data)
+    const t = MESSAGE_TYPE_TO_EVENT_TYPE[type]
+    super.push(t)
+    switch (type) {
+    case REQUEST_MESSAGE_TYPE.MOUSE_MOVE: {
+        super.push(data.x)
+        super.push(data.y)
+        return
+    }
+    default:
+        super.push(data)
+    }
   }
 
   pop(handler) {
-    super.pop((el) => handler({
-        type: el >> 16,
-        data: el & 0xffff
-    }))
+    const gen = super.read()
+    for (const type of gen) {
+        switch(type) {
+        case EVENT_TYPE.MOUSE_MOVE:
+            const x = gen.next().value
+            const y = gen.next().value
+            handler({ type, data: { x, y } })
+            break
+        default:
+            handler({ type, data: gen.next().value })
+        }
+    }
   }
 }
diff --git a/shared_queue.js b/shared_queue.js
@@ -39,4 +39,14 @@ export class SharedQueue {
     }
   }
 
+  *read() {
+    this.index = Atomics.load(this.array, this.lastIndex)
+    if (this.index === this.lastIndex) {
+      return
+    }
+    while (this.index !== this.nextLastIndex()) {
+      yield this.array[this.lastIndex]
+    }
+  }
+
 }