Stock

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 very flexible and is the most used component in BGA games.

Examples of stock use cases:

• Display a set of cards, typically hands (examples: Hearts, Seasons, The Boss, Race for the Galaxy).
• Display items in player panels (examples: Takenoko, Amyitis, ...)
• ... Many other situations. For example, black dice and cubes on cards in Troyes are displayed with stock components.

Using stock:

• Your items are arranged nicely and sorted by type.
• When adding or removing items to a set, all items slide smoothly to their new position in the set.
• Selecting and unselecting items are built-in functions.
• 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

Let's have a look on how the stock is used in the game Hearts to display a hand of standard cards.

First, don't forget to add "ebg/stock" as a dependency in your js file:

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

The stock is initialized in the Javascript "setup" method like this:

    // Player hand
    this.playerHand = new ebg.stock();
    this.playerHand.create( this, $('myhand'), this.cardwidth, this.cardheight );

Explanations:

• 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 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 the cards arranged in 4 rows and 13 columns.

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

    // Specify that there are 13 images per row in the CSS sprite image
    this.playerHand.image_items_per_row = 13;

    // Create card types:
    for( var color=1;color<=4;color++ )
    {
        for( var value=2;value<=14;value++ )
        {
            // Build card type id
            var card_type_id = this.getCardUniqueId( color, value );
            this.playerHand.addItemType( card_type_id, card_type_id, g_gamethemeurl+'img/cards.jpg', card_type_id );
        }
    }

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.
• 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".

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:

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

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

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

this.playerHand.removeFromStockById( my_card_id );

Complete stock component reference

create( page, container_div, item_width, item_height ):

With create, you create a new stock component.

Parameters:

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

(See Hearts example above).

count():

Return the total number of items in the stock right now.

addItemType( type, weight, image, image_position ):

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 contain cubes of 3 different colors, you must add 3 item types (one for each color).

Parameters:

• 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.
• 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:

  g_gamethemeurl+'img/yourimage.png'

• 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: 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:

    // Specify that there are 10 image items per row in images used in "myStockObject" control.
    this.myStockObject.image_items_per_row = 10;

addToStock( type, from )

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

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:

• type: ID of the item type to use (as specified in "addItemType")
• 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:

  // Add a money token to the "player money" stock.
  // The money token will appear on "player_id" player panel and will move to its position.
  this.playerMoney.addToStock( MONEY_TOKEN, 'overall_player_board_'+player_id );

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

addToStockWithId( type, id, from )

This is the same method as addToStock, except that it also associates an ID with the newly created item.

This is especially useful:

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

Remove an item of the specific type from the stock.

"to" is an optional parameter. If "to" contains the ID of an HTML element, the item removed from the stock is slided to this HTML element before it disappear.

removeFromStockById( id, to )

Remove an item with a specific ID from the stock.

"to" is an optional parameter. If "to" contains the ID of an HTML element, the item removed from the stock is slided to this HTML element before it disappear.

removeAll()

Remove all items from the stock.

removeAllTo( to )

Remove all items from the stock. If "to" contains the ID of an HTML element, the item removed from the stock is slided to this HTML element before it disappear.

getPresentTypeList()

Return an array with all the types of items present in the stock right now.

Example:

    this.myStockControl.removeAll();
    this.myStockControl.addToStock( 65 );
    this.myStockControl.addToStock( 34 );
    this.myStockControl.addToStock( 89 );
    this.myStockControl.addToStock( 65 );
    
    // The following returns: { 34:1,  65:1,  89:1  }
    var item_types = this.myStockControl.getPresentTypeList();

resetItemsPosition()

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

By default, there is a margin of 5px between the items of a stock. You can change the member variable "item_margin" to change this.

Example:

     this.myStockControl.item_margin=5;

changeItemsWeight( newWeights )

With this method you can change dynamically the weight of the item types in a stock control.

Items are immediately re-sorted with the new weight.

Example: with a stock control that contains classic cards, you can order them by value or by color. Using changeItemsWeight you can switch from one sort method to another when a player request this.

newWeights is an associative array: item type id => new weight.

Example:

    // Item type 1 gets a new weight of 10, 2 a new weight of 20, 3 a new weight of 30.
    this.myStockControl.changeItemsWeight( { 1: 10, 2: 20, 3: 30 } );

centerItems

Center the stock items in the middle of the stock container. e.g. this.myStock.centerItems = true;

setSelectionMode( mode )

For each stock control, you can specify a selection mode:

• 0: no item can be selected by the player.
• 1: a maximum of one item can be selected by the player at a time.
• 2 (default): multiple items can be selected by the player at the same time.

setSelectionAppearance( type )

For each stock control, you can specify a selection highlighting type:

• '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.
• '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:

.stockitem_selected {
	border: 2px solid red ! important;
}

If you want to override it (for example, to change the border color) add this in your <game>.css file:

.stockitem_selected {
	border: 2px solid orange ! important;
}

isSelected( id )

Return a boolean indicating whether the specified item id has been selected.

selectItem( id )

Select the specified item.

unselectItem( id )

Unselect the specified item.

unselectAll()

Unselect all items of the stock.

onChangeSelection

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:

    dojo.connect( this.myStockControl, 'onChangeSelection', this, 'onMyMethodToCall' );
    
    (...)
    
    onMyMethodToCall: function( control_name, item_id )
    {
        // This method is called when myStockControl selected items changed
        var items = this.myStockControl.getSelectedItems();
        
        // (do something)
    },

Nota bene: - The "control_name" argument is the ID (the "DOM" id) of the "div" container of your stock control. Using "control_name", you can use the same callback method for different Stock control and see which one trigger the method. - The "item_id" argument is the stock ID (index) of the stock item that has just been selected/unselected.

getSelectedItems()

Return the list of selected items, as an array with the following format:

[
   { type:1,  id:  1001 },
   { type:1,  id:  1002 },
   { type:3,  id:  1003 }
   ...
]

getUnselectedItems()

Same as the previous one, but return unselected item instead of seleted ones.

getAllItems()

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

getItemDivId(id)

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

setOverlap( horizontal_percent, vertical_percent )

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

By default, horizontal_overlap and vertical_overlap are 0.

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.

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

onItemCreate

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

Complete example:

    // During "setup" phase, we associate our method "setupNewCard" with the creation of a new stock item:
    this.myStockItem.onItemCreate = dojo.hitch( this, 'setupNewCard' ); 

     (...)

    // And here is our "setupNewCard":
    setupNewCard: function( card_div, card_type_id, card_id )
    {
       // Add a special tooltip on the card:
       this.addTooltip( card_div.id, _("Some nice tooltip for this item"), '' );

       // Note that "card_type_id" contains the type of the item, so you can do special actions depending on the item type

       // Add some custom HTML content INSIDE the Stock item:
       dojo.place( this.format_block( 'jstpl_my_card_content', {
                                ....
                           } ), card_div.id );
    }

Tips when adding/removing items to/from Stock components

Most cases will be one of the following situations:

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 the card should come from.

Situation B:

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" 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".
• 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:

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 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.

You can customize this (showing the default value):

this.mystock.jstpl_stock_item= "<div id=\"${id}\" class=\"stockitem\" style=\"top:${top}px;left:${left}px;width:${width}px;height:${height}px;z-index:${position};background-image:url('${image}');\"></div>";

To produce a different type of stock item