Added ship list graphics

src/scripts/game/Battle.ts

@@ -65,8 +65,8 @@ module SpaceTac.Game {
         // Defines the initial ship positions of all engaged fleets
         placeShips(): void {
             this.first_turn = true;
-            this.placeFleetShips(this.fleets[0], 100, 300, 0);
-            this.placeFleetShips(this.fleets[1], 950, 300, Math.PI);
+            this.placeFleetShips(this.fleets[0], 50, 300, 0);
+            this.placeFleetShips(this.fleets[1], 800, 300, Math.PI);
         }
 
         // End the current ship turn, passing control to the next one in play order

src/scripts/game/specs/Battle.spec.ts

@@ -42,23 +42,23 @@ module SpaceTac.Game {
             var battle = new Battle(fleet1, fleet2);
             battle.placeShips();
 
-            expect(ship1.arena_x).toBeCloseTo(100, 0.0001);
+            expect(ship1.arena_x).toBeCloseTo(50, 0.0001);
             expect(ship1.arena_y).toBeCloseTo(150, 0.0001);
             expect(ship1.arena_angle).toBeCloseTo(0, 0.0001);
 
-            expect(ship2.arena_x).toBeCloseTo(100, 0.0001);
+            expect(ship2.arena_x).toBeCloseTo(50, 0.0001);
             expect(ship2.arena_y).toBeCloseTo(300, 0.0001);
             expect(ship2.arena_angle).toBeCloseTo(0, 0.0001);
 
-            expect(ship3.arena_x).toBeCloseTo(100, 0.0001);
+            expect(ship3.arena_x).toBeCloseTo(50, 0.0001);
             expect(ship3.arena_y).toBeCloseTo(450, 0.0001);
             expect(ship3.arena_angle).toBeCloseTo(0, 0.0001);
 
-            expect(ship4.arena_x).toBeCloseTo(950, 0.0001);
+            expect(ship4.arena_x).toBeCloseTo(800, 0.0001);
             expect(ship4.arena_y).toBeCloseTo(375, 0.0001);
             expect(ship4.arena_angle).toBeCloseTo(Math.PI, 0.0001);
 
-            expect(ship5.arena_x).toBeCloseTo(950, 0.0001);
+            expect(ship5.arena_x).toBeCloseTo(800, 0.0001);
             expect(ship5.arena_y).toBeCloseTo(225, 0.0001);
             expect(ship5.arena_angle).toBeCloseTo(Math.PI, 0.0001);
         });

src/scripts/view/Preload.ts

@@ -12,6 +12,9 @@ module SpaceTac.View {
 
             // Load assets
             this.load.image("battle-background", "assets/images/battle/background.jpg");
+            this.load.image("battle-shiplist-base", "assets/images/battle/shiplist-base.png");
+            this.load.image("battle-shiplist-normal", "assets/images/battle/shiplist-normal.png");
+            this.load.image("battle-shiplist-playing", "assets/images/battle/shiplist-playing.png");
             this.load.image("battle-shiplist-own", "assets/images/battle/shiplist-own.png");
             this.load.image("battle-shiplist-enemy", "assets/images/battle/shiplist-enemy.png");
             this.load.image("battle-arena-background", "assets/images/battle/arena/background.png");

src/scripts/view/battle/Arena.ts

@@ -31,7 +31,7 @@ module SpaceTac.View {
             super(battleview.game);
 
             var background = new Phaser.Button(battleview.game, 0, 0, "battle-arena-background");
-            var expected_width = 1280 - 252;
+            var expected_width = 1280 - 416;
             var expected_height = 720 - 100;
             background.scale.set(expected_width / background.width, expected_height / background.height);
             this.background = background;
@@ -49,7 +49,7 @@ module SpaceTac.View {
                 }
             }, null);
 
-            this.position.set(32, 100);
+            this.position.set(196, 100);
             this.addChild(this.background);
 
             this.init();

src/scripts/view/battle/LogProcessor.ts

@@ -59,6 +59,7 @@ module SpaceTac.View {
         // Playing ship changed
         private processShipChangeEvent(event: Game.ShipChangeEvent) {
             this.view.arena.setShipPlaying(event.target.ship);
+            this.view.ship_list.setPlaying(event.target.ship);
             this.view.card_playing.setShip(event.target.ship);
             this.view.action_bar.setShip(event.target.ship);
         }

src/scripts/view/battle/ShipList.ts

@@ -9,10 +9,14 @@ module SpaceTac.View {
         // List of ship items
         ships: ShipListItem[];
 
+        // Playing ship
+        playing: ShipListItem;
+
         // Create an empty action bar
         constructor(battleview: BattleView) {
             this.battleview = battleview;
             this.ships = [];
+            this.playing = null;
 
             super(battleview.game, battleview.ui);
             battleview.ui.add(this);
@@ -27,7 +31,7 @@ module SpaceTac.View {
         update() {
             super.update();
 
-            this.y = 100;
+            this.y = 76;
         }
 
         // Clear the action icons
@@ -49,7 +53,7 @@ module SpaceTac.View {
         // 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);
+            var result = new ShipListItem(this, 0, this.ships.length * 80, ship, owned);
             this.ships.push(result);
             this.add(result);
             return result;
@@ -66,5 +70,16 @@ module SpaceTac.View {
             });
             return found;
         }
+
+        // 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);
+            }
+        }
     }
 }

src/scripts/view/battle/ShipListItem.ts

@@ -12,11 +12,20 @@ module SpaceTac.View {
         // Shield display
         shield: ValueBar;
 
+        // Playing indicator
+        layer_playing: Phaser.Image;
+
+        // Non-playing indicator
+        layer_normal: Phaser.Image;
+
+        // Enemy indicator
+        layer_enemy: Phaser.Image;
+
         // Create a ship button for the battle ship list
         constructor(list: ShipList, x: number, y: number, ship: Game.Ship, owned: boolean) {
             this.ship = ship;
 
-            super(list.battleview.game, x, y, owned ? "battle-shiplist-own" : "battle-shiplist-enemy");
+            super(list.battleview.game, x, y, "battle-shiplist-base");
 
             this.input.useHandCursor = true;
             this.onInputOver.add(() => {
@@ -26,11 +35,21 @@ module SpaceTac.View {
                 list.battleview.cursorOffShip(ship);
             });
 
-            this.hull = ValueBar.newStandard(list.battleview.game, 40, 0);
+            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_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.hull = ValueBar.newStandard(list.battleview.game, 85, 28);
             this.hull.scale.set(0.1, 0.1);
             this.addChild(this.hull);
 
-            this.shield = ValueBar.newStandard(list.battleview.game, 40, 20);
+            this.shield = ValueBar.newStandard(list.battleview.game, 85, 46);
             this.shield.scale.set(0.1, 0.1);
             this.addChild(this.shield);
         }
@@ -43,5 +62,15 @@ module SpaceTac.View {
                 this.shield.setValue(attribute.current, attribute.maximal);
             }
         }
+
+        // Set the playing status
+        setPlaying(playing: boolean) {
+            var tween1 = this.game.tweens.create(this.layer_playing);
+            tween1.to({alpha: playing ? 1 : 0});
+            tween1.start();
+            var tween2 = this.game.tweens.create(this.layer_normal);
+            tween2.to({alpha: playing ? 0 : 1});
+            tween2.start();
+        }
     }
 }