ExpandableSection

Game File Reference

Overview

• dbmodel.sql - database model
• gameinfos.inc.php - meta-information
• gameoptions.json - game options & user preferences
• img/ - game art
• Game Metadata Manager - tags and metadata media
• material.inc.php - static data
• misc/ - studio-only storage
• modules/ - additional game code
• states.inc.php - state machine
• stats.json - statistics
• X.action.php - player actions
• X.css - interface stylesheet
• X.game.php - main logic
• X.js - interface logic
• X.view.php - dynamic game layout
• X_X.tpl - static game layout

---

Useful Components

Official

• 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.

Unofficial

• BGA Code Sharing - Shared resources, projects on git hub, common code, other links
• BGA Studio Cookbook - Tips and instructions on using API's, libraries and frameworks
• Common board game elements image resources

---

Game Development Process

• First steps with BGA Studio
• Create a game in BGA Studio: Complete Walkthrough
• Tutorial reversi
• Tutorial gomoku
• Tutorial hearts
• BGA Studio Guidelines
• BGA game Lifecycle
• Pre-release checklist
• Post-release phase
• Player Resources - add player help/rules to your game page

---

Guides for Common Topics

• Translations - make your game translatable
• Game Replay
• Mobile Users
• 3D
• Compatibility

---

Miscellaneous Resources

• Studio FAQ
• Tools and tips of BGA Studio - Tips and instructions on setting up development environment
• Studio logs - Instructions for log access
• Practical debugging - Tips focused on debugging
• Troubleshooting - Most common "I am really stuck" situations
• Studio Bugs - Reports against Studio itself (not BGA!)

Example

In mygame_mygame.tpl (the border is not required):

<div id="my_expandable" style="border: 1px solid black">
    <a href="#" id="my_click_to_toggle" class="expandabletoggle expandablearrow">
        <div class="icon20"></div>
    </a>
    <div id="my_hidden_content" class="expandablecontent">
        Here's the hidden content
    </div>
</div>

In mygame.js:

define([
    ebg/expandablesection
],
...

this.expanded = new ebg.expandablesection();
this.expanded.create(this, "my_expandable");
this.expanded.expand();   // show
this.expanded.collapse(); // hide
this.expanded.toggle();   // switch show/hide

Notes

• All of the inner parts of the expandable div must have ids so dojo.query can find them.
• The section already starts with click-to-toggle behavior, so you probably won't need to toggle in your own code. Just set the initial state in your setup method.
• Source code can be found here : https://x.boardgamearena.net/data/themereleases/220811-1000/js/modules/expandablesection.js

Helper Code

This doesn't appear to be part of the BGA framework, but might make creating the above code easer and more readable.

In mygame_mygame.tpl:

var jstpl_expandablesection = '\
    <div id="${id}">\
        <a href="#" id="toggle_${id}" class="expandabletoggle expandablearrow">\
            <div class="icon20"></div>\
        </a>\
        <div id="content_${id}" class="expandablecontent">\
            ${content}\
        </div>\
    </div>';

In mygame.js:

placeExpandableSection: function(parent_id, id, content) {
   html = this.format_block('jstpl_expandablesection', { id: id, content: content }); 
   dojo.place(html, parent_id);
},