Game File Reference
Useful Components
Official
- ItemManager: a PHP component to manage cards or other game items.
- PlayerCounter and TableCounter: PHP components to manage counters.
- 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).
- 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).
- bga-zoom : a JS component for zoom controls.
- bga-animations : a JS component for animations.
- bga-cards : a JS component for cards.
- bga-dice : a JS component for dice.
- bga-autofit : a JS component to make text fit on a fixed size div.
- bga-score-sheet : a JS component to help you display an animated score sheet at the end of the game.
- bga-jump-to : a JS component to add board shortcuts
Deprecated
- Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
- Stock: a JS component to manage and display a set of game elements displayed at a position.
Unofficial
Game Development Process
Guides for Common Topics
Miscellaneous Resources
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.