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


From Board Game Arena
Revision as of 16:06, 1 August 2020 by Cpasbanal (talk | contribs)
Jump to navigation Jump to search

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


Don't forget to add ebg/counter as a dependency:

   // in your game js
   "ebg/counter"    /// <==== HERE],

Setup a counter

player.handSizeCounter = new ebg.counter();
player.handSizeCounter.create('hand_size_player_' + player_id);

Where 'hand_size_player_' + player_id is the id of the container that will display the counter value.

Functions on counter


Where by and player.handSize must be integers.

Players panels

Adding stuff to player's panel

First, create a new JS template string in your template (tpl) file.

From the Gomoku example:

var jstpl_player_board = '\<div class="cp_board">\
    <div id="stoneicon_p${id}" class="gmk_stoneicon gmk_stoneicon_${color}"></div><span id="stonecount_p${id}">0</span>\

Then, add this piece of code in the setup function of your JS file to add this template to each player panel:

            // Setting up player boards
            for( var player_id in gamedatas.players )
                var player = gamedatas.players[player_id];
                // Setting up players boards if needed
                var player_board_div = $('player_board_'+player_id);
       this.format_block('jstpl_player_board', player ), player_board_div );

Often, you have to distinguish between the current player and other players. In this case, create another JS template (ex: jstpl_otherplayer_board) and use it where "player_id" is different than "this.player_id".