feat: server bundle and prediction stub

package.json

@@ -7,6 +7,7 @@
     "dev": "npm run vite",
     "build": "npm run vite build",
     "preview": "npm run vite preview",
+    "server": "esbuild src/net/server/socket.js --bundle --format=esm --alias:@=`pwd`/src --platform=node --external:./node_modules/* | node --input-type=module -",
     "start": "npm run dev",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",

src/constants.js

@@ -1,5 +1,7 @@
 export const CLIENT_LATENCY = 100;
 
+export const CLIENT_PREDICTION = true;
+
 export const RESOLUTION = [
   800,
   450,

src/net/client/local.js

@@ -2,7 +2,10 @@ import Client from './client.js';
 
 export default class LocalClient extends Client {
   async connect() {
-    this.worker = new Worker('/net/server/worker.js', {type: 'module'});
+    this.worker = new Worker(
+      '/net/server/worker.js',
+      {type: 'module'},
+    );
     this.worker.onmessage = (event) => {
       this.accept(event.data);
     };

src/net/client/prediction.js

@@ -0,0 +1,14 @@
+const socket = new WebSocket(`ws://${location.host}/ws`);
+socket.binaryType = 'arraybuffer';
+
+await new Promise((resolve) => {
+  socket.onopen = resolve;
+});
+
+socket.onmessage = (event) => {
+  postMessage(event.data);
+};
+
+onmessage = (event) => {
+  socket.send(event.data);
+};

src/net/client/remote.js

@@ -1,17 +1,44 @@
+import {CLIENT_PREDICTION} from '@/constants.js';
+
 import Client from './client.js';
 
 export default class RemoteClient extends Client {
+  constructor() {
+    super();
+    if (CLIENT_PREDICTION) {
+      this.worker = undefined;
+    }
+    else {
+      this.socket = undefined;
+    }
+  }
   async connect() {
-    this.socket = new WebSocket(`ws://${window.location.host}/ws`);
-    this.socket.binaryType = 'arraybuffer';
-    this.socket.onmessage = (event) => {
-      this.accept(event.data);
-    };
-    await new Promise((resolve) => {
-      this.socket.onopen = resolve;
-    });
+    if (CLIENT_PREDICTION) {
+      this.worker = new Worker(
+        '/net/client/prediction.js',
+        {type: 'module'},
+      );
+      this.worker.onmessage = (event) => {
+        this.accept(event.data);
+      };
+    }
+    else {
+      this.socket = new WebSocket(`ws://${window.location.host}/ws`);
+      this.socket.binaryType = 'arraybuffer';
+      this.socket.onmessage = (event) => {
+        this.accept(event.data);
+      };
+      await new Promise((resolve) => {
+        this.socket.onopen = resolve;
+      });
+    }
   }
   transmit(packed) {
-    this.socket.send(packed);
+    if (CLIENT_PREDICTION) {
+      this.worker.postMessage(packed);
+    }
+    else {
+      this.socket.send(packed);
+    }
   }
 }

src/net/server/worker.js

@@ -9,4 +9,6 @@ server.start();
 
 server.connectPlayer(undefined);
 
-onmessage = (event) => { server.accept(undefined, event.data); };
+onmessage = (event) => {
+  server.accept(undefined, event.data);
+};