Chess — Angular SDK

Component API reference for @beta-gamer/angular. The beta-gamer-chess-board component is fully self-contained — it manages its own socket, handles all game logic, and renders the complete game UI.

Install

npm install @beta-gamer/angular socket.io-client

NgModule import

import { BetaGamerModule } from '@beta-gamer/angular';

@NgModule({ imports: [BetaGamerModule] })
export class AppModule {}

<beta-gamer-chess-board>

Renders the full chess game UI: board, player rows, clocks, captured pieces, promotion modal, game-over modal, AFK banner, resign and draw offer buttons.

Input / Output	Type	Default	Description
`[showAfkWarning]`	boolean	true	@Input — show the built-in AFK countdown banner.
`[showCoords]`	boolean	true	@Input — show rank/file labels (a–h, 1–8) around the board.
`[showLastMove]`	boolean	true	@Input — highlight the from/to squares of the last move.
`[showLegalMoves]`	boolean	true	@Input — show dots on squares where the selected piece can legally move.
`[orientation]`	"white"\|"black"\|"auto"	auto	@Input — which color is at the bottom. "auto" uses the color assigned in game:started.
`(onLeave)`	EventEmitter	—	@Output — emitted when the player taps Leave or exits the game-over modal.

Full example

// chess-game.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { BetaGamerService } from '@beta-gamer/angular';

@Component({
  selector: 'app-chess-game',
  template: `
    <div class="game-screen">
      <bg-chess-board
        [showAfkWarning]="true"
        [showCoords]="true"
        [showLastMove]="true"
        [showLegalMoves]="true"
        orientation="auto"
        (onLeave)="handleLeave()"
      ></bg-chess-board>
    </div>
  `,
  styles: [`
    .game-screen { display: flex; flex: 1; background: #0a0a0f; }
  `],
})
export class ChessGameComponent implements OnInit {
  constructor(
    private svc: BetaGamerService,
    private router: Router,
  ) {}

  ngOnInit() {
    // token comes from your route state / resolver
    const token = history.state.sessionToken as string;

    // connectSocket: false — the board component manages its own socket
    this.svc.init(token, 'https://api.beta-gamer.com', '/socket.io', false);
  }

  handleLeave() {
    this.router.navigate(['/lobby']);
  }
}

Listening to events alongside the board

Use svc.on(event) to subscribe to any socket event while the board is running.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { BetaGamerService } from '@beta-gamer/angular';

@Component({ /* ... */ })
export class ChessGameComponent implements OnInit, OnDestroy {
  private sub = new Subscription();
  result: { winner: string | null; reason: string } | null = null;

  constructor(private svc: BetaGamerService) {}

  ngOnInit() {
    this.svc.init(token, 'https://api.beta-gamer.com', '/socket.io', false);

    this.sub.add(
      this.svc.on('game:over').subscribe(({ winner, reason }) => {
        this.result = { winner, reason };
        // show your own result overlay if showAfkWarning={false}
      })
    );
  }

  ngOnDestroy() { this.sub.unsubscribe(); }
}

For the full Angular setup walkthrough see the Angular integration guide. For socket event reference see Chess socket events.

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