Zone

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