this.bga.statusBar

Status bar

Status bar text

this.bga.statusBar.setTitle(title: string, args?: object)

Update the page title (aka status bar prompt). Can handle \${you} and \${actplayer} and any other variables you pass as args.

if (args.mandatory_card_name) {
    const mandatoryCardTitle = this.bga.players.isCurrentPlayerActive() ? _('${you} must take ${mandatory_card_name}') : _('${actplayer} must take ${mandatory_card_name}');
    this.bga.statusBar.setTitle(mandatoryCardTitle, args);
}

Status bar buttons

this.bga.statusBar.addActionButton(label: string, callback: Function, params?: object): HTMLButtonElement

Parameters:

label: the label to be shown; can be HTML. Pass a translated string, e.g. _('Yes')
callback: the function to call on click; must be a function rather than a method name
params: object optionally containing one or more of the following:
color: string - can be primary (default) (blue), secondary (gray), alert (red)
id: string - is the DOM element id to set. If null/undefined, the button will not have an id, but you can still manipulate it by storing the reference to the DOM Element returned by the function
classes: string|string[] - i.e 'disabled blinking' or ['disabled', 'blinking'].
destination: ElementOrId - the DOM Element to add the button to. If not specified, will add it to the status bar.
title: string - plain text description of the label. Should be set when the button label is an icon, for accessibility.
disabled: boolean - makes the button disabled. Prevents the callback from being executed
tooltip: string - the tooltip of the button
confirm: string | Function - the confirmation message to display before triggering the callback, if set (or function handler, see example below).
autoclick: boolean | { abortSignal: AbortSignal, pausable: boolean } - whether the button should be clicked automatically after a short delay (for confirmation buttons)

Example of a standard call without params:

 this.bga.statusBar.addActionButton(_('Pass'), () => this.bga.actions.performAction('actPass', {}));

Example of a standard call with params:

 this.bga.statusBar.addActionButton(_('Pass'), () => this.bga.actions.performAction('actPass', {}), {
   id: 'my_button',
   color: 'secondary',
   classes: 'my-outline-class'
   disabled: true,
   tooltip: _('You cannot pass'),
   confirm: _('Are you sure to pass?'),
 });

Note: the confirm parameter can be a string or a function that returns a string or null

Example of a standard call with params:

 this.bga.statusBar.addActionButton(_('Discard Selected Cards'), () => this.bga.actions.performAction('actDiscard', { cardIds: this.getSelectedCardIds().join(',') }), {
   confirm: () => {
     if (this.getSelectedCardIds().length === 0) { // no card is selected, show the warning
       return _('Are you sure you don't want to discard any cards?');
     } else { // cards are selected, do not show the warning
       return null;
     }
   }
 });

Example of a confirm button with autoclick animation:

 this.bga.statusBar.addActionButton(_('Confirm'), () => this.bga.actions.performAction('actConfirm', {}), {
   autoclick: true
 });
 // if you have a user preference to auto-confirm
 this.bga.statusBar.addActionButton(_('Confirm'), () => this.bga.actions.performAction('actConfirm', {}), {
   autoclick: this.bga.userPreferences.get(100) == 1, // adapt to your user preference id and values
 });

Example of a confirm button with autoclick animation and a pause button:

 this.bga.statusBar.addActionButton(_('Confirm'), () => this.bga.actions.performAction('actConfirm', {}), {
   autoclick: { pausable: true }
 });
 // if you have a user preference to auto-confirm
 this.bga.statusBar.addActionButton(_('Confirm'), () => this.bga.actions.performAction('actConfirm', {}), {
   autoclick: this.bga.userPreferences.get(100) == 1 ? { pausable: true } : null, // adapt to your user preference id and values
 });

Example of a confirm button with autoclick animation and a button to stop the timer: (use ONLY if pausable setting isn't enough)

 const abortController = new AbortController();
 this.bga.statusBar.addActionButton(_('Confirm'), () => this.bga.actions.performAction('actConfirm', {}), {
   autoclick: { abortSignal: abortController.signal }
 });
 this.bga.statusBar.addActionButton(_("Let me think!"), () => abortController.abort(), { color: 'secondary' });

Example of a confirm button with autoclick animation and a button to stop the timer, and a user preference for the timer: (use ONLY if pausable setting isn't enough)

 const isUsingTimer = this.bga.userPreferences.get(100) == 1;
 const abortController = new AbortController();
 this.bga.statusBar.addActionButton(_('Confirm'), () => this.bga.actions.performAction('actConfirm', {}), {
   autoclick: isUsingTimer ? { abortSignal: abortController.signal } : false
 });
 if (isUsingTimer) {
   this.bga.statusBar.addActionButton(_("Let me think!"), () => abortController.abort(), { color: 'secondary' });
 }

Note: the button label can be HTML, if you want to put some images on the label.

this.bga.statusBar.removeActionButtons()

Removes all buttons from the title bar.