This is a documentation for Board Game Arena: play board games online !

BGA Studio Cookbook: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
Line 743: Line 743:

=== Avoiding code in dojo declare style ===
=== Avoiding code in dojo declare style ===
Dojo class declaration is rather bizzare and does not work with most of IDEs.
Dojo class declarations are rather bizzare and do not work with most IDEs.
If you want to write in more plain JS with classes you can stub all the dojo define/declare stuff
If you want to write in plain JS with classes you can stub all the dojo define/declare stuff
and hook your class into that, so class if outside of this mess.
and hook your class into that, so class if outside of this mess.

Revision as of 01:37, 21 January 2021

Game File Reference

Useful Components


  • Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
  • Draggable: a JS component to manage drag'n'drop actions.
  • Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
  • ExpandableSection: a JS component to manage a rectangular block of HTML than can be displayed/hidden.
  • Scrollmap: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples: Saboteur or Takenoko games).
  • Stock: a JS component to manage and display a set of game elements displayed at a position.
  • Zone: a JS component to manage a zone of the board where several game elements can come and leave, but should be well displayed together (See for example: token's places at Can't Stop).

Undocumented component (if somebody knows please help with docs)

  • Wrapper: a JS component to wrap a <div> element around its child, even if these elements are absolute positioned.


Game Development Process

Guides for Common Topics

Miscellaneous Resources

This page is collection of design and implementation recipes for BGA Studio framework. For tooling and usage recipes see Tools and tips of BGA Studio. If you have your own recipes feel free to edit this page.

Visual Effects, Layout and Animation

Create pieces dynamically (using template)

Ingredients: ggg_ggg.tpl, ggg.js

Note: this method is recommended by BGA guildlines

Declared js template with variables in .tpl file, like this

<script type="text/javascript">
    // Javascript HTML templates
    var jstpl_ipiece = '<div class="${type} ${type}_${color} inlineblock" aria-label="${name}" title="${name}"></div>';

Use it like this in .js file

 div = this.format_block('jstpl_ipiece', {
                               type : 'meeple',
                               color : 'ff0000',
                               name : 'Bob',

Then you do whatever you need to do with that div, this one specifically design to go to log entries, because it has embedded title (otherwise its a picture only) and no id.

Note: you could have place this variable in js itself, but keeping it in .tpl allows you to have your js code be free of HTML. Normally it never happens but it is good to strive for it. Note: you can also use string concatenation, its less readable. You can also use dojo dom object creation api's but its brutally verbose and its more unreadable.

Create pieces dynamically (using string concatenation)

Ingredients: ggg.js

Note: Not recommended

  div = "<div class='meeple "+color+"'></div>";

Create all pieces statically

Ingredients: ggg_ggg.tpl, ggg.css, ggg.view.php (optional)

  • Create ALL game pieces in html template (.tpl)
  • ALL pieces should have unique id, and it should be meaningful, i.e. meeple_red_1
  • Do not use inline styling
  • Id of player's specific pieces should use some sort of 'color' identification, since player id cannot be used in static layout, you can use english color name, hex 6 char value, or color "number" (1,2,3...)
  • Pieces should have separated class for its color, type, etc, so it can be easily styled in groups. In example below you now can style all meeples, all red meeples or all red tokens, or all "first" meeples


  <div id="home_red" class="home_red home">
     <div id="meeple_red_1" class="meeple red n1"></div>
     <div id="meeple_red_2" class="meeple red n2"></div>


.meeple {
	width: 32px;
	height: 39px;
	background-image: url(img/78_64_stand_meeples.png);
	background-size: 352px;
} {
	background-position: 30% 0%;
  • There should be straight forward mapping between server id and js id (or 1:1)
  • You place objects in different zones of the layout, and setup css to take care of layout
.home .meeple{
   display: inline-block;
  • If you need to have a temporary object that look like original you can use dojo.clone (and change id to some temp id)
  • If there is lots of repetition or zone grid you can use template generator, but inject style declaration in css instead of inline style for flexibility


  • If you use this model you cannot use premade js components such as Stock and Zone
  • You have to use alternative methods of animation (slightly altered) since default method will leave object with inline style attributes which you don't need

Use thematic fonts

Ingredients: ggg.css

Sometime game elements use specific fonts of text, if you want to match it up you can load some specific font (IMPORTANT: from some free font source. See notes below).

Dragonline font.png


/* latin-ext */
@font-face {
  font-family: 'Qwigley';
  font-style: normal;
  font-weight: 400;
  src: local('Qwigley'), local('Qwigley-Regular'), url( format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
/* latin */
@font-face {
  font-family: 'Qwigley';
  font-style: normal;
  font-weight: normal;
  src: local('Qwigley'), local('Qwigley-Regular'), url( format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
@font-face {
  font-family: 'Qwigley';
  font-style: normal;
  font-weight: normal;
  src: local('Qwigley'), local('Qwigley-Regular'), url( format('ttf');

.zone_title {
	display: inline-block;
	position: absolute;
	font: italic 32px/32px "Qwigley", cursive;	   
	height: 32px;
	width: auto;

NB: if you need to include a font that's not available online, an extra action will be needed from an admin. Please include the font file(s) in your img directory, and mention it to admins when requesting your game to be moved to alpha. Please remember that the font has to be free, and include a .txt with all appropriate license information about the font. You can look for free fonts (for example) on or

Use player color in template

Ingredients: ggg_ggg.tpl, ggg.view.php


    function build_page($viewArgs) {
        // Get players & players number
        $players = $this->game->loadPlayersBasicInfos();
        $players_nbr = count($players);
         * ********* Place your code below: ***********
        // Set PCOLOR to the current player color hex
        global $g_user;
        $cplayer = $g_user->get_id();
        if (array_key_exists($cplayer, $players)) { // may be not set if spectator
            $player_color = $players [$cplayer] ['player_color'];
        } else {
            $player_color = 'ffffff'; // spectator
        $this->tpl ['PCOLOR'] = $player_color;

Scale to fit for big boards

Ingredients: ggg_ggg.tpl, ggg.js

Lets say you have huge game board, and lets say you want it to be 1400px wide. Besides the board there will be side bar which is 240 and trim. My display is 1920 wide so it fits, but there is big chance other people won't have that width. What do you do? Easiest thing I came up with is to scale whole content to fit (everything you declare in .tpl file). Tested or firefox and chrome.


   <div id="thething" class="thething" style="width: 1400px;">
            ... everything else you declare ...


    setup : function(gamedatas) {
          console.log("Starting game setup");
          this.interface_min_width = 740;
          this.interface_max_width = 1400;
          dojo.connect(window, "onresize", this, dojo.hitch(this, "adaptViewportSize"));

    adaptViewportSize : function() {
        var pageid = "page-content";
        var nodeid = "thething";

        var bodycoords = dojo.marginBox(pageid);
        var contentWidth = bodycoords.w;

        var browserZoomLevel = window.devicePixelRatio; 
        if (contentWidth >= this.interface_max_width || browserZoomLevel >1  || this.control3dmode3d) {

        var percentageOn1 = contentWidth / this.interface_max_width;, "transform", "scale(" + percentageOn1 + ")");

Note: this method does not seems to work to retina resolution displays, if you know better way let me know

Dynamic tooltips

If you really need a dynamic tooltip you can use this technique. (Only use it if the static tooltips provided by the BGA framework are not sufficient.)

           new dijit.Tooltip({
               connectId: ["divItemId"],
               getContent: function(matchedNode){
                   return "... calculated ..."; 

This is an out-of-the-box djit.Tooltip. It has a getContent method which is called dynamically.

The string function return becomes the innerHTML of the tooltip, so it can be anything. In this example matchedNode is a dojo node representing dom object with id of "divItemId" but there are more parameters which I am not posting here which allows more sophisticated subnode queries (i.e. you can attach tooltip to all nodes with class or whatever).


It's not part of the BGA API so use at your own risk.

Accessing images from js

Ingredients: ggg.js

     // your game resources
     var my_img = '<img src="'+g_gamethemeurl+'img/cards.jpg"/>';
     // shared resources
     var my_help_img = "<img class='imgtext' src='" + g_themeurl + "img/layout/help_click.png' alt='action' /> <span class='tooltiptext'>" +
                    text + "</span>";

Rendering text with players color and proper background

Ingredients: ggg.js

This example actually writes "You" but you can replace this with player name as easily, drop translating function in this case

        /* Implementation of proper colored You with background in case of white or light colors  */
        divYou : function() {
            var color = this.gamedatas.players[this.player_id].color;
            var color_bg = "";
            if (this.gamedatas.players[this.player_id] && this.gamedatas.players[this.player_id].color_back) {
                color_bg = "background-color:#" + this.gamedatas.players[this.player_id].color_back + ";";
            var you = "<span style=\"font-weight:bold;color:#" + color + ";" + color_bg + "\">" + __("lang_mainsite", "You") + "</span>";
            return you;

Inject icon images in the log

Here is an example of what was done for Terra Mystica which is simple and straightforward:

//Define the proper message
		$message = clienttranslate('${player_name} gets ${power_income} via Structures');
		if ($price > 0) {
			self::DbQuery("UPDATE player SET player_score = player_score - $price WHERE player_id = $player_id");
			$message = clienttranslate('${player_name} pays ${vp_price} and gets ${power_income} via Structures');

// Notify
		self::notifyAllPlayers( "powerViaStructures", $message, array(
			'i18n' => array( ),
			'player_id' => $player_id,
			'player_name' => self::getUniqueValueFromDb( "SELECT player_name FROM player WHERE player_id = $player_id" ),
			'power_tokens' => $power_tokens,
			'vp_price' => self::getLogsVPAmount($price),
			'power_income' => self::getLogsPowerAmount($power_income),
			'newScore' => self::getUniqueValueFromDb( "SELECT player_score FROM player WHERE player_id = $player_id" ),
			'counters' => $this->getGameCounters(null),
		) );

With some functions to have the needed html added inside the substitution variable, such as:

function getLogsPowerAmount( $amount ) {
		return "<div class='tmlogs_icon' title='Power'><div class='power_amount'>$amount</div></div>";

Note: injecting html from php is not ideal but easy, if you want more clean solution, use method below but it is a lot more sophisticated.

Inject images and styled html in the log

Ingredients: ggg.js,

So you want nice pictures in the game log. What do you do? The first idea that comes to mind is to send html from php in notifications (see method above).

This is a bad idea for many reasons:

  • It's bad architecture. ui elements leak into the server, and now you have to manage the ui in multiple places.
  • If you decided to change something in the ui in future version, replay logs for old games and tutorials may not work, since they use stored notifications.
  • Log previews for old games become unreadable. (This is the log state before you enter the game replay, which is useful for troubleshooting and game analysis.)
  • It's more data to transfer and store in the db.
  • It's a nightmare for translators.

So what else can you do? I use this recipe for client side log injection to intercept log arguments (which come from the server) and replace them with html on the client side.




        /** Override this function to inject html into log items. This is a built-in BGA method.  */

        /* @Override */
        format_string_recursive : function(log, args) {
            try {
                if (log && args && !args.processed) {
                    args.processed = true;

                    // list of special keys we want to replace with images
                    var keys = ['place_name','token_name'];
                    for ( var i in keys) {
                        var key = keys[i];
                        args[key] = this.getTokenDiv(key, args);                            

            } catch (e) {
                console.error(log,args,"Exception thrown", e.stack);
            return this.inherited(arguments);

Important: In the format_string_recursive method, the 'args' parameter will only contain arguments passed to it from the notify method in (see below).

The 'log' parameter is the actual string that is inserted into the logs. You can perform additional js string manipulation on it.

        getTokenDiv : function(key, args) {
            // ... implement whatever html you want here, example from sharedcode.js
            var token_id = args[key];
            var item_type = getPart(token_id,0);
            var logid = "log" + (this.globalid++) + "_" + token_id;
            switch (item_type) {
                case 'wcube':
                    var tokenDiv = this.format_block('jstpl_resource_log', {
                        "id" : logid,
                        "type" : "wcube",
                        "color" : getPart(token_id,1),
                    return tokenDiv;
                case 'meeple':
                    if ($(token_id)) {
                        var clone = dojo.clone($(token_id));
                        dojo.attr(clone, "id", logid);
                        dojo.addClass(clone, "logitem");
                        return clone.outerHTML;

            return "'" + this.clienttranslate_string(this.getTokenName(token_id)) + "'";
       getTokenName : function(key) {
           return this.gamedatas.token_types[key].name; // get name for the key, from static table for example

Note that in this case the server simply injects token_id as a name, and the client substitutes it for the translated name or the picture.

          $this->notifyAllPlayers('playerLog',clienttranslate('Game moves ${token_name}'),['token_name'=>$token_id]);

Important: As noted above, only arguments actually passed by this method are available to the args parameter received in the client-side format_string_recursive method.

Sometimes it is the case that you want to pass arguments that are not actually included in the output message. For example, suppose we have a method like this:

          $this->notifyAllPlayers('tokenPlaced',clienttranslate('Player placed ${token_name}'),array(
             'token_name' => $token_id,
             'zone_played' => $zone);

This will output "Player placed ${token_name}" in the log, and if we subscribe to a notification method activated by the "tokenPlaced" event in the client-side code, that method can make use of the 'zone_played' argument. But 'zone_played' will not be available in the format_string_recursive method unless it is actually passed in the log message (i.e., in the string contained inside clienttranslate).

Now if you don't like raw log containing id instead of name but want name, and want substitution, you can use another parameter as id. The problem with that, it will work at first, but if you reload game using F5 you will loose your additional parameters, why? Because when game reloads it does not actually send same notifications, it sends special "hitstorical_log" notification where all parameters not listed in the "log" are removed. There is a hack (feature) to circumvent that, called recursive parameters. I.e. you can send stuff like this:

            $this->notifyAllPlayers('playerLog',clienttranslate('Game moves ${token_name_rec}'),
                                       'args'=> ['token_name'=>clienttranslate('Boo'), 'token_id'=>$token_id, 'i18n'=>['token_name'] ]

and in format_log_recursive

            var key = 'token_name';
            if (typeof args[key] == 'string' && typeof args['token_id'] == 'string') {
                args[key] = this.getTokenDiv('token_id', args);                            

High-Definition Graphics

Some users will have screens which can display text and images at a greater resolution than the usual 72 dpi, e.g. the "Retina" screens on the 5k iMac, all iPads, and high-DPI screens on laptops from many manufacturers. If you can get art assets at this size, they will make your game look extra beautiful. You could just use large graphics and scale them down, but that would increase the download time and bandwidth for users who can't display them. Instead, a good way is to prepare a separate graphics file at exactly twice the size you would use otherwise, and add "@2x" at the end of the filename, e.g. if pieces.png is 240x320, then pieces@2x.png is 480x640.

There are two changes required in order to use the separate graphics files. First in your css, where you use a file, add a media query which overrides the original definition and uses the bigger version on devices which can display them. Ensuring that the "background-size" attribute is set means that the size of the displayed object doesn't change, but only is drawn at the improved dot pitch.

.piece {
    position: absolute;
    background-image: url('img/pieces.png');
    background-size:240px 320px;
    z-index: 10;
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)
    .piece {
        background-image: url('img/pieces@2x.png');

Secondly, in your setup function in javascript, you must ensure than only the appropriate one version of the file gets pre-loaded (otherwise you more than waste the bandwidth saved by maintaining the standard-resolution file). Note that the media query is the same in both cases:

            var isRetina = "(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
            if (window.matchMedia(isRetina).matches)
                this.dontPreloadImage( 'pieces.png' );
                this.dontPreloadImage( 'board.jpg' );
                this.dontPreloadImage( 'pieces@2x.png' );
                this.dontPreloadImage( 'board@2x.jpg' );

Cool realistic shadow effect with CSS

If you wish to make a shadow effect for game pieces that are not rectangle, do not use box-shadow but use filter, which is supported by recent major browsers. This way, you can use the alpha channel of your element to drop a shadow. This even work for transparent backgrounds, so that if you are using the "CSS-sprite" method, it will work!

For instance:

.xxx-token {
    filter: drop-shadow(0px 0px 1px #000000);

Using the CSS classes from the state machine

If you need to hide or show stuff depending on the state of your game, you can of course use javascript, but CSS is hand enough for that. The #overall-content element does change class depending on the game state. For instance, if you are in state playerTurn, it will have the class gamestate_playerTurn.

So now, if you want to show the discard pile only during player turns, you may use:

#discard_pile { display: none }
.gamestate_playerTurn #discard_pile { display: block }

This can be used if you want to change sizing of elements, position, layout or visual appearance.

More readable JS: onEnteringState

If you have a lot of states onEnteringState and friends become rather wild, you can do this trick to call some method dynamically.

     onEnteringState: function(stateName, args) {
       console.log('Entering state: ' + stateName, args);

       // Call appropriate method
       var methodName = "onEnteringState_" + stateName;
       if (this[methodName] !== undefined) {             
          console.log('Calling ' + methodName, args.args);

     onEnteringState_playerTurn: function(args) { // this is args directly, not args.args 
         // process

     onEnteringState_playerSomethingElse: function(args) { 
         // process

Note: since its ignores the undefined functions you don't have define function for each state, but on the other hand you cannot make typos. Same applies to onUpdateActionButtons except you pass 'args' to method, not args.args, and for onLeavingState where you don't pass anything.

Game Model and Database design

Database for The euro game

Lets say we have a game with workers, dice, tokens, board, resources, money and vp. Workers and dice can be placed in various zones on the board, and you can get resources, money, tokens and vp in your home zone. Also tokens can be flipped or not flipped.

Madeira board.png

Now lets try to map it, we have

  • (meeple,zone)
  • (die, zone, sideup)
  • (resource cube/money token/vp token,player home zone)
  • (token, player home zone, flip state)

We can notice that resource and money are uncountable, and don't need to be track individually so we can replace our mapping to

  • (resource type/money,player home zone, count)

And vp stored already for us in player table, so we can remove it from that list.

Now when we get to encode it we can see that everything can be encoded as (object,zone,state) form, where object and zone is string and state is integer. The resource mapping is slightly different semantically so you can go with two table, or counting using same table with state been used as count for resources.

So the piece mapping for non-grid based games can be in most case represented by (string: token_key, string: token_location, int: token_state), example of such database schema can be found here: dbmodel.sql and class implementing access to it here

Variant 1: Minimalistic

 `token_key` varchar(32) NOT NULL,
 `token_location` varchar(32) NOT NULL,
 `token_state` int(10),
 PRIMARY KEY (`token_key`)

token_key token_location token_state
meeple_red_1 home_red 0
dice_black_2 board_guard 1
dice_green_1 board_action_mayor 3
bread home_red 5

Now how we represent resource counters such as bread? Using same table from we simply add special counter token for bread and use state to indicate the count. Note to keep first column unique we have to add player identification for that counter, i.e. ff0000 is red player.

token_key token_location token_state
bread_ff0000 tableau_ff0000 5

See php module for this table here

Variant 2: Additional resource table, resource count for each player id

 `player_id` int(10) unsigned NOT NULL,
 `resource_key` varchar(32) NOT NULL,
 `resource_count` int(10) signed NOT NULL,
 PRIMARY KEY (`player_id`,`resource_key`)
ALTER TABLE resource ADD CONSTRAINT fk_player_id FOREIGN KEY (player_id) REFERENCES player(player_id);
player_id resource_key resource_count
123456 bread 5

Variant 3: More normalised

This version is similar to "card" table from hearts tutorial, you can also use exact cards database schema and Deck implementation for most purposes (even you not dealing with cards).

 `token_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `token_type` varchar(16) NOT NULL,
 `token_arg` int(11) NOT NULL,
 `token_location` varchar(32) NOT NULL,
 `token_state` int(10),
 PRIMARY KEY (`token_id`)
token_id token_type token_arg token_location token_state
22 meeple 123456 home_123456 0
23 dice 2 board_guard 1
26 dice 1 board_action_mayor 3
49 bread 0 home_123456 5

Advantages of this would be is a bit more straightforward to do some queries in db, disadvantage its hard to read (as you can compare with previous example, you cannot just look at say, ah I know what it means). Another questionable advantage is it allows you to do id randomisation, so it hard to do crafted queries to cheat, the down side of that you cannot understand it either, and handcraft db states for debugging or testing.

Database for The card game

Lets say you have a standard card game, player have hidden cards in hand, you can draw card from draw deck, play card on tableau and discard to discard pile. We have to design database for such game.

In real word to "save" the game we take a picture a play area, save cards from it, then put away draw deck, discard and hand of each player separately and mark it, also we will record current scoring (if any) and who's turn was it.

  • Framework handles state machine transition, so you don't have to worry about database design for that (i.e. who's turn it is, what phase of the game we are at, you still have to design it but part of state machine step)
  • Also framework supports basic player information, color, order around the table, basic scoring, etc, so you don't have to worry about it either
  • The only thing you need in our database is state of the "board", which is "where each pieces is, and in what state", or (position,rotation) pair.

Lets see what we have for that:

  • The card state is very simple, its usually "face up/face down", "tapped/untapped", "right side up/up side down"
  • As position go we never need real coordinates x,y,z. We need to know what "zone" card was, and depending on the zone it may sometimes need an extra "z" or "x" as card order. The zone position usually static or irrelevant.
  • So our model is: we have cards, which have some attributes, at any given point in time they belong to a "zone", and can also have order and state
  • Now for mapping we should consider what information changes and what information is static, later is always candidate for material file
  • For dynamic information we should try to reduce amount of fields we need
    • we need at least a field for card, so its one
    • we need to know what zone cards belong to, its 2
    • and we have possibly few other fields, if you look closely at you game you may find out that most of the zone only need one attribute at a time, i.e. draw pile always have cards face down, hand always face up, also for hand and discard order does not matter at all (but for draw it does matter). So in majority of cases we can get away with one single extra integer field representing state or order
  • In real database both card and zone will be integers as primary keys referring to additional tables, but in our case its total overkill, so they can be strings as easily

Variant 1: Minimalistic

  `card_key` varchar(32) unsigned NOT NULL,
  `card_location` varchar(32) NOT NULL,
  `card_state` int(11) NOT NULL,
  PRIMARY KEY (`card_id`)

Variant 2: More normalised

This version supported by Deck php class, so unless you want to rewrite db access layer go with this one

  `card_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `card_type` varchar(16) NOT NULL,
  `card_type_arg` int(11) NOT NULL,
  `card_location` varchar(16) NOT NULL,
  `card_location_arg` int(11) NOT NULL,
  PRIMARY KEY (`card_id`)

Note: if you using this schema, some zones/locations have special semantic. The 'hand' location is actually multiple locations - one per player, but player id is encoded as card_location_arg. If 'hand' in your game is ordered, visible or can have some other card states, you cannot use hand location (replacement is hand_<player_id> or hand_<color_id>)

Game Modules

Including your own JavaScript module

Ingredients: ggg.js, modules/ggg_other.js

  • Create ggg_other.js in modules/ folder and sync
  • Modify ggg.js to include it

 define([ "dojo", "dojo/_base/declare", "ebg/core/gamegui", "ebg/counter",
   // load my own module!!!
   g_gamethemeurl + "modules/ggg_other.js" ], function(dojo,
       declare) {

Including your own PHP module

Ingredients:, modules/ggg_other.php

  • Create ggg_other.php in modules/ folder and sync
  • Modify to include it
require_once ('modules/ggg_other.php');

Avoiding code in dojo declare style

Dojo class declarations are rather bizzare and do not work with most IDEs. If you want to write in plain JS with classes you can stub all the dojo define/declare stuff and hook your class into that, so class if outside of this mess.

NOTE: this technique is for experienced developers, do not try it if you do not understand the consequences.

This is complete example of game .js class

  // Testla is game name is has to be changed
class Testla {
	constructor(game) {
		console.log('game constructor'); = game;
		this.varfoo = new MyFoo(); // this example of class from custom module

	setup(gamedatas) {
		console.log("Starting game setup", this.varfoo);
		this.gamedatas = gamedatas;
		this.dojo.create("div", { class: 'whiteblock', innerHTML: _("hello") }, 'thething');
		console.log("Ending game setup");
	onEnteringState(stateName, args) {
		console.log('onEnteringState : ' + stateName, args);'b1',_('Click Me'), (e)=>this.onButtonClick(e));
	onLeavingState(stateName) {
		console.log('onLeavingState : ' + stateName, args);
	onUpdateActionButtons(stateName, args) {
		console.log('onUpdateActionButtons : ' + stateName, args);
	onButtonClick(event) {

	"dojo", "dojo/_base/declare",
	g_gamethemeurl + '/modules/foo.js' // custom module if needed
	function(dojo, declare) {
                // testla is game name is has to be changed
		return declare("bgagame.testla", ebg.core.gamegui, {
			constructor: function() {
				this.xapp = new Testla(this);
				this.xapp.dojo = dojo;
			setup: function(gamedatas) {
			onEnteringState: function(stateName, args) {
				this.xapp.onEnteringState(stateName, args.args);
			onLeavingState: function(stateName) {
				this.xapp.onLeavingState(stateName, args);
			onUpdateActionButtons: function(stateName, args) {
				this.xapp.onUpdateActionButtons(stateName, args);

Assorted Stuff

Out-of-turn actions: Un-pass

Ingredients: ggg.js,, ggg.action.php,

In multiplayer game sometimes players passes but than they think more and want to un-Pass and redo their choice. To re-active a player who passes some trickery required.

Define a special action that does how and hook it up.

In add an action to mmultipleactiveplayer state to "unpass", lets call it "actionCancel"

In ggg.action.php add action hook

   public function actionCancel() {

In add action handler

   function actionCancel() {
       $this->gamestate->setPlayersMultiactive(array ($this->getCurrentPlayerId() ), 'error', false);

Finally to call this in client ggg.js you would do something like:

 onUpdateActionButtons:  function(stateName, args) {
   if (this.isCurrentPlayerActive()) { 
     // ...
   } else if (!this.isSpectator) { // player is NOT active but not spectatoe
       switch (stateName) {
          case 'playerTurnMuliPlayerState':
		this.addActionButton('button_unpass', _('Oh no!'), 'onUnpass');
 onUnpass: function(e) {
    this.ajaxcall("/" + this.game_name + "/" +  this.game_name + "/actionCancel.html", {}, this); // no checkAction!

Multi Step Interactions: Select Worker/Place Worker - Using Selection

Ingredients: ggg.js

Simple way to implement something like that without extra states is to use "selection" mechanism. When user click on worker add some sort of class into that element i.e. 'selected' (which also have to have some indication by css i.e. outline).

Than user can click on placement zone, you can use dojo.query for "selected" element and use it along with zone id to send data to server. If proper worker is not selected yet can give a error message using this.showMessage(...) function.

Extra code required to properly cleanup selection between states

Multi Step Interactions: Select Worker/Place Worker - Using Client States

Ingredients: ggg.js

I don't think its documented feature but there is a way to do client-only states, which is absolutely wonderful for few reasons

  • When player interaction is two step process, such as select worker, place worker, or place worker, pick one of two resources of your choice
  • When multi-step process can result of impossible situation and has to be undone (by rules)
  • When multi-step process is triggered from multiple states (such as you can do same thing as activated card action, pass action or main action)

So lets do Select Worker/Place Worker

Define your server state as usual, i.e. playerMainTurn -> "You must pick up a worker". Now define a client state, we only need "name" and "descriptionmyturn", lets say "client_playerPicksLocation". Always prefix names of client state with "client_" to avoid confusion. Now we have to do the following:

  • Have a handler for onUpdateActionButtons for playerMainTurn to activate all possible workers he can pick
  • When player clicks workers, remember the worker in one of the members of the main class, I usually use one called this.clientStateArgs.
  • Transition to new client state
 onWorker: function(e) {
     var id =;
     ... // do validity checks
     this.clientStateArgs.worker_id = id;
     this.setClientState("client_playerPicksLocation", {
                               descriptionmyturn : "${you} must select location",
  • Have a handler for onUpdateActionButtons for client_playerPicksLocation to activate all possible locations this worker can go AND add Cancel button (see below)
  • Have a location handler which will eventually send a server request, using stored this.clientStateArgs.worker_id as worker id
  • The cancel button should call a method to restore server state, also if you doing it for more than one state you can add this universally using this.on_client_state check

       if (this.isCurrentPlayerActive()) {
         if (this.on_client_state && !$('button_cancel')) {
              this.addActionButton('button_cancel', _('Cancel'), dojo.hitch(this, function() {

Note: usually I call my own function call this.cancelLocalStateEffects() which will do more stuff first then call restoreServerGameState(), same function is usually needs to be called when server request has failed (i.e. invalid move)

Note: If you need more than 2 steps, you may have to do client side animation to reflect the new state, which gets trickier because you have to undo that also on cancellation.

Code is available here sharedcode.js (its using playerTurnPlayCubes and client_selectCubeLocation).