@beta-gamer/angular

Angular SDK for Beta Gamer — embed multiplayer games into your app as standalone components. You control the layout, we handle the game logic, matchmaking, and real-time sync.

Installation

npm install @beta-gamer/angular

Requirements

• Angular 16+
• A Beta Gamer tenant account and API key → beta-gamer.com

Quick start

1. Create a session from your backend (never expose your API key on the client)

const res = await fetch('https://api.beta-gamer.com/v1/sessions', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer bg_live_xxxx',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    game: 'chess',
    matchType: 'matchmaking',
    players: [{ id: 'user_123', displayName: 'Alex' }],
  }),
});
const { sessionToken } = await res.json();

2. Initialise the service and render a board

// app.component.ts
import { Component, inject, OnInit } from '@angular/core';
import { BetaGamerService, ChessBoardComponent } from '@beta-gamer/angular';

@Component({
  standalone: true,
  imports: [ChessBoardComponent],
  template: `
    <bg-chess-board
      style="width:100%;height:500px"
      [showCoords]="true"
      [showLastMove]="true"
      [showLegalMoves]="true"
      orientation="auto"
      (onLeave)="handleLeave()"
    />
  `,
})
export class AppComponent implements OnInit {
  private svc = inject(BetaGamerService);

  ngOnInit() {
    this.svc.init('<SESSION_TOKEN>', 'https://api.beta-gamer.com');
  }

  handleLeave() {
    // navigate away or show a lobby screen
  }
}

Service

BetaGamerService

Injectable service — call init() once with the session token.

svc.init(token: string, serverUrl?: string, socketPath?: string, connectSocket?: boolean)

connectSocket (default true) — set to false when using only board components. Board components load the game in an iframe with their own socket. A second socket with the same token causes duplicate connections and AFK/turn bugs.

| Signal | Type | Description | |--------|------|-------------| | svc.session | Signal<Session> | Current session (game, matchType, players) | | svc.gameState | Signal<GameState> | Live game state (status, winner, reason) | | svc.token | string | Raw JWT session token | | svc.socket | Socket | Raw Socket.IO socket for custom events |

Components

All components are standalone — import only what you need.

Shared (all games)

| Component | Selector | Inputs | Description | |-----------|----------|--------|-------------| | PlayerCardComponent | <bg-player-card> | [player] ("self" | "opponent") | Player name + active-turn indicator | | TimerComponent | <bg-timer> | [player], [initialSeconds]? | Live countdown clock |

Chess — ChessBoardComponent

Selector: <bg-chess-board>

| Input | Type | Default | Description | |-------|------|---------|-------------| | [serverUrl] | string | 'https://api.beta-gamer.com' | Base URL of the Beta Gamer server | | [showAfkWarning] | boolean | true | Show the built-in AFK countdown banner | | [showCoords] | boolean | true | Show rank/file labels (a–h, 1–8) around the board | | [showLastMove] | boolean | true | Highlight the from/to squares of the last move | | [showLegalMoves] | boolean | true | Show dots on squares where the selected piece can legally move | | [orientation] | 'white' \| 'black' \| 'auto' | 'auto' | Which color is at the bottom. 'auto' uses the color assigned in game:started | | (onLeave) | EventEmitter<void> | — | Emitted when the player taps Leave or exits the game-over modal |

Checkers — CheckersBoardComponent

Selector: <bg-checkers-board>

| Input | Type | Default | Description | |-------|------|---------|-------------| | [serverUrl] | string | 'https://api.beta-gamer.com' | Base URL of the Beta Gamer server | | [showAfkWarning] | boolean | true | Show the built-in AFK countdown banner | | [showLastMove] | boolean | true | Highlight the from/to squares of the last move | | [orientation] | 'red' \| 'black' \| 'auto' | 'auto' | Which color is at the bottom. 'auto' uses the color assigned in game:started | | (onLeave) | EventEmitter<void> | — | Emitted when the player taps Leave or exits the game-over modal |

Connect 4 — Connect4BoardComponent

Selector: <bg-connect4-board>

| Input | Type | Default | Description | |-------|------|---------|-------------| | [serverUrl] | string | 'https://api.beta-gamer.com' | Base URL of the Beta Gamer server | | [showAfkWarning] | boolean | true | Show the built-in AFK countdown banner | | (onLeave) | EventEmitter<void> | — | Emitted when the player taps Leave or exits the game-over modal |

Tic-tac-toe — TictactoeBoardComponent

Selector: <bg-tictactoe-board>

| Input | Type | Default | Description | |-------|------|---------|-------------| | [serverUrl] | string | 'https://api.beta-gamer.com' | Base URL of the Beta Gamer server | | [showAfkWarning] | boolean | true | Show the built-in AFK countdown banner | | (onLeave) | EventEmitter<void> | — | Emitted when the player taps Leave or exits the game-over modal |

Other components

| Component | Selector | Inputs | Game | |-----------|----------|--------|------| | ChessMoveHistoryComponent | <bg-chess-move-history> | — | chess | | ChessCapturedPiecesComponent | <bg-chess-captured-pieces> | [player] | chess | | Connect4ScoreComponent | <bg-connect4-score> | — | connect4 | | SubwayRunnerGameComponent | <bg-subway-runner-game> | — | subway-runner | | SubwayRunnerScoreComponent | <bg-subway-runner-score> | — | subway-runner | | SubwayRunnerLivesComponent | <bg-subway-runner-lives> | — | subway-runner |

[showAfkWarning] (default true) — set to false to hide the built-in AFK countdown banner and implement your own using the {game}:afk_warning / {game}:afk_warning_cleared socket events via svc.socket.

Listening to game events

import { inject, OnInit } from '@angular/core';
import { BetaGamerService } from '@beta-gamer/angular';

export class MyComponent implements OnInit {
  private svc = inject(BetaGamerService);

  ngOnInit() {
    this.svc.socket.on('chess:afk_warning', ({ playerId, secondsRemaining }) => {
      console.log('AFK warning for', playerId, secondsRemaining);
    });
  }
}

Supported games

chess · checkers · connect4 · tictactoe · subway-runner

Links

• Documentation
• Dashboard
• React SDK
• React Native SDK