Devkit, devtools and developer experience improvements

devtools/web/src/components/palette/palette.ts

@@ -34,7 +34,7 @@ export class Wasm4Palette extends LitElement {
       ${this.heading && html`<h4>${this.heading}</h4>`}
       <div class="palette-grid">
         ${this.palette.slice(0, 4).map((color) => {
-          const colorHex = formatColor(color);
+          const colorHex = formatColor(color & 0xffffff);
 
           const shouldInvertColor =
             ((color & 0xff) + ((color >> 8) & 0xff) + (color >> 16)) / 3 > 128;

devtools/web/src/devtools-manager.ts

@@ -47,6 +47,7 @@ interface RuntimeInfo {
   wasmBufferByteLen: number;
 }
 
+const INTER_FRAME_TIME_BUFFER_SIZE = 30;
 export class DevtoolsManager {
   /**
    * @private
@@ -58,17 +59,19 @@ export class DevtoolsManager {
    */
   private _bufferedData = new BufferedRuntimeData();
 
-  private _fpsBuffer : number[] = [0,0,0,0,0,0,0,0,0,0];
+  private _interFrameTimeBuffer : number[] = new Array(INTER_FRAME_TIME_BUFFER_SIZE).fill(1000/60);
   private _fpsBufferIdx = 0;
-  //calculate an average FPS for the last 10 frames
   private _calcAvgFPS = () => {
-    let sum = this._fpsBuffer[0];
-    for (let i = 1; i < 10; i++)
-      sum += this._fpsBuffer[i];
-    return Math.floor(sum / 10);
+    let totalFramesTimeMs = this._interFrameTimeBuffer[0];
+    for (let i = 1; i < INTER_FRAME_TIME_BUFFER_SIZE; i++)
+      totalFramesTimeMs += this._interFrameTimeBuffer[i];
+    return Math.round(INTER_FRAME_TIME_BUFFER_SIZE * 1000 / totalFramesTimeMs);
   }
   private _nextFPSBufferIdx = () => {
-    (this._fpsBufferIdx == 9) ? this._fpsBufferIdx = 0 : this._fpsBufferIdx++;
+    this._fpsBufferIdx++;
+    if (this._fpsBufferIdx == INTER_FRAME_TIME_BUFFER_SIZE) {
+      this._fpsBufferIdx = 0;
+    }
     return this._fpsBufferIdx;
   }
 
@@ -77,10 +80,10 @@ export class DevtoolsManager {
    */
   updateCompleted = <Info extends RuntimeInfo>(
     runtimeInfo: Info,
-    deltaFrame: number
+    interFrameTime: number
   ) => {
     if (this._enabled) {
-      this._fpsBuffer[this._nextFPSBufferIdx()] = 1_000 / deltaFrame;
+      this._interFrameTimeBuffer[this._nextFPSBufferIdx()] = interFrameTime;
       this._bufferedData.update(runtimeInfo.data);
       this._notifyUpdateCompleted(
         runtimeInfo.data,

runtimes/web/src/config-constants.ts

@@ -0,0 +1,7 @@
+/** True if the runtime is in Game Developer mode, with access to the devtools window. */
+// WASM4_GAMEDEV_MODE is defined in vite.config.ts
+export const GAMEDEV_MODE = WASM4_GAMEDEV_MODE;
+
+/** True if we're developers of the WASM4 runtime itself, and are running the runtime
+    using `npm start` or `vite` etc. */
+export const PLATFORM_DEVELOPER_MODE = import.meta.env.MODE === "development";

runtimes/web/src/constants.ts

@@ -1,4 +1,3 @@
-export const GAMEDEV_MODE = WASM4_GAMEDEV_MODE;
 export const WIDTH = 160;
 export const HEIGHT = 160;
 

runtimes/web/src/devkit.ts

@@ -1,4 +1,8 @@
-import * as constants from "./constants";
-export const websocket = constants.GAMEDEV_MODE
+import { GAMEDEV_MODE, PLATFORM_DEVELOPER_MODE } from "./config-constants";
+
+// The w4 CLI web socket only exists for gamedev mode.
+// But if we're running `npm start` or `vite` there is no w4 CLI to connect to,
+// but there is a vite websocket we may be fighting for, causing issues with vite.
+export const cli_websocket = GAMEDEV_MODE && !PLATFORM_DEVELOPER_MODE
     ? new WebSocket((location.protocol == "https:" ? "wss" : "ws") + "://" + location.host)
     : null;

runtimes/web/src/runtime.ts

@@ -5,6 +5,7 @@ import { Framebuffer } from "./framebuffer";
 import { WebGLCompositor } from "./compositor";
 import * as devkit from "./devkit";
 import { wasmPatchExportGlobals } from "./wasm-patch";
+import * as configConstants from "./config-constants";
 
 export class Runtime {
     canvas: HTMLCanvasElement;
@@ -120,7 +121,7 @@ export class Runtime {
         this.wasm = null;
 
         if (wasmBuffer.byteLength > limit) {
-            if (constants.GAMEDEV_MODE) {
+            if (configConstants.GAMEDEV_MODE) {
                 if (!this.warnedFileSize) {
                     this.warnedFileSize = true;
                     this.print(`Warning: Cart is larger than ${limit} bytes. Ensure the release build of your cart is small enough to be bundled.`);
@@ -262,8 +263,8 @@ export class Runtime {
     }
 
     printToServer (str: string) {
-        if (devkit.websocket != null && devkit.websocket.readyState == 1) {
-            devkit.websocket.send(str);
+        if (devkit.cli_websocket != null && devkit.cli_websocket.readyState == 1) {
+            devkit.cli_websocket.send(str);
         }
     }
 

runtimes/web/src/ui/app.ts

@@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit";
 import { customElement, state, query } from 'lit/decorators.js';
 
 import * as constants from "../constants";
+import * as configConstants from "../config-constants";
 import * as devkit from "../devkit";
 import * as utils from "./utils";
 import * as z85 from "../z85";
@@ -141,7 +142,7 @@ export class App extends LitElement {
                 // Nothing
             },
         };
-        if (constants.GAMEDEV_MODE) {
+        if (configConstants.GAMEDEV_MODE) {
             devtoolsManager = await import('@wasm4/web-devtools').then(({ DevtoolsManager}) => new DevtoolsManager());
         }
 
@@ -153,8 +154,8 @@ export class App extends LitElement {
             this.copyNetplayLink();
         }
 
-        if (constants.GAMEDEV_MODE) {
-            devkit.websocket?.addEventListener("message", async event => {
+        if (configConstants.GAMEDEV_MODE) {
+            devkit.cli_websocket?.addEventListener("message", async event => {
                 switch (event.data) {
                 case "reload":
                     this.resetCart(await loadCartWasm());
@@ -481,8 +482,7 @@ export class App extends LitElement {
 
                 runtime.composite();
 
-                if (constants.GAMEDEV_MODE) {
-                    // FIXED(2023-12-13): Pass the correct FPS for display                    
+                if (configConstants.GAMEDEV_MODE) {              
                     devtoolsManager.updateCompleted(runtime, timeFrameStart - lastTimeFrameStart);
                     lastTimeFrameStart = timeFrameStart;
                 }