Beginner’s Guide to Boardgame.io (Part 6): Events
Now that we have the basic structural design of boardgame.io set up — Board games have moves that change the G state of a boardgame.io app in some way, and the games are structured by phases and stages, to delineate what moves players can use in what part of the game.
Now, how do we change the other stateful aspect of boardgame.io, ctx?
Remember, ctx looks like this:
ctx: {
turn: 0,
currentPlayer: '0',
numPlayers: 2,
}and generally contains the metadata managed by the game?
As previous used and mentioned in the previous articles, we can use EVENTS.
What you can do with events
Events have generously been prewritten and provided by the boardgame.io framework, and provide a way for your webpage to change the ctx state. For example, you can add a button to your page that allows you to end a turn or a phase of the game. In fact, we have already discussed events in the articles with stages and phases — the endPhase and endStage methods are both events!
How to access events
In the React version of boardgame.io, you can access events as one of the props through props.events.”event name”.
In the javascript version of boardgame.io, you can find the events under the events property of the client.
List of events with descriptions
endPhase/endStage
endPhase and endStage will advance to the next phase or stage for the active player. The next phase/stage has to be declared in your game object. If there is no declared phase/stage, then the game will no longer have a phase/stage
setPhase/setStage
setPhase/setStage will take in a string argument and advance to that phase/stage.
endTurn
increments ctx.turn by 1 and sets the currentPlayer to the next player according to the turn order.
endGame
Ends the game. Any argument passed to endGame will be made available in ctx.gameover. The game ending will prevent further state changes.
setActivePlayers
Will add more players to become the active player, allowing for stage changes for multiple players. Explained further in the Stages article.
Event in Moves
Events can also be triggered in moves. Just pass the ctx value to the move as well and execute an event!
Example here:
moves: {
drawCard: (G, ctx) => {
ctx.events.endPhase();
};
}Please note that events will trigger and activate after the move is complete.
Conclusion
Events are very useful for preventing players and users from directly accessing the game state. They are also useful for providing prewritten methods for common state changes for ctx.
