Shared components

These components work across all games. In React they accept className for styling; in React Native they accept style / textStyle.

PlayerCard

Displays a player's avatar, display name, and an active-turn indicator.

Prop	Type	Required	Description
`player`	"self" \| "opponent"	Yes	Which player to display
`className`	string	No	Extra CSS classes (React only)
`style`	ViewStyle	No	Container style (React Native only)
`nameStyle`	TextStyle	No	Name text style (React Native only)

import { PlayerCard } from '@beta-gamer/react';

// Shows opponent's name + active-turn highlight when it's their turn
<PlayerCard player="opponent" className="mb-2" />

// Shows your own name
<PlayerCard player="self" className="mt-2" />

Timer

A live countdown clock that syncs with the server. Counts down only when it's that player's turn. Turns red below 30 seconds.

Prop	Type	Required	Description
`player`	"self" \| "opponent"	Yes	Which player's clock to show
`initialSeconds`	number	No	Starting value in seconds. Defaults to the session clock (600 for chess).
`className`	string	No	Extra CSS classes (React only)
`style`	ViewStyle	No	Container style (React Native only)
`textStyle`	TextStyle	No	Clock text style (React Native only)

import { Timer } from '@beta-gamer/react';

<Timer player="opponent" className="text-lg font-mono" />
<Timer player="self"     className="text-lg font-mono" />

// Override starting time (e.g. 5-minute game)
<Timer player="self" initialSeconds={300} />

⚠️ The Timer syncs from timer:update socket events. If you're using useSocket() to listen to events manually, avoid also rendering a Timer for the same player — they'll conflict.

Beta Gamer GaaS API — questions? support@beta-gamer.com