Boardgame.io Angular Client
Angular client for Boardgame.io.
Checkout the demo application
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:
-
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:
ts @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:
;;// Angular 9+ does not require entryComponent! -
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:;;
bioGameConfig
can also be used setup a game scope for more than one client (useful for a multiview game and examples):``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.
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
Angular CLI version 9 using the follwing commands :
This project was generated withnpx @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