Tic-tac-toe — Angular SDK

Component API reference for @beta-gamer/angular. The bg-tictactoe-board component is fully self-contained — it manages its own socket, handles mark placement, detects winning lines, 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 {}

<bg-tictactoe-board>

Renders the full Tic-tac-toe game UI: 3×3 grid, X/O marks, ghost mark preview, winning line highlight, AFK banner, game-over modal, and resign button.

Input / Output	Type	Default	Description
`[showAfkWarning]`	boolean	true	@Input — show the built-in AFK countdown banner.
`(onLeave)`	EventEmitter	—	@Output — emitted when the player taps Leave or exits the game-over modal.

Full example

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

@Component({
  selector: 'app-tictactoe-game',
  template: `
    <div class="game-screen">
      <bg-tictactoe-board
        [showAfkWarning]="true"
        (onLeave)="handleLeave()"
      ></bg-tictactoe-board>
    </div>
  `,
})
export class TictactoeGameComponent implements OnInit {
  constructor(private svc: BetaGamerService, private router: Router) {}

  ngOnInit() {
    const token = history.state.sessionToken as string;
    this.svc.init(token, 'https://api.beta-gamer.com', '/socket.io', false);
  }

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

For the full Angular setup walkthrough see the Angular integration guide. For socket event reference see Tic-tac-toe socket events.

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