Skip to content
PEERLESSDocs

Player overlay, audio and fullscreen

Pause input under panels, follow the player's volume, request fullscreen and show your roster in the overlay.

Pause input while a panel is open

When the player opens a panel, the SDK releases held keys and pointer lock, then emits overlay. Clear your own input state too:

Peerless.on("overlay", ({ visible }) => {
  inputSuppressed = visible;
  if (visible) clearHeldInput(); // firing, controller state, touch gestures
});

Keep server simulation running; only local input pauses. Reacquire pointer lock from the player's next click.

Volume and mute

The player has a volume slider and a mute button. PEERLESS applies them to your game's Web Audio output and media elements automatically, for every hosted build, with no code. If your game has its own mixer or a sound settings screen, follow the player's setting:

const { muted, volume } = Peerless.audio.state(); // volume is 0 to 1
const stop = Peerless.audio.onChange(({ muted, volume }) => {
  soundSettings.showPlayerVolume(muted ? 0 : volume);
});

Don't multiply your own volume by the player's value: it is already applied to the audio output.

Fullscreen

The player's control bar has a fullscreen button. If your game has its own fullscreen control, ask the player to do it so overlay panels keep working:

fullscreenButton.onclick = () => Peerless.fullscreen();

Outside PEERLESS, fullscreen(element) calls the element's own requestFullscreen().

Leaving the game

When the player chooses Leave game, the SDK emits leave-game before they return to their library. Close match connections deliberately; relay rooms are closed for you.

Peerless.on("leave-game", () => matchConnection.close());

Show your roster in the overlay

Games with their own servers can publish who is in the match. The overlay uses it to announce departures and reconnections:

await Peerless.player.snapshot({
  sessionKey: room.roomId,
  players: [{ id: player.id, displayName: player.name, disconnected: false }],
});
await Peerless.player.event({
  id: crypto.randomUUID(),
  sessionKey: room.roomId,
  kind: "reconnecting", // connected, closed, removed or expired
});

Include every human participant, including disconnected players, and change sessionKey when entering a new match. These reports are display only; they never change authorization. Relay rooms report connection events automatically.