Added hull and shield HUD in the arena

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

graphics/ui/battle.svg

@@ -1077,11 +1077,11 @@
      borderopacity="1"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:zoom="0.70710678"
+     inkscape:zoom="4"
-     inkscape:cx="578.72075"
+     inkscape:cx="394.77432"
-     inkscape:cy="593.06898"
+     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">
       <path
          sodipodi:type="star"
-         style="display:inline;fill:#ffdd4b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.4464567;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
+         style="display:inline;fill:#ffdd4b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.4464567;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter6668);enable-background:new"
          id="path4998"
          sodipodi:sides="3"
          sodipodi:cx="363.86221"
-         sodipodi:cy="602.23376"
+         sodipodi:cy="602.89667"
          sodipodi:r1="5.1498642"
          sodipodi:r2="2.5749321"
          sodipodi:arg1="1.5707963"
@@ -1191,7 +1191,7 @@
          inkscape:flatsided="true"
          inkscape:rounded="0"
          inkscape:randomized="0"
-         d="m 363.86221,607.38363 -4.45991,-7.7248 8.91983,0 z"
+         d="m 363.86221,608.04653 -4.45991,-7.72479 8.91983,0 z"
          inkscape:transform-center-y="1.287466" />
       <use
          style="display:inline;enable-background:new"
@@ -1245,30 +1245,10 @@
          transform="translate(53.877816)" />
       <path
          style="display:inline;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.875;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
-         d="M 359.19306,561.5625 H 248.4375 V 283.12499 l -145.74267,-0.16573"
+         d="M 355.83565,561.5625 H 248.4375 V 283.12499 l -145.74267,-0.16573"
          id="path6124"
          inkscape:connector-curvature="0"
          sodipodi:nodetypes="cccc" />
-      <rect
-         y="530.80554"
-         x="348.48169"
-         height="63.022022"
-         width="5.0654392"
-         id="rect4437-3-3-6-3"
-         style="display:inline;opacity:1;fill:#eb4e4a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:19.52019501;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
-         inkscape:export-filename="/tmp/export.png"
-         inkscape:export-xdpi="90"
-         inkscape:export-ydpi="90" />
-      <rect
-         inkscape:export-ydpi="90"
-         inkscape:export-xdpi="90"
-         inkscape:export-filename="/tmp/export.png"
-         style="display:inline;opacity:1;fill:#2ad8dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:19.52019501;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
-         id="rect5911"
-         width="5.0654392"
-         height="63.022022"
-         x="428.36267"
-         y="530.80554" />
       <circle
          r="7.2920384"
          cy="518.39703"
@@ -1292,6 +1272,158 @@
          cx="374.18796"
          cy="518.39703"
          r="7.2920384" />
+      <g
+         id="g5020"
+         transform="translate(-3.98585)">
+        <g
+           transform="translate(9.375)"
+           id="g4971">
+          <path
+             style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#eb4e4a;stroke-width:2.46539116;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             inkscape:transform-center-x="1.4663198"
+             d="m 344.96338,606.73659 -8.79795,-45.17409 8.79795,-45.17408"
+             id="path4952"
+             inkscape:connector-curvature="0"
+             sodipodi:nodetypes="ccc"
+             inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-hull-full.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90" />
+          <use
+             x="0"
+             y="0"
+             xlink:href="#path4952"
+             inkscape:transform-center-x="1.4867875"
+             id="use4955"
+             width="100%"
+             height="100%"
+             transform="translate(-1.875)"
+             style="opacity:0.52300002"
+             inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-hull-base.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90" />
+          <use
+             x="0"
+             y="0"
+             xlink:href="#path4952"
+             inkscape:transform-center-x="1.4867875"
+             id="use4961"
+             width="100%"
+             height="100%"
+             transform="translate(3.75)"
+             style="opacity:0.52300002"
+             inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-hull-base.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90" />
+          <use
+             x="0"
+             y="0"
+             xlink:href="#path4952"
+             inkscape:transform-center-x="1.4867875"
+             id="use4965"
+             width="100%"
+             height="100%"
+             transform="translate(1.875)"
+             inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-hull-full.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90" />
+          <path
+             sodipodi:nodetypes="ccc"
+             inkscape:connector-curvature="0"
+             id="path5032"
+             d="m 341.54484,606.73659 -8.79795,-45.17409 8.79795,-45.17408"
+             inkscape:transform-center-x="1.4663198"
+             style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ebaead;stroke-width:0.9375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.75744683"
+             inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-hull-base.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90" />
+          <use
+             x="0"
+             y="0"
+             xlink:href="#path5032"
+             inkscape:transform-center-x="1.4663198"
+             id="use5034"
+             width="100%"
+             height="100%"
+             transform="translate(8.8778154)"
+             style="opacity:0.76099997"
+             inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-hull-base.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90" />
+        </g>
+        <g
+           transform="matrix(-1,0,0,1,780.26995,0.73591)"
+           id="g4971-3"
+           style="display:inline;enable-background:new">
+          <path
+             style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#2ad8dc;stroke-width:2.46539116;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             inkscape:transform-center-x="1.4663198"
+             d="m 344.96338,606.73659 -8.79795,-45.17409 8.79795,-45.17408"
+             id="path4952-6"
+             inkscape:connector-curvature="0"
+             sodipodi:nodetypes="ccc"
+             inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-shield-full.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90" />
+          <use
+             x="0"
+             y="0"
+             xlink:href="#path4952-6"
+             inkscape:transform-center-x="1.4867875"
+             id="use4955-7"
+             width="100%"
+             height="100%"
+             transform="translate(-1.875)"
+             style="opacity:0.52300002"
+             inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-shield-base.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90" />
+          <use
+             x="0"
+             y="0"
+             xlink:href="#path4952-6"
+             inkscape:transform-center-x="1.4867875"
+             id="use4961-5"
+             width="100%"
+             height="100%"
+             transform="translate(3.75)"
+             style="opacity:0.52300002"
+             inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-shield-base.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90" />
+          <use
+             x="0"
+             y="0"
+             xlink:href="#path4952-6"
+             inkscape:transform-center-x="1.4867875"
+             id="use4965-3"
+             width="100%"
+             height="100%"
+             transform="translate(1.875)"
+             inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-shield-full.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90" />
+          <path
+             sodipodi:nodetypes="ccc"
+             inkscape:connector-curvature="0"
+             id="path5036"
+             d="m 350.42264,606.73659 -8.79795,-45.17409 8.79795,-45.17408"
+             inkscape:transform-center-x="1.4663198"
+             style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#bceaeb;stroke-width:0.9375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.74680852"
+             inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-shield-base.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90" />
+          <path
+             style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#bceaeb;stroke-width:0.9375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.44893619"
+             inkscape:transform-center-x="1.4663198"
+             d="m 341.37911,606.73659 -8.79795,-45.17409 8.79795,-45.17408"
+             id="path5038"
+             inkscape:connector-curvature="0"
+             sodipodi:nodetypes="ccc"
+             inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-shield-base.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90" />
+        </g>
+      </g>
     </g>
     <g
        inkscape:groupmode="layer"

