fix: ecs change

app/client/interpolator.js

@@ -0,0 +1,111 @@
+export default class Interpolator {
+  duration = 0;
+  latest;
+  location = 0;
+  penultimate;
+  tracking = [];
+  accept(state) {
+    const packet = state;
+    if ('Tick' !== packet.type) {
+      postMessage(packet);
+      return;
+    }
+    this.penultimate = this.latest;
+    this.latest = packet;
+    this.tracking = [];
+    if (this.penultimate) {
+      this.duration = this.penultimate.payload.elapsed;
+      const [from, to] = [this.penultimate.payload.ecs, this.latest.payload.ecs];
+      for (const entityId in from) {
+        for (const componentName in from[entityId]) {
+          if (
+            ['Camera', 'Position'].includes(componentName)
+            && to[entityId]?.[componentName]
+          ) {
+            this.tracking.push({
+              entityId,
+              componentName,
+              properties: ['x', 'y'],
+            });
+          }
+        }
+      }
+    }
+    this.location = 0;
+  }
+  interpolate(elapsed) {
+    if (0 === this.tracking.length) {
+      return undefined;
+    }
+    this.location += elapsed;
+    const fraction = Math.min(1, this.location / this.duration);
+    const [from, to] = [this.penultimate.payload.ecs, this.latest.payload.ecs];
+    const interpolated = {};
+    for (const {entityId, componentName, properties} of this.tracking) {
+      if (!interpolated[entityId]) {
+        interpolated[entityId] = {};
+      }
+      if (!interpolated[entityId][componentName]) {
+        interpolated[entityId][componentName] = {};
+      }
+      for (const property of properties) {
+        if (
+          !(property in from[entityId][componentName])
+          || !(property in to[entityId][componentName])
+        ) {
+          continue;
+        }
+        interpolated[entityId][componentName][property] = (
+          from[entityId][componentName][property]
+          + (
+            fraction
+            * (to[entityId][componentName][property] - from[entityId][componentName][property])
+          )
+        );
+      }
+    }
+    return {
+      type: 'Tick',
+      payload: {
+        ecs: interpolated,
+        elapsed,
+        frame: this.penultimate.payload.frame + fraction,
+      },
+    };
+  }
+}
+
+let handle;
+const interpolator = new Interpolator();
+let last;
+
+const interpolate = (now) => {
+  const elapsed = (now - last) / 1000;
+  last = now;
+  const interpolated = interpolator.interpolate(elapsed);
+  if (interpolated) {
+    handle = requestAnimationFrame(interpolate);
+    postMessage(interpolated);
+  }
+  else {
+    handle = null;
+  }
+}
+
+onmessage = async (event) => {
+  interpolator.accept(event.data);
+  if (interpolator.penultimate && 'Tick' === event.data.type) {
+    postMessage({
+      type: 'Tick',
+      payload: {
+        ecs: interpolator.penultimate.payload.ecs,
+        elapsed: last ? (performance.now() - last) / 1000 : 0,
+        frame: interpolator.penultimate.payload.frame,
+      },
+    });
+    if (!handle) {
+      last = performance.now();
+      handle = requestAnimationFrame(interpolate);
+    }
+  }
+};

app/client/local.js

@@ -1,24 +1,84 @@
 import Client from '@/net/client.js';
+import {decode, encode} from '@/net/packets/index.js';
+import {CLIENT_INTERPOLATION, CLIENT_PREDICTION} from '@/util/constants.js';
 
 export default class LocalClient extends Client {
+  server = null;
+  interpolator = null;
+  predictor = null;
   async connect() {
-    this.worker = new Worker(
+    this.server = new Worker(
       new URL('../server/worker.js', import.meta.url),
       {type: 'module'},
     );
-    this.worker.addEventListener('message', (event) => {
+    if (CLIENT_INTERPOLATION) {
+      this.interpolator = new Worker(
+        new URL('./interpolator.js', import.meta.url),
+        {type: 'module'},
+      );
+      this.interpolator.addEventListener('message', (event) => {
+        this.accept(event.data);
+      });
+    }
+    if (CLIENT_PREDICTION) {
+      this.predictor = new Worker(
+        new URL('./predictor.js', import.meta.url),
+        {type: 'module'},
+      );
+      this.predictor.addEventListener('message', (event) => {
+        const [flow, packet] = event.data;
+        switch (flow) {
+          case 0: {
+            const packed = encode(packet);
+            this.throughput.$$up += packed.byteLength;
+            this.server.postMessage(packed);
+            break;
+          }
+          case 1: {
+            if (CLIENT_INTERPOLATION) {
+              this.interpolator.postMessage(packet);
+            }
+            else {
+              this.accept(packet);
+            }
+            break;
+          }
+        }
+      });
+    }
+    this.server.addEventListener('message', (event) => {
       if (0 === event.data) {
-        this.worker.terminate();
-        this.worker = undefined;
+        this.server.terminate();
+        this.server = null;
         return;
       }
-      this.accept(event.data);
+      this.throughput.$$down += event.data.byteLength;
+      const packet = decode(event.data);
+      if (CLIENT_PREDICTION) {
+        this.predictor.postMessage([1, packet]);
+      }
+      else if (CLIENT_INTERPOLATION) {
+        this.interpolator.postMessage(packet);
+      }
+      else {
+        this.accept(packet);
+      }
     });
   }
   disconnect() {
-    this.worker.postMessage(0);
+    this.server.postMessage(0);
+    if (CLIENT_INTERPOLATION) {
+      this.interpolator.terminate();
+    }
   }
-  transmit(packed) {
-    this.worker.postMessage(packed);
+  transmit(packet) {
+    if (CLIENT_PREDICTION) {
+      this.predictor.postMessage([0, packet]);
+    }
+    else {
+      const packed = encode(packet);
+      this.throughput.$$up += packed.byteLength;
+      this.server.postMessage(packed);
+    }
   }
 }

app/client/prediction.js

@@ -1,34 +0,0 @@
-import {encode} from '@/net/packets/index.js';
-import {withResolvers} from '@/util/promise.js';
-
-let connected = false;
-let socket;
-
-function onMessage(event) {
-  postMessage(event.data);
-}
-
-onmessage = async (event) => {
-  if (!connected) {
-    const url = new URL(`wss://${event.data.host}/ws`)
-    socket = new WebSocket(url.href);
-    socket.binaryType = 'arraybuffer';
-    const {promise, resolve} = withResolvers();
-    socket.addEventListener('open', resolve);
-    socket.addEventListener('error', () => {
-      postMessage(encode({type: 'ConnectionStatus', payload: 'aborted'}));
-      close();
-    });
-    await promise;
-    socket.removeEventListener('open', resolve);
-    socket.addEventListener('message', onMessage);
-    socket.addEventListener('close', () => {
-      postMessage(encode({type: 'ConnectionStatus', payload: 'aborted'}));
-      close();
-    });
-    postMessage(encode({type: 'ConnectionStatus', payload: 'connected'}));
-    connected = true;
-    return;
-  }
-  socket.send(event.data);
-};

app/client/predictor.js

@@ -0,0 +1,176 @@
+import {LRUCache} from 'lru-cache';
+
+import Components from '@/ecs/components/index.js';
+import Ecs from '@/ecs/ecs.js';
+import Systems from '@/ecs/systems/index.js';
+import {withResolvers} from '@/util/promise.js';
+
+const cache = new LRUCache({
+  max: 128,
+});
+
+class PredictionEcs extends Ecs {
+  async readAsset(uri) {
+    if (!cache.has(uri)) {
+      const {promise, resolve, reject} = withResolvers();
+      cache.set(uri, promise);
+      fetch(uri)
+        .then((response) => resolve(response.ok ? response.arrayBuffer() : new ArrayBuffer(0)))
+        .catch(reject);
+    }
+    return cache.get(uri);
+  }
+}
+
+const Flow = {
+  UP: 0,
+  DOWN: 1,
+};
+
+const Stage = {
+  UNACK: 0,
+  ACK: 1,
+  FINISHING: 2,
+  FINISHED: 3,
+};
+
+const actions = new Map();
+
+let ecs = new PredictionEcs({Components, Systems});
+
+let mainEntityId = 0;
+
+function applyClientActions(elapsed) {
+  if (actions.size > 0) {
+    const main = ecs.get(mainEntityId);
+    const {Controlled} = main;
+    const finished = [];
+    for (const [id, action] of actions) {
+      if (Stage.UNACK === action.stage) {
+        if (!Controlled.locked) {
+          switch (action.action.type) {
+            case 'moveUp':
+            case 'moveRight':
+            case 'moveDown':
+            case 'moveLeft': {
+              Controlled[action.action.type] = action.action.value;
+              break;
+            }
+          }
+        }
+        action.steps.push(elapsed);
+      }
+      if (Stage.FINISHING === action.stage) {
+        if (!Controlled.locked) {
+          switch (action.action.type) {
+            case 'moveUp':
+            case 'moveRight':
+            case 'moveDown':
+            case 'moveLeft': {
+              Controlled[action.action.type] = 0;
+              break;
+            }
+          }
+        }
+        action.stage = Stage.FINISHED;
+      }
+      if (Stage.FINISHED === action.stage) {
+        action.steps.shift();
+        if (0 === action.steps.length) {
+          finished.push(id);
+          continue;
+        }
+      }
+      let leap = 0;
+      for (const step of action.steps) {
+        leap += step;
+      }
+      if (leap > 0) {
+        ecs.predict(main, leap);
+      }
+    }
+    for (const id of finished) {
+      actions.delete(id);
+    }
+  }
+}
+
+let downPromise;
+
+const pending = new Map();
+
+onmessage = async (event) => {
+  const [flow, packet] = event.data;
+  switch (flow) {
+    case Flow.UP: {
+      switch (packet.type) {
+        case 'Action': {
+          switch (packet.payload.type) {
+            case 'moveUp':
+            case 'moveRight':
+            case 'moveDown':
+            case 'moveLeft': {
+              if (0 === packet.payload.value) {
+                const ack = pending.get(packet.payload.type);
+                const action = actions.get(ack);
+                action.stage = Stage.FINISHING;
+                pending.delete(packet.payload.type);
+              }
+              else {
+                const tx = {
+                  action: packet.payload,
+                  stage: Stage.UNACK,
+                  steps: [],
+                };
+                packet.payload.ack = Math.random();
+                pending.set(packet.payload.type, packet.payload.ack);
+                actions.set(packet.payload.ack, tx);
+              }
+            }
+          }
+          break;
+        }
+      }
+      postMessage([0, packet]);
+      break;
+    }
+    case Flow.DOWN: {
+      downPromise = Promise.resolve(downPromise).then(async () => {
+        switch (packet.type) {
+          case 'ActionAck': {
+            const action = actions.get(packet.payload.ack);
+            action.stage = Stage.ACK;
+            return;
+          }
+          case 'EcsChange': {
+            ecs = new PredictionEcs({Components, Systems});
+            break;
+          }
+          case 'Tick': {
+            for (const entityId in packet.payload.ecs) {
+              if (packet.payload.ecs[entityId]) {
+                if (packet.payload.ecs[entityId].MainEntity) {
+                  mainEntityId = parseInt(entityId);
+                }
+              }
+            }
+            await ecs.apply(packet.payload.ecs);
+            if (actions.size > 0) {
+              const main = ecs.get(mainEntityId);
+              const authoritative = structuredClone(main.toNet(main));
+              applyClientActions(packet.payload.elapsed);
+              if (ecs.diff[mainEntityId]) {
+                packet.payload.ecs[mainEntityId] = ecs.diff[mainEntityId];
+              }
+              await ecs.apply({[mainEntityId]: authoritative});
+            }
+            ecs.setClean();
+            break;
+          }
+        }
+        postMessage([1, packet]);
+      });
+      break;
+    }
+  }
+};

app/client/remote.js

@@ -1,63 +1,87 @@
 import Client from '@/net/client.js';
-import {encode} from '@/net/packets/index.js';
-import {CLIENT_PREDICTION} from '@/util/constants.js';
-import {withResolvers} from '@/util/promise.js';
+import {decode, encode} from '@/net/packets/index.js';
+import {CLIENT_INTERPOLATION, CLIENT_PREDICTION} from '@/util/constants.js';
 
 export default class RemoteClient extends Client {
-  constructor() {
-    super();
-    if (CLIENT_PREDICTION) {
-      this.worker = undefined;
-    }
-    else {
-      this.socket = undefined;
-    }
-  }
+  socket = null;
+  interpolator = null;
+  predictor = null;
   async connect(host) {
-    if (CLIENT_PREDICTION) {
-      this.worker = new Worker(
-        new URL('./prediction.js', import.meta.url),
+    this.interpolator = new Worker(
+      new URL('./interpolator.js', import.meta.url),
+      {type: 'module'},
+    );
+    if (CLIENT_INTERPOLATION) {
+      this.interpolator = new Worker(
+        new URL('./interpolator.js', import.meta.url),
         {type: 'module'},
       );
-      this.worker.postMessage({host});
-      this.worker.onmessage = (event) => {
+      this.interpolator.addEventListener('message', (event) => {
         this.accept(event.data);
-      };
+      });
     }
-    else {
-      const url = new URL(`wss://${host}/ws`)
-      this.socket = new WebSocket(url.href);
-      this.socket.binaryType = 'arraybuffer';
-      const onMessage = (event) => {
-        this.accept(event.data);
+    if (CLIENT_PREDICTION) {
+      this.predictor = new Worker(
+        new URL('./predictor.js', import.meta.url),
+        {type: 'module'},
+      );
+      this.predictor.addEventListener('message', (event) => {
+        const [flow, packet] = event.data;
+        switch (flow) {
+          case 0: {
+            const packed = encode(packet);
+            this.throughput.$$up += packed.byteLength;
+            this.socket.send(packed);
+            break;
+          }
+          case 1: {
+            if (CLIENT_INTERPOLATION) {
+              this.interpolator.postMessage(packet);
+            }
+            else {
+              this.accept(packet);
+            }
+            break;
+          }
+        }
+      });
+    }
+    const url = new URL(`wss://${host}/ws`)
+    this.socket = new WebSocket(url.href);
+    this.socket.binaryType = 'arraybuffer';
+    this.socket.addEventListener('message', (event) => {
+      this.throughput.$$down += event.data.byteLength;
+      const packet = decode(event.data);
+      if (CLIENT_PREDICTION) {
+        this.predictor.postMessage([1, packet]);
       }
-      const {promise, resolve} = withResolvers();
-      this.socket.addEventListener('open', resolve);
-      this.socket.addEventListener('error', () => {
-        this.accept(encode({type: 'ConnectionStatus', payload: 'aborted'}));
-      });
-      await promise;
-      this.socket.removeEventListener('open', resolve);
-      this.socket.addEventListener('message', onMessage);
-      this.socket.addEventListener('close', () => {
-        this.accept(encode({type: 'ConnectionStatus', payload: 'aborted'}));
-      });
-      this.accept(encode({type: 'ConnectionStatus', payload: 'connected'}));
-    }
+      else if (CLIENT_INTERPOLATION) {
+        this.interpolator.postMessage(packet);
+      }
+      else {
+        this.accept(packet);
+      }
+    });
+    this.socket.addEventListener('close', () => {
+      this.accept({type: 'ConnectionStatus', payload: 'aborted'});
+    });
+    this.socket.addEventListener('error', () => {
+      this.accept({type: 'ConnectionStatus', payload: 'aborted'});
+    });
+    this.accept({type: 'ConnectionStatus', payload: 'connected'});
   }
   disconnect() {
-    if (CLIENT_PREDICTION) {
-      this.worker.terminate();
-    }
-    else {
-      this.socket.close();
+    if (CLIENT_INTERPOLATION) {
+      this.interpolator.terminate();
     }
   }
-  transmit(packed) {
+  transmit(packet) {
     if (CLIENT_PREDICTION) {
-      this.worker.postMessage(packed);
+      this.predictor.postMessage([0, packet]);
     }
     else {
+      const packed = encode(packet);
+      this.throughput.$$up += packed.byteLength;
       this.socket.send(packed);
     }
   }

app/ecs/component.js

@@ -61,13 +61,13 @@ export default class Component {
         }
       }
     }
-    const keys = new Set(Object.keys(defaults));
     const promises = [];
     for (let i = 0; i < entries.length; ++i) {
       const [entityId, values] = entries[i];
       const instance = allocated[i];
       instance.entity = entityId;
       this.instances[entityId] = instance;
+      const keys = new Set(Object.keys(defaults));
       for (const key in values) {
         keys.delete(key);
       }
@@ -144,11 +144,22 @@ export default class Component {
         }
         Component.ecs.markChange(this.entity, {[Component.constructor.componentName]: values})
       }
+      toFullJSON() {
+        const {properties} = concrete;
+        const json = {};
+        for (const key in properties) {
+          json[key] = this[key];
+        }
+        return json;
+      }
       toNet(recipient, data) {
-        return data || Component.constructor.filterDefaults(this);
+        if (data) {
+          return data;
+        }
+        return this.toFullJSON();
       }
       toJSON() {
-        return Component.constructor.filterDefaults(this);
+        return this.toFullJSON();
       }
       async update(values) {
         for (const key in values) {

app/ecs/component.test.js

@@ -2,27 +2,28 @@ import {expect, test} from 'vitest';
 
 import Component from './component.js';
 
-test('creates instances', () => {
+const fakeEcs = {markChange() {}};
+
+test('creates instances', async () => {
   class CreatingComponent extends Component {
     static properties = {
       foo: {defaultValue: 'bar', type: 'string'},
     };
   }
-  const ComponentInstance = new CreatingComponent();
-  ComponentInstance.create(1);
+  const ComponentInstance = new CreatingComponent(fakeEcs);
+  await ComponentInstance.create(1);
   expect(ComponentInstance.get(1).entity)
     .to.equal(1);
 });
 
-test('does not serialize default values', () => {
+test('does not serialize default values', async () => {
   class CreatingComponent extends Component {
     static properties = {
       foo: {defaultValue: 'bar', type: 'string'}, bar: {type: 'uint8'},
     };
   }
-  const fakeEcs = {markChange() {}};
   const ComponentInstance = new CreatingComponent(fakeEcs);
-  ComponentInstance.create(1)
+  await ComponentInstance.create(1)
   expect(ComponentInstance.get(1).toJSON())
     .to.deep.equal({});
   ComponentInstance.get(1).bar = 1;
@@ -30,14 +31,14 @@ test('does not serialize default values', () => {
     .to.deep.equal({bar: 1});
 });
 
-test('reuses instances', () => {
+test('reuses instances', async () => {
   class ReusingComponent extends Component {
     static properties = {
       foo: {type: 'string'},
     };
   }
-  const ComponentInstance = new ReusingComponent();
-  ComponentInstance.create(1);
+  const ComponentInstance = new ReusingComponent(fakeEcs);
+  await ComponentInstance.create(1);
   const instance = ComponentInstance.get(1);
   ComponentInstance.destroy(1);
   expect(ComponentInstance.get(1))
@@ -46,7 +47,7 @@ test('reuses instances', () => {
     ComponentInstance.destroy(1);
   })
     .to.throw();
-  ComponentInstance.create(1);
+  await ComponentInstance.create(1);
   expect(ComponentInstance.get(1))
     .to.equal(instance);
 });

app/ecs/components/emitter.js

@@ -38,7 +38,7 @@ export default class EmitterComponent extends Component {
   }
   mergeDiff(original, update) {
     const merged = {};
-    if (update.emit) {
+    if (original.emit || update.emit) {
       merged.emit = {
         ...original.emit,
         ...update.emit,

app/ecs/components/interlocutor.js

@@ -3,7 +3,7 @@ import Component from '@/ecs/component.js';
 export default class Interlocutor extends Component {
   mergeDiff(original, update) {
     const merged = {};
-    if (update.dialogue) {
+    if (original.dialogue || update.dialogue) {
       merged.dialogue = {
         ...original.dialogue,
         ...update.dialogue,

app/ecs/components/sound.js

@@ -3,7 +3,7 @@ import Component from '@/ecs/component.js';
 export default class Sound extends Component {
   mergeDiff(original, update) {
     const merged = {};
-    if (update.play) {
+    if (original.play || update.play) {
       merged.play = [
         ...(original.play ?? []),
         ...update.play,

app/ecs/components/vulnerable.js

@@ -9,7 +9,7 @@ export const DamageTypes = {
 export default class Vulnerable extends Component {
   mergeDiff(original, update) {
     const merged = {};
-    if (update.damage) {
+    if (original.damage || update.damage) {
       merged.damage = {
         ...original.damage,
         ...update.damage,

app/ecs/ecs.js

@@ -23,8 +23,6 @@ export default class Ecs {
 
   deferredChanges = {}
 
-  $$deindexing = new Set();
-
   $$destructionDependencies = new Map();
 
   $$detached = new Set();
@@ -35,8 +33,6 @@ export default class Ecs {
 
   $$entityFactory = new EntityFactory();
 
-  $$reindexing = new Set();
-
   Systems = {};
 
   constructor({Systems, Components} = {}) {
@@ -145,9 +141,9 @@ export default class Ecs {
   attach(entityIds) {
     for (const entityId of entityIds) {
       this.$$detached.delete(entityId);
-      this.$$reindexing.add(entityId);
       this.applyDeferredChanges(entityId);
     }
+    this.reindex(entityIds);
   }
 
   changed(criteria) {
@@ -242,13 +238,13 @@ export default class Ecs {
     await Promise.all(promises);
     for (let i = 0; i < specificsList.length; i++) {
       const [entityId, components] = specificsList[i];
-      this.$$reindexing.add(entityId);
       this.rebuild(entityId, () => Object.keys(components));
       if (this.$$detached.has(entityId)) {
         continue;
       }
       this.applyDeferredChanges(entityId);
     }
+    this.reindex(entityIds);
     return entityIds;
   }
 
@@ -315,9 +311,8 @@ export default class Ecs {
 
   destroyMany(entityIds) {
     const destroying = {};
-    // this.deindex(entityIds);
+    this.deindex(entityIds);
     for (const entityId of entityIds) {
-      this.$$deindexing.add(entityId);
       if (!this.$$entities[entityId]) {
         throw new Error(`can't destroy non-existent entity ${entityId}`);
       }
@@ -333,15 +328,16 @@ export default class Ecs {
     }
     for (const entityId of entityIds) {
       delete this.$$entities[entityId];
+      delete this.deferredChanges[entityId];
       this.diff[entityId] = false;
     }
   }
 
   detach(entityIds) {
     for (const entityId of entityIds) {
-      this.$$deindexing.add(entityId);
       this.$$detached.add(entityId);
     }
+    this.deindex(entityIds);
   }
 
   get entities() {
@@ -381,9 +377,9 @@ export default class Ecs {
     }
     await Promise.all(promises);
     for (const [entityId, components] of entities) {
-      this.$$reindexing.add(entityId);
       this.rebuild(entityId, (componentNames) => [...new Set(componentNames.concat(Object.keys(components)))]);
     }
+    this.reindex(unique);
   }
 
   markChange(entityId, components) {
@@ -412,6 +408,16 @@ export default class Ecs {
     }
   }
 
+  predict(entity, elapsed) {
+    for (const systemName in this.Systems) {
+      const System = this.Systems[systemName];
+      if (!System.predict) {
+        continue;
+      }
+      System.predict(entity, elapsed);
+    }
+  }
+
   async readJson(uri) {
     const key = ['$$json', uri].join(':');
     if (!cache.has(key)) {
@@ -510,9 +516,9 @@ export default class Ecs {
       this.Components[componentName].destroyMany(removing[componentName]);
     }
     for (const [entityId, components] of entities) {
-      this.$$reindexing.add(entityId);
       this.rebuild(entityId, (componentNames) => componentNames.filter((type) => !components.includes(type)));
     }
+    this.reindex(unique);
   }
 
   static serialize(ecs, view) {
@@ -563,15 +569,6 @@ export default class Ecs {
         this.$$destructionDependencies.delete(entityId);
       }
     }
-    // update indices
-    if (this.$$deindexing.size > 0) {
-      this.deindex(this.$$deindexing);
-      this.$$deindexing.clear();
-    }
-    if (this.$$reindexing.size > 0) {
-      this.reindex(this.$$reindexing);
-      this.$$reindexing.clear();
-    }
   }
 
   toJSON() {
@@ -597,14 +594,12 @@ export default class Ecs {
     const updating = {};
     const unique = new Set();
     for (const [entityId, components] of entities) {
-      this.rebuild(entityId);
       for (const componentName in components) {
         if (!updating[componentName]) {
           updating[componentName] = [];
         }
         updating[componentName].push([entityId, components[componentName]]);
       }
-      this.$$reindexing.add(entityId);
       unique.add(entityId);
     }
     const promises = [];

app/ecs/ecs.test.js

@@ -3,25 +3,21 @@ import {expect, test} from 'vitest';
 import Component from './component.js';
 import Ecs from './ecs.js';
 import System from './system.js';
+import {wrapComponents} from './test-helper.js';
 
-function wrapProperties(name, properties) {
-  return class WrappedComponent extends Component {
-    static componentName = name;
-    static properties = properties;
-  };
-}
+const Components = wrapComponents([
+  ['Empty', {}],
+  ['Momentum', {x: {type: 'int32'}, y: {type: 'int32'}, z: {type: 'int32'}}],
+  ['Name', {name: {type: 'string'}}],
+  ['Position', {x: {type: 'int32', defaultValue: 32}, y: {type: 'int32'}, z: {type: 'int32'}}],
+]);
 
-const Empty = wrapProperties('Empty', {});
-
-const Name = wrapProperties('Name', {
-  name: {type: 'string'},
-});
-
-const Position = wrapProperties('Position', {
-  x: {type: 'int32', defaultValue: 32},
-  y: {type: 'int32'},
-  z: {type: 'int32'},
-});
+const {
+  Empty,
+  Momentum,
+  Position,
+  Name,
+} = Components;
 
 function asyncTimesTwo(x) {
   return new Promise((resolve) => {
@@ -131,11 +127,6 @@ test('inserts components into entities', async () => {
 });
 
 test('ticks systems', async () => {
-  const Momentum = wrapProperties('Momentum', {
-    x: {type: 'int32'},
-    y: {type: 'int32'},
-    z: {type: 'int32'},
-  });
   const ecs = new Ecs({
     Components: {Momentum, Position},
     Systems: {
@@ -350,10 +341,10 @@ test('applies update patches', async () => {
     .to.equal(128);
 });
 
-test('applies entity deletion patches', () => {
+test('applies entity deletion patches', async () => {
   const ecs = new Ecs({Components: {Position}});
-  ecs.createSpecific(16, {Position: {x: 64}});
-  ecs.apply({16: false});
+  await ecs.createSpecific(16, {Position: {x: 64}});
+  await ecs.apply({16: false});
   expect(Array.from(ecs.entities).length)
     .to.equal(0);
 });

app/ecs/query.test.js

@@ -1,23 +1,14 @@
 import {expect, test} from 'vitest';
 
-import Ecs from './ecs';
-import Component from './component.js';
+import Ecs from './ecs.js';
+import {wrapComponents} from './test-helper.js';
 import Query from './query.js';
 
-const Components = [
+const Components = wrapComponents([
   ['A', {a: {type: 'int32', defaultValue: 64}}],
   ['B', {b: {type: 'int32', defaultValue: 32}}],
   ['C', {c: {type: 'int32'}}],
-]
-  .reduce((Components, [componentName, properties]) => {
-    return {
-      ...Components,
-      [componentName]: class extends Component {
-        static componentName = componentName;
-        static properties = properties;
-      },
-    };
-  }, {})
+]);
 
 const ecsTest = test.extend({
   ecs: async ({}, use) => {

app/ecs/systems/apply-control-movement.js

@@ -3,6 +3,10 @@ import {normalizeVector} from '@/util/math.js';
 
 export default class ApplyControlMovement extends System {
 
+  predict(entity) {
+    this.tickSingle(entity);
+  }
+
   static get priority() {
     return {
       before: 'IntegratePhysics',
@@ -16,17 +20,25 @@ export default class ApplyControlMovement extends System {
   }
 
   tick() {
-    for (const {Controlled, Forces, Speed} of this.select('default')) {
-      if (!Controlled.locked) {
-        const movement = normalizeVector({
-          x: (Controlled.moveRight - Controlled.moveLeft),
-          y: (Controlled.moveDown - Controlled.moveUp),
-        });
-        Forces.applyImpulse({
-          x: Speed.speed * movement.x,
-          y: Speed.speed * movement.y,
-        });
-      }
+    for (const entity of this.select('default')) {
+      this.tickSingle(entity);
+    }
+  }
+
+  tickSingle(entity) {
+    const {Controlled, Forces, Speed} = entity;
+    if (!Controlled || !Forces | !Speed) {
+      return;
+    }
+    if (!Controlled.locked) {
+      const movement = normalizeVector({
+        x: (Controlled.moveRight - Controlled.moveLeft),
+        y: (Controlled.moveDown - Controlled.moveUp),
+      });
+      Forces.applyImpulse({
+        x: Speed.speed * movement.x,
+        y: Speed.speed * movement.y,
+      });
     }
   }
 

app/ecs/systems/control-direction.js

@@ -3,27 +3,39 @@ import {TAU} from '@/util/math.js';
 
 export default class ControlDirection extends System {
 
+  predict(entity) {
+    this.tickSingle(entity);
+  }
+
   tick() {
-    for (const {Controlled, Direction} of this.ecs.changed(['Controlled'])) {
-      const {locked, moveUp, moveRight, moveDown, moveLeft} = Controlled;
-      if (locked) {
-        continue;
-      }
-      if (
-        0 === moveRight
-        && 0 === moveDown
-        && 0 === moveLeft
-        && 0 === moveUp
-      ) {
-        continue;
-      }
-      Direction.direction = (
-        TAU + Math.atan2(
-          moveDown - moveUp,
-          moveRight - moveLeft,
-        )
-      ) % TAU;
+    for (const entity of this.ecs.changed(['Controlled'])) {
+      this.tickSingle(entity);
     }
   }
 
+  tickSingle(entity) {
+    const {Controlled, Direction} = entity;
+    if (!Controlled || !Direction) {
+      return;
+    }
+    const {locked, moveUp, moveRight, moveDown, moveLeft} = Controlled;
+    if (locked) {
+      return;
+    }
+    if (
+      0 === moveRight
+      && 0 === moveDown
+      && 0 === moveLeft
+      && 0 === moveUp
+    ) {
+      return;
+    }
+    Direction.direction = (
+      TAU + Math.atan2(
+        moveDown - moveUp,
+        moveRight - moveLeft,
+      )
+    ) % TAU;
+  }
+
 }

app/ecs/systems/follow-camera.js

@@ -5,6 +5,16 @@ import {System} from '@/ecs/index.js';
 
 export default class FollowCamera extends System {
 
+  predict(entity, elapsed) {
+    this.tickSingle(entity, elapsed);
+  }
+
+  static get priority() {
+    return {
+      after: 'IntegratePhysics',
+    };
+  }
+
   static queries() {
     return {
       default: ['Camera', 'Position'],
@@ -19,11 +29,15 @@ export default class FollowCamera extends System {
   }
 
   tick(elapsed) {
-    for (const {id} of this.select('default')) {
-      this.updateCamera(elapsed * 3, this.ecs.get(id));
+    for (const entity of this.select('default')) {
+      this.tickSingle(entity, elapsed);
     }
   }
 
+  tickSingle(entity, elapsed) {
+    this.updateCamera(elapsed * 3, entity);
+  }
+
   updateCamera(portion, entity) {
     const {Camera, Position} = entity;
     if (Camera && Position) {

app/ecs/systems/integrate-physics.js

@@ -2,6 +2,10 @@ import {System} from '@/ecs/index.js';
 
 export default class IntegratePhysics extends System {
 
+  predict(entity, elapsed) {
+    this.tickSingle(entity, elapsed);
+  }
+
   static queries() {
     return {
       default: ['Position', 'Forces'],
@@ -9,10 +13,18 @@ export default class IntegratePhysics extends System {
   }
 
   tick(elapsed) {
-    for (const {Position, Forces} of this.select('default')) {
-      Position.x = Position.$$x + elapsed * (Forces.$$impulseX + Forces.$$forceX);
-      Position.y = Position.$$y + elapsed * (Forces.$$impulseY + Forces.$$forceY);
+    for (const entity of this.select('default')) {
+      this.tickSingle(entity, elapsed);
     }
   }
 
+  tickSingle(entity, elapsed) {
+    const {Forces, Position} = entity;
+    if (!Forces || !Position) {
+      return;
+    }
+    Position.x = Position.$$x + elapsed * (Forces.$$impulseX + Forces.$$forceX);
+    Position.y = Position.$$y + elapsed * (Forces.$$impulseY + Forces.$$forceY);
+  }
+
 }

app/ecs/systems/reset-forces.js

@@ -2,6 +2,10 @@ import {System} from '@/ecs/index.js';
 
 export default class ResetForces extends System {
 
+  predict(entity, elapsed) {
+    this.tickSingle(entity, elapsed);
+  }
+
   static get priority() {
     return {phase: 'post'};
   }
@@ -13,24 +17,32 @@ export default class ResetForces extends System {
   }
 
   tick(elapsed) {
-    for (const {Forces} of this.select('default')) {
-      if (0 !== Forces.forceX) {
-        const factorX = Math.pow(1 - Forces.dampingX, elapsed);
-        Forces.forceX *= factorX;
-        if (Math.abs(Forces.forceX) <= 1) {
-          Forces.forceX = 0;
-        }
-      }
-      if (0 !== Forces.forceY) {
-        const factorY = Math.pow(1 - Forces.dampingY, elapsed);
-        Forces.forceY *= factorY;
-        if (Math.abs(Forces.forceY) <= 1) {
-          Forces.forceY = 0;
-        }
-      }
-      Forces.impulseX = 0;
-      Forces.impulseY = 0;
+    for (const entity of this.select('default')) {
+      this.tickSingle(entity, elapsed);
     }
   }
 
+  tickSingle(entity, elapsed) {
+    const {Forces} = entity;
+    if (!Forces) {
+      return;
+    }
+    if (0 !== Forces.forceX) {
+      const factorX = Math.pow(1 - Forces.dampingX, elapsed);
+      Forces.forceX *= factorX;
+      if (Math.abs(Forces.forceX) <= 1) {
+        Forces.forceX = 0;
+      }
+    }
+    if (0 !== Forces.forceY) {
+      const factorY = Math.pow(1 - Forces.dampingY, elapsed);
+      Forces.forceY *= factorY;
+      if (Math.abs(Forces.forceY) <= 1) {
+        Forces.forceY = 0;
+      }
+    }
+    Forces.impulseX = 0;
+    Forces.impulseY = 0;
+  }
+
 }

app/ecs/systems/run-animations.js

@@ -2,6 +2,10 @@ import {System} from '@/ecs/index.js';
 
 export default class RunAnimations extends System {
 
+  predict(entity, elapsed) {
+    this.tickSingle(entity, elapsed);
+  }
+
   static queries() {
     return {
       default: ['Sprite'],
@@ -9,15 +13,23 @@ export default class RunAnimations extends System {
   }
 
   tick(elapsed) {
-    for (const {Sprite} of this.select('default')) {
-      if (0 === Sprite.speed || !Sprite.isAnimating) {
-        continue;
-      }
-      Sprite.elapsed += elapsed / Sprite.speed;
-      while (Sprite.elapsed > 1) {
-        Sprite.elapsed -= 1;
-        Sprite.frame += 1;
-      }
+    for (const entity of this.select('default')) {
+      this.tickSingle(entity, elapsed);
+    }
+  }
+
+  tickSingle(entity, elapsed) {
+    const {Sprite} = entity;
+    if (!Sprite) {
+      return;
+    }
+    if (0 === Sprite.speed || !Sprite.isAnimating) {
+      return;
+    }
+    Sprite.elapsed += elapsed / Sprite.speed;
+    while (Sprite.elapsed >= 1) {
+      Sprite.elapsed -= 1;
+      Sprite.frame += 1;
     }
   }
 

app/ecs/systems/sprite-direction.js

@@ -2,6 +2,16 @@ import {System} from '@/ecs/index.js';
 
 export default class SpriteDirection extends System {
 
+  predict(entity) {
+    this.tickSingle(entity);
+  }
+
+  static get priority() {
+    return {
+      after: 'ControlDirection',
+    };
+  }
+
   static queries() {
     return {
       default: ['Sprite'],
@@ -9,35 +19,43 @@ export default class SpriteDirection extends System {
   }
 
   tick() {
-    for (const {Controlled, Direction, Sprite} of this.select('default')) {
-      const parts = [];
-      if (Controlled) {
-        const {locked, moveUp, moveRight, moveDown, moveLeft} = Controlled;
-        if (locked) {
-          continue;
-        }
-        if ((moveUp > 0 || moveRight > 0 || moveDown > 0 || moveLeft > 0)) {
-          parts.push('moving');
-        }
-        else {
-          parts.push('idle');
-        }
+    for (const entity of this.select('default')) {
+      this.tickSingle(entity);
+    }
+  }
+
+  tickSingle(entity) {
+    const parts = [];
+    const {Controlled, Direction, Sprite} = entity;
+    if (!Sprite) {
+      return;
+    }
+    if (Controlled) {
+      const {locked, moveUp, moveRight, moveDown, moveLeft} = Controlled;
+      if (locked) {
+        return;
       }
-      if (Direction) {
-        if (!Sprite.rotates) {
-          const name = {
-            0: 'right',
-            1: 'down',
-            2: 'left',
-            3: 'up',
-          };
-          parts.push(name[Direction.quantize(4)]);
-        }
+      if ((moveUp > 0 || moveRight > 0 || moveDown > 0 || moveLeft > 0)) {
+        parts.push('moving');
       }
-      if (parts.length > 0) {
-        if (Sprite.hasAnimation(parts.join(':'))) {
-          Sprite.animation = parts.join(':');
-        }
+      else {
+        parts.push('idle');
+      }
+    }
+    if (Direction) {
+      if (!Sprite.rotates) {
+        const name = {
+          0: 'right',
+          1: 'down',
+          2: 'left',
+          3: 'up',
+        };
+        parts.push(name[Direction.quantize(4)]);
+      }
+    }
+    if (parts.length > 0) {
+      if (Sprite.hasAnimation(parts.join(':'))) {
+        Sprite.animation = parts.join(':');
       }
     }
   }

app/ecs/test-helper.js

@@ -0,0 +1,14 @@
+import Component from './component.js';
+
+export function wrapComponents(Components) {
+  return Components
+    .reduce((Components, [componentName, properties]) => {
+      return {
+        ...Components,
+        [componentName]: class extends Component {
+          static componentName = componentName;
+          static properties = properties;
+        },
+      };
+    }, {})
+}

app/net/client.js

@@ -1,11 +1,24 @@
-import {CLIENT_LATENCY} from '@/util/constants.js';
+import {CLIENT_LATENCY, CLIENT_PREDICTION} from '@/util/constants.js';
 import EventEmitter from '@/util/event-emitter.js';
 
 export default class Client {
+  emitter = new EventEmitter();
+  rtt = 0;
+  throughput = {$$down: 0, down: 0, $$up: 0, up: 0};
   constructor() {
-    this.emitter = new EventEmitter();
+    setInterval(() => {
+      const {throughput} = this;
+      throughput.down = throughput.$$down * 4;
+      throughput.up = throughput.$$up * 4;
+      throughput.$$down = throughput.$$up = 0;
+    }, 250);
   }
   accept(packet) {
+    if ('Heartbeat' === packet.type) {
+      this.rtt = packet.payload.rtt;
+      this.send(packet);
+      return;
+    }
     this.emitter.invoke(packet.type, packet.payload);
   }
   addPacketListener(type, listener) {
@@ -15,7 +28,7 @@ export default class Client {
     this.emitter.removeListener(type, listener);
   }
   send(packet) {
-    if (CLIENT_LATENCY > 0) {
+    if (CLIENT_LATENCY > 0 && !CLIENT_PREDICTION) {
       setTimeout(() => {
         this.transmit(packet);
       }, CLIENT_LATENCY);

app/net/packets/action-ack.js

@@ -0,0 +1,3 @@
+import Packet from '@/net/packet.js';
+
+export default class ActionAck extends Packet {}

app/net/packets/heartbeat.js

@@ -0,0 +1,3 @@
+import Packet from '@/net/packet.js';
+
+export default class Heartbeat extends Packet {}

app/react/components/devtools.jsx

@@ -2,6 +2,7 @@ import {useCallback, useState} from 'react';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 import 'react-tabs/style/react-tabs.css';
 
+import {useClient} from '@/react/context/client.js';
 import {useEcsTick} from '@/react/context/ecs.js';
 import {useMainEntity} from '@/react/context/main-entity.js';
 
@@ -12,6 +13,7 @@ import Tiles from './devtools/tiles.jsx';
 export default function Devtools({
   eventsChannel,
 }) {
+  const client = useClient();
   const [mainEntity] = useMainEntity();
   const [mainEntityJson, setMainEntityJson] = useState('');
   const onEcsTick = useCallback((payload, ecs) => {
@@ -32,6 +34,9 @@ export default function Devtools({
           <div className={styles.dashboard}>
             <form>
               <div className={styles.engineBar}>
+                <div>{Math.round(client.rtt * 100) / 100}rtt</div>
+                <div>{Math.round(((client.throughput.down * 8) / 1024) * 10) / 10}kb/s down</div>
+                <div>{Math.round(((client.throughput.up * 8) / 1024) * 10) / 10}kb/s up</div>
               </div>
             </form>
             <pre><code><small>{mainEntityJson}</small></code></pre>

app/routes/_main-menu.play.$/route.jsx

@@ -1,8 +1,6 @@
 import {useEffect, useState} from 'react';
 import {Outlet, useParams} from 'react-router-dom';
 
-import {decode, encode} from '@/net/packets/index.js';
-
 import styles from './play.module.css';
 
 export default function Play() {
@@ -20,15 +18,7 @@ export default function Play() {
           ({default: Client} = await import('@/client/remote.js'));
           break;
       }
-      class SilphiusClient extends Client {
-        accept(packed) {
-          super.accept(decode(packed));
-        }
-        transmit(packet) {
-          super.transmit(encode(packet));
-        }
-      }
-      setClient(() => SilphiusClient);
+      setClient(() => Client);
     }
     loadClient();
   }, [type]);

app/server/create/player.js

@@ -37,7 +37,7 @@ export default async function createPlayer(id) {
     Magnet: {strength: 24},
     Player: {},
     Position: {x: 128, y: 448},
-    Speed: {speed: 300},
+    Speed: {speed: 100},
     Sound: {},
     Sprite: {
       anchorX: 0.5,

app/server/engine.js

@@ -6,6 +6,7 @@ import {
   CHUNK_SIZE,
   RESOLUTION,
   TPS,
+  UPS,
 } from '@/util/constants.js';
 import {withResolvers} from '@/util/promise.js';
 
@@ -16,6 +17,8 @@ import createHouse from './create/house.js';
 import createPlayer from './create/player.js';
 import createTown from './create/town.js';
 
+const UPS_PER_S = 1 / UPS;
+
 const cache = new LRUCache({
   max: 128,
 });
@@ -29,8 +32,9 @@ export default class Engine {
   frame = 0;
   handle;
   incomingActions = new Map();
-  last = Date.now();
+  last;
   server;
+  updateElapsed = 0;
 
   constructor(Server) {
     this.ecses = {};
@@ -117,6 +121,24 @@ export default class Engine {
       }
       this.incomingActions.get(connection).push(payload);
     });
+    this.server.addPacketListener('Heartbeat', (connection) => {
+      const playerData = this.connectedPlayers.get(connection);
+      const {distance} = playerData;
+      const now = performance.now();
+      distance.rtt = (now - distance.last) / 1000;
+      playerData.heartbeat = setTimeout(() => {
+        distance.last = performance.now();
+        this.server.send(
+          connection,
+          {
+            type: 'Heartbeat',
+            payload: {
+              rtt: distance.rtt,
+            },
+          },
+        );
+      }, 1000);
+    });
   }
 
   acceptActions() {
@@ -227,6 +249,17 @@ export default class Engine {
             break;
           }
         }
+        if (payload.ack) {
+          this.server.send(
+            connection,
+            {
+              type: 'ActionAck',
+              payload: {
+                ack: payload.ack,
+              },
+            },
+          );
+        }
       }
       this.incomingActions.set(connection, []);
     }
@@ -239,18 +272,26 @@ export default class Engine {
     }
     const ecs = this.ecses[entityJson.Ecs.path];
     const entity = ecs.get(await ecs.create(entityJson));
-    entity.Player.id = id
-    this.connectedPlayers.set(
+    entity.Player.id = id;
+    const playerData = {
+      distance: {last: performance.now(), rtt: 0},
+      entity,
+      id,
+      memory: {
+        chunks: new Map(),
+        nearby: new Set(),
+      },
+    };
+    this.server.send(
       connection,
       {
-        entity,
-        id,
-        memory: {
-          chunks: new Map(),
-          nearby: new Set(),
+        type: 'Heartbeat',
+        payload: {
+          rtt: 0,
         },
       },
     );
+    this.connectedPlayers.set(connection, playerData);
   }
 
   createEcs() {
@@ -264,7 +305,8 @@ export default class Engine {
     }
     this.connectedPlayers.delete(connection);
     this.incomingActions.delete(connection);
-    const {entity, id} = connectedPlayer;
+    const {entity, heartbeat, id} = connectedPlayer;
+    clearTimeout(heartbeat);
     const json = entity.toJSON();
     const ecs = this.ecses[entity.Ecs.path];
     return Promise.all([
@@ -371,14 +413,20 @@ export default class Engine {
   }
 
   start() {
+    this.last = performance.now() / 1000;
     const loop = async () => {
+      const now = performance.now() / 1000;
+      const elapsed = now - this.last;
+      this.updateElapsed += elapsed;
+      this.last = now;
       this.acceptActions();
-      const elapsed = (Date.now() - this.last) / 1000;
-      this.last = Date.now();
       this.tick(elapsed);
-      this.update(elapsed);
-      this.setClean();
-      this.frame += 1;
+      if (this.updateElapsed >= UPS_PER_S) {
+        this.update(this.updateElapsed);
+        this.setClean();
+        this.frame += 1;
+        this.updateElapsed = this.updateElapsed % UPS_PER_S;
+      }
       this.handle = setTimeout(loop, 1000 / TPS);
     };
     loop();

app/util/constants.js

@@ -2,6 +2,8 @@ export const CHUNK_SIZE = 32;
 
 export const CLIENT_LATENCY = 0;
 
+export const CLIENT_INTERPOLATION = true;
+
 export const CLIENT_PREDICTION = true;
 
 export const IRL_MINUTES_PER_GAME_DAY = 20;
@@ -14,3 +16,5 @@ export const RESOLUTION = {
 export const SERVER_LATENCY = 0;
 
 export const TPS = 60;
+
+export const UPS = 15;