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
m
Line 1: Line 1:
 +
{{Studio_Framework_Navigation}}
 +
 
== Example ==
 
== Example ==
  

Revision as of 06:53, 19 January 2021


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

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