src/ui/Preload.ts

@@ -28,8 +28,6 @@ module TS.SpaceTac.UI {
             this.loadImage("battle/shiplist/hover.png");
             this.loadImage("battle/shiplist/info-button.png");
             this.loadImage("battle/background.jpg");
-            this.loadImage("battle/arena/background.png");
-            this.loadImage("battle/arena/ap-indicator.png");
             this.loadImage("battle/actionbar.png");
             this.loadImage("battle/action-inactive.png");
             this.loadImage("battle/action-active.png");
@@ -38,11 +36,16 @@ module TS.SpaceTac.UI {
             this.loadImage("battle/power-available.png");
             this.loadImage("battle/power-using.png");
             this.loadImage("battle/power-used.png");
-            this.loadImage("battle/arena/ship-hover.png");
+            this.loadImage("battle/arena/background.png");
+            this.loadImage("battle/arena/ap-indicator.png");
             this.loadImage("battle/arena/ship-normal-enemy.png");
             this.loadImage("battle/arena/ship-normal-own.png");
             this.loadImage("battle/arena/ship-playing-enemy.png");
             this.loadImage("battle/arena/ship-playing-own.png");
+            this.loadImage("battle/arena/ship-hull-base.png");
+            this.loadImage("battle/arena/ship-hull-full.png");
+            this.loadImage("battle/arena/ship-shield-base.png");
+            this.loadImage("battle/arena/ship-shield-full.png");
             this.loadImage("battle/arena/stasis.png");
             this.loadImage("battle/arena/target.png");
             this.loadImage("battle/arena/blast.png");

src/ui/battle/Arena.ts

@@ -61,8 +61,8 @@ module TS.SpaceTac.UI {
 
             this.position.set(offset_x, offset_y);
 
-            this.addChild(this.background);
+            this.add(this.background);
-            this.addChild(this.range_hint);
+            this.add(this.range_hint);
 
             this.init();
         }
@@ -77,12 +77,12 @@ module TS.SpaceTac.UI {
             // Add ship sprites
             this.battleview.battle.play_order.forEach(ship => {
                 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);
+            }
+        }
     }
 }

src/ui/battle/ArenaShip.ts

@@ -19,8 +19,10 @@ module TS.SpaceTac.UI {
         // Target effect
         target: Phaser.Image;
 
-        // Hover effect
+        // Hover information
-        hover: Phaser.Image;
+        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
+            // Hover informations
-            this.hover = new Phaser.Image(this.game, 0, 0, "battle-arena-ship-hover", 0);
+            this.info = new Phaser.Group(this.game);
-            this.hover.anchor.set(0.5, 0.5);
+            this.info_hull = new ValueBar(this.game, -59, -47, "battle-arena-ship-hull-base", true);
-            this.hover.visible = false;
+            this.info_hull.setBarImage("battle-arena-ship-hull-full", 3);
-            this.addChild(this.hover);
+            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.info, hovered, 200);
-                this.battleview.animations.setVisible(this.hover, 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"));
+            }
         }
     }
 }

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);