Chess — React SDK

Drop-in React components for Chess. All components must be rendered inside a BetaGamerProvider — they read game state from context and emit socket events automatically.

Install

npm install @beta-gamer/react
# or
yarn add @beta-gamer/react

ChessBoard

The interactive chess board. Handles click-to-select, legal move highlighting, piece dragging, and the pawn promotion dialog. Automatically emits game:move when a legal move is made. Becomes read-only when it's not the player's turn.

Prop	Type	Default	Description
`orientation`	"white" \| "black"	auto (your color)	Which side is at the bottom. Defaults to the color assigned to you in game:started.
`showCoords`	boolean	true	Show rank/file labels (a–h, 1–8) around the board.
`showLastMove`	boolean	true	Highlight the squares of the last move played.
`showLegalMoves`	boolean	true	Show dots/rings on squares where the selected piece can move.
`animateMoves`	boolean	true	Animate piece movement with a CSS transition.
`className`	string	—	Extra CSS class on the board wrapper.

<ChessBoard
  orientation="white"
  showCoords={true}
  showLastMove={true}
  showLegalMoves={true}
  animateMoves={true}
  className="rounded-lg shadow-xl"
/>

ChessMoveHistory

A scrollable move list in Standard Algebraic Notation (SAN), paired by full move number (e.g. 1. e4 e5 2. Nf3 Nc6). Auto-scrolls to the latest move. Updates live as game:move:made events arrive.

Prop	Type	Default	Description
`maxHeight`	string \| number	"400px"	CSS max-height of the scrollable container.
`className`	string	—	Extra CSS class on the container.

<ChessMoveHistory maxHeight="300px" className="w-48 border border-slate-700 rounded-lg" />

ChessCapturedPieces

Displays the piece symbols captured by the given player, grouped by type. Also shows the material advantage score if one side is ahead.

Prop	Type	Required	Description
`player`	"self" \| "opponent"	Yes	Whose captured pieces to show. "self" = pieces you captured; "opponent" = pieces they captured.
`showScore`	boolean	No — default true	Show the +N material advantage label when one side is ahead.
`className`	string	No	Extra CSS class.

{/* Pieces you captured (shown above the board — opponent's side) */}
<ChessCapturedPieces player="self" />

{/* Pieces opponent captured (shown below the board — your side) */}
<ChessCapturedPieces player="opponent" showScore={true} />

Full layout example

import {
  BetaGamerProvider,
  ChessBoard,
  ChessMoveHistory,
  ChessCapturedPieces,
  PlayerCard,
  Timer,
} from '@beta-gamer/react';

export default function ChessPage({ sessionToken }: { sessionToken: string }) {
  return (
    <BetaGamerProvider token={sessionToken}>
      <div className="flex gap-6 items-start">

        {/* Left column: board + player info */}
        <div className="flex flex-col gap-2">
          {/* Opponent at top */}
          <PlayerCard player="opponent" />
          <Timer player="opponent" />
          <ChessCapturedPieces player="self" />   {/* pieces you captured */}

          <ChessBoard orientation="white" />

          <ChessCapturedPieces player="opponent" /> {/* pieces they captured */}
          <Timer player="self" />
          <PlayerCard player="self" />
        </div>

        {/* Right column: move history */}
        <ChessMoveHistory className="w-52 mt-12" maxHeight="480px" />
      </div>
    </BetaGamerProvider>
  );
}

React Native @beta-gamer/react-native

The React Native SDK exposes the same components with style / textStyle props instead of className. Requires react-native-webview for the board renderer.

npm install @beta-gamer/react-native react-native-webview

Component	RN-specific props
`ChessBoard`	style (ViewStyle), boardStyle (ViewStyle)
`ChessMoveHistory`	style (ViewStyle), textStyle (TextStyle), rowStyle (ViewStyle)
`ChessCapturedPieces`	style (ViewStyle), pieceStyle (TextStyle)
`PlayerCard`	style (ViewStyle), nameStyle (TextStyle), avatarStyle (ViewStyle)
`Timer`	style (ViewStyle), textStyle (TextStyle)

import { BetaGamerProvider, ChessBoard, ChessMoveHistory, PlayerCard, Timer } from '@beta-gamer/react-native';
import { View, StyleSheet } from 'react-native';

export default function ChessScreen({ sessionToken }: { sessionToken: string }) {
  return (
    <BetaGamerProvider token={sessionToken}>
      <View style={styles.container}>
        <PlayerCard player="opponent" style={styles.card} nameStyle={styles.name} />
        <Timer player="opponent" style={styles.timer} textStyle={styles.clock} />
        <ChessBoard style={styles.board} />
        <ChessMoveHistory style={styles.history} textStyle={styles.move} rowStyle={styles.row} />
        <Timer player="self" style={styles.timer} textStyle={styles.clock} />
        <PlayerCard player="self" style={styles.card} nameStyle={styles.name} />
      </View>
    </BetaGamerProvider>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0f0f0f', padding: 16 },
  board:     { width: '100%', aspectRatio: 1 },
  card:      { flexDirection: 'row', alignItems: 'center', gap: 8, marginVertical: 4 },
  name:      { color: '#fff', fontWeight: '600' },
  timer:     { alignSelf: 'flex-end' },
  clock:     { color: '#fff', fontFamily: 'monospace', fontSize: 18 },
  history:   { maxHeight: 200, marginTop: 12 },
  move:      { color: '#94a3b8', fontSize: 12 },
  row:       { flexDirection: 'row', gap: 8 },
});

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