API Docs for: 1.1.1
Show:

File: src\hud\widgets\IconBar.ts

/**
*
* @module HUD
* @submodule Widget
*/

module Kiwi.HUD.Widget {

    /**
    * The IconBar used to display a series of icons which represent a number of 'something' the user may have. 
    * Example: If you had a shooter style game you might want to display the amount of 'ammo' left in the gun using a series of bullet icons. You could then use this IconBar to display that series.
    * The amount is based of a counter components current value, so you can set a maximum and minimum number of images to be displayed.
    *
    * @class IconBar
    * @extends Kiwi.HUD.HUDWidget
    * @namespace Kiwi.HUD.Widget
    * @constructor
    * @param game {Kiwi.Game} The game that this icon bar belongs to.
    * @param atlas {Kiwi.Textures.TextureAtlas} The texture atlas that the icons will have.
    * @param current {number} The current amount of icons in the bar.
    * @param max {number} The maximum number of icons.
    * @param x {number} The x coordinates of the first icon.
    * @param y {number} The y coordinates of the last icon.
    * @return {Kiwi.HUD.Widget.IconBar}
    */
    export class IconBar extends Kiwi.HUD.HUDWidget {

        constructor(game:Kiwi.Game, atlas: Kiwi.Textures.TextureAtlas, current: number, max: number, x: number, y: number) {
            
            super(game, 'IconBar', x, y);

            this.class = 'kiwi-iconbar-widget kiwi-widget';
            this.atlas = atlas;
            this.width = this.atlas.cells[0].w;
            this.height = this.atlas.cells[0].h;
            this._horizontal = true;
            
            this.counter = this.components.add(new Kiwi.HUD.HUDComponents.Counter(this, current, max, 0));
            this.counter.updated.add(this._amountChanged, this);

            this._icons = [];
            this._amountChanged();
        }

        /**
        * The type of object that this is.
        * @method objType
        * @return {String} "IconBarWidget"
        * @public
        */
        public objType():string {
            return 'IconBarWidget';
        }

        /**
        * The amount of spacing you want between each icon in the bar. Defaults to 0.
        * @property iconGap
        * @type number
        * @default 0
        * @public
        */
        public iconGap: number = 0;

        /**
        * The texture atlas that each Icon inside the IconBar will use.
        * @property atlas
        * @type Kiwi.Textures.TextureAtlas
        * @public
        */
        public atlas: Kiwi.Textures.TextureAtlas;

        /**
        * The width of a single Icon in the bar. This is based on the width of the first cell in the atlas.
        * @property width
        * @type number
        * @private
        */
        private width: number;

        /**
        * The height of a single Icon in the bar. This is based on the height of the first cell in the atlas.
        * @property height
        * @type number
        * @private
        */
        private height: number;

        /**
        * Knowledge of whether the icons should be horizontal or vertical
        * @property _horizontal
        * @type boolean
        * @default true
        * @private
        */
        private _horizontal: boolean;

        /**
        * Holds the counter component.
        * @property counter
        * @type Kiwi.HUD.HUDComponents.Counter
        * @public
        */
        public counter: Kiwi.HUD.HUDComponents.Counter;

        /**
        * An array of all of the icons on the screen. Each item in the array is of the type Kiwi.HUD.Widget.Icon
        * @property icons
        * @type Array
        * @private
        */
        private _icons: Kiwi.HUD.Widget.Icon[];

        /**
        * Gets called when the range has updated and then it updates the size of the bar.
        * @method _changeSize
        * @private
        */
        private _amountChanged() {

            //do we need to do something to the icons?!?
            if (this.counter.max !== this._icons.length) {
                if ((this.counter.max) > this._icons.length) {
                    //add more
                    var amount = (this.counter.max) - this._icons.length;
                    for (var i = 0; i < amount; i++) {
                        this._addIcon();
                    }
                } else {
                    //remove some
                    for (var i = this.counter.max; i < this._icons.length; i++) {
                        this._removeIcon(this._icons[i]);
                        this._icons[i].destroy();
                        this._icons.splice(i, 1);
                        i--;
                    }
                }
            }

            //display them all!
            for (var i = 0; i < this._icons.length; i++) {
                if (i > (this.counter.current - 1)) {
                    this._icons[i].style.display = 'none';
                } else {
                    this._icons[i].style.display = 'block';
                }
            }
        }

        /**
        * Creates a new Icon and adds it to this IconBar.
        * @method _addIcon
        * @private
        */
        private _addIcon() {
            if (this.horizontal) {
                var i: Kiwi.HUD.Widget.Icon = new Kiwi.HUD.Widget.Icon(this.game, this.atlas, this.x + ((this.width + this.iconGap) * (this._icons.length - 1)), this.y);
            } else {
                var i: Kiwi.HUD.Widget.Icon = new Kiwi.HUD.Widget.Icon(this.game, this.atlas, this.x, ((this.height + this.iconGap) * (this._icons.length - 1)) + this.y);
            }

            this._icons.push(i);
            if (this._device == Kiwi.TARGET_BROWSER) {
                this.container.appendChild(i.container);
            }
        }

        /**
        * Removes a Icon from the container.
        * @method _removeIcon
        * @param icon {Kiwi.HUD.Widget.Icon} The icon that you want to remove.
        * @private
        */
        private _removeIcon(icon:Kiwi.HUD.Widget.Icon) {
            if (this._device == Kiwi.TARGET_BROWSER) {
                this.container.removeChild(icon.container);
            }
        }
        
        /**
        * Used to set the bar to be horizontal or vertical by passing a boolean.
        * @property horizontal
        * @type boolean
        * @default true
        * @public
        */
        public get horizontal(): boolean {
            return this._horizontal;
        }
        public set horizontal(val: boolean) {
            this._horizontal = val;
            this._amountChanged();
        }

        /**
        * Used to set the bar to be horizontal or vertical by passing a boolean.
        * @property vertical
        * @type boolean
        * @default false
        * @public
        */
        public get vertical(): boolean {
            return !this._horizontal;
        }
        public set vertical(val: boolean) {
            this._horizontal = !val;
            this._amountChanged();
        }

    }

}