aduros · majaha · Jun 6, 2024 · May 29, 2024 · Jun 21, 2024 · Jun 21, 2024
diff --git a/cli/lib/server.js b/cli/lib/server.js
@@ -41,7 +41,17 @@ async function start (cartFile, opts) {
     }
 
     // Serve the WASM-4 developer runtime.
-    app.use(express.static(path.resolve(__dirname, "../assets/runtime/developer-build")));
+    app.use(express.static(
+        path.resolve(__dirname, "../assets/runtime/developer-build"),
+        {
+            setHeaders: function (res, path, stat) {
+                // These COOP and COEP headers allow us to get high-precision time.
+                // https://developer.mozilla.org/en-US/docs/Web/API/Performance/now#security_requirements
+                res.set("Cross-Origin-Opener-Policy", "same-origin");
+                res.set("Cross-Origin-Embedder-Policy", "require-corp");
+            }
+        }
+    ));
 
 
     const first_port = opts.port;

diff --git a/devtools/web/package-lock.json b/devtools/web/package-lock.json
diff --git a/devtools/web/package.json b/devtools/web/package.json
@@ -34,7 +34,6 @@
     "@types/lodash-es": "^4.17.12"
   },
   "devDependencies": {
-    "@types/node": "^20.11.16",
     "prettier": "3.2.4",
     "rimraf": "5.0.5",
     "rollup-plugin-postcss-lit": "^2.1.0",

diff --git a/devtools/web/tsconfig.json b/devtools/web/tsconfig.json
@@ -17,7 +17,8 @@
     "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,
     "useDefineForClassFields": false,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "types": []
   },
   "include": ["src/**/*.ts"],
   "exclude": []

diff --git a/runtimes/web/index.html b/runtimes/web/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
-  <link rel="shortcut icon" href="https://wasm4.org/img/favicon.ico">
+  <link rel="shortcut icon" href="favicon.ico">
   <title>WASM-4 web runtime dev</title>
 </head>
 <body>

diff --git a/runtimes/web/package-lock.json b/runtimes/web/package-lock.json
diff --git a/runtimes/web/package.json b/runtimes/web/package.json
@@ -20,7 +20,6 @@
     "lit": "^3.1.2"
   },
   "devDependencies": {
-    "@types/node": "^20.11.16",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "concurrently": "8.2.2",

diff --git a/runtimes/web/public/favicon.ico b/runtimes/web/public/favicon.ico
@@ -0,0 +1 @@
+../../../site/static/img/favicon.ico
diff --git a/runtimes/web/public/index.html b/runtimes/web/public/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
-  <link rel="shortcut icon" href="https://wasm4.org/img/favicon.ico">
+  <link rel="shortcut icon" href="favicon.ico">
   <title>WASM-4 Cart</title>
   <link rel="stylesheet" href="wasm4.css">
 </head>

diff --git a/runtimes/web/src/apu.ts b/runtimes/web/src/apu.ts
@@ -12,6 +12,7 @@ export class APU {
     audioCtx: AudioContext;
     processor!: APUProcessor;
     processorPort!: MessagePort;
+    paused: boolean = false;
 
     constructor () {
         this.audioCtx = new (window.AudioContext || window.webkitAudioContext)({
@@ -73,17 +74,29 @@ export class APU {
         }
     }
 
-    unlockAudio () {
+    unpauseAudio () {
+        this.paused = false;
         const audioCtx = this.audioCtx;
         if (audioCtx.state == "suspended") {
             audioCtx.resume();
         }
     }
 
     pauseAudio () {
+        this.paused = true;
         const audioCtx = this.audioCtx;
         if (audioCtx.state == "running") {
             audioCtx.suspend();
         }
     }
+
+    // Most web browsers won't play audio until the user has interacted with the web page.
+    // Even if there are already pending Promises from an AudioContext.resume() call when the
+    // page gets interaction, apparently the AudioContext still needs to be poked with a
+    // resume() call to start playing.
+    pokeAudio () {
+        if (!this.paused) {
+            this.audioCtx.resume();
+        }
+    }
 }
diff --git a/runtimes/web/src/runtime.ts b/runtimes/web/src/runtime.ts
@@ -90,14 +90,18 @@ export class Runtime {
         return this.data.getUint8(constants.ADDR_SYSTEM_FLAGS) & mask;
     }
 
-    unlockAudio () {
-        this.apu.unlockAudio();
+    unpauseAudio () {
+        this.apu.unpauseAudio();
     }
 
-    pauseAudio() {
+    pauseAudio () {
         this.apu.pauseAudio();
     }
 
+    pokeAudio () {
+        this.apu.pokeAudio();
+    }
+
     reset (zeroMemory?: boolean) {
         // Initialize default color table and palette
         const mem32 = new Uint32Array(this.memory.buffer);

diff --git a/runtimes/web/src/ui/app.ts b/runtimes/web/src/ui/app.ts
@@ -8,6 +8,7 @@ import * as z85 from "../z85";
 import { Netplay, DEV_NETPLAY } from "../netplay";
 import { Runtime } from "../runtime";
 import { State } from "../state";
+import { callAt60Hz } from "../update-timing";
 
 import { MenuOverlay } from "./menu-overlay";
 import { Notifications } from "./notifications";
@@ -83,7 +84,7 @@ export class App extends LitElement {
         }
 
         // Try to begin playing audio
-        this.runtime.unlockAudio();
+        this.runtime.pokeAudio();
     }
 
     constructor () {
@@ -261,8 +262,8 @@ export class App extends LitElement {
 
             const down = (event.type == "keydown");
 
-            // Poke WebAudio
-            runtime.unlockAudio();
+            // Try to begin playing audio
+            runtime.pokeAudio();
 
             // We're using the keyboard now, hide the mouse cursor for extra immersion
             document.body.style.cursor = "none";
@@ -427,13 +428,7 @@ export class App extends LitElement {
             }
         }
 
-        // When we should perform the next update
-        let timeNextUpdate = performance.now();
-        // Track the timestamp of the last frame
-        let lastTimeFrameStart = timeNextUpdate;
-
-        const onFrame = (timeFrameStart: number) => {
-            requestAnimationFrame(onFrame);
+        const doUpdate = (interFrameTime: number | null) => {
 
             pollPhysicalGamepads();
             let input = this.inputState;
@@ -450,45 +445,28 @@ export class App extends LitElement {
                 }
             }
 
-            let calledUpdate = false;
-
-            // Prevent timeFrameStart from getting too far ahead and death spiralling
-            if (timeFrameStart - timeNextUpdate >= 200) {
-                timeNextUpdate = timeFrameStart;
-            }
-
-            while (timeFrameStart >= timeNextUpdate) {
-                timeNextUpdate += 1000/60;
-
-                if (this.netplay) {
-                    if (this.netplay.update(input.gamepad[0])) {
-                        calledUpdate = true;
-                    }
-
-                } else {
-                    // Pass inputs into runtime memory
-                    for (let playerIdx = 0; playerIdx < 4; ++playerIdx) {
-                        runtime.setGamepad(playerIdx, input.gamepad[playerIdx]);
-                    }
-                    runtime.setMouse(input.mouseX, input.mouseY, input.mouseButtons);
-                    runtime.update();
-                    calledUpdate = true;
+            if (this.netplay) {
+                this.netplay.update(input.gamepad[0]);
+            } else {
+                // Pass inputs into runtime memory
+                for (let playerIdx = 0; playerIdx < 4; ++playerIdx) {
+                    runtime.setGamepad(playerIdx, input.gamepad[playerIdx]);
                 }
+                runtime.setMouse(input.mouseX, input.mouseY, input.mouseButtons);
+                runtime.update();
             }
 
-            if (calledUpdate) {
-                this.hideGamepadOverlay = !!runtime.getSystemFlag(constants.SYSTEM_HIDE_GAMEPAD_OVERLAY);
+            this.hideGamepadOverlay = !!runtime.getSystemFlag(constants.SYSTEM_HIDE_GAMEPAD_OVERLAY);
 
-                runtime.composite();
+            runtime.composite();
 
-                if (constants.GAMEDEV_MODE) {
-                    // FIXED(2023-12-13): Pass the correct FPS for display                    
-                    devtoolsManager.updateCompleted(runtime, timeFrameStart - lastTimeFrameStart);
-                    lastTimeFrameStart = timeFrameStart;
+            if (constants.GAMEDEV_MODE) {
+                if (interFrameTime !== null) {
+                    devtoolsManager.updateCompleted(runtime, interFrameTime);
                 }
             }
         }
-        requestAnimationFrame(onFrame);
+        callAt60Hz(doUpdate);
     }
 
     onMenuButtonPressed () {
@@ -497,12 +475,19 @@ export class App extends LitElement {
             this.inputState.gamepad[0] |= constants.BUTTON_X;
         } else {
             this.showMenu = true;
+            // During netplay, opening the menu doesn't pause the game, so shouldn't
+            // pause the audio either. Also, when audio is paused, the browser is
+            // more likely to throttle our update rate when we're in the background.
+            if (!this.netplay) {
+                this.runtime.pauseAudio();
+            }
         }
     }
 
     closeMenu () {
         if (this.showMenu) {
             this.showMenu = false;
+            this.runtime.unpauseAudio();
 
             // Kind of a hack to prevent the button press to close the menu from being passed
             // through to the game