logo
By Lawrence

5 minutes

Make a Room, Share a Link

Last lesson we built a room server that hands out seats and creates one shared secret seed. It works, but no one can reach it yet: you can't type a code, send a link to a friend, or turn "a server is running" into "I'm in seat 2." That missing piece is client code, and it runs before the scene loads — you can't open a peer mesh until you know your own seat at the table.

All of that pre-scene work lives in one module, roomClient.ts — plain functions, no System and no EventBus yet. They figure out which seat a browser gets, then split that answer into the inputs the networked scene needs.

Generate a room code

A room needs a short name, easy to read aloud over the phone. generateRoomCode makes one: six letters, nothing more.

From the room client:

src/components/P2PNetwork/roomClient.ts
const ROOM_CODE_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const ROOM_CODE_LENGTH = 6;

/**
 * A shareable room code: `ROOM_CODE_LENGTH` random letters. The randomness is
 * injectable (defaulting to `Math.random`) so a test gets a deterministic code.
 */
export function generateRoomCode(rand: () => number = Math.random): string {
  let code = '';
  for (let i = 0; i < ROOM_CODE_LENGTH; i++) {
    code += ROOM_CODE_ALPHABET[Math.floor(rand() * ROOM_CODE_ALPHABET.length)];
  }
  return code;
}

The randomness is an argument defaulting to Math.random, so a test can pass its own and get the same code every run. Call it with no arguments and you get a string — drop that straight into the address bar:

const code = generateRoomCode();
// → 'ABCDEF'
history.replaceState(null, '', `?room=${code}`);
// the URL is now the invite — copy it, send it

Continue reading

Unlock the Full Course

Every lesson, the runnable examples, and the finished build — yours to keep.

$9one-time

Was this page helpful?

We read every note — tell us what's working and what isn't.

↑↓ NavigateEnter SelectEsc CloseCtrl+K Open Search