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

Zone: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
No edit summary
(Added navigation)
Line 1: Line 1:
{{Studio_Framework_Navigation}}
The Zone component is meant to organise items of the same type inside a predefined space.
The Zone component is meant to organise items of the same type inside a predefined space.



Revision as of 22:11, 15 April 2020


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

The Zone component is meant to organise items of the same type inside a predefined space.

Zone in action

If you want to see how Zone works, please try "Can't Stop" or "Niagara" on BGA, or watch a game in progress or game replay.

In Can't Stop, zone is used to display the bhikkus ascending the mountain when there is more than one on the same space (diagonal mode).

In Niagara, it is used to display the canoes over the circles going down the river (custom mode).

How to use Zone

At first, don't forget to add "ebg/zone" as a dependency:

define([
    "dojo","dojo/_base/declare",
    "ebg/core/gamegui",
    "ebg/counter",
    "ebg/zone"     /// <==== HERE
],

Then, declare a new variable in your class for the Zone object:

        constructor: function(){
        console.log('yourgame constructor');
              
        // Zone control        	
        this.myZone = new ebg.zone();

Now, in your template file, you must add a div that will host this zone:

    <div id="my_zone"></div>

And set its width (and optionnaly, height and position) in CSS:


#my_zone {
  width: 100px;
}

Then in your Javascript setup, attach your Zone component to the div and define its properties :

            zone.create( this, 'my_zone', <item_width>, <item_height> );
            zone.setPattern( <mode> );
  • <item_width> is an integer for the width of the objects you want to organise in the zone
  • <item_height> is an integer for the height of the objects you want to organise in the zone
  • <mode> is one of 'grid' (objects will be put on lines from top left to bottom right, wrapping when there is not enough space left on the line, relatively to the width you have defined) 'diagonal' (objects will be organised on a top left to bottom right diagonal, overlapping each other) or 'custom' (objects will be organised depending upon their number and the coordinates that you provide - see below)

Since the width of the Zone is defined statically, beware of not letting items overflow on small screens. If you need a design-responsive component, consider using the Stock component instead.

Now your zone is ready to be used!

After creating an object that you want to add to the zone as a classic HTML template (dojo.place / this.format_block), you can simply use:

   zone.placeInZone( <object_id>, <weight> );
  • <object_id> is the string identifier for your object 'my_object_id'
  • <weight> is an optional parameter used to sort items

To remove an item, use:

   zone.removeFromZone( <object_id>, <destroy?>, <to> );
  • <object_id> is the string identifier for your object 'my_object_id'
  • <destroy?> is a boolean indicating if the object should be destroyed after being removed
  • <to> is the destination the object must be slided to when being removed (before being eventually destroyed)

You can also:

  • remove all items from the zone (and destroy them) using zone.removeAll();
  • get the number of items in your zone using zone.getItemNumber();
  • get an array of the ids of all the items using zone.getAllItems();

Custom mode

If you want complete control on how your objects are laid out inside the Zone, you can determine their coordinates after their number when being added to the zone. Here is how to do it, when defining your Zone properties in the javascript setup:

                this.zone.setPattern( 'custom' );
                
                this.zone.itemIdToCoords = function( i, control_width ) {
                    if( i%8==0 )
                    {   return {  x:1,y:19, w:60, h:30 }; }
                    else if( i%8==1 )
                    {   return {  x:30,y:38, w:60, h:30 }; }
                    else if( i%8==2 )
                    {   return {  x:42,y:8, w:60, h:30 }; }
                    else if( i%8==3 )
                    {   return {  x:5,y:58, w:60, h:30 }; }
                    else if( i%8==4 )
                    {   return {  x:5,y:24, w:60, h:30 }; }
                    else if( i%8==5 )
                    {   return {  x:35,y:43, w:60, h:30 }; }
                    else if( i%8==6 )
                    {   return {  x:47,y:13, w:60, h:30 }; }
                    else if( i%8==7 )
                    {   return {  x:10,y:63, w:60, h:30 }; }
                };