New ship list placeholder graphics and behavior

src/app/view/Preload.ts

@@ -19,12 +19,8 @@ module SpaceTac.View {
             this.loadImage("menu/button.png");
             this.loadImage("battle/waiting.png");
             this.loadImage("battle/shiplist-base.png");
-            this.loadImage("battle/shiplist-normal.png");
-            this.loadImage("battle/shiplist-playing.png");
             this.loadImage("battle/shiplist-own.png");
             this.loadImage("battle/shiplist-enemy.png");
-            this.loadImage("battle/shiplist-ap-empty.png");
-            this.loadImage("battle/shiplist-ap-full.png");
             this.loadImage("battle/shiplist-hull-empty.png");
             this.loadImage("battle/shiplist-hull-full.png");
             this.loadImage("battle/shiplist-shield-empty.png");

src/app/view/battle/ActionBar.ts

@@ -28,7 +28,7 @@ module SpaceTac.View {
             this.ship = null;
 
             super(battleview.game);
-            this.x = 170;
+            this.x = 230;
             this.y = 0;
             battleview.ui.add(this);
 

src/app/view/battle/EffectDisplay.ts

@@ -5,7 +5,7 @@ module SpaceTac.View {
     export class EffectDisplay extends Phaser.Image {
         constructor(game: Phaser.Game, effect: Game.TemporaryEffect) {
             var key = "battle-effect-" + effect.getFullCode();
-            super(game, 115, 22, key, 0);
+            super(game, 0, 0, key, 0);
 
             var style = {font: "bold 12px Arial", fill: "#d0d020"};
             var duration = new Phaser.Text(this.game, 0, 0, effect.duration.toString(), style);

src/app/view/battle/ShipList.ts

@@ -31,13 +31,6 @@ module SpaceTac.View {
             this.update();
         }
 
-        // Update the bar status (and position)
-        update() {
-            super.update();
-
-            this.y = 76;
-        }
-
         // Clear the action icons
         clearAll(): void {
             this.ships.forEach((ship: ShipListItem) => {
@@ -52,12 +45,13 @@ module SpaceTac.View {
             battle.play_order.forEach((ship: Game.Ship) => {
                 this.addShip(ship);
             }, this);
+            this.updateItemsLocation();
         }
 
         // 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 * 80, ship, owned);
+            var result = new ShipListItem(this, -200, 0, ship, owned);
             this.ships.push(result);
             this.add(result);
             return result;
@@ -75,6 +69,30 @@ module SpaceTac.View {
             return found;
         }
 
+        // Find the play position in play_order for a given ship (0 is currently playing)
+        findPlayPosition(ship: Game.Ship): number {
+            var battle = this.battleview.battle;
+            var idx = battle.play_order.indexOf(ship);
+            var diff = idx - battle.playing_ship_index;
+            if (diff < 0) {
+                diff += battle.play_order.length;
+            }
+            return diff;
+        }
+
+        // Update the locations of all items
+        updateItemsLocation(animate: boolean = true): void {
+            this.ships.forEach((item: ShipListItem) => {
+                var position = this.findPlayPosition(item.ship);
+                if (position === 0) {
+                    item.moveTo(12, 12, animate);
+                } else {
+                    item.moveTo(3, 20 + position * 63, animate);
+                }
+                this.setChildIndex(item, position);
+            });
+        }
+
         // Remove a ship from the list
         removeShip(ship: Game.Ship): void {
             var item = this.findItem(ship);
@@ -82,17 +100,13 @@ module SpaceTac.View {
                 this.ships.splice(this.ships.indexOf(item), 1);
                 item.destroy();
             }
+            this.updateItemsLocation();
         }
 
         // Set the currently playing ship
         setPlaying(ship: Game.Ship): void {
-            if (this.playing) {
-                this.playing.setPlaying(false);
-            }
             this.playing = this.findItem(ship);
-            if (this.playing) {
-                this.playing.setPlaying(true);
-            }
+            this.updateItemsLocation();
         }
 
         // Set the currently hovered ship

src/app/view/battle/ShipListItem.ts

@@ -12,8 +12,8 @@ module SpaceTac.View {
         // Shield display
         shield: ValueBar;
 
-        // Action points display
-        ap: ValueBar;
+        // Base display
+        layer_base: Phaser.Image;
 
         // Portrait
         layer_portrait: Phaser.Image;
@@ -21,15 +21,6 @@ module SpaceTac.View {
         // Hover indicator
         layer_hover: Phaser.Image;
 
-        // Playing indicator
-        layer_playing: Phaser.Image;
-
-        // Non-playing indicator
-        layer_normal: Phaser.Image;
-
-        // Enemy indicator
-        layer_enemy: Phaser.Image;
-
         // Active effects group
         active_effects: Phaser.Group;
 
@@ -37,7 +28,7 @@ module SpaceTac.View {
         constructor(list: ShipList, x: number, y: number, ship: Game.Ship, owned: boolean) {
             this.ship = ship;
 
-            super(list.battleview.game, x, y, "battle-shiplist-base");
+            super(list.battleview.game, x, y, owned ? "battle-shiplist-own" : "battle-shiplist-enemy");
 
             this.input.useHandCursor = true;
             this.onInputOver.add(() => {
@@ -47,30 +38,26 @@ module SpaceTac.View {
                 list.battleview.cursorOffShip(ship);
             });
 
-            this.layer_playing = new Phaser.Image(this.game, 0, 0, "battle-shiplist-playing", 0);
-            this.layer_playing.alpha = 0;
-            this.addChild(this.layer_playing);
+            this.layer_base = new Phaser.Image(this.game, 0, 0, "battle-shiplist-base", 0);
+            this.addChild(this.layer_base);
 
-            this.layer_portrait = new Phaser.Image(this.game, 14, 15, "ship-scout-portrait", 0);
+            this.layer_portrait = new Phaser.Image(this.game, 30, 30, "ship-scout-portrait", 0);
+            this.layer_portrait.anchor.set(0.5, 0.5);
             this.addChild(this.layer_portrait);
 
-            this.layer_normal = new Phaser.Image(this.game, 0, 0, "battle-shiplist-normal", 0);
-            this.addChild(this.layer_normal);
-
-            this.layer_enemy = new Phaser.Image(this.game, 0, 0, owned ? "battle-shiplist-own" : "battle-shiplist-enemy", 0);
-            this.addChild(this.layer_enemy);
-
-            this.layer_hover = new Phaser.Image(this.game, 14, 14, "battle-arena-shipspritehover", 0);
+            this.layer_hover = new Phaser.Image(this.game, 30, 30, "battle-arena-shipspritehover", 0);
+            this.layer_hover.anchor.set(0.5, 0.5);
             this.layer_hover.visible = false;
             this.addChild(this.layer_hover);
 
-            this.hull = ValueBar.newStyled(list.battleview.game, "battle-shiplist-hull", 76, 26);
-            this.addChild(this.hull);
-
-            this.shield = ValueBar.newStyled(list.battleview.game, "battle-shiplist-shield", 76, 44);
+            this.shield = ValueBar.newStyled(this.game, "battle-shiplist-shield", 127, 48);
             this.addChild(this.shield);
 
+            this.hull = ValueBar.newStyled(this.game, "battle-shiplist-hull", 60, 48);
+            this.addChild(this.hull);
+
             this.active_effects = new Phaser.Group(this.game);
+            this.active_effects.position.set(63, 9);
             this.addChild(this.active_effects);
 
             this.updateAttributes();
@@ -101,10 +88,16 @@ module SpaceTac.View {
             }
         }
 
-        // Set the playing status
-        setPlaying(playing: boolean) {
-            Animation.setVisibility(this.game, this.layer_playing, playing, 500);
-            Animation.setVisibility(this.game, this.layer_normal, !playing, 500);
+        // Move to a given location on screen
+        moveTo(x: number, y: number, animate: boolean) {
+            if (animate) {
+                var tween = this.game.tweens.create(this);
+                tween.to({x: x, y: y});
+                tween.start();
+            } else {
+                this.x = x;
+                this.y = y;
+            }
         }
 
         // Set the hovered status

src/app/view/specs/ShipList.spec.ts

@@ -0,0 +1,22 @@
+/// <reference path="../../definitions/jasmine.d.ts"/>
+/// <reference path="TestGame.ts"/>
+
+module SpaceTac.View.Specs {
+    "use strict";
+
+    describe("ShipList", () => {
+        inbattleview_it("handles play position of ships", (battleview: BattleView) => {
+            var list = battleview.ship_list;
+
+            expect(list.findPlayPosition(battleview.battle.play_order[0])).toBe(0);
+            expect(list.findPlayPosition(battleview.battle.play_order[1])).toBe(1);
+            expect(list.findPlayPosition(battleview.battle.play_order[2])).toBe(2);
+
+            battleview.battle.advanceToNextShip();
+
+            expect(list.findPlayPosition(battleview.battle.play_order[0])).toBe(7);
+            expect(list.findPlayPosition(battleview.battle.play_order[1])).toBe(0);
+            expect(list.findPlayPosition(battleview.battle.play_order[2])).toBe(1);
+        });
+    });
+}