diff --git a/src/assets/images/battle/ship-card.png b/src/assets/images/battle/ship-card.png index 982c628..7284136 100644 Binary files a/src/assets/images/battle/ship-card.png and b/src/assets/images/battle/ship-card.png differ diff --git a/src/assets/images/battle/shipcard-ap-empty.png b/src/assets/images/battle/shipcard-ap-empty.png new file mode 100644 index 0000000..8644476 Binary files /dev/null and b/src/assets/images/battle/shipcard-ap-empty.png differ diff --git a/src/assets/images/battle/shipcard-ap-full.png b/src/assets/images/battle/shipcard-ap-full.png new file mode 100644 index 0000000..297ec7b Binary files /dev/null and b/src/assets/images/battle/shipcard-ap-full.png differ diff --git a/src/assets/images/battle/shipcard-hull-empty.png b/src/assets/images/battle/shipcard-hull-empty.png new file mode 100644 index 0000000..cb945ed Binary files /dev/null and b/src/assets/images/battle/shipcard-hull-empty.png differ diff --git a/src/assets/images/battle/shipcard-hull-full.png b/src/assets/images/battle/shipcard-hull-full.png new file mode 100644 index 0000000..3705d54 Binary files /dev/null and b/src/assets/images/battle/shipcard-hull-full.png differ diff --git a/src/assets/images/battle/shipcard-shield-empty.png b/src/assets/images/battle/shipcard-shield-empty.png new file mode 100644 index 0000000..dd621ab Binary files /dev/null and b/src/assets/images/battle/shipcard-shield-empty.png differ diff --git a/src/assets/images/battle/shipcard-shield-full.png b/src/assets/images/battle/shipcard-shield-full.png new file mode 100644 index 0000000..b8c65fa Binary files /dev/null and b/src/assets/images/battle/shipcard-shield-full.png differ diff --git a/src/scripts/view/Preload.ts b/src/scripts/view/Preload.ts index 662044e..0d9d853 100644 --- a/src/scripts/view/Preload.ts +++ b/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"); diff --git a/src/scripts/view/battle/BattleView.ts b/src/scripts/view/battle/BattleView.ts index b98702b..e41ceb7 100644 --- a/src/scripts/view/battle/BattleView.ts +++ b/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); diff --git a/src/scripts/view/battle/LogProcessor.ts b/src/scripts/view/battle/LogProcessor.ts index 4128b27..a5c3335 100644 --- a/src/scripts/view/battle/LogProcessor.ts +++ b/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 diff --git a/src/scripts/view/battle/ShipCard.ts b/src/scripts/view/battle/ShipCard.ts index 830bcf8..ef12574 100644 --- a/src/scripts/view/battle/ShipCard.ts +++ b/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); + } } } } diff --git a/src/scripts/view/common/ValueBar.ts b/src/scripts/view/common/ValueBar.ts index 50677f0..6fd919c 100644 --- a/src/scripts/view/common/ValueBar.ts +++ b/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); } } }