Game interface logic: yourgamename.js

This is the main file for your game interface. Here you will define:

• which actions on the page will generate calls to the server
• what happens when you get a notification for change from the server and how it will show in the browser.

File structure

The details on how the file is structured is described directly with comments on the code skeleton provided to you.

Basically, here's this structure:

• constructor: here you can define variable global to your whole interface.
• setup: this method is called when the page is refreshed, in order you can setup the game interface.
• onEnteringState: the method is called when entering in a new game state. This way you can customize the view for this game state.
• onLeavingState: the method is called when leaving a game state.
• onUpdateActionButtons: called when entering in a new state, in order you can add action buttons in status bar.
• (utility methods): at this place you can define your utility methods
• (player's actions): at this place you can write your handlers for player's action on the interface (ex: click on an item).
• setupNotifications: in this method you associate notifications with notification handlers. This way, for each game notification, you trigger a javascript method to handle it and update the game interface.
• (notification handlers): at this place you can define your notifications handlers.

General tips

this.player_id

Id of the player on whose browser the code is running.

this.isSpectator

Flag set to true if the user at the table is a spectator (not a player).

this.gamedatas

Contains your initial set of datas to init the game, created at game start or game refresh (F5)

You can update it as needed to keep an up to date reference of the game on the client side if you need it (most of the time you don't).

isCurrentPlayerActive()

Returns true if the player on whose browser the code is running is currently active (it's his turn to play)

this.getActivePlayerId()

Return the ID of active player, or null if we are not in a "activeplayer" type state.

this.getActivePlayers()

Return an array with the IDs of players that are currently active (or an empty array if there is not).

Dojo framework

BGA is using the Dojo Javascript framework.

The Dojo framework allows us to do complex things easier, and the BGA framework is using Dojo framework a lot.

To realize game although, you only need to use a few part of the Dojo framework. All the Dojo methods you need to use are describe on this page.

Access and manipulate the DOM

$('some_html_element_id')

The $() function is used to get some HTML element using its "id" attribute.

Example 1: modify the content of a "span" element:

In your HTML code:
   <span id="a_value_in_the_game_interface">1234</span>

In your Javascript code:
   $('a_value_in_the_game_interface').innerHTML = "9999";

Note: $() is the standard method to access some HTML element with BGA Framework. You must not use "getElementById" function.

dojo.style

With dojo.style you can modify a CSS property of any HTML element of your interface.

Examples:

     // Make an element disappear
     dojo.style( 'my_element', 'display', 'none' );

     // Give an element a 2px border
     dojo.style( 'my_element', 'borderWidth', '2px' );

     // Change the background position of an element
     // (very practical when you are using CSS sprite to transform an element to another)
     dojo.style( 'my_element', 'backgroundPosition', '-20px -50px' );

Note: you must always use dojo.style to modify CSS properties of HTML elements.

Note²: if you have to modify several CSS properties of an element, or if you have some complex CSS transformation to do, you should consider using dojo.addClass/dojo.removeClass (see below).

dojo CSS classes manipulation

In many situation, a bunch of many small CSS property update can be replaced by a CSS class change (ie: you add a CSS class to your element instead of applying all modification manually).

Advantages are:

• All your CSS stuff remains in your CSS file.
• You can add/remove a list of CSS modifications with a simple function and whithout error.
• You can test if you applied the stuff to an element with "dojo.hasClass" method.

Example from "Reversi":

    // We add "possibleMove" to an element
    dojo.addClass( 'square_'+x+'_'+y, 'possibleMove' );

    // In our CSS file, the class is defined as:
    .possibleMove {
      background-color: white;
      opacity: 0.2;
      filter:alpha(opacity=20); /* For IE8 and earlier */  
      cursor: pointer;  
     }

     // So we've applied 4 CSS property change in one line of code.

     // ... and when we need to check if a square is a possible move on client side:
     if( dojo.hasClass( 'square_'+x+'_'+y, 'possibleMove' ) )
     { ... }

     // ... and if we want to remove all possible moves in one line of code (see "dojo.query" method):
     dojo.query( '.possibleMove' ).removeClass( 'possibleMove' );

Conclusion: we encourage you to use dojo.addClass, dojo.removeClass and dojo.hasClass to make your life easier :)

dojo.query

With dojo.query, you can query a bunch of HTML elements with a single function, with a "CSS selector" style.

Example:

     // All elements with class "possibleMove":
     var elements = dojo.query( '.possibleMove' );

     // Count number of tokens (ie: elements with class "token") on the board (ie: element with id "board"):
     dojo.query( '#board .token' ).length;

But what is really cool with dojo.query is that you can combine it with almost all methods above.

Examples:

     // Trigger a method when the mouse enter in any element with class "meeple":
     dojo.query( '.meeple' ).connect( 'onmouseenter', this, 'myMethodToTrigger' );

     // Hide all meeples who are on the board
     dojo.query( '#board .meeple' ).style( 'display', 'none' );

dojo.place

dojo.place is the best function to insert some HTML code somewhere in your game interface without breaking something. It is much better to use that "innerHTML=" method as soon as you must insert HTML tags and not only values.

     // Insert your HTML code as a child of a container element
     dojo.place( "<your html code>", "your_container_element_id" );

     // Replace the container element with your new html
     dojo.place( "<your html code>", "your_container_element_id", "replace" );

Note: the third parameter of dojo.place can take various interesting value: "first", "after", ... See full doc on dojo.place.

Usually, when you want to insert some piece of HTML in your game interface, you should use "Javascript templates".

addStyleToClass: function( cssClassName, cssProperty, propertyValue )

Same as dojo.style(), but for all the nodes set with the specified cssClassName

Animations

this.slideToObject( mobile_obj, target_obj, duration, delay )

You can use slideToObject to "slide" an element to a target position.

Sliding element on the game area is the recommended and the most used way to animate your game interface. Using slides allow players to figure out what is happening on the game, as if they were playing with the real boardgame.

The parameters are:

• mobile_obj: the ID of the object to move. This object must be "relative" or "absolute" positioned.
• target_obj: the ID of the target object. This object must be "relative" or "absolute" positioned. Note that it is not mandatory that mobile_obj and target_obj have the same size. If their size are different, the system slides the center of mobile_obj to the center of target_obj.
• duration: (optional) defines the duration in millisecond of the slide. The default is 500 milliseconds.
• delay: (optional). If you defines a delay, the slide will start only after this delay. This is particularly useful when you want to slide several object from the same position to the same position: you can give a 0ms delay to the first object, a 100ms delay to the second one, a 200ms delay to the third one, ... this way they won't be superposed during the slide.

BE CAREFUL: The method returns an dojo.fx animation, so you can combine it with other animation if you want to. It means that you have to call the "play()" method, otherwise the animation WON'T START.

Example:

   this.slideToObject( "some_token", "some_place_on_board" ).play();

this.slideToObjectPos( mobile_obj, target_obj, target_x, target_y, duration, delay )

This method does exactly the same than "slideToObjectPos", except than you can specify some (x,y) coordinates. This way, "mobile_obj" will slide to the specified x,y position relatively to "target_obj".

Example: slide a token to some place on the board, 10 pixels to the bottom:

   this.slideToObjectPos( "some_token", "some_place_on_board", 0, 10 ).play();

this.slideTemporaryObject( mobile_obj_html, mobile_obj_parent, from, to, duration, delay )

This method is useful when you want to slide a temporary HTML object from one place to another. As this object does not exists before the animation and won't remain after, it could be complex to create this object (with dojo.place), to place it at its origin (with placeOnObject) to slide it (with slideToObject) and to make it disappear at the end.

slideTemporaryObject does all of this for you:

• mobile_obj_html is a piece of HTML code that represent the object to slide.
• mobile_obj_parent is the ID of an HTML element of your interface that will be the parent of this temporary HTML object.
• from is the ID of the origin of the slide.
• to is the ID of the target of the slide.
• duration/delay works exactly like in "slideToObject"

Example:

this.slideTemporaryObject( '<div class="token_icon"></div>', 'tokens', 'my_origin_div', 'my_target_div' );

this.fadeOutAndDestroy( node )

This function fade out the target HTML node, then destroy it.

Example:

   this.fadeOutAndDestroy( "a_card_that_must_disappear" );

CAREFUL: the HTML node still exists until during few milliseconds, until the fadeOut has been completed.

Moving elements

this.placeOnObject( mobile_obj, target_obj )

placeOnObject works exactly like "slideToObject", except that the effect is immediate.

This is not really an animation, but placeOnObject is frequently used before starting an animation.

Example:

  // (We just created an object "my_new_token")

  // Place the new token on current player board
  this.placeOnObject( "my_new_token", "overall_player_board_"+this.player_id );
  
  // Then slide it to its position on the board
  this.slideToObject( "my_new_token", "a_place_on_board" ).play();

this.placeOnObjectPos( mobile_obj, target_obj, target_x, target_y )

This method works exactly like placeOnObject, except than you can specify some (x,y) coordinates. This way, "mobile_obj" will be placed to the specified x,y position relatively to "target_obj".

this.attachToNewParent( mobile_obj, target_obj )

With this method, you change the HTML parent of "mobile_obj" element. "target_obj" is the new parent of this element. The beauty of attachToNewParent is that the mobile_obj element DOES NOT MOVE during this process.

Note: what happens is that the method calculate a relative position of mobile_obj to make sure it does not move after the HTML parent changes.

Why using this method?

Changing the HTML parent of an element can be useful for the following reasons:

• When the HTML parent moves, all its child are moving with them. If some game elements is no more linked with a parent HTML object, you may want to attach it to another place.
• The z_order (vertical order of display) depends on the position in the DOM, so you may need to change the parent of some game elements when they are moving in your game area.

CAREFUL: when you attach an HTML element with a new parent, you break all references to this HTML element (ex: dojo.connect).

Players input

dojo.connect

Used to associate a player event with one of your notification method.

Example: associate a click on an element ("my_element") with one of our method ("onClickOnMyElement"):

      dojo.connect( $('my_element'), 'onClick', this, 'onClickOnMyElement' );

Note: this is the only possible correct way to associate a player input event to your code, and you must not use anything else.

this.checkAction( "my_action_name" )

Usage: checkAction: function( action, nomessage )

Check if player can do the specified action by taking into account:

• current game state
• interface locking (a player can't do any action if an action is already in progress)

return true if action is authorized (ie: the action is listed as a "possibleaction" in current game state).

return false and display an error message if not (display no message if nomessage parameter is true). The displayed error message could be either "This move is not allowed at this moment" or "An action is already in progress".

Example:

  function onClickOnGameElement( evt )
  {
     if( this.checkAction( "my_action" ) )
     {
        // Do the action
     }
  }

this.ajaxcall( url, parameters, obj_callback, callback, callback_error )

This method must be used to send a player input to the game server.

• url: the url of the action to perform. For a game, it must be: "/<mygame>/<mygame>/myAction.html"
• parameters: an array of parameter to send to the game server. Note that "lock:true" must always be specified in this list of parameter in order the interface can be locked during the server call.
• obj_callback: must be set to "this".
• callback: a function to trigger when the server returns and everything went fine.
• callback_error: (optional and rarely used) a function to trigger when the server returns an error.

Usage:

this.ajaxcall( '/mygame/mygame/myaction.html', { lock: true, 
   arg1: myarg1, 
   arg2: myarg2, 
   ...
}, this, function( result ) {
   // Do some stuff after a successful call
} );

this.confirmationDialog()

Display a confirmation dialog with a yes/no choice.

We advice you to NOT use this function unless the player action is really critical and could ruins the game, because it slows down the game and upset players.

Usage: this.confirmationDialog( "Question to displayed", callback_function_if_click_on_yes );

Example:

this.confirmationDialog( _('Are you sure to use this bonus (points penalty at the end of the game) ?'),
                         dojo.hitch( this, function() {
                           this.ajaxcall( '/seasons/seasons/useBonus.html',
                                { id:bonus_id, lock:true }, this, function( result ) {} );
                        } ) ); 

addEventToClass

function( cssClassName, eventName, functionName )

Same as dojo.connect(), but for all the nodes set with the specified cssClassName

this.addActionButton( id, label, method, (opt)depreciated, (opt)bHighlight )

You can use this method to add an action button in the main action status bar.

Arguments:

• id: a ID that should be unique in your HTML DOM document.
• label: the text of the button. Should be translatable (use _() function).
• method: the name of your method that must be triggered when the player clicks on this button.
• depreciated (optional): do not use this. Please not specify this argument or use "null".
• bHighlight: if set to "true", the button is going blink to catch player's attention. Please don't abuse of blinking button.

You should only use this method in your "onUpdateActionButtons" method. Usually, you use it like this (from Hears example):

        onUpdateActionButtons: function( stateName, args )
        {
            console.log( 'onUpdateActionButtons: '+stateName );
                      
            if( this.isCurrentPlayerActive() )
            {            
                switch( stateName )
                {
                case 'giveCards':
                    this.addActionButton( 'giveCards_button', _('Give selected cards'), 'onGiveCards' ); 
                    break;

                }
            }
        },   

In the example above, we are adding a "Give selected cards" button in the case we are on game state "giveCards". When player clicks on this button, it triggers our "onGiveCards" method.

Translations

See Translations

Notifications

When something happens on the server side, your game interface Javascript logic received a notification.

Here's how you can handle these notifications on the client side.

Subscribe to notifications

Your Javascript "setupNotifications" method is the place where you can subscribe to notifications from your PHP code.

Here's how you associate one of your Javascript method to a notification "playDisc" (from Reversi example):

   // In setupNotifications method:
   dojo.subscribe( 'playDisc', this, "notif_playDisc" );

Note: the "playDisc" corresponds to the name of the notification you define it in your PHP code, in your "notifyAllPlayers" or "notifyPlayer" method.

Then, you have to define your "notif_playDisc" method:

        notif_playDisc: function( notif )
        {
            // Remove current possible moves (makes the board more clear)
            dojo.query( '.possibleMove' ).removeClass( 'possibleMove' );        
        
            this.addDiscOnBoard( notif.args.x, notif.args.y, notif.args.player_id );
        },

In a notification handler like our "notif_playDisc" method, you can access to all notifications arguments with "notif.args".

Example:

    // If you did this on PHP side:
    self::notifyAllPlayers( "myNotification", '', array( "myArgument" => 3 ) );

    // On Javascript side, you can access the "myArgument" like this:
    notif_myNotification: function( notif )
    {
       alert( "myArgument = " + notif.args.myArgument );
    }

Synchronous notifications

When several notifications are received by your game interface, these notifications are processed immediately, one after the other, in the same exact order they have been generated in your PHP game logic.

However, sometimes, you need to give some time to the players to figure out what happened on the game before jumping to the next notification. Indeed, in many games, they are a lot of automatic actions, and the computer is going to resolve all these actions very fast if you don't tell it not to do so.

As an example, for Reversi, when someone is playing a disc, we want to wait 500 milliseconds before doing anything else in order the opponent player can figure out what move has been played.

Here's how we do this, right after our subscription:

       dojo.subscribe( 'playDisc', this, "notif_playDisc" );
       this.notifqueue.setSynchronous( 'playDisc', 500 );   // Wait 500 milliseconds after executing the playDisc handler

Tooltips

this.addTooltip( node, _( helpString ), _( actionString ), delay )

Add a simple text tooltip to the DOM node.

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

You must specify both helpString and actionString. Most of the time, you use only one and specify a void string ("") for the other one.

Usually, _() must be used for the text to be marked for translation.

"Delay" is an optional parameter. Usually, 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 browser (see Guidelines).

Example:

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

this.addTooltipHtml( node, html, delay )

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

this.addTooltipToClass( cssClass, _( helpString ), _( actionString ), delay )

Add a simple text tooltip to all the DOM nodes set with this cssClass.

IMPORTANT: all concerned nodes must have IDs to get tooltips.

addTooltipHtmlToClass( cssClass, html, delay )

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

IMPORTANT: all concerned nodes must have IDs to get tooltips

Dialogs, warning messages, confirmation dialogs, ...

Warning messages

Sometimes, there is something important that is happening on the game and you have to make sure all players get the message. Most of the time, the evolution of the game situation or the game log is enough, but sometimes you need something more visible.

Ex: someone fulfill one of the end of the game condition, so this is the last turn.

this.showMessage( msg, type )

showMessage shows a message in a big rectangular area on the top of the screen of current player.

• "msg" is the string to display. It should be translated.
• "type" can be set to "info" or "error". If set to "info", the message will be an informative message on a white background. If set to "error", the message will be an error message on a red background.

Important: the normal way to inform players about the progression of the game is the game log. "showMessage" is intrusive and should not be used often.

Confirmation dialog

When an important action with a lot of consequences is triggered by the player, you may want to propose a confirmation dialog.

CAREFUL: the general guidelines of BGA is to AVOID the use of confirmation dialog. Confirmation dialogs slow down the game and bother players. The players knows that they have to pay attention about each move when they are playing online.

The situation where you should use a confirmation dialog are the following:

• It must not happen very often during a game.
• It must be linked to an action that can really "kill a game" if the player do not pay attention.
• It must be something that can be done by mistake (ex: a link on the action status bar).

How to display a confirmation dialog:

        this.confirmationDialog( _('Are you sure you want to make this?'), dojo.hitch( this, function() {
            this.ajaxcall( '/mygame/mygame/makeThis.html', { lock:true }, this, function( result ) {} );
        } ) );   

Dialogs

At first, you shouldn't use dialogs windows.

BGA guidelines specify that all game elements should be displayed on the main screen. Players can eventually scroll down to see game elements they don't need to see anytime, and you may eventually create anchors to move between game area section. Of course dialogs windows are very practical, but the thing is: all players know how to scroll down, and not all players know how to show up your dialog window. In addition, when the dialog shows up, players can't access the other game components.

Sometimes although, you need to display a dialog window. Here is how you do this:

  // Create the new dialog. You should store the handler in a member variable to access it later
  this.myDlg = new dijit.Dialog({ title: _("my dialog title to translate") });

  // Create the HTML of my dialog. The best practice here is to use [[Game_layout:_view_and_template:_yourgamename.view.php_and_yourgamename_yourgamename.tpl#Javascript_templates|Javascript templates]]:
  var html = this.format_block( 'jstpl_myDialogTemplate', { 
                arg1: myArg1,
                arg2: myArg2,
                ...
            } );  

  // Show the dialog
  this.myDlg.attr("content", html );
  this.myDlg.show(); 

  // Now that the dialog has been displayed, you can connect your method to some dialog elements
  // Example, a "close" button:
  dojo.connect( $('closeDlg'), 'onclick', this, function(evt){
                evt.preventDefault();
                this.myDlg.hide();
            } );  

Tip: be careful with "hide()" method to close your dialog: the dialog and its content is not completely removed from the DOM. It can cause you problems if you try to display the same dialog several times. A good practice is to wrap all the content of your dialog in a "

" div element, and to call "dojo.destroy('myDlgContent')" before displaying your dialog.

Scoring dialogs

Sometimes at the end of a round you want to display a big table that details the points wins in each section of the game.

Example: in Hearts game, we display at the end of each round the number of "heart" cards collected by each player, the player who collected the Queen of Spades, and the total number of points loose by each player.

Scoring dialogs are managed entirely on PHP side, but they are described here as their effects are visible only on client side.

Displaying a scoring dialog is quite simple and is using a special notification type: "tableWindow":

  // on PHP side:
  $this->notifyAllPlayers( "tableWindow", '', array(
            "id" => 'finalScoring',
            "title" => clienttranslate("Title of the scoring dialog"),
            "table" => $table
        ) ); 

The "table" argument is a 2 dimensional PHP array that describe the table you want to display, line by line and column by column.

Example: display an 3x3 array of strings

   $table = array(
      array( "one", "two", "three" ),    // This is my first line
      array( "four", "five", "six" ),    // This is my second line
      array( "seven", "height", "nine" )    // This is my third line
   );

As you can see above, in each "cell" of your array you can display a simple string value. But you can also display a complex value with a template and associated arguments like this:

   $table = array(
      array( "one", "two", array( "str" => "a string with an ${argument}", "args" => array( 'argument' => 'argument_value' )  ) ),
      array( "four", "five", "six" ), 
      array( "seven", "height", "nine" )
   );

This is especially useful when you want to display player names with colors. Example from "Hearts":

        $firstRow = array( '' );
        foreach( $players as $player_id => $player )
        {
            $firstRow[] = array( 'str' => '${player_name}',
                                 'args' => array( 'player_name' => $player['player_name'] ),
                                 'type' => 'header'
                               );
        }
        $table[] = $firstRow;

Update players score

Increase a player score (with a positive or negative number):

  this.scoreCtrl[ player_id ].incValue( score_delta );

Set a player score to a specific value:

  this.scoreCtrl[ player_id ].setValue( new_score );

Player's panel disabling/enabling

this.disablePlayerPanel( player_id )

Disable given player panel (the panel background become gray).

Usually, this is used to signal that this played passes, or will be inactive during a while.

Note that the only effect of this is visual. There are no consequences on the behaviour of the panel itself.

this.enablePlayerPanel( player_id )

Enable a player panel that has been disabled before.

this.enableAllPlayerPanels()

Enable all player panels that has been disabled before.

Other useful stuff

dojo.hitch

With dojo.hitch, you can create a callback function that will run with your game object context whatever happen.

Typical example: display a BGA confirmation dialog with a callback function created with dojo.hitch:

        this.confirmationDialog( _('Are you sure you want to make this?'), dojo.hitch( this, function() {
            this.ajaxcall( '/mygame/mygame/makeThis.html', { lock:true }, this, function( result ) {} );
        } ) );   

In the example above, using dojo.hitch, we are sure that the "this" object will be set when the callback is called.

updateCounters(counters)

Useful for updating game counters in the player panel (such as resources).

'counters' arg is an associative array [counter_name_value => [ 'counter_name' => counter_name_value, 'counter_value' => counter_value_value], ... ]

All counters must be referenced in this.gamedatas.counters and will be updated.

DOM objects referenced by 'counter_name' will have their innerHTML updated with 'counter_value'.

BGA GUI components

BGA framework provides some useful ready-to-use components for the game interface:

Studio#BGA_Studio_game_components_reference

Note that each time you are using an additional component, you must declare it at the top of your Javascript file in the list of modules used.

Example if you are using "ebg.stock":

define([
    "dojo","dojo/_base/declare",
    "ebg/core/gamegui",
    "ebg/counter",
    "ebg/stock"  /// <=== we are using ebg.stock module
],