diff --git a/src/scripts/view/Preload.ts b/src/scripts/view/Preload.ts index a876092..0d04173 100644 --- a/src/scripts/view/Preload.ts +++ b/src/scripts/view/Preload.ts @@ -17,6 +17,7 @@ module SpaceTac.View { this.load.image("ui-battle-actionbar", "assets/images/ui/battle/actionbar.png"); this.load.image("ui-battle-actionpointsempty", "assets/images/ui/battle/actionpointsempty.png"); this.load.image("ui-battle-actionpointsfull", "assets/images/ui/battle/actionpointsfull.png"); + this.load.image("ui-battle-shipspritehover", "assets/images/ui/battle/shipspritehover.png"); this.load.image("ui-ship-card", "assets/images/battle/ship-card.png"); this.load.image("arena-ship", "assets/images/battle/ship01.png"); this.load.image("ui-bar-standard-background", "assets/images/ui/bars/standard-background.png"); diff --git a/src/scripts/view/battle/ActionIcon.ts b/src/scripts/view/battle/ActionIcon.ts index f1c29d1..006de7a 100644 --- a/src/scripts/view/battle/ActionIcon.ts +++ b/src/scripts/view/battle/ActionIcon.ts @@ -27,6 +27,7 @@ module SpaceTac.View { // TODO Handle action.canBeUsed() result to enable/disable the button + this.input.useHandCursor = true; this.onInputUp.add(() => { this.processClick(); }, this); diff --git a/src/scripts/view/battle/Arena.ts b/src/scripts/view/battle/Arena.ts index 8c86701..e03a664 100644 --- a/src/scripts/view/battle/Arena.ts +++ b/src/scripts/view/battle/Arena.ts @@ -14,8 +14,9 @@ module SpaceTac.View { private battleview: BattleView; // List of ship sprites - private ship_sprites: ShipArenaSprite[]; + private ship_sprites: ArenaShip[]; + // Create a graphical arena for ship sprites to fight in a 2D space constructor(battleview: BattleView) { this.battleview = battleview; this.ship_sprites = []; @@ -23,7 +24,7 @@ module SpaceTac.View { super(battleview.game); var background = new Phaser.Button(battleview.game, 0, 0, "ui-arena-background"); - background.scale.set(20, 10); + background.scale.set(this.stage.width / background.width, this.stage.height / background.height); this.background = background; // Capture clicks on background @@ -54,21 +55,29 @@ module SpaceTac.View { // Add ship sprites this.battleview.battle.play_order.forEach(function (ship: Game.Ship) { - var sprite = new ShipArenaSprite(arena.battleview, ship); - arena.add(sprite); + var sprite = new ArenaShip(arena.battleview, ship); + arena.addChild(sprite); arena.ship_sprites.push(sprite); }); } // Find the sprite for a ship - findShipSprite(ship: Game.Ship): ShipArenaSprite { - var result: ShipArenaSprite = null; - this.ship_sprites.forEach((sprite: ShipArenaSprite) => { + findShipSprite(ship: Game.Ship): ArenaShip { + var result: ArenaShip = null; + this.ship_sprites.forEach((sprite: ArenaShip) => { if (sprite.ship === ship) { result = sprite; } }); return result; } + + // Set the hovered state on a ship sprite + setShipHovered(ship: Game.Ship, hovered: boolean): void { + var arena_ship = this.findShipSprite(ship); + if (arena_ship) { + arena_ship.setHovered(hovered); + } + } } } diff --git a/src/scripts/view/battle/ArenaShip.ts b/src/scripts/view/battle/ArenaShip.ts new file mode 100644 index 0000000..088775c --- /dev/null +++ b/src/scripts/view/battle/ArenaShip.ts @@ -0,0 +1,74 @@ +module SpaceTac.View { + "use strict"; + + // Ship sprite in the arena (BattleView) + export class ArenaShip extends Phaser.Group { + // Link to displayed ship + ship: Game.Ship; + + // Ship sprite + sprite: Phaser.Button; + + // Hover effect + hover: Phaser.Image; + + // Create a ship sprite usable in the Arena + constructor(battleview: BattleView, ship: Game.Ship) { + this.ship = ship; + + super(battleview.game); + + // Add hover effect + this.hover = new Phaser.Image(battleview.game, 0, 0, "ui-battle-shipspritehover"); + this.hover.scale.set(0.4, 0.4); + this.hover.anchor.set(0.5, 0.5); + this.hover.visible = false; + this.addChild(this.hover); + + // Add ship sprite + this.sprite = new Phaser.Button(battleview.game, 0, 0, "arena-ship"); + this.sprite.scale.set(0.1, 0.1); + this.sprite.rotation = ship.arena_angle; + this.sprite.anchor.set(0.5, 0.5); + this.addChild(this.sprite); + + // Handle input on ship sprite + this.sprite.input.useHandCursor = true; + this.sprite.onInputOver.add(() => { + battleview.cursorOnShip(ship); + }); + this.sprite.onInputOut.add(() => { + battleview.cursorOffShip(ship); + }); + this.sprite.onInputUp.add(() => { + battleview.cursorClicked(); + }); + + // Set location + this.position.set(ship.arena_x, ship.arena_y); + } + + // Set the hovered state on this ship + // This will toggle the hover effect + setHovered(hovered: boolean) { + this.hover.visible = hovered; + } + + // Move the sprite to a location + moveTo(x: number, y: number, animate: boolean = true) { + var angle = Math.atan2(y - this.y, x - this.x); + if (animate) { + var tween_group = this.game.tweens.create(this); + var tween_sprite = this.game.tweens.create(this.sprite); + tween_group.to({x: x, y: y}); + tween_group.start(); + tween_sprite.to({rotation: angle}); + tween_sprite.start(); + } else { + this.x = x; + this.y = y; + this.sprite.rotation = angle; + } + } + } +} diff --git a/src/scripts/view/battle/BattleView.ts b/src/scripts/view/battle/BattleView.ts index 7ca2c80..5683235 100644 --- a/src/scripts/view/battle/BattleView.ts +++ b/src/scripts/view/battle/BattleView.ts @@ -133,6 +133,9 @@ module SpaceTac.View { // Set the currently hovered ship setShipHovered(ship: Game.Ship): void { + if (this.ship_hovered) { + this.arena.setShipHovered(this.ship_hovered, false); + } this.ship_hovered = ship; this.card_hovered.setShip(ship); if (this.targetting) { @@ -142,6 +145,9 @@ module SpaceTac.View { this.targetting.unsetTarget(); } } + if (ship) { + this.arena.setShipHovered(this.ship_hovered, true); + } } // Enter targetting mode diff --git a/src/scripts/view/battle/LogProcessor.ts b/src/scripts/view/battle/LogProcessor.ts index 21c6dff..a02e2bb 100644 --- a/src/scripts/view/battle/LogProcessor.ts +++ b/src/scripts/view/battle/LogProcessor.ts @@ -41,10 +41,7 @@ module SpaceTac.View { case "move": var sprite = this.view.arena.findShipSprite(event.ship); if (sprite) { - var angle = Math.atan2(event.target.y - sprite.y, event.target.x - sprite.x); - var tween = this.view.game.tweens.create(sprite); - tween.to({x: event.target.x, y: event.target.y, rotation: angle}); - tween.start(); + sprite.moveTo(event.target.x, event.target.y); } break; } diff --git a/src/scripts/view/battle/ShipArenaSprite.ts b/src/scripts/view/battle/ShipArenaSprite.ts deleted file mode 100644 index 62ae66f..0000000 --- a/src/scripts/view/battle/ShipArenaSprite.ts +++ /dev/null @@ -1,30 +0,0 @@ -module SpaceTac.View { - "use strict"; - - // Ship sprite in the arena (BattleView) - export class ShipArenaSprite extends Phaser.Button { - // Link to displayed ship - ship: Game.Ship; - - constructor(battleview: BattleView, ship: Game.Ship) { - this.ship = ship; - - super(battleview.game, ship.arena_x, ship.arena_y, "arena-ship"); - - this.scale.set(0.1, 0.1); - this.rotation = ship.arena_angle; - this.anchor.set(0.5, 0.5); - - this.input.useHandCursor = true; - this.onInputOver.add(() => { - battleview.cursorOnShip(ship); - }); - this.onInputOut.add(() => { - battleview.cursorOffShip(ship); - }); - this.onInputUp.add(() => { - battleview.cursorClicked(); - }); - } - } -} diff --git a/src/scripts/view/battle/Targetting.ts b/src/scripts/view/battle/Targetting.ts index 673b54a..a1759f7 100644 --- a/src/scripts/view/battle/Targetting.ts +++ b/src/scripts/view/battle/Targetting.ts @@ -20,7 +20,7 @@ module SpaceTac.View { private battleview: BattleView; // Source of the targetting - private source: PIXI.Sprite; + private source: PIXI.DisplayObject; // Create a default targetting mode constructor(battleview: BattleView) { @@ -63,7 +63,7 @@ module SpaceTac.View { } // Set the source sprite for the targetting (for visual effects) - setSource(sprite: PIXI.Sprite) { + setSource(sprite: PIXI.DisplayObject) { this.source = sprite; }