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.scrollmap();

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) '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)