Added a ShipList to hold ship icons in battle view

src/scripts/game/Equipment.ts

@@ -23,8 +23,5 @@ module SpaceTac.Game {
 
         // Level requirement
         min_level: number;
-
-        constructor() {
-        }
     }
 }

src/scripts/view/Preload.ts

@@ -13,6 +13,7 @@ module SpaceTac.View {
             this.load.image("ui-shiplist-own", "assets/images/battle/shiplist-own.png");
             this.load.image("ui-shiplist-enemy", "assets/images/battle/shiplist-enemy.png");
             this.load.image("ui-arena-background", "assets/images/battle/arena-background.png");
+            this.load.image("ui-ship-card", "assets/images/battle/ship-card.png");
             this.load.image("arena-ship", "assets/images/battle/ship01.png");
             this.load.image("ui-bar-standard-background", "assets/images/ui/bars/standard-background.png");
             this.load.image("ui-bar-standard-foreground", "assets/images/ui/bars/standard-foreground.png");

src/scripts/view/battle/BattleView.ts

@@ -25,6 +25,9 @@ module SpaceTac.View {
         // Card to display hovered ship
         card_hovered: ShipCard;
 
+        // Ship list
+        ship_list: ShipList;
+
         // Action bar
         action_bar: ActionBar;
 
@@ -47,7 +50,6 @@ module SpaceTac.View {
         create() {
             var battleview = this;
             var game = this.game;
-            var player = this.player;
 
             game.stage.backgroundColor = 0x000000;
 
@@ -61,14 +63,10 @@ module SpaceTac.View {
 
             // Add UI elements
             this.action_bar = new ActionBar(this);
+            this.ship_list = new ShipList(this);
             this.card_playing = new ShipCard(this, 500, 0);
             this.card_hovered = new ShipCard(this, 500, 300);
 
-            // Add ship buttons to UI
-            this.battle.play_order.forEach(function (ship: Game.Ship, rank: number) {
-                new ShipListItem(battleview, 0, rank * 50, ship, ship.getPlayer() === player);
-            });
-
             // Add a test progress bar
             var bar = ValueBar.newStandard(game, 300, 300);
             bar.setValue(50, 100);

src/scripts/view/battle/ShipList.ts

@@ -0,0 +1,58 @@
+module SpaceTac.View {
+    "use strict";
+
+    // Bar with all playing ships, by play order
+    export class ShipList extends Phaser.Group {
+        // Link to the parent battleview
+        battleview: BattleView;
+
+        // List of ship items
+        ships: ShipListItem[];
+
+        // Create an empty action bar
+        constructor(battleview: BattleView) {
+            this.battleview = battleview;
+            this.ships = [];
+
+            super(battleview.game, battleview.ui);
+            battleview.ui.add(this);
+
+            if (battleview.battle) {
+                this.setShipsFromBattle(battleview.battle);
+            }
+            this.update();
+        }
+
+        // Update the bar status (and position)
+        update() {
+            super.update();
+
+            this.y = 100;
+        }
+
+        // Clear the action icons
+        clearAll(): void {
+            this.ships.forEach((ship: ShipListItem) => {
+                ship.destroy();
+            });
+            this.ships = [];
+        }
+
+        // Set the ship list from a battle
+        setShipsFromBattle(battle: Game.Battle): void {
+            this.clearAll();
+            battle.play_order.forEach((ship: Game.Ship) => {
+                this.addShip(ship);
+            }, this);
+        }
+
+        // Add a ship icon
+        addShip(ship: Game.Ship): ShipListItem {
+            var owned = ship.getPlayer() === this.battleview.player;
+            var result = new ShipListItem(this, 0, this.ships.length * 50, ship, owned);
+            this.ships.push(result);
+            this.add(result);
+            return result;
+        }
+    }
+}

src/scripts/view/battle/ShipListItem.ts

@@ -7,18 +7,17 @@ module SpaceTac.View {
         private ship: Game.Ship;
 
         // Create a ship button for the battle ship list
-        constructor(battleview: BattleView, x: number, y: number, ship: Game.Ship, owned: boolean) {
+        constructor(list: ShipList, x: number, y: number, ship: Game.Ship, owned: boolean) {
             this.ship = ship;
 
-            super(battleview.game, x, y, owned ? "ui-shiplist-own" : "ui-shiplist-enemy");
-            battleview.ui.add(this);
+            super(list.battleview.game, x, y, owned ? "ui-shiplist-own" : "ui-shiplist-enemy");
 
             this.input.useHandCursor = true;
             this.onInputOver.add(() => {
-                battleview.cursorOnShip(ship);
+                list.battleview.cursorOnShip(ship);
             });
             this.onInputOut.add(() => {
-                battleview.cursorOffShip(ship);
+                list.battleview.cursorOffShip(ship);
             });
         }
     }