Zone - Revision history

Thoun: /* How to use Zone */

2025-12-29T13:44:41Z

How to use Zone

← Older revision		Revision as of 15:44, 29 December 2025
Line 47:		Line 47:

	<pre>		<pre>
	zone.create( this, 'my_zone', <item_width>, <item_height> );		zone.create( this.bga.gameui, 'my_zone', <item_width>, <item_height> );
	zone.setPattern( <mode> );		zone.setPattern( <mode> );
	</pre>		</pre>

Thoun at 09:59, 16 December 2025

2025-12-16T09:59:35Z

← Older revision		Revision as of 11:59, 16 December 2025
Line 15:		Line 15:
	At first, don't forget to add "ebg/zone" as a dependency:		At first, don't forget to add "ebg/zone" as a dependency:
	<pre>		<pre>
	~~define~~([		const [zone] = await importDojoLibs(['ebg/zone']);
	~~"dojo","dojo/_base/declare",~~
	~~"ebg/core/gamegui",~~
	~~"ebg/counter",~~
	"ebg/zone~~" /// <==== HERE~~
	],
	</pre>		</pre>

Line 26:		Line 21:

	<pre>		<pre>
	constructor~~: function~~(){		constructor(){
	console.log('yourgame constructor');		console.log('yourgame constructor');

Nicotacotac: /* Patterns: positioning items within your zone */

2022-08-19T13:51:25Z

Patterns: positioning items within your zone

← Older revision		Revision as of 15:51, 19 August 2022
Line 89:		Line 89:

	== Patterns: positioning items within your zone ==		== Patterns: positioning items within your zone ==

			full source is available here : https://x.boardgamearena.net/data/themereleases/220811-1000/js/modules/zone.js

	The zone package comes with many positioning patterns pre-coded; these allow your items to take on a variety of arrangements. To set a pattern for your zone, call the following method on your zone object (once the zone has already been created, of course):		The zone package comes with many positioning patterns pre-coded; these allow your items to take on a variety of arrangements. To set a pattern for your zone, call the following method on your zone object (once the zone has already been created, of course):

Victoria La at 23:26, 16 May 2022

2022-05-16T23:26:26Z

← Older revision		Revision as of 01:26, 17 May 2022
Line 213:		Line 213:
	};		};
	</pre>		</pre>


			[[Category:Studio]]

Panyakali: /* horizontalfit */

2020-08-06T22:47:49Z

horizontalfit

@@ Line 153: / Line 153: @@
 === horizontalfit ===
-This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. With enough horizontal space to fit all items fully in the zone, this pattern will simply arrange the items in a single horizontal row (identically to the 'grid' pattern with enough horizontal space). However, if the zone is not allotted enough horizontal space to fully display each zone item on its own in a single row, then the items will overlap each other just enough to allow all items to fit into a single row of the allotted width. If the amount of horizontal space for the zone is greater than what is required by the items and the margins between them, then the row of items will be centered within the 'min-width' of their container element.
+This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. If the width of this type of zone is not explicitly set, then it will be assumed to be then same as its parent element (which could lead to the items being centered within another one of your divs, as in the first zone of the image below).
 [[File:Zone_horizontalfit.jpg]]

Panyakali: /* verticalfit */

2020-08-06T22:37:08Z

verticalfit

← Older revision		Revision as of 00:37, 7 August 2020
Line 132:		Line 132:
	=== verticalfit ===		=== verticalfit ===

	This pattern is useful if you want all items in your zone to be arranged in a single column, regardless of whether there is enough space to display each item fully. ~~With enough vertical space to fit all items fully~~ in the zone, ~~this pattern will simply arrange~~ the items ~~in a single~~ vertical ~~column~~. ~~However, if~~ the zone is ~~not~~ allotted ~~enough vertical~~ space to fully ~~display each zone item on its own in a single column~~, then the items will overlap each other just enough to allow all items to fit into a single column of the allotted height.		This pattern is useful if you want all items in your zone to be arranged in a single column, regardless of whether there is enough space to display each item fully. In the first zone in the image below, no min-height or max-height was set for the zone (thus, the zone has the max-height of its first component), so all items were stacked upward on top of the original component, with item_margin (5px by default) vertical distance between each component, similar to how it was done for the diagonal pattern zones.

			If the zone is explicitly allotted more space than is required to display one component, but less than is required to show all fully (usually, this value is the sum of the component's heights, unless you are using sprites with strange transparency portions), then the items will overlap each other just enough to allow all of the items to fit into a single column of the allotted height (as in the second zone in the image below). However, with enough vertical space to fit all items fully in the zone, this pattern will simply arrange the items in a single vertical column (as in the third zone of the image below). Here is how the vertical distances were set for those two examples:

			<pre>
			// For the second verticalfit example, with overlap:
			dojo.style('verticalfit_zone_2', 'max-height', '100px');

			// For the third verticalfit example, with just enough space to display all components:
			// (component height = 50px, multiplied by 5 components = 250px)
			dojo.style('verticalfit_zone_3', 'min-height', '250px');
			</pre>

	[[File:Zone_verticalfit_1.jpg]]		[[File:Zone_verticalfit_1.jpg]]

	If the amount of vertical space for the zone is greater than what is required by the items and the margins between them, then the column of items will be centered within the 'min-height' of their container element.		If the amount of vertical space for the zone is greater than what is required by the items and the margins between them, then the column of items will be centered within the 'min-height' of their container element (as in the image below, which has min-height set to 450px).

	[[File:Zone_verticalfit_2.jpg]]		[[File:Zone_verticalfit_2.jpg]]

Panyakali: /* diagonal */

2020-08-06T22:21:43Z

diagonal

← Older revision		Revision as of 00:21, 7 August 2020
Line 116:		Line 116:
	=== diagonal ===		=== diagonal ===

	This pattern is great for creating the illusion of stacks (e.g., decks, counters, etc), because it will place each successive item in the zone a certain number of pixels below, and that same number of pixels to the right of the previous item in the zone. The exact number of pixels that are used for these offsets are controlled by the zone object attribute 'item_margin' (which defaults to 5)~~; reducing~~ this ~~number~~ will make each item in the zone be closer together, making it appear as if each item in the stack is thinner, and increasing it will make the items in your stack be further apart, or thicker. ~~The behavior of this pattern does not appear~~ to ~~be affected by whether or not~~ the zone ~~is allotted~~ enough ~~horizontal or vertical space~~ to display ~~all items~~.		This pattern is great for creating the illusion of stacks (e.g., decks, counters, etc), because it will place each successive item in the zone a certain number of pixels below, and that same number of pixels to the right of the previous item in the zone. The exact number of pixels that are used for these offsets are controlled by the zone object attribute 'item_margin' (which defaults to 5, as in the first zone in the image below). The behavior of this pattern does not appear to be affected by whether or not the zone is allotted enough horizontal or vertical space to display all items, as is demonstrated in the second zone of the image below, which was allotted less vertical and horizontal space (49px by 49px) than is required for displaying just one of the components (50px by 50px).

			Reducing the zone's item_margin will make each item in the zone be closer together, making it appear as if each item in the stack is thinner (as in the third zone in the image below), and increasing this value will make the items in your stack be further apart, giving an illusion of thicker components (as in the fourth zone in the image below). Here's how to alter item_margin for your zone:

			<pre>
			// For the third diagonal example:
			this.zone.diagonal_zone_3.item_margin = 2;

			// For the fourth diagonal example (with enough margin to fully display each component):
			this.zone.diagonal_zone_4.item_margin = 36;
			</pre>

	[[File:Zone_diagonal.jpg]]		[[File:Zone_diagonal.jpg]]

Panyakali: /* grid */

2020-08-06T22:09:39Z

grid

← Older revision		Revision as of 00:09, 7 August 2020
Line 110:		Line 110:
	However, if the zone is not allotted enough horizontal space to display all zone items in a single horizontal row, then the items will wrap to the next line as in the second zone in the image below). In the example image, restricting the zone width was done via:		However, if the zone is not allotted enough horizontal space to display all zone items in a single horizontal row, then the items will wrap to the next line as in the second zone in the image below). In the example image, restricting the zone width was done via:

	~~[code]~~dojo.style('grid_zone_2', 'max-width', '175px');[/~~code]~~		<pre>dojo.style('grid_zone_2', 'max-width', '175px');</pre>

	[[File:Zone_grid.jpg]]		[[File:Zone_grid.jpg]]

Panyakali: /* grid */

2020-08-06T22:09:06Z

grid

← Older revision		Revision as of 00:09, 7 August 2020
Line 106:		Line 106:
	=== grid ===		=== grid ===

	This is the default pattern for all zones when they are created. With enough horizontal space to fit all items in the zone, this pattern will simply arrange the items in a single horizontal row. However, if the zone is not allotted enough horizontal space to display all zone items in a single horizontal row, then the items will wrap to the next line.		This is the default pattern for all zones when they are created. With enough horizontal space to fit all items in the zone, this pattern will simply arrange the items in a single horizontal row (as in the first zone in the image below).

			However, if the zone is not allotted enough horizontal space to display all zone items in a single horizontal row, then the items will wrap to the next line as in the second zone in the image below). In the example image, restricting the zone width was done via:

			[code]dojo.style('grid_zone_2', 'max-width', '175px');[/code]

	[[File:Zone_grid.jpg]]		[[File:Zone_grid.jpg]]

Panyakali at 22:04, 6 August 2020

2020-08-06T22:04:54Z

← Older revision		Revision as of 00:04, 7 August 2020
Line 130:		Line 130:
	This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. With enough horizontal space to fit all items fully in the zone, this pattern will simply arrange the items in a single horizontal row (identically to the 'grid' pattern with enough horizontal space). However, if the zone is not allotted enough horizontal space to fully display each zone item on its own in a single row, then the items will overlap each other just enough to allow all items to fit into a single row of the allotted width. If the amount of horizontal space for the zone is greater than what is required by the items and the margins between them, then the row of items will be centered within the 'min-width' of their container element.		This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. With enough horizontal space to fit all items fully in the zone, this pattern will simply arrange the items in a single horizontal row (identically to the 'grid' pattern with enough horizontal space). However, if the zone is not allotted enough horizontal space to fully display each zone item on its own in a single row, then the items will overlap each other just enough to allow all items to fit into a single row of the allotted width. If the amount of horizontal space for the zone is greater than what is required by the items and the margins between them, then the row of items will be centered within the 'min-width' of their container element.

	[[File:~~Zone_horizontalfit_1~~.jpg]]		[[File:Zone_horizontalfit.jpg]]

	=== ellipticalfit ===		=== ellipticalfit ===