Connect 4 — Angular SDK

Component API reference for @beta-gamer/angular. The bg-connect4-board component is fully self-contained — it manages its own socket, handles column drops, detects winning cells, 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-connect4-board>

Renders the full Connect 4 game UI: 6×7 grid, column drop zones, red/yellow pieces, winning cell 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

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

@Component({
  selector: 'app-connect4-game',
  template: `
    <div class="game-screen">
      <bg-connect4-board
        [showAfkWarning]="true"
        (onLeave)="handleLeave()"
      ></bg-connect4-board>
    </div>
  `,
})
export class Connect4GameComponent 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 Connect 4 socket events.

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