Launch the Multiplayer Game

You now have every piece the networked table needs: a room server, a WebRTC mesh you built from the handshake up, a System that drops a remote fold onto the bus, and since last lesson a deck that four browsers agree on from one secret seed, with each player seeing their own hole cards. But open the game and you still sit down to a solo table against a bot, because nothing has called those pieces in order. The Net entity in the scene still holds the placeholder room: roomCode: "table-7", autoConnect: false. The last step turns I joined a room into the table is live for four people.

Resolve the room before the scene loads

The catch is timing. The moment the P2PNetwork component enters the world, its System reads mySeat, myPlayerId, occupiedSeats, and existingPlayers right off it and opens the mesh — connect() fires the instant the component attaches, not on some later frame. PokerMultiplayer grabs its own mySeat and occupiedSeats the same way. So the real values must be on the components before loadScene runs, or the mesh offers channels to nobody and seats you at a seat you don't have yet.

This sets the whole boot order: resolve, inject, then load. Here is a main.ts you assemble:

// src/main.ts — the room is resolved BEFORE the scene attaches.
import scene from './scenes/poker.json';
import {
  resolvePlayerId, joinRoom, buildNetConfig,
} from './components/PokerMultiplayer/roomClient';

const roomCode = new URLSearchParams(location.search).get('room')!;
const playerId = resolvePlayerId();              // stable across reloads
const join = await joinRoom(roomCode, playerId); // → { seat, seed, players }
const cfg = buildNetConfig(roomCode, join, playerId);

// Inject the resolved inputs over the scene's placeholders…
Object.assign(scene.entities.Dealer.components.DeckDealer, cfg.deckDealer);
Object.assign(scene.entities.Net.components.P2PNetwork, cfg.network);
Object.assign(scene.entities.Net.components.PokerMultiplayer, cfg.multiplayer);

// …THEN load. P2PNetwork attaches with a real seat and auto-connects the mesh.
const game = new ArcadeGame(new BabylonAdapter());
await game.init(canvas);
await game.loadScene(scene);