Skip to content

this.bga.gameArea

Main game area

this.bga.gameArea.getElement(): HTMLElement

Returns the div of the game area to put the game template into.

Example in the setup function of Game.js
                const html = `<div>
                    <div class="round-counter">${_('Round')} ${gamedatas.currentRound}/${gamedatas.totalRound}</div>
                    <div>...anything else in your game template...</div>
                </div>`;
                this.bga.gameArea.getElement().insertAdjacentHTML('beforeend', html);

Banners

The framework comes with predefined banners.

Last turn banner

Use this banner when someone fulfills one of the end-of-game conditions, making this the last turn.

this.bga.gameArea.addLastTurnBanner(message?: string, args?: any): void;

If message is unset, the default is "This is the last turn!". For an example of args, see the addWinConditionBanner example, which works the same way.

Example:

    this.bga.gameArea.addLastTurnBanner(
        _('This is the last turn! (deck is empty)')
    );

Last turn banner example

If the action triggering the last turn banner is cancelled, you can remove the banner by using

this.bga.gameArea.removeLastTurnBanner(): void;

Win condition banner

When the game has multiple win conditions, use this function to display a message detailing which win condition was reached.

this.bga.gameArea.addWinConditionBanner(message?: string, args?: any): void;

Example:

    const winConditionText = _('${player_name} reached the Victory space of the Fame track and wins the game by being the most celebrated Monster!');
    this.bga.gameArea.addWinConditionBanner(
        winConditionText,
        { 'player_name': this.bga.players.getFormattedPlayerName(winnerId) }
    );

Win condition banner example