Lobby & Room Management

import { useLobby, useRoom, usePlayers, useHost } from "@carverjs/multiplayer";

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

function LobbyScreen() {
  const { rooms, createRoom, refresh, isLoading } = useLobby();

  return (
    <div>
      <button onClick={refresh} disabled={isLoading}>Refresh</button>
      <button onClick={() => createRoom({ name: "My Room", maxPlayers: 4 })}>
        Create Room
      </button>
      <ul>
        {rooms.map((room) => (
          <li key={room.id}>
            {room.name} — {room.playerCount}/{room.maxPlayers}
          </li>
        ))}
      </ul>
    </div>
  );
}

const { rooms } = useLobby({
  autoRefresh: true,
  filter: { gameMode: "deathmatch", hasPassword: false },
});

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

function RoomScreen({ roomId }: { roomId: string }) {
  const { join, leave, connectionState, room, error, isConnected, isHost } =
    useRoom(roomId, {
      displayName: "Player1",
      transport: "webrtc",
    });

  if (error) return <div>Error: {error.message}</div>;
  if (!isConnected) return <div>Connecting... ({connectionState})</div>;

  return (
    <div>
      <h2>{room?.name}</h2>
      <p>You are {isHost ? "the host" : "a client"}</p>
      <button onClick={leave}>Leave Room</button>
    </div>
  );
}

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

function PlayerList() {
  const { players, self, host, allReady } = usePlayers();

  return (
    <div>
      <h3>Players ({players.length})</h3>
      <ul>
        {players.map((p) => (
          <li key={p.peerId}>
            {p.displayName}
            {p.isHost && " (Host)"}
            {p.isSelf && " (You)"}
            {p.isReady ? " Ready" : " Not Ready"}
            <span> — {p.latencyMs}ms</span>
          </li>
        ))}
      </ul>
      {self && <p>Your ID: {self.peerId}</p>}
      {host && <p>Host: {host.displayName}</p>}
      {allReady && <p>All players are ready!</p>}
    </div>
  );
}

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

function HostControls() {
  const { kick, transferHost, setRoomState, setMaxPlayers, lockRoom, unlockRoom, isHost } =
    useHost();

  if (!isHost) return null;

  return (
    <div>
      <button onClick={() => setMaxPlayers(8)}>Set Max Players: 8</button>
      <button onClick={lockRoom}>Lock Room</button>
      <button onClick={unlockRoom}>Unlock Room</button>
    </div>
  );
}

import { useState } from "react";
import { useLobby, useRoom, usePlayers, useHost } from "@carverjs/multiplayer";
import { Game, World, Actor } from "@carverjs/core/components";

type Screen = "lobby" | "room" | "game";

function App() {
  const [screen, setScreen] = useState<Screen>("lobby");
  const [roomId, setRoomId] = useState<string | null>(null);

  if (screen === "lobby") {
    return (
      <LobbyScreen
        onJoin={(id) => { setRoomId(id); setScreen("room"); }}
      />
    );
  }

  if (screen === "room" && roomId) {
    return (
      <RoomScreen
        roomId={roomId}
        onStart={() => setScreen("game")}
        onLeave={() => { setRoomId(null); setScreen("lobby"); }}
      />
    );
  }

  if (screen === "game" && roomId) {
    return <GameScreen roomId={roomId} onExit={() => setScreen("lobby")} />;
  }

  return null;
}

function LobbyScreen({ onJoin }: { onJoin: (id: string) => void }) {
  const { rooms, createRoom, refresh, isLoading } = useLobby({
    autoRefresh: true,
    filter: { hasPassword: false },
  });

  const handleCreate = async () => {
    const room = await createRoom({
      name: "My Game",
      maxPlayers: 4,
      gameMode: "coop",
    });
    onJoin(room.id);
  };

  return (
    <div>
      <h1>Lobby</h1>
      <button onClick={handleCreate}>Create Room</button>
      <button onClick={refresh} disabled={isLoading}>Refresh</button>
      <ul>
        {rooms.map((room) => (
          <li key={room.id}>
            {room.name} ({room.playerCount}/{room.maxPlayers})
            <button onClick={() => onJoin(room.id)}>Join</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

function RoomScreen({
  roomId,
  onStart,
  onLeave,
}: {
  roomId: string;
  onStart: () => void;
  onLeave: () => void;
}) {
  const { leave, isConnected } = useRoom(roomId, {
    displayName: "Player1",
    onDisconnected: () => onLeave(),
  });

  const { players, allReady } = usePlayers();
  const { setRoomState, kick, isHost } = useHost();

  if (!isConnected) return <div>Connecting...</div>;

  const handleStart = () => {
    setRoomState("playing");
    onStart();
  };

  return (
    <div>
      <h2>Room</h2>
      <ul>
        {players.map((p) => (
          <li key={p.peerId}>
            {p.displayName} {p.isHost && "(Host)"} {p.isReady ? "Ready" : "..."}
            {isHost && !p.isSelf && (
              <button onClick={() => kick(p.peerId)}>Kick</button>
            )}
          </li>
        ))}
      </ul>
      {isHost && (
        <button onClick={handleStart} disabled={!allReady}>
          Start Game
        </button>
      )}
      <button onClick={() => { leave(); onLeave(); }}>Leave</button>
    </div>
  );
}

function GameScreen({ roomId, onExit }: { roomId: string; onExit: () => void }) {
  const { players, self } = usePlayers();

  return (
    <Game>
      <World>
        {players.map((p, i) => (
          <Actor
            key={p.peerId}
            type="primitive"
            shape="box"
            color={p.isSelf ? "blue" : "red"}
            position={[i * 2, 1, 0]}
          />
        ))}
        <Actor
          type="primitive"
          shape="plane"
          color="#eee"
          size={20}
          rotation={[-Math.PI / 2, 0, 0]}
          receiveShadow
        />
      </World>
    </Game>
  );
}

interface Player {
  peerId: string;
  displayName: string;
  isHost: boolean;
  isSelf: boolean;
  isReady: boolean;
  isConnected: boolean;
  metadata: Record<string, unknown>;
  latencyMs: number;
  joinedAt: number;
}

interface Room {
  id: string;
  name: string;
  hostId: string;
  playerCount: number;
  maxPlayers: number;
  gameMode?: string;
  isPrivate: boolean;
  metadata: Record<string, unknown>;
  createdAt: number;
  state: RoomState;
}

type RoomState = "waiting" | "starting" | "playing" | "finished";