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

Game material description:

From Board Game Arena
Revision as of 19:53, 19 August 2021 by Victoria La (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


This PHP file describes all the material of your game.

This file is include by the constructor of your main game logic (, and then the variables defined here are accessible everywhere in your game logic file.

Using makes your PHP logic file smaller and clean. Normally you put ALL static information about your cards, tokens, tiles, etc in that file which do not change. Do not store static info in database.


Example from "Eminent Domain":

$this->token_types = [
 'card_role_survey' => [
   'type' => 'card_role',
   'name' => clienttranslate("Survey"),
   'tooltip' => clienttranslate("ACTION: Draw 2 Cards<br/><br/>ROLE: Look at <div class='icon survey'></div> - 1 planet cards, keep 1<br/> <span class='yellow'>Leader:</span> Look at 1 additional card"),

 'card_tech_1_51' => [
   'type' => 'tech',
   'name' => clienttranslate("Improved Trade"),
   'b' => 3,
   'p' => 'E',
   'i' => 'TP',
   'v' => 0,
   'a' => 'i',
   'side' => 0,
   'tooltip' => clienttranslate("Collect 1 Influence from the supply."),


So this defined all info about cards, including types, names, tooltips (to be show on client), rules, payment cost, etc.

You can also define PHP constants that can be used in material file and game.php file:

if (!defined('TAPESTRY')) { // guard since this included multiple times
    define("TAPESTRY", 0);
    define("TRACK_EXPLORATION", 1);
    define("TRACK_SCIENCE", 2);
    define("TRACK_MILITARY", 3);
    define("TRACK_TECHNOLOGY", 4);


To access this in PHP side:

 $type = $this->token_types['card_tech_1_51']['type'];

To access on JS side you have to send all variables from material file via getAllDatas first:

   protected function getAllDatas() {
       $result = array ();
       $result ['token_types'] = $this->token_types;
       return $result;

Then you can access it in similar way:

 var type = this.gamedatas.token_types['card_tech_1_51'].type; // not translatable
 var name = _(this.gamedatas.token_types['card_tech_1_51'].name); // to be shown to user (NOI18N)

To send this in notification from PHP side:

 $this->notifyAllUsers('gainCard',clienttranslate('player gains ${card_name}'), [
      'card_id' => $card_id,
      'card_name' => $this->token_types[$card_id]['name']

If you also want to access constants in JS side, you can send them via getAllData like this

       $cc = get_defined_constants(true)['user'];
       $result['constants']=$cc; // this will be all constants though, you may have to filter some stuff out for security reasons

Alternately you can include a in local php file and call this method to print constants in JS format, then include this file in JS, you may have to synctonize this manually, but its better for auto-complete also.

       // this needs to be run locally after including materal file (see example in testing below)
       $cc = get_defined_constants(true)['user'];
       foreach ($cc as $key => $value) {          
           print ("const $key = $value;\n");


If you screw up you material file such as miss some brackets it is very hard to diagnose. But you can test it locally like this


class material_test {
    function __construct() {
        include '../';
        var_dump($this->token_types); // whatever your var
// stub
function clienttranslate($x) { return $x; }

new material_test();