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

Difference between revisions of "ExpandableSection"

From Board Game Arena
Jump to navigation Jump to search
 
Line 36: Line 36:
 
* All of the inner parts of the expandable div must have ids so dojo.query can find them.
 
* 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.
 
* 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 ==
 
== Helper Code ==

Latest revision as of 07:30, 22 August 2022


Game File Reference



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



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


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);
},