Angular client for Boardgame.io.
Checkout the demo application
Current version (>=0.25) was built using Angular 9.
$ npm install --save boardgame.io-angular boardgame.io@0.37
- 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. Usebio-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 aGameScope
injectable. You can also directly make aGameScope
available tobio-client
using theproviders
property of an available module, a parent component, or a directive.
- See the examples.
$ 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