Stock - Revizyon geçmişi

Ricardorix: /* Complete stock component reference */

2019-04-05T11:15:38Z

Complete stock component reference

← Önceki sürüm		13.15, 5 Nisan 2019 tarihindeki hâli
318. satır:		318. satır:
	By default, horizontal_overlap and vertical_overlap are 0.		By default, horizontal_overlap and vertical_overlap are 0.

	When horizontal_overlap=20, it means that a stock item will overlap ~~over~~ 20% of the width of the previous ~~item~~. horizontal_overlap can't be greater than 100.		When horizontal_overlap=20, it means that a stock item will overlap to only show 20% of the width of all the previous items. horizontal_overlap can't be greater than 100.

	vertical_overlap works differently: one items on two are shifted up.		vertical_overlap works differently: one items on two are shifted up.

Tilalilalou: /* Complete stock component reference */

2019-01-31T21:39:42Z

Complete stock component reference

← Önceki sürüm		23.39, 31 Ocak 2019 tarihindeki hâli
249. satır:		249. satır:
	}		}
	</pre>		</pre>

	~~NB: the 'class' highlighting type has not yet been deployed on the studio - 24/02/2014. This warning will be removed after the next upgrade.~~


	'''isSelected( id )'''		'''isSelected( id )'''

Amadannabriona: /* Tips when adding/removing items to/from Stock components */

2018-10-06T23:10:28Z

Tips when adding/removing items to/from Stock components

← Önceki sürüm		01.10, 7 Ekim 2018 tarihindeki hâli
356. satır:		356. satır:
	== Tips when adding/removing items to/from Stock components ==		== Tips when adding/removing items to/from Stock components ==

	~~The usual way is~~ the following:		Most cases will be one of the following situations:

	'''Situation A''':		'''Situation A''':

	When you add a card to a stock item, and this card is '''not''' coming from another stock: ~~use "~~addToStockWithId" with a "from" argument set to the element of your interface where card should come from.		When you add a card to a stock item, and this card is '''not''' coming from another stock:

			* Use '''addToStockWithId''' with a "from" argument set to the element of your interface where the card should come from.

	'''Situation B''':		'''Situation B''':

	When you add a card to a stock item, and this card is coming from another stock:		When you add a card to a stock item, and this card is coming from another stock:
	* on the destination Stock, use "addToStockWithId" with a "from" ~~equals to~~ the HTML id of the corresponding item in the source Stock. For example, If the source stock id is "myHand", then the HTML id of card 48 is "myHand_item_48".
	* ~~then~~, remove the source item with "removeFromStockById".		* On the destination Stock, use '''addToStockWithId''' with a "from" argument which is the HTML id of the corresponding item in the source Stock. For example, if the source stock id is "myHand", then the HTML id of card 48 is "myHand_item_48".
	(~~note~~ that it's important to do things in this order, because source item must still ~~exists~~ when you use it as the origin of the slide).		* Then, remove the source item with '''removeFromStockById'''.

			(Note that it's important to do things in this order, because the source item must still exist when you use it as the origin of the slide.)

	'''Situation C''':		'''Situation C''':

	When you move a card from a stock item to something that is not a stock item:		When you move a card from a stock item to something that is not a stock item:
	* insert the card as a classic HTML template (dojo.place / this.format_block).
	* place it on the Stock item with "this.placeOnObject", using Stock item HTML id (see above).
	* slide it to its new position with "this.slideToObject"
	* remove the card from the Stock item with "removeFromStockById".

	Using the methods above, your cards should slide to, from and between your Stock controls smoothly		* Insert the card as a classic HTML template (dojo.place / this.format_block).
			* Place it on the Stock item with '''this.placeOnObject''', using the Stock item HTML id (see above).
			* Slide it to its new position with '''this.slideToObject'''.
			* Remove the card from the Stock item with '''removeFromStockById'''.

			Using the methods above, your cards should slide to, from, and between your Stock controls smoothly.

Amadannabriona: /* Complete stock component reference */

2018-10-06T21:29:39Z

Complete stock component reference

← Önceki sürüm		23.29, 6 Ekim 2018 tarihindeki hâli
329. satır:		329. satır:
	'''onItemCreate'''		'''onItemCreate'''

	Using onItemCreate, you can trigger a method each time a new item is added to the Stock, in order ~~you can~~ customize it.		Using onItemCreate, you can trigger a method each time a new item is added to the Stock, in order to customize it.

	Complete example:		Complete example:

Amadannabriona: /* Complete stock component reference */

2018-10-06T19:34:30Z

Complete stock component reference

← Önceki sürüm		21.34, 6 Ekim 2018 tarihindeki hâli
309. satır:		309. satır:
	'''getAllItems()'''		'''getAllItems()'''

	Get all items (same format ~~than~~ getSelectedItems and getUnselectedItems).		Get all items (same format as getSelectedItems and getUnselectedItems).

	'''getItemDivId(id)'''		'''getItemDivId(id)'''

	Get div id using stock item id (to manipulate element properties directly).		Get the div id using the stock item id (to manipulate element properties directly).

	'''setOverlap( horizontal_percent, vertical_percent )'''		'''setOverlap( horizontal_percent, vertical_percent )'''

	Make items on the stock control "overlap" on each other, to save space.		Make items of the stock control "overlap" each other, to save space.

	By default, horizontal_overlap and vertical_overlap are 0.		By default, horizontal_overlap and vertical_overlap are 0.

	When horizontal_overlap=20, it means that a stock item ~~must~~ overlap on 20% of the width of the previous item. horizontal_overlap can't be ~~over~~ 100.		When horizontal_overlap=20, it means that a stock item will overlap over 20% of the width of the previous item. horizontal_overlap can't be greater than 100.

	vertical_overlap works differently: one items on two are shifted up.		vertical_overlap works differently: one items on two are shifted up.

	See "Jaipur" ~~game~~ to see ~~an example to~~ use of this function.		See the games "Jaipur" or "Koryŏ" to see examples of use of this function.

	'''onItemCreate'''		'''onItemCreate'''

Amadannabriona: /* Complete stock component reference */

2018-10-06T19:23:15Z

Complete stock component reference

← Önceki sürüm		21.23, 6 Ekim 2018 tarihindeki hâli
195. satır:		195. satır:
	'''resetItemsPosition()'''		'''resetItemsPosition()'''

	If you moved an item from the stock control manually (ex: after a drag'n'drop) and want to reset their ~~position~~ to their original ones, you can call this method.		If you moved an item from the stock control manually (ex: after a drag'n'drop) and want to reset their positions to their original ones, you can call this method.

	'''item_margin'''		'''item_margin'''
226. satır:		226. satır:
	For each stock control, you can specify a selection mode:		For each stock control, you can specify a selection mode:
	* 0: no item can be selected by the player.		* 0: no item can be selected by the player.
	* 1: a maximum of one item can be selected by the player at ~~the same~~ time.		* 1: a maximum of one item can be selected by the player at a time.
	* 2 (default): ~~several~~ items can be selected by the player at the same time.		* 2 (default): multiple items can be selected by the player at the same time.

	'''setSelectionAppearance( type )'''		'''setSelectionAppearance( type )'''
234. satır:		234. satır:
	* 'border': there will be a red border around selected items (this is the default). The attribute 'apparenceBorderWidth' can be used to manage the width of the border (in pixels).		* 'border': there will be a red border around selected items (this is the default). The attribute 'apparenceBorderWidth' can be used to manage the width of the border (in pixels).
	* 'disappear': the selected item will fade out and disappear. This is useful when the selection has the effect of destroying the item.		* 'disappear': the selected item will fade out and disappear. This is useful when the selection has the effect of destroying the item.
	* 'class': there will be an extra '~~stockitem_selecte~~' css class added to the element when it is selected (and removed when unselected). You can override this class in the css file for your game.		* 'class': there will be an extra '''stockitem_selected''' css class added to the element when it is selected (and removed when unselected). You can override this class in the css file for your game.

	By default this class definition is:		By default this class definition is:
243. satır:		243. satır:
	</pre>		</pre>

	If you want to override it for example to change the border color add this in your <game>.css file:		If you want to override it (for example, to change the border color) add this in your <game>.css file:
	<pre>		<pre>
	.stockitem_selected {		.stockitem_selected {
255. satır:		255. satır:
	'''isSelected( id )'''		'''isSelected( id )'''

	Return ~~true/false wether~~ the specified item id has been selected ~~or not~~.		Return a boolean indicating whether the specified item id has been selected.

	'''selectItem( id )'''		'''selectItem( id )'''
271. satır:		271. satır:
	'''onChangeSelection'''		'''onChangeSelection'''

	This callback method is called when the player ~~select~~/~~unselect~~ an item of the stock.		This callback method is called when the player selects/unselects an item of the stock.

			You can connect this to one of your methods like this:

	~~You can connect this to one of your method like this:~~
	<pre>		<pre>
	dojo.connect( this.myStockControl, 'onChangeSelection', this, 'onMyMethodToCall' );		dojo.connect( this.myStockControl, 'onChangeSelection', this, 'onMyMethodToCall' );

Amadannabriona 18.40, 6 Ekim 2018 tarihinde

2018-10-06T18:40:29Z

← Önceki sürüm		20.40, 6 Ekim 2018 tarihindeki hâli
1. satır:		1. satır:
			'''Stock''' is a javascript component that you can use in your game interface to display a set of elements of the same size that need to be arranged in single or multiple lines.
	"Stock" is a javascript component that you can use in your game interface to display a set of elements of the same size that need to be arranged in ~~one~~ or multiple lines.

	Stock is very flexible and is the most used component in BGA games.		Stock is very flexible and is the most used component in BGA games.
11. satır:		10. satır:

	Using stock:		Using stock:

	* Your items are arranged nicely and sorted by type.		* Your items are arranged nicely and sorted by type.
	* When adding or removing items to ~~the~~ set, all items slide smoothly to their new position in the set.		* When adding or removing items to a set, all items slide smoothly to their new position in the set.
	* Selecting and unselecting items ~~is a~~ built-in ~~functionality~~.		* Selecting and unselecting items are built-in functions.
	* You don't have to ~~care~~ about inserting/removing HTML code: the entire life cycle of the stock is managed by the component.		* You don't have to worry about inserting/removing HTML code; the entire life cycle of the stock is managed by the component.

	== Using stock: a simple example ==		== Using stock: a simple example ==
41. satır:		41. satır:
	Explanations:		Explanations:
	* We create a new stock object for the player hand.		* We create a new stock object for the player hand.
	* As parameters of the "create" method, we provide the width/height of an item (=a card), and the container ~~div~~ "myhand" - which is a simple ~~void~~ "div" element defined in our HTML template (.tpl).		* As parameters of the "create" method, we provide the width/height of an item (a card), and the div container "myhand" - which is a simple empty "div" element defined in our HTML template (.tpl).

	Then, we must tell the stock what items it is going to display during its life: the 52 cards of a standard card game. Of course, we did not create 52 different images, but a "CSS sprite" image named "cards.jpg" with ~~all~~ the cards arranged in 4 rows and 13 columns.		Then, we must tell the stock what items it is going to display during its life: the 52 cards of a standard card game. Of course, we did not create 52 different images, but a "CSS sprite" image named "cards.jpg" with the cards arranged in 4 rows and 13 columns.

	Here's how we tell stock what ~~are the~~ items to display:		Here's how we tell stock what items to display:

	<pre>		<pre>
64. satır:		64. satır:

	Explanation:		Explanation:

	* First, we tell the stock component that our CSS sprite contains 13 items per row. This way, it can find the correct image for each card type id.		* First, we tell the stock component that our CSS sprite contains 13 items per row. This way, it can find the correct image for each card type id.
	* Then for the 4x13 cards, we call "addItemType" method that creates the type. The arguments are the type id, the weight of the card (for sorting purpose), the URL of our CSS sprite, and the position of our card image in the CSS sprite.		* Then for the 4x13 cards, we call the "addItemType" method that creates the type. The arguments are the type id, the weight of the card (for sorting purpose), the URL of our CSS sprite, and the position of our card image in the CSS sprite.

	Note: In this specific example we need to generate a unique ID for each type of card based on its color and value. This is the only purpose of "getCardUniqueId".		Note: In this specific example we need to generate a unique ID for each type of card based on its color and value. This is the only purpose of "getCardUniqueId".

Amadannabriona: /* Complete stock component reference */

2018-09-16T23:18:36Z

Complete stock component reference

← Önceki sürüm		01.18, 17 Eylül 2018 tarihindeki hâli
92. satır:		92. satır:

	With create, you create a new stock component.		With create, you create a new stock component.

	Parameters:		Parameters:
	* page: the container page. Usually: "this".		* page: the container page. Usually: "this".
	* container_div: the container "div" element (a void div element in your template, with an id).		* container_div: the container "div" element (a void div element in your template, with an id).
	* ~~a stock item~~ width and height, in pixels.		* width and height (in pixels) for the stock component.

	~~(See "Hearts" example above~~).

			(See ''Hearts'' example above).

	'''count():'''		'''count():'''
106. satır:		106. satır:
	'''addItemType( type, weight, image, image_position ):'''		'''addItemType( type, weight, image, image_position ):'''

	Define a new type of item to the stock.		Define a new type of item and add it to the stock.


	This is mandatory to define a new item type before adding it to the stock. Example: if you want to have a stock ~~control that can contains~~ cubes of 3 different colors, you must add 3 item types (one for each color).		This is mandatory to define a new item type before adding it to the stock. Example: if you want to have a stock contain cubes of 3 different colors, you must add 3 item types (one for each color).

	Parameters:		Parameters:
	* type: ID of the type to add. You can choose any positive integer. All item types must have distinct IDs.		* type: ID of the type to add. You can choose any positive integer. All item types must have distinct IDs.
	* weight: weight of items of this type. Weight value is used to sort items of the stock during the display. Note that you can specify the same weight for all items (in this case they are not sorted and their order might change randomly at any time).		* weight: weight of items of this type. Weight value is used to sort items of the stock during the display. Note that you can specify the same weight for all items; in this case, they are not sorted and their order might change randomly at any time.
	* image: URL of item image. Most of the time, you will use a CSS sprite for stock ~~item~~, so you have to specify CSS sprite image here.		* image: URL of item image. Most of the time, you will use a CSS sprite for stock items, so you have to specify CSS sprite image here.

	Be careful: you must specify the image url as this:		Be careful: you must specify the image url as this:

	<pre>		<pre>
	g_gamethemeurl+'img/yourimage.png'		g_gamethemeurl+'img/yourimage.png'
	</pre>		</pre>

	* image_position: if "image" specify the URL of a CSS sprite, you must specify the position of the item image in this CSS sprite. For example, if you have a CSS sprite with 3 cubes with a size of 20x20 pixels each (so your CSS image has for example a size of 20x60 or 60x20), you specify "0" for the first cube image, 1 for the second, 2 for the third.		* image_position: if "image" specify the URL of a CSS sprite, you must specify the position of the item image in this CSS sprite. For example, if you have a CSS sprite with 3 cubes with a size of 20x20 pixels each (so your CSS image has for example a size of 20x60 or 60x20), you specify "0" for the first cube image, 1 for the second, 2 for the third.
	Important: there ~~are~~ more than one line of items in your CSS sprite, you must specify how many items per line you have in your CSS sprite like this:
			''Important'': if there is more than one line of items in your CSS sprite, you must specify how many items per line you have in your CSS sprite like this:

	<pre>		<pre>
	// Specify that there is 10 image items per row in images used in "myStockObject" control.		// Specify that there are 10 image items per row in images used in "myStockObject" control.
	this.myStockObject.image_items_per_row = 10;		this.myStockObject.image_items_per_row = 10;
	</pre>		</pre>
129. satır:		132. satır:
	'''addToStock( type, from )'''		'''addToStock( type, from )'''

	Add an item to the stock, with the specified type.		Add an item to the stock, with the specified type, but without a unique ID.

	To make your life ~~easy~~, in most ~~of the case~~ we suggest you to use "addToStockWithId" in order to give an ID to the item added. "addToStock" is ~~perfect~~ when you are using a stock ~~controls with~~ items that are generic game ~~material~~ that ~~does not~~ need to be addressed individually (ex: a bunch of money tokens).		To make your life easier, in most cases we suggest you use '''addToStockWithId''' in order to give an ID to the item added. '''addToStock''' is suitable when you are using a stock to control items that are generic game materials that don't need to be addressed individually (example: a bunch of money tokens).

	Parameters:		Parameters:
	* type: ID of the item type to use (as specified in "addItemType")		* type: ID of the item type to use (as specified in "addItemType")
	* from: ~~OPTIONNAL~~: if you specify a HTML item here, the item will appear on this item and will be ~~slided~~ to its position on the stock item.		* from: OPTIONAL: if you specify an HTML item here, the item will appear on this item and will be slid to its position on the stock item.

	Example:		Example:
144. satır:		147. satır:
	</pre>		</pre>

	Important: for a given stock control, you must use either addToStock or addToStockWithId, but NEVER BOTH OF THEM.		Important: for a given stock control, you must use either '''addToStock''' or '''addToStockWithId''', but NEVER BOTH OF THEM.

	'''addToStockWithId( type, id, from )'''		'''addToStockWithId( type, id, from )'''

	This is ~~exactly~~ the same method ~~than "~~addToStock", except that ~~you associate~~ an ID to the newly created item.		This is the same method as '''addToStock''', except that it also associates an ID with the newly created item.

	This is especially useful:		This is especially useful:
	* When you need to know which item(s) has been selected by the user (see "getSelectedItems").
	* When you need to remove a specific item from the stock with "removeFromStockById"

	Important: for a given stock control, you must use either addToStock or addToStockWithId, but NEVER BOTH OF THEM.		* When you need to know which item(s) have been selected by the user (see '''getSelectedItems''').
			* When you need to remove a specific item from the stock with '''removeFromStockById'''.

			Important: for a given stock control, you must use either '''addToStock''' or '''addToStockWithId''', but NEVER BOTH OF THEM.

	'''removeFromStock( type, to )'''		'''removeFromStock( type, to )'''

Amadannabriona: /* Using stock: a simple example */

2018-09-16T23:11:21Z

Using stock: a simple example

← Önceki sürüm		01.11, 17 Eylül 2018 tarihindeki hâli
77. satır:		77. satır:
	In reality, cards have some IDs, which are useful to manipulate them. This is the reason we are using "addToStockWithId" instead:		In reality, cards have some IDs, which are useful to manipulate them. This is the reason we are using "addToStockWithId" instead:

			<pre>
	this.playerHand.addToStockWithId( this.getCardUniqueId( 2 /* 2=hearts */, 5 ), my_card_id );		this.playerHand.addToStockWithId( this.getCardUniqueId( 2 /* 2=hearts */, 5 ), my_card_id );
			</pre>

	If afterwards we want to remove this card from the stock:		If afterwards we want to remove this card from the stock:

			<pre>
	this.playerHand.removeFromStockById( my_card_id );		this.playerHand.removeFromStockById( my_card_id );
			</pre>

	== Complete stock component reference ==		== Complete stock component reference ==

Amadannabriona: /* Using stock: a simple example */

2018-09-16T23:10:59Z

Using stock: a simple example

← Önceki sürüm		01.10, 17 Eylül 2018 tarihindeki hâli
67. satır:		67. satır:
	* Then for the 4x13 cards, we call "addItemType" method that creates the type. The arguments are the type id, the weight of the card (for sorting purpose), the URL of our CSS sprite, and the position of our card image in the CSS sprite.		* Then for the 4x13 cards, we call "addItemType" method that creates the type. The arguments are the type id, the weight of the card (for sorting purpose), the URL of our CSS sprite, and the position of our card image in the CSS sprite.

	Note: in this specific example we need to generate a unique ID for each type of card based on its color and value. This is the only purpose of "getCardUniqueId".		Note: In this specific example we need to generate a unique ID for each type of card based on its color and value. This is the only purpose of "getCardUniqueId".

	From now, if we need to add - for example - the 5 of ~~Heart~~ to player's hand, we can do this.		From now on, if we need to add a card - for example, the 5 of Hearts - to a player's hand, we can do this:

			<pre>
	this.playerHand.addToStock( this.getCardUniqueId( 2 /* 2=hearts */, 5 ) );		this.playerHand.addToStock( this.getCardUniqueId( 2 /* 2=hearts */, 5 ) );
			</pre>

	In reality, cards have some IDs, which are useful to manipulate them. This is the reason we are using "addToStockWithId" instead:		In reality, cards have some IDs, which are useful to manipulate them. This is the reason we are using "addToStockWithId" instead:

	this.playerHand.addToStockWithId( this.getCardUniqueId( 2 /* 2=hearts */, 5 ), my_card_id );		this.playerHand.addToStockWithId( this.getCardUniqueId( 2 /* 2=hearts */, 5 ), my_card_id );

	If afterwards we want to remove this card from the stock:		If afterwards we want to remove this card from the stock:

	this.playerHand.removeFromStockById( my_card_id );		this.playerHand.removeFromStockById( my_card_id );