@carverjs/multiplayer 0.0.1 → 0.0.2

package/dist/index.mjs

@@ -1,15 +1,19 @@
 import {
   WebRTCTransport
-} from "./chunk-3KT73N2S.mjs";
+} from "./chunk-UKEFWQ76.mjs";
 import {
   FirebaseStrategy,
   MqttStrategy
-} from "./chunk-UD6FDZMX.mjs";
+} from "./chunk-CBTAOVXP.mjs";
 import {
   EventSync,
+  InputBuffer,
   PredictionSync,
-  SnapshotSync
-} from "./chunk-EO3YNPRQ.mjs";
+  SnapshotSync,
+  computeJustPressed,
+  quatInvert,
+  quatMultiply
+} from "./chunk-Q25TJEY4.mjs";
 
 // src/components/MultiplayerProvider.ts
 import { createElement, useRef, useEffect } from "react";
@@ -54,6 +58,11 @@ var _TickKeeper = class _TickKeeper {
     this._serverTick = serverTick;
     this._updateDriftCorrection();
   }
+  /** Hard-set the local tick (prediction rollback snap). Does not touch the accumulator. */
+  snapTick(tick) {
+    this._tick = tick;
+    this._updateDriftCorrection();
+  }
   /**
    * Accumulate time and return the number of fixed ticks to process.
    * Call this once per render frame with the raw frame delta.
@@ -178,15 +187,16 @@ var Codec = class {
     }
     return changed.length > 0 ? changed : null;
   }
-  /** Serialize a delta snapshot packet */
-  serializeDelta(tick, baseTick, current, baseline) {
+  /** Serialize a delta snapshot packet (optionally embedding the host's own input as `hi`) */
+  serializeDelta(tick, baseTick, current, baseline, hostInput) {
     const delta = this.computeDelta(current, baseline);
     if (!delta) return null;
     const packet = {
       t: tick,
       b: baseline ? baseTick : -1,
       // -1 = keyframe
-      s: this.serialize(delta)
+      s: this.serialize(delta),
+      ...hostInput !== void 0 ? { hi: hostInput } : {}
     };
     return pack(packet);
   }
@@ -196,7 +206,8 @@ var Codec = class {
     return {
       tick: packet.t,
       baseTick: packet.b,
-      entities: this.deserialize(packet.s)
+      entities: this.deserialize(packet.s),
+      hostInput: packet.hi
     };
   }
   _hasChanged(current, prev) {
@@ -508,6 +519,7 @@ function MultiplayerProvider({
 }) {
   const managerRef = useRef(null);
   const strategyRef = useRef(null);
+  const destroyTimerRef = useRef(null);
   if (!managerRef.current) {
     managerRef.current = new NetworkManager();
   }
@@ -515,11 +527,18 @@ function MultiplayerProvider({
     strategyRef.current = createStrategy(appId, strategyConfig);
   }
   useEffect(() => {
+    if (destroyTimerRef.current) {
+      clearTimeout(destroyTimerRef.current);
+      destroyTimerRef.current = null;
+    }
     return () => {
-      strategyRef.current?.destroy();
-      strategyRef.current = null;
-      managerRef.current?.destroy();
-      managerRef.current = null;
+      destroyTimerRef.current = setTimeout(() => {
+        destroyTimerRef.current = null;
+        strategyRef.current?.destroy();
+        strategyRef.current = null;
+        managerRef.current?.destroy();
+        managerRef.current = null;
+      }, 0);
     };
   }, []);
   const value = {
@@ -708,7 +727,7 @@ function announcementToRoom(ann) {
     isPrivate: ann.isPrivate,
     metadata: ann.metadata,
     createdAt: ann.createdAt,
-    state: "lobby"
+    state: ann.state ?? "lobby"
   };
 }
 function useLobby(options) {
@@ -754,7 +773,7 @@ function useLobby(options) {
       hostId: strategy.selfId,
       playerCount: 0,
       maxPlayers: config.maxPlayers ?? 8,
-      gameMode: config.metadata?.gameMode,
+      gameMode: config.gameMode ?? config.metadata?.gameMode,
       isPrivate: config.isPrivate ?? false,
       metadata: config.metadata ?? {},
       createdAt: Date.now(),
@@ -1037,6 +1056,34 @@ function applyState3D(ref, state) {
     }
   }
 }
+function applyStateHard2D(ref, state) {
+  applyState2D(ref, state);
+  if (ref.rigidBody) {
+    try {
+      if (typeof ref.rigidBody.setLinvel === "function") {
+        ref.rigidBody.setLinvel({ x: state.vx, y: state.vy }, true);
+      }
+      if (typeof ref.rigidBody.setAngvel === "function") {
+        ref.rigidBody.setAngvel(state.va, true);
+      }
+    } catch {
+    }
+  }
+}
+function applyStateHard3D(ref, state) {
+  applyState3D(ref, state);
+  if (ref.rigidBody) {
+    try {
+      if (typeof ref.rigidBody.setLinvel === "function") {
+        ref.rigidBody.setLinvel({ x: state.vx, y: state.vy, z: state.vz }, true);
+      }
+      if (typeof ref.rigidBody.setAngvel === "function") {
+        ref.rigidBody.setAngvel({ x: state.wx, y: state.wy, z: state.wz }, true);
+      }
+    } catch {
+    }
+  }
+}
 function applyEntityState(ref, state, is2D) {
   if (is2D) {
     applyState2D(ref, state);
@@ -1052,6 +1099,10 @@ function applyStatesToActors(states, registry, is2D) {
     applyEntityState(ref, state, is2D);
   }
 }
+var IDENTITY_QUAT = { x: 0, y: 0, z: 0, w: 1 };
+function isIdentityQuat(q) {
+  return q.x === 0 && q.y === 0 && q.z === 0 && q.w === 1;
+}
 function useMultiplayer(options = {}) {
   const { networkManager } = useMultiplayerContext();
   const mode = options.mode ?? networkManager.syncMode;
@@ -1067,6 +1118,7 @@ function useMultiplayer(options = {}) {
   const [drift, setDrift] = useState4(0);
   const actorRegistry = useRef4(getActorRegistry());
   const wasHostRef = useRef4(null);
+  const appliedErrorsRef = useRef4(/* @__PURE__ */ new Map());
   const buildSnapshotOpts = useCallback5(() => {
     return {
       broadcastRate: options.broadcastRate,
@@ -1083,6 +1135,36 @@ function useMultiplayer(options = {}) {
     options.interpolation?.method,
     options.interpolation?.extrapolateMs
   ]);
+  const undoAppliedErrorOffsets = useCallback5(() => {
+    const registry = actorRegistry.current;
+    for (const [id, e] of appliedErrorsRef.current) {
+      const ref = registry.get(id);
+      if (!ref) {
+        appliedErrorsRef.current.delete(id);
+        continue;
+      }
+      const pos = ref.object3D.position;
+      const untouched = Math.abs(pos.x - e.px) < 1e-9 && Math.abs(pos.y - e.py) < 1e-9 && Math.abs(pos.z - e.pz) < 1e-9;
+      if (untouched) {
+        pos.x -= e.x;
+        pos.y -= e.y;
+        pos.z -= e.z;
+        if (e.a !== 0) {
+          ref.object3D.rotation.z -= e.a;
+        }
+        if (!isIdentityQuat(e.q)) {
+          const inv = quatInvert(e.q);
+          const cur = ref.object3D.quaternion;
+          const r = quatMultiply(inv, { x: cur.x, y: cur.y, z: cur.z, w: cur.w });
+          cur.set(r.x, r.y, r.z, r.w);
+        }
+      }
+    }
+    appliedErrorsRef.current.clear();
+  }, []);
+  const setInput = useCallback5((input) => {
+    predictionSyncRef.current?.setInput(input);
+  }, []);
   useEffect5(() => {
     const transport = networkManager.transport;
     if (!transport) return;
@@ -1111,15 +1193,30 @@ function useMultiplayer(options = {}) {
       );
     }
     if (mode === "prediction") {
+      const driver = {
+        captureState: () => buildEntityMap(actorRegistry.current.getNetworked(), is2DRef.current ?? true),
+        applyState: (entities) => {
+          const is2D = is2DRef.current ?? true;
+          for (const state of entities) {
+            if (state.c && state.c.__removed) continue;
+            const ref = actorRegistry.current.get(state.id);
+            if (!ref) continue;
+            if (is2D) applyStateHard2D(ref, state);
+            else applyStateHard3D(ref, state);
+          }
+        },
+        ...options.stepWorld ? { stepWorld: options.stepWorld } : {}
+      };
       predictionSyncRef.current = new PredictionSync(
         transport,
-        networkManager.codec,
         networkManager.tickKeeper,
+        snapshotSyncRef.current,
         options.prediction
       );
       if (options.onPhysicsStep) {
         predictionSyncRef.current.setPhysicsStep(options.onPhysicsStep);
       }
+      predictionSyncRef.current.setWorldDriver(driver);
     }
     wasHostRef.current = networkManager.isHost;
     setIsActive(true);
@@ -1148,9 +1245,10 @@ function useMultiplayer(options = {}) {
       snapshotSyncRef.current = null;
       predictionSyncRef.current = null;
       networkSimulatorRef.current = null;
+      appliedErrorsRef.current.clear();
       setIsActive(false);
     };
-  }, [networkManager, mode, buildSnapshotOpts, options.prediction, options.onPhysicsStep, options.debug]);
+  }, [networkManager, mode, buildSnapshotOpts, options.prediction, options.onPhysicsStep, options.stepWorld, options.debug]);
   useEffect5(() => {
     const unsub = networkManager.onConnectionStateChange(() => {
       setNetworkQuality(networkManager.networkQuality);
@@ -1170,33 +1268,67 @@ function useMultiplayer(options = {}) {
     }
     const is2D = is2DRef.current ?? true;
     if (mode === "events") return;
+    if (mode === "prediction" && predictionSyncRef.current) {
+      undoAppliedErrorOffsets();
+      predictionSyncRef.current.beginFrame();
+    }
     const ticksThisFrame = tickKeeper.update(delta);
     for (let i = 0; i < ticksThisFrame; i++) {
       const currentTick = tickKeeper.tick - (ticksThisFrame - 1 - i);
-      if (isHost) {
+      if (mode === "prediction" && predictionSyncRef.current) {
+        predictionSyncRef.current.tick(currentTick);
+        if (isHost) {
+          const entities = buildEntityMap(actorRegistry.current.getNetworked(), is2D);
+          snapshotSyncRef.current?.hostTick(
+            currentTick,
+            entities,
+            tickKeeper.tickDelta,
+            predictionSyncRef.current.getLocalInput(currentTick)
+          );
+        }
+      } else if (mode === "snapshot" && isHost) {
         const networked = actorRegistry.current.getNetworked();
         const entities = buildEntityMap(networked, is2D);
-        if (mode === "snapshot" || mode === "prediction") {
-          snapshotSyncRef.current?.hostTick(currentTick, entities, tickKeeper.tickDelta);
-        }
-        if (mode === "prediction") {
-          predictionSyncRef.current?.hostTick(currentTick, entities, tickKeeper.tickDelta);
-        }
-      } else {
-        if (mode === "prediction" && predictionSyncRef.current) {
-          predictionSyncRef.current.clientTick(currentTick);
-        }
+        snapshotSyncRef.current?.hostTick(currentTick, entities, tickKeeper.tickDelta);
       }
     }
-    if (!isHost) {
-      if (mode === "snapshot" && snapshotSyncRef.current) {
-        const renderTime = performance.now();
-        const interpolated = snapshotSyncRef.current.clientInterpolate(renderTime);
-        applyStatesToActors(interpolated, actorRegistry.current, is2D);
-      } else if (mode === "prediction" && predictionSyncRef.current) {
-        const predicted = predictionSyncRef.current.predictedState;
-        const smoothed = predictionSyncRef.current.applyErrorSmoothing(predicted);
-        applyStatesToActors(smoothed, actorRegistry.current, is2D);
+    if (!isHost && mode === "snapshot" && snapshotSyncRef.current) {
+      const renderTime = performance.now();
+      const interpolated = snapshotSyncRef.current.clientInterpolate(renderTime);
+      applyStatesToActors(interpolated, actorRegistry.current, is2D);
+    }
+    if (mode === "prediction" && predictionSyncRef.current) {
+      const offsets = predictionSyncRef.current.getRenderErrorOffsets();
+      for (const [id, off] of offsets) {
+        const ref = actorRegistry.current.get(id);
+        if (!ref) continue;
+        const pos = ref.object3D.position;
+        pos.x += off.x;
+        pos.y += off.y;
+        if (!is2D) pos.z += off.z;
+        let appliedA = 0;
+        let appliedQ = IDENTITY_QUAT;
+        if (is2D) {
+          ref.object3D.rotation.z += off.a;
+          appliedA = off.a;
+        } else {
+          appliedQ = { x: off.qx, y: off.qy, z: off.qz, w: off.qw };
+          if (!isIdentityQuat(appliedQ)) {
+            const cur = ref.object3D.quaternion;
+            const r = quatMultiply(appliedQ, { x: cur.x, y: cur.y, z: cur.z, w: cur.w });
+            cur.set(r.x, r.y, r.z, r.w);
+          }
+        }
+        appliedErrorsRef.current.set(id, {
+          x: off.x,
+          y: off.y,
+          z: is2D ? 0 : off.z,
+          a: appliedA,
+          q: appliedQ,
+          px: pos.x,
+          py: pos.y,
+          pz: pos.z
+        });
       }
     }
     if (ticksThisFrame > 0) {
@@ -1216,7 +1348,8 @@ function useMultiplayer(options = {}) {
     tick,
     serverTick,
     drift,
-    syncEngine: mode
+    syncEngine: mode,
+    setInput
   };
 }
 
@@ -1727,11 +1860,13 @@ var InterestManager = class {
 export {
   DebugOverlay,
   FirebaseStrategy,
+  InputBuffer,
   InterestManager,
   MqttStrategy,
   MultiplayerBridge,
   MultiplayerProvider,
   NetworkSimulator,
+  computeJustPressed,
   useHost,
   useLobby,
   useMultiplayer,