Boardgame.io Angular Client

Angular client for Boardgame.io.

Current version (>=0.25) was built using Angular 9.

Installation

$ npm install --save boardgame.io-angular boardgame.io@0.37

Usage

Define your boardgame.io's framework independent Game.

Define your board component that inherits BoardBase - the available properties are described at the Client's documentation under board component:

@Component({  
  template: 'do something like {{G | json}}',  
})  
export class MyBoardComponent extends BoardBase {  
   // unfortunately, 
   // the following boilerplate is currently required:
   constructor(@Inject(OBSERVABLE_BOARD_CONFIG) 
               observableBoardConfig: Observable<BoardConfig>) {  
     super(observableBoardConfig);  
   }  
 }

This board component is loaded dynamaically, so it shouldn't indirectly depend on other parts of your application. In order to define its module dependencies you need to add a module:
```
@NgModule({
  declarations: [MyBoardComponent],
  imports: [CommonModule, /* other dependencies */],  
}) export class StupidButNeededModule {}
```
(It would have been nice to be able to just specify imports on the board component; this feature is tracked by Angular issue#33507).

import the module in you main app:

import { NgModule } from '@angular/core';  
import { BoardgameIoModule } from 'boardgame.io-angular';  
  
@NgModule({  
  declarations: [  
    MyBoardComponent  
  ],  
  imports: [  
    // ...  
    BoardgameIoModule, // import for using bio-client  
]}) // Angular 9+ does not require entryComponent!
export class MyModule {}

Use bioGameConfig attribute directive to setup game scope. It uses the same config as boardgame.io's client factory. Use bio-client component to setup a client instance:

import { MyGame } from '.';  
import { MyBoardComponent } from '.';  
 
@Component({  
  template: `
    <bio-client
      [bioGameConfig]="config" gameID="single">
    </bio-client>`
})  
export class MyExampleComponent {
  config = {game: MyGame, board: MyBoardComponent};
}

bioGameConfig can also be used setup a game scope for more than one client (useful for a multiview game and examples):

<ng-container [bioGameConfig]="config">
  <bio-client gameID="multi" playerID="0"></bio-client>`
  <bio-client gameID="multi" playerID="1"></bio-client>`
</ng-container>

bioGameConfig just assigns a config to a GameScope injectable. You can also directly make a GameScope available to bio-client using the providers property of an available module, a parent component, or a directive.

See the examples.

Development

Running examples in this repository

$ git clone https://github.com/turn-based/boardgame.io-angular.git  
$ cd boardgame.io-angular  
$ npm i  
$ npm run build   
$ npm run start

For Running the multiplayer examples you'll also need to have the server running running on port 8000:

$ cd server  
$ npm i  
$ npm run start:dev

This project was generated with Angular CLI version 9 using the follwing commands :

npx @angular/cli@9 new boardgame.io-angular --create-application false --prefix bio --style scss --strict --skip-tests -s -t
cd boardgame.io-angular
npx @angular/cli@9 g application demo --prefix bio --style scss --skip-tests -s -t
npx @angular/cli@9 g library bio-angular --prefix bio

turn-based / boardgame.io-angular