Chapter 7 of 13
Custom tabs
Extra panels in a drawer from the game's top bar, such as statistics or a history, fed by tab state the game page writes.
A Play Option may declare tabs: extra panels that open in a drawer from the game’s top bar, such
as match statistics or a history. Each is a web page like the game page, loaded the same way, with the same permissions and
Match Player Ids. The game and its tabs talk through tab state, which stays in this player’s
browser: the game page writes it with updateTabState and the tab reads it with requestTabState.
No change is pushed to the tab (onTabStateChange is deprecated and never called by CamTable), so
read it when the tab opens or when the room changes:
// In the game page
await sdk.updateTabState("stats", { rounds: 5, p1Wins: 3, p2Wins: 2 });
// In the tab page
import { createCustomTabClient } from "@camtable/sdk";
const tab = createCustomTabClient();
await tab.init();
render(await tab.requestTabState("stats"));
tab.onStateChange(async () => render(await tab.requestTabState("stats")));
A tab may call only the read-only calls, sendAction and the tab-state calls; permissioned
capabilities are refused for tabs as they are for the game.