Sync Modes

import { useMultiplayer, useNetworkEvents } from "@carverjs/multiplayer";

import { useNetworkEvents } from "@carverjs/multiplayer";

const { sendEvent, broadcast, onEvent } = useNetworkEvents();

// On every client — send moves to the host
const { sendEvent } = useNetworkEvents();
sendEvent("move", { x: 3, y: 5 });

// On the host — validate and rebroadcast
const { onEvent, broadcast } = useNetworkEvents();
onEvent("move", (payload, senderId) => {
  if (isValidMove(payload)) {
    broadcast("move:confirmed", { ...payload, playerId: senderId });
  } else {
    sendEvent("move:rejected", { reason: "invalid" }, senderId);
  }
});

import { useState, useCallback } from "react";
import { useNetworkEvents } from "@carverjs/multiplayer";
import { usePlayers } from "@carverjs/multiplayer";

function TurnBasedGame() {
  const { sendEvent, broadcast, onEvent } = useNetworkEvents();
  const { self, players } = usePlayers();
  const [messages, setMessages] = useState<{ from: string; text: string }[]>([]);
  const [currentTurn, setCurrentTurn] = useState<string | null>(null);

  // Chat
  const sendChat = useCallback((text: string) => {
    broadcast("chat", { text, from: self?.displayName });
  }, [broadcast, self]);

  onEvent("chat", (payload) => {
    const { text, from } = payload as { text: string; from: string };
    setMessages((prev) => [...prev, { from, text }]);
  });

  // Turns
  const submitTurn = useCallback((action: unknown) => {
    sendEvent("turn:submit", { action, playerId: self?.peerId });
  }, [sendEvent, self]);

  onEvent("turn:result", (payload) => {
    const { nextPlayer } = payload as { nextPlayer: string };
    setCurrentTurn(nextPlayer);
  });

  return (
    <div>
      <div>
        {messages.map((m, i) => (
          <p key={i}><strong>{m.from}:</strong> {m.text}</p>
        ))}
      </div>
      <p>Current turn: {currentTurn}</p>
      <button
        onClick={() => submitTurn({ type: "roll-dice" })}
        disabled={currentTurn !== self?.peerId}
      >
        Roll Dice
      </button>
    </div>
  );
}

useMultiplayer({
  mode: "snapshot",
  broadcastRate: 20,
  interpolation: {
    method: "hermite",
    extrapolateMs: 200, // max ms to extrapolate before freezing
  },
});

import { useMultiplayer } from "@carverjs/multiplayer";
import { usePlayers } from "@carverjs/multiplayer";
import { Game, World, Actor } from "@carverjs/core/components";
import { useGameLoop, useInput } from "@carverjs/core/hooks";
import { useRef } from "react";
import type { Group } from "@carverjs/core/types";

function MultiplayerGame() {
  const { isActive, networkQuality, tick } = useMultiplayer({
    mode: "snapshot",
    broadcastRate: 20,
    interpolation: { method: "hermite" },
  });

  const { players } = usePlayers();

  return (
    <Game>
      <World>
        {players.map((player) => (
          <PlayerActor key={player.peerId} player={player} isLocal={player.isSelf} />
        ))}
        <Actor
          type="primitive"
          shape="plane"
          color="#4a7c59"
          size={50}
          rotation={[-Math.PI / 2, 0, 0]}
          receiveShadow
        />
      </World>
    </Game>
  );
}

function PlayerActor({ player, isLocal }: { player: { peerId: string; isSelf: boolean }; isLocal: boolean }) {
  const ref = useRef<Group>(null);
  const { isPressed } = useInput();

  useGameLoop((delta) => {
    if (!isLocal || !ref.current) return;
    const speed = 5;
    if (isPressed("KeyW")) ref.current.position.z -= speed * delta;
    if (isPressed("KeyS")) ref.current.position.z += speed * delta;
    if (isPressed("KeyA")) ref.current.position.x -= speed * delta;
    if (isPressed("KeyD")) ref.current.position.x += speed * delta;
  });

  return (
    <Actor
      ref={ref}
      type="primitive"
      shape="box"
      color={isLocal ? "blue" : "red"}
      position={[0, 0.5, 0]}
      networked={true}
      castShadow
    />
  );
}

const { setInput } = useMultiplayer({
  mode: "prediction",
  tickRate: 60,
  stepWorld: () => world.step(),   // the game drives physics stepping
  onPhysicsStep: (inputs, justPressed, tick, isRollback, dt) => {
    // inputs:      Map<peerId, PlayerInput> — every player's input for this tick
    //              (the local player is keyed by your own peerId)
    // justPressed: Map<peerId, PlayerInput> — rising edges: booleans are true only
    //              on the tick they transition from false to true
    // tick:        the fixed-step tick number
    // isRollback:  true during rollback resimulation of a past tick
    // dt:          the fixed tick delta (1 / tickRate)

    for (const [peerId, input] of inputs) {
      const body = getBodyForPlayer(peerId);
      if (!body) continue;

      // Held inputs: continuous forces
      if (input.left) body.applyForce({ x: -MOVE_FORCE * dt, y: 0, z: 0 });
      if (input.right) body.applyForce({ x: MOVE_FORCE * dt, y: 0, z: 0 });

      // Edge-triggered inputs: use justPressed, not inputs
      const pressed = justPressed.get(peerId);
      if (pressed?.jump) {
        body.applyImpulse({ x: 0, y: JUMP_IMPULSE, z: 0 });
        // Non-simulation side effects MUST be gated on !isRollback (or be
        // idempotent per tick): rollback replays this exact tick again.
        if (!isRollback) playJumpSound();
      }
    }
  },
});

// In your input-gathering code (e.g. a game loop callback).
// The input persists across ticks until replaced — hold semantics.
setInput({ left, right, jump });

useMultiplayer({
  mode: "prediction",
  tickRate: 60,
  prediction: {
    errorDecay: 0.85, // retain 85% of the remaining error offset per frame
  },
});

import { useMultiplayer } from "@carverjs/multiplayer";
import { usePlayers } from "@carverjs/multiplayer";
import { Game, World, Actor } from "@carverjs/core/components";
import { useInput, useGameLoop } from "@carverjs/core/hooks";
import { useRef } from "react";
import type { Group } from "@carverjs/core/types";

function CompetitiveGame() {
  const { isActive, tick, serverTick, drift, setInput } = useMultiplayer({
    mode: "prediction",
    tickRate: 60,
    prediction: {
      maxRewindTicks: 15,
      errorDecay: 0.85,
      snapThreshold: 150,
    },
    stepWorld: () => stepPhysicsWorld(),
    onPhysicsStep: (inputs, justPressed, tick, isRollback, dt) => {
      // Apply every player's input to the physics simulation
      for (const [peerId, input] of inputs) {
        applyMovementForces(peerId, input, dt);
      }
      for (const [peerId, pressed] of justPressed) {
        if (pressed.jump) applyJumpImpulse(peerId, isRollback);
      }
    },
  });

  const { players } = usePlayers();
  const { isPressed } = useInput();

  useGameLoop(() => {
    // Gather local input and hand it to the prediction engine.
    setInput({
      left: isPressed("KeyA"),
      right: isPressed("KeyD"),
      jump: isPressed("Space"),
    });
  });

  return (
    <Game>
      <World>
        {players.map((player) => (
          <CompetitivePlayer key={player.peerId} player={player} />
        ))}
        <Actor
          type="primitive"
          shape="plane"
          color="#2a2a3e"
          size={100}
          rotation={[-Math.PI / 2, 0, 0]}
          receiveShadow
        />
      </World>
    </Game>
  );
}

function CompetitivePlayer({ player }: { player: { peerId: string; isSelf: boolean } }) {
  const ref = useRef<Group>(null);

  // All players — local and remote — are real dynamic bodies driven by
  // onPhysicsStep on every peer. Rendering is adjusted by decaying error
  // offsets after each rollback; rigid bodies are never visually offset.
  return (
    <Actor
      ref={ref}
      type="primitive"
      shape="sphere"
      color={player.isSelf ? "blue" : "red"}
      position={[0, 0.5, 0]}
      networked={true}
      physics={{ bodyType: "dynamic" }}
      castShadow
    />
  );
}

import { useMultiplayer, useNetworkEvents } from "@carverjs/multiplayer";
import { usePlayers } from "@carverjs/multiplayer";
import { Game, World, Actor } from "@carverjs/core/components";
import { useState, useCallback } from "react";

function CombinedGame() {
  // Layer 2 — continuous state sync
  const { isActive, networkQuality, tick } = useMultiplayer({
    mode: "snapshot",
    broadcastRate: 20,
    interpolation: { method: "hermite" },
  });

  // Layer 1 — discrete events
  const { broadcast, onEvent } = useNetworkEvents();
  const { players, self } = usePlayers();

  // Chat state
  const [messages, setMessages] = useState<{ from: string; text: string }[]>([]);

  const sendChat = useCallback((text: string) => {
    broadcast("chat", { text, from: self?.displayName });
  }, [broadcast, self]);

  onEvent("chat", (payload) => {
    const { text, from } = payload as { text: string; from: string };
    setMessages((prev) => [...prev, { from, text }]);
  });

  // Item pickup event
  onEvent("item:pickup", (payload) => {
    const { itemId, playerId } = payload as { itemId: string; playerId: string };
    console.log(`${playerId} picked up ${itemId}`);
  });

  return (
    <div>
      <Game>
        <World>
          {players.map((player, i) => (
            <Actor
              key={player.peerId}
              type="primitive"
              shape="box"
              color={player.isSelf ? "blue" : "red"}
              position={[i * 2, 0.5, 0]}
              networked={true}
              castShadow
            />
          ))}
          <Actor
            type="primitive"
            shape="plane"
            color="#eee"
            size={30}
            rotation={[-Math.PI / 2, 0, 0]}
            receiveShadow
          />
        </World>
      </Game>
      <ChatOverlay messages={messages} onSend={sendChat} />
    </div>
  );
}

function ChatOverlay({
  messages,
  onSend,
}: {
  messages: { from: string; text: string }[];
  onSend: (text: string) => void;
}) {
  const [input, setInput] = useState("");

  return (
    <div style={{ position: "absolute", bottom: 0, left: 0, padding: 16 }}>
      {messages.slice(-5).map((m, i) => (
        <p key={i}><strong>{m.from}:</strong> {m.text}</p>
      ))}
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter" && input.trim()) {
            onSend(input.trim());
            setInput("");
          }
        }}
        placeholder="Type a message..."
      />
    </div>
  );
}