diff --git a/TODO b/TODO index dde2bdc..982047d 100644 --- a/TODO +++ b/TODO @@ -15,6 +15,7 @@ * Add battle statistics and/or critics in outcome dialog * Ensure that tweens and particle emitters get destroyed once animation is done (or view changes) * Controls: Do not focus on ship while targetting for area effects (dissociate hover and target) +* Controls: Fix hover being stuck when the cursor exits the window * Active effects are not enough visible in ship list (maybe better in arena ?) * All things displayed in battle should be updated from LogProcess forwarding, not from current game state * Drones: add hull points and take area damage diff --git a/graphics/ui/battle.svg b/graphics/ui/battle.svg index 48e09d0..73883d3 100644 --- a/graphics/ui/battle.svg +++ b/graphics/ui/battle.svg @@ -1077,11 +1077,11 @@ borderopacity="1" inkscape:pageopacity="0" inkscape:pageshadow="2" - inkscape:zoom="0.70710678" - inkscape:cx="578.72075" - inkscape:cy="593.06898" + inkscape:zoom="4" + inkscape:cx="394.77432" + inkscape:cy="563.06617" inkscape:document-units="px" - inkscape:current-layer="layer26" + inkscape:current-layer="g4971-3" showgrid="false" units="px" showguides="false" @@ -1092,7 +1092,7 @@ inkscape:object-nodes="true" inkscape:snap-intersection-paths="false" inkscape:object-paths="true" - inkscape:snap-global="true" + inkscape:snap-global="false" inkscape:showpageshadow="false" showborder="true" borderlayer="true" /> @@ -1179,11 +1179,11 @@ style="display:inline"> - - + + + + + + + + + + + + + + + + + + { var sprite = new ArenaShip(this, ship); - this.addChild(sprite); + this.add(sprite); this.ship_sprites.push(sprite); }); this.layer_weapon_effects = new Phaser.Group(this.game); - this.addChild(this.layer_weapon_effects); + this.add(this.layer_weapon_effects); } // Get the current MainUI instance @@ -168,7 +168,7 @@ module TS.SpaceTac.UI { if (!this.findDrone(drone)) { let sprite = new ArenaDrone(this.battleview, drone); let angle = Math.atan2(drone.y - drone.owner.arena_y, drone.x - drone.owner.arena_x); - this.addChild(sprite); + this.add(sprite); this.drone_sprites.push(sprite); if (animate) { @@ -209,5 +209,15 @@ module TS.SpaceTac.UI { highlightTargets(ships: Ship[]): void { this.ship_sprites.forEach(sprite => sprite.setTargetted(contains(ships, sprite.ship))); } + + /** + * Set the HUD mode (shows information on all ships) + */ + setHUDMode(active: boolean): void { + this.ship_sprites.forEach(sprite => sprite.setHovered(active)); + if (this.battleview.background) { + this.battleview.animations.setVisible(this.battleview.background, !active, 200); + } + } } } diff --git a/src/ui/battle/ArenaShip.ts b/src/ui/battle/ArenaShip.ts index 1478dc3..28461ef 100644 --- a/src/ui/battle/ArenaShip.ts +++ b/src/ui/battle/ArenaShip.ts @@ -19,8 +19,10 @@ module TS.SpaceTac.UI { // Target effect target: Phaser.Image; - // Hover effect - hover: Phaser.Image; + // Hover information + info: Phaser.Group; + info_hull: ValueBar; + info_shield: ValueBar; // Frame to indicate the owner of the ship, and if it is playing frame: Phaser.Image; @@ -41,34 +43,41 @@ module TS.SpaceTac.UI { this.sprite.rotation = ship.arena_angle; this.sprite.anchor.set(0.5, 0.5); this.sprite.scale.set(64 / this.sprite.width); - this.addChild(this.sprite); + this.add(this.sprite); // Add stasis effect this.stasis = new Phaser.Image(this.game, 0, 0, "battle-arena-stasis"); this.stasis.anchor.set(0.5, 0.5); this.stasis.visible = false; - this.addChild(this.stasis); + this.add(this.stasis); // Add target effect this.target = new Phaser.Image(this.game, 0, 0, "battle-arena-target"); this.target.anchor.set(0.5, 0.5); this.target.visible = false; - this.addChild(this.target); + this.add(this.target); // Add playing effect this.frame = new Phaser.Image(this.game, 0, 0, `battle-arena-ship-normal-${this.enemy ? "enemy" : "own"}`, 0); this.frame.anchor.set(0.5, 0.5); - this.addChild(this.frame); + this.add(this.frame); - // Add hover effect - this.hover = new Phaser.Image(this.game, 0, 0, "battle-arena-ship-hover", 0); - this.hover.anchor.set(0.5, 0.5); - this.hover.visible = false; - this.addChild(this.hover); + // Hover informations + this.info = new Phaser.Group(this.game); + this.info_hull = new ValueBar(this.game, -59, -47, "battle-arena-ship-hull-base", true); + this.info_hull.setBarImage("battle-arena-ship-hull-full", 3); + this.info_hull.setValue(this.ship.getValue("hull"), this.ship.getAttribute("hull_capacity")); + this.info.add(this.info_hull); + this.info_shield = new ValueBar(this.game, 40, -47, "battle-arena-ship-shield-base", true); + this.info_shield.setBarImage("battle-arena-ship-shield-full", 3); + this.info_shield.setValue(this.ship.getValue("shield"), this.ship.getAttribute("shield_capacity")); + this.info.add(this.info_shield); + this.info.visible = false; + this.add(this.info); // Effects display this.effects = new Phaser.Group(this.game); - this.addChild(this.effects); + this.add(this.effects); // Handle input on ship sprite UITools.setHoverClick(this.sprite, @@ -81,12 +90,13 @@ module TS.SpaceTac.UI { this.position.set(ship.arena_x, ship.arena_y); } - // Set the hovered state on this ship - // This will toggle the hover effect + /** + * Set the hovered state on this ship + * + * This will show the information HUD accordingly + */ setHovered(hovered: boolean) { - if (!this.target.visible) { - this.battleview.animations.setVisible(this.hover, hovered, 200); - } + this.battleview.animations.setVisible(this.info, hovered, 200); } // Set the playing state on this ship @@ -101,9 +111,6 @@ module TS.SpaceTac.UI { * This will toggle the visibility of target indicator */ setTargetted(targetted: boolean): void { - if (targetted) { - this.battleview.animations.setVisible(this.hover, false, 1); - } this.target.visible = targetted; } @@ -141,7 +148,7 @@ module TS.SpaceTac.UI { let text = new Phaser.Text(this.game, 0, 20 * this.effects.children.length, message, { font: "14pt Arial", fill: beneficial ? "#afe9c6" : "#e9afaf" }); this.effects.addChild(text); - this.effects.position.set(-this.effects.width / 2, this.sprite.height * 0.8); + this.effects.position.set(-this.effects.width / 2, this.sprite.height * 0.7); this.game.tweens.removeFrom(this.effects); this.effects.alpha = 1; @@ -156,6 +163,12 @@ module TS.SpaceTac.UI { let diff = event.diff; let name = event.value.name; this.displayEffect(`${name} ${diff < 0 ? "-" : "+"}${Math.abs(diff)}`, diff >= 0); + + if (name == "hull") { + this.info_hull.setValue(event.value.get(), this.ship.getAttribute("hull_capacity")); + } else if (name == "shield") { + this.info_shield.setValue(event.value.get(), this.ship.getAttribute("shield_capacity")); + } } } } diff --git a/src/ui/battle/ShipList.ts b/src/ui/battle/ShipList.ts index eb40096..5c65647 100644 --- a/src/ui/battle/ShipList.ts +++ b/src/ui/battle/ShipList.ts @@ -28,6 +28,7 @@ module TS.SpaceTac.UI { this.info_button = new Phaser.Button(this.game, 0, 0, "battle-shiplist-info-button"); this.info_button.position.set(0, this.height - this.info_button.height); + UITools.setHoverClick(this.info_button, () => this.battleview.arena.setHUDMode(true), () => this.battleview.arena.setHUDMode(false), () => null); this.addChild(this.info_button); battleview.layer_borders.add(this);