games/spacetac
games/spacetac
1
0
Fork 0
Code Releases Activity

Added graphical lines to link hovered ship info

Browse source
This commit is contained in:
Michaël Lemaire 2015-02-23 01:00:00 +01:00
parent fd5bb9b9b9
commit 0d5f748386
2 changed files with 65 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/scripts/view/battle/BattleView.ts
View file

@ -49,6 +49,10 @@ module SpaceTac.View {
// Listener for space key presses
private space_key: Phaser.Key;
// Lines used to highlight hovered ship
private line_hover_left: Phaser.Graphics;
private line_hover_right: Phaser.Graphics;
// Init the view, binding it to a specific battle
init(player: Game.Player, battle: Game.Battle) {
this.player = player;
@ -58,6 +62,8 @@ module SpaceTac.View {
this.log_processor = null;
this.background = null;
this.space_key = null;
this.line_hover_left = null;
this.line_hover_right = null;
}
// Create view graphics
@ -89,6 +95,13 @@ module SpaceTac.View {
game.add.existing(this.icon_waiting);
game.tweens.create(this.icon_waiting).to({"angle": 360}, 3000).repeat(-1).start();
this.line_hover_left = new Phaser.Graphics(this.game, 0, 0);
this.line_hover_left.visible = false;
game.add.existing(this.line_hover_left);
this.line_hover_right = new Phaser.Graphics(this.game, 0, 0);
this.line_hover_right.visible = false;
game.add.existing(this.line_hover_right);
// Start processing the battle log
this.log_processor = new LogProcessor(this);
@ -126,6 +139,16 @@ module SpaceTac.View {
this.card_hovered = null;
}
if (this.line_hover_left) {
this.line_hover_left.destroy();
this.line_hover_left = null;
}
if (this.line_hover_right) {
this.line_hover_right.destroy();
this.line_hover_right = null;
}
if (this.space_key) {
this.space_key.onUp.remove(this.onSpaceKeyPressed, this);
this.space_key = null;
@ -172,7 +195,7 @@ module SpaceTac.View {
// Set the currently hovered ship
setShipHovered(ship: Game.Ship): void {
this.ship_hovered = ship;
this.card_hovered.setShip(ship);
this.card_hovered.setShip(ship === this.card_playing.ship ? null : ship);
this.arena.setShipHovered(ship);
this.ship_list.setHovered(ship);
if (this.targetting) {
@ -182,6 +205,46 @@ module SpaceTac.View {
this.targetting.unsetTarget();
}
}
this.updateHoverLines();
}
// Update the hover lines
updateHoverLines(): void {
// TODO Simplify this
if (this.ship_hovered) {
var listitem = this.ship_list.findItem(this.ship_hovered);
var sprite = this.arena.findShipSprite(this.ship_hovered);
if (listitem && sprite) {
var listitemhover = listitem.layer_hover;
var spritehover = sprite.hover;
var start = listitemhover.toGlobal(new PIXI.Point(listitemhover.width, listitemhover.height / 2));
var end = spritehover.toGlobal(new PIXI.Point(-spritehover.width / 2, 0));
this.line_hover_left.clear();
this.line_hover_left.lineStyle(2, 0xC7834A, 0.7);
this.line_hover_left.moveTo(start.x, start.y);
this.line_hover_left.lineTo(end.x, end.y);
var card = this.ship_hovered === this.battle.playing_ship ? this.card_playing : this.card_hovered;
start = spritehover.toGlobal(new PIXI.Point(spritehover.width / 2, 0));
end = card.toGlobal(new PIXI.Point(0, card.height / 2));
this.line_hover_right.clear();
this.line_hover_right.lineStyle(2, 0xC7834A, 0.7);
this.line_hover_right.moveTo(start.x, start.y);
this.line_hover_right.lineTo(end.x, end.y);
Animation.fadeIn(this.game, this.line_hover_left, 200);
Animation.fadeIn(this.game, this.line_hover_right, 200);
} else {
Animation.fadeOut(this.game, this.line_hover_left, 200);
Animation.fadeOut(this.game, this.line_hover_right, 200);
}
} else {
Animation.fadeOut(this.game, this.line_hover_left, 200);
Animation.fadeOut(this.game, this.line_hover_right, 200);
}
}
// Enable or disable the global player interaction

2
src/scripts/view/battle/ShipCard.ts
View file

@ -4,7 +4,7 @@ module SpaceTac.View {
// Card to display detailed information about a ship
export class ShipCard extends Phaser.Sprite {
// Displayed ship
private ship: Game.Ship;
ship: Game.Ship;
// Build an empty ship card
constructor(battleview: BattleView, x: number, y: number) {