Checkers — React SDK

Drop-in React components for Checkers. 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

CheckersBoard

The interactive checkers board. Handles click-to-select, valid move highlighting (including mandatory captures), and multi-jump chains. Automatically emits game:get_moves on piece selection and game:move on destination click. Becomes read-only when it's not the player's turn.

Prop	Type	Default	Description
`orientation`	"red" \| "black"	auto (your color)	Which side is at the bottom. Defaults to the color assigned to you in game:started.
`showLastMove`	boolean	true	Highlight the from/to squares of the last move.
`animateMoves`	boolean	true	Animate piece movement with a CSS transition.
`className`	string	—	Extra CSS class on the board wrapper.

<CheckersBoard
  orientation="red"
  showLastMove={true}
  animateMoves={true}
  className="rounded-lg shadow-xl"
/>

PlayerCard

Displays a player's avatar, display name, color label (Red / Black), live piece count, and an active-turn indicator. Updates automatically as pieces are captured.

Prop	Type	Required	Description
`player`	"self" \| "opponent"	Yes	Which player to display.
`showPieceCount`	boolean	No — default true	Show the remaining piece count next to the player name.
`className`	string	No	Extra CSS class.

<PlayerCard player="opponent" showPieceCount={true} className="mb-2" />
<PlayerCard player="self"     showPieceCount={true} className="mt-2" />

Full layout example

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

export default function CheckersPage({ sessionToken }: { sessionToken: string }) {
  return (
    <BetaGamerProvider token={sessionToken}>
      <div className="flex flex-col gap-2 max-w-lg mx-auto">
        <PlayerCard player="opponent" />
        <CheckersBoard orientation="red" />
        <PlayerCard player="self" />
      </div>
    </BetaGamerProvider>
  );
}

React Native @beta-gamer/react-native

The React Native SDK exposes the same components with style / textStyle props instead of className.

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

Component	RN-specific props
`CheckersBoard`	style (ViewStyle), boardStyle (ViewStyle)
`PlayerCard`	style (ViewStyle), nameStyle (TextStyle), avatarStyle (ViewStyle)

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

export default function CheckersScreen({ sessionToken }: { sessionToken: string }) {
  return (
    <BetaGamerProvider token={sessionToken}>
      <View style={styles.container}>
        <PlayerCard player="opponent" style={styles.card} nameStyle={styles.name} />
        <CheckersBoard style={styles.board} />
        <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' },
});

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