this.bga.gameui

This section lists the miscellaneous functions the framework provides.

Animations

Use the BgaAnimations library to do animations.

this.bga.gameui.bgaAnimationsActive()

Function to know if animations should be played. Animations should not be played in instantaneousMode (fast-replay mode), or if the tab is not displayed in the browser. Returns a boolean saying if animations should be played.

  if (this.bga.gameui.bgaAnimationsActive()) {
    // play an animation
  } else {
    // just apply the end situation of the animation
  }

Tooltips

Adding static tooltips

this.bga.gameui.addTooltip(nodeId: string, helpStringTranslated: string, actionStringTranslated: string, delay?: number): void

Add a simple text tooltip to the DOM node.

Specify 'helpStringTranslated' to display some information about "what is this game element?". Specify 'actionStringTranslated' to display some information about "what happens when I click on this element?".

You must specify both strings. You can use one and specify an empty string for the other.

When you pass text directly, the function _() must be used to mark the text for translation, except for an empty string.

Parameter "delay" is optional. It is primarily used to specify a zero delay for some game element when the tooltip gives really important information for the game - but remember: no essential information must be placed in tooltips as they won't be displayed in some browsers (see Guidelines).

Example:

   this.bga.gameui.addTooltip( 'cardcount', _('Number of cards in hand'), '' );

Note: this generates a static tooltip and attaches it to an existing DOM element. If you need to generate a tooltip more dynamically, you have to call this method every time information about the object is updated or use a different technique. See dynamic tooltips below.

this.bga.gameui.addTooltipHtml(nodeId: string, html: string, delay?: number): void

Add an HTML tooltip to the DOM node (for more elaborate content such as presenting a bigger version of a card).

this.bga.gameui.addTooltipToClass(cssClass: string, helpStringTranslated: string, actionStringTranslated: string, delay?: number ): void

Add a simple text tooltip to all the DOM nodes set with this cssClass. See more details above for this.bga.gameui.addTooltip.

    this.bga.gameui.addTooltipToClass( 'meeple', _('This is A Meeple'), _('Click to tickle') );

this.bga.gameui.addTooltipHtmlToClass(cssClass: string, html: string, delay?: number): void

Add an HTML tooltip to all the DOM nodes set with this cssClass (for more elaborate content such as presenting a bigger version of a card).

Removing static tooltips

this.bga.gameui.removeTooltip(nodeId: string): void

Remove a tooltip from the DOM node with the given id.

Advanced tooltips

Force a tooltip to open

If you want to force a tooltip to open in reaction to another action, such as a click, you can do this:

  this.bga.gameui.tooltips[id].open(id)

where id is the id of the node where the tooltip was installed.

Other useful stuff

Callback on screen size change

this.bga.gameui.onScreenWidthChange = () => this.myWidthChangeCallback()
This function can be overridden in your game to manage some resizing on the client side when the browser window is resized. This function is also triggered at load time, so it can be used to adapt to the viewport size at the start of the game too.

Interface locking

this.bga.gameui.checkLock(nomessage?: boolean): boolean

When using "lock: true" in an AJAX call you can use this function to check if the interface is in a locked state (it will be locked during a server call and notification processing). This check can be used to block some other interactions which do not result in ajaxcall or if you want to suppress errors. Note: normally you only need to use this.bga.actions.checkAction(...), this is for advanced cases.

It will also show an error unless nomessage is set to true.

 function onChangeMyMind( evt )  {
    if( this.bga.gameui.checkLock() ) {
       // Do the action
    }
 }