Added draft for ship card, with gauges and portrait (WIP)

src/scripts/view/Preload.ts

@@ -35,6 +35,12 @@ module SpaceTac.View {
             this.loadImage("battle/arena/shipspritehover.png");
             this.loadImage("battle/arena/shipspriteplaying.png");
             this.loadImage("battle/ship-card.png");
+            this.loadImage("battle/shipcard-ap-empty.png");
+            this.loadImage("battle/shipcard-ap-full.png");
+            this.loadImage("battle/shipcard-hull-empty.png");
+            this.loadImage("battle/shipcard-hull-full.png");
+            this.loadImage("battle/shipcard-shield-empty.png");
+            this.loadImage("battle/shipcard-shield-full.png");
             this.loadImage("battle/actions/move.png");
             this.loadImage("battle/actions/endturn.png");
             this.loadImage("battle/actions/fire-gatlinggun.png");

src/scripts/view/battle/BattleView.ts

@@ -87,8 +87,8 @@ module SpaceTac.View {
             // Add UI elements
             this.action_bar = new ActionBar(this);
             this.ship_list = new ShipList(this);
-            this.card_playing = new ShipCard(this, 1060, 130);
-            this.card_hovered = new ShipCard(this, 1060, 430);
+            this.card_playing = new ShipCard(this, 1066, 130);
+            this.card_hovered = new ShipCard(this, 1066, 424);
 
             this.icon_waiting = new Phaser.Image(this.game, 640, 50, "battle-waiting", 0);
             this.icon_waiting.anchor.set(0.5, 0.5);

src/scripts/view/battle/LogProcessor.ts

@@ -97,6 +97,12 @@ module SpaceTac.View {
             if (item) {
                 item.attributeChanged(event.attribute);
             }
+            if (event.ship === this.view.card_playing.ship) {
+                this.view.card_playing.attributeChanged(event.attribute);
+            }
+            if (event.ship === this.view.card_hovered.ship) {
+                this.view.card_hovered.attributeChanged(event.attribute);
+            }
         }
 
         // A ship died

src/scripts/view/battle/ShipCard.ts

@@ -6,6 +6,18 @@ module SpaceTac.View {
         // Displayed ship
         ship: Game.Ship;
 
+        // Hull gauge
+        hull: ValueBar;
+
+        // Shield gauge
+        shield: ValueBar;
+
+        // AP gauge
+        ap: ValueBar;
+
+        // Ship portrait
+        portrait: Phaser.Image;
+
         // Build an empty ship card
         constructor(battleview: BattleView, x: number, y: number) {
             super(battleview.game, x, y, "battle-ship-card");
@@ -13,6 +25,17 @@ module SpaceTac.View {
             this.ship = null;
             this.visible = false;
 
+            this.portrait = null;
+
+            this.hull = ValueBar.newStyled(this.game, "battle-shipcard-hull", 122, 8, true);
+            this.addChild(this.hull);
+
+            this.shield = ValueBar.newStyled(this.game, "battle-shipcard-shield", 156, 8, true);
+            this.addChild(this.shield);
+
+            this.ap = ValueBar.newStyled(this.game, "battle-shipcard-ap", 189, 8, true);
+            this.addChild(this.ap);
+
             battleview.ui.add(this);
         }
 
@@ -20,6 +43,35 @@ module SpaceTac.View {
         setShip(ship: Game.Ship) {
             this.ship = ship;
             Animation.setVisibility(this.game, this, ship !== null, 200);
+
+            if (this.ship) {
+                this.updateAttributes();
+            }
+
+            if (this.portrait) {
+                this.portrait.destroy();
+            }
+            this.portrait = new Phaser.Image(this.game, 47, 47, "ship-scout-portrait", 0);
+            this.portrait.anchor.set(0.5, 0.5);
+            this.addChild(this.portrait);
+        }
+
+        // Update attributes from associated ship
+        updateAttributes() {
+            this.attributeChanged(this.ship.hull);
+            this.attributeChanged(this.ship.shield);
+            this.attributeChanged(this.ship.ap_current);
+        }
+
+        // Called when an attribute for this ship changed through the battle log
+        attributeChanged(attribute: Game.Attribute): void {
+            if (attribute.code === Game.AttributeCode.Hull) {
+                this.hull.setValue(attribute.current, attribute.maximal);
+            } else if (attribute.code === Game.AttributeCode.Shield) {
+                this.shield.setValue(attribute.current, attribute.maximal);
+            } else if (attribute.code === Game.AttributeCode.AP) {
+                this.ap.setValue(attribute.current, attribute.maximal);
+            }
         }
     }
 }

src/scripts/view/common/ValueBar.ts

@@ -1,16 +1,10 @@
 module SpaceTac.View {
     "use strict";
 
-    // Display mode for ValueBar
-    export enum ValueBarMode {
-        Scaled,
-        Truncated
-    }
-
     // Bar to display a value (like a progress bar)
     export class ValueBar extends Phaser.Sprite {
-        // Display mode, true to scale the internal bar, false to truncate it
-        display_mode: ValueBarMode;
+        // Vertical orientation
+        vertical: boolean;
 
         // Current value
         private current: number;
@@ -24,6 +18,7 @@ module SpaceTac.View {
         // Sprite of internal bar (inside the background sprite)
         private bar_sprite: Phaser.Sprite;
         private bar_sprite_rect: Phaser.Rectangle;
+        private bar_sprite_offset: number;
 
         // Create a quick standard bar
         static newStandard(game: Phaser.Game, x: number, y: number): ValueBar {
@@ -33,19 +28,18 @@ module SpaceTac.View {
         }
 
         // Create a quick styled bar
-        static newStyled(game: Phaser.Game, base_key: string, x: number, y: number): ValueBar {
-            var result = new ValueBar(game, x, y, base_key + "-empty");
+        static newStyled(game: Phaser.Game, base_key: string, x: number, y: number, vertical: boolean = false): ValueBar {
+            var result = new ValueBar(game, x, y, base_key + "-empty", vertical);
             result.setBarImage(base_key + "-full");
             return result;
         }
 
         // Build an value bar sprite
         //  background is the key to the image to use as background
-        constructor(game: Phaser.Game, x: number, y: number, background: string,
-                    display_mode: ValueBarMode = ValueBarMode.Truncated) {
+        constructor(game: Phaser.Game, x: number, y: number, background: string, vertical: boolean = false) {
             super(game, x, y, background);
 
-            this.display_mode = display_mode;
+            this.vertical = vertical;
 
             this.setValue(0, 1000);
         }
@@ -54,22 +48,25 @@ module SpaceTac.View {
         setBarImage(key: string, offset_x: number = 0, offset_y: number = 0): void {
             this.bar_sprite = new Phaser.Sprite(this.game, offset_x, offset_y, key);
             this.bar_sprite_rect = new Phaser.Rectangle(0, 0, this.bar_sprite.width, this.bar_sprite.height);
+            this.bar_sprite_offset = this.vertical ? offset_y : offset_x;
             this.addChild(this.bar_sprite);
         }
 
         // Update graphics representation
         update() {
             if (this.bar_sprite) {
-                var dest = this.proportional;
-                if (dest < 0.00001) {
-                    dest = 0.00001;
-                }
+                var xdest = this.vertical ? 1.0 : this.proportional;
+                var ydest = this.vertical ? this.proportional : 1.0;
 
-                if (this.display_mode === ValueBarMode.Scaled) {
-                    this.game.tweens.create(this.bar_sprite.scale).to({x: dest}).start();
-                } else {
-                    // TODO Animate
-                    this.bar_sprite.crop(Phaser.Rectangle.clone(this.bar_sprite_rect).scale(dest, 1.0), false);
+                // TODO Animate
+                var rect = Phaser.Rectangle.clone(this.bar_sprite_rect);
+                rect = rect.scale(xdest, ydest);
+                if (this.vertical) {
+                    rect = rect.offset(0, this.bar_sprite_rect.height - rect.height);
+                }
+                this.bar_sprite.crop(rect, false);
+                if (this.vertical) {
+                    this.bar_sprite.y = this.bar_sprite_offset + (this.bar_sprite_rect.height - rect.height);
                 }
             }
         }