battleview: New ship list graphics

graphics/ui/battle.svg

@@ -1057,6 +1057,18 @@
          result="composite2"
          id="feComposite6031-9" />
     </filter>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask4969">
+      <rect
+         style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#858585;stroke-width:1.4487896px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         id="rect4971"
+         width="137.37454"
+         height="71.507271"
+         x="173.67209"
+         y="121.98493"
+         transform="rotate(45)" />
+    </mask>
   </defs>
   <sodipodi:namedview
      id="base"
@@ -1066,10 +1078,10 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:zoom="0.70710678"
-     inkscape:cx="813.51344"
-     inkscape:cy="615.62253"
+     inkscape:cx="578.72075"
+     inkscape:cy="593.06898"
      inkscape:document-units="px"
-     inkscape:current-layer="layer2"
+     inkscape:current-layer="layer26"
      showgrid="false"
      units="px"
      showguides="false"
@@ -1077,10 +1089,10 @@
      inkscape:bbox-nodes="true"
      inkscape:bbox-paths="true"
      inkscape:snap-to-guides="true"
-     inkscape:object-nodes="false"
+     inkscape:object-nodes="true"
      inkscape:snap-intersection-paths="false"
      inkscape:object-paths="true"
-     inkscape:snap-global="false"
+     inkscape:snap-global="true"
      inkscape:showpageshadow="false"
      showborder="true"
      borderlayer="true" />
@@ -1092,7 +1104,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -1233,9 +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 H 112.38971"
+         d="M 359.19306,561.5625 H 248.4375 V 283.12499 l -145.74267,-0.16573"
          id="path6124"
-         inkscape:connector-curvature="0" />
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccc" />
       <rect
          y="530.80554"
          x="348.48169"
@@ -1637,7 +1650,7 @@
          height="948.2301"
          x="0"
          y="131.76981"
-         inkscape:export-filename="/tmp/export.png"
+         inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/shiplist-background.png"
          inkscape:export-xdpi="90"
          inkscape:export-ydpi="90" />
     </g>
@@ -1665,7 +1678,7 @@
            width="77.905304"
            id="rect4248"
            style="opacity:1;fill:#43535c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter6021-3-2)"
-           inkscape:export-filename="/tmp/export.png"
+           inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/shiplist/item-background.png"
            inkscape:export-xdpi="90"
            inkscape:export-ydpi="90"
            transform="matrix(1.100282,0,0,1.100282,-6.0602898,-16.069785)" />
@@ -1807,6 +1820,18 @@
            style="opacity:1;fill:#ff643a;fill-opacity:0.77021275;fill-rule:evenodd;stroke:none;stroke-width:10.39999962;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter5961)"
            sodipodi:type="star" />
       </g>
+      <rect
+         style="fill:none;fill-opacity:0;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.875;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect4949"
+         width="85.717804"
+         height="85.717812"
+         x="16.977024"
+         y="240.05305"
+         ry="0"
+         mask="url(#mask4969)"
+         inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/shiplist/hover.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90" />
     </g>
   </g>
   <g
@@ -1883,7 +1908,10 @@
       </g>
       <g
          id="g6122"
-         transform="matrix(1.3001708,0,0,1.1990242,-12.304247,-205.15147)">
+         transform="matrix(1.3001708,0,0,1.1990242,-12.304247,-205.15147)"
+         inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/shiplist/info-button.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90">
         <rect
            y="1030.9446"
            x="9.9436893"
@@ -1903,7 +1931,7 @@
              id="tspan6262"
              x="44.896412"
              y="1028.4208"
-             style="font-size:32.03655624px;stroke-width:0.75085676px"></tspan></text>
+             style="font-size:32.03655624px;stroke-width:0.75085676px" /></text>
         <g
            id="g6273"
            transform="translate(1.1740712,0.61792396)">

src/ui/Preload.ts

@@ -22,18 +22,11 @@ module TS.SpaceTac.UI {
             this.loadImage("common/arrow.png");
             this.loadImage("common/button-ok.png");
             this.loadImage("common/button-cancel.png");
-            this.loadImage("battle/shiplist-background.png");
-            this.loadImage("battle/shiplist-own.png");
-            this.loadImage("battle/shiplist-enemy.png");
-            this.loadImage("battle/shiplist-damage.png");
-            this.loadImage("battle/shiplist-effect-good.png");
-            this.loadImage("battle/shiplist-effect-bad.png");
-            this.loadImage("battle/shiplist-energy-empty.png");
-            this.loadImage("battle/shiplist-energy-full.png");
-            this.loadImage("battle/shiplist-hull-empty.png");
-            this.loadImage("battle/shiplist-hull-full.png");
-            this.loadImage("battle/shiplist-shield-empty.png");
-            this.loadImage("battle/shiplist-shield-full.png");
+            this.loadImage("battle/shiplist/background.png");
+            this.loadImage("battle/shiplist/item-background.png");
+            this.loadImage("battle/shiplist/damage.png");
+            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");

src/ui/battle/LogProcessor.ts

@@ -165,11 +165,6 @@ module TS.SpaceTac.UI {
                 sprite.displayValueChanged(event);
             }
 
-            var item = this.view.ship_list.findItem(event.ship);
-            if (item) {
-                item.updateAttributes();
-            }
-
             // TODO Update tooltip
         }
 
@@ -205,10 +200,7 @@ module TS.SpaceTac.UI {
 
         // Sticky effect on ship added, changed or removed
         private processEffectEvent(event: EffectAddedEvent | EffectRemovedEvent | EffectDurationChangedEvent): void {
-            var item = this.view.ship_list.findItem(event.ship);
-            if (item) {
-                item.updateEffects();
-            }
+            // TODO
         }
 
         // New drone deployed

src/ui/battle/ShipList.spec.ts

@@ -9,7 +9,7 @@ module TS.SpaceTac.UI.Specs {
             var list = battleview.ship_list;
 
             expect(battleview.battle.play_order.length).toBe(10);
-            expect(list.children.length).toBe(10);
+            expect(list.children.length).toBe(11);
 
             expect(list.findPlayPosition(battleview.battle.play_order[0])).toBe(0);
             expect(list.findPlayPosition(battleview.battle.play_order[1])).toBe(1);

src/ui/battle/ShipList.ts

@@ -5,6 +5,7 @@ module TS.SpaceTac.UI {
         battleview: BattleView;
 
         // List of ship items
+        ships_container: Phaser.Group;
         ships: ShipListItem[];
 
         // Playing ship
@@ -13,6 +14,9 @@ module TS.SpaceTac.UI {
         // Hovered ship
         hovered: ShipListItem | null;
 
+        // Info button
+        info_button: Phaser.Button;
+
         // Create an empty action bar
         constructor(battleview: BattleView) {
             super(battleview.game, 0, 133, "battle-shiplist-background");
@@ -22,6 +26,10 @@ module TS.SpaceTac.UI {
             this.playing = null;
             this.hovered = null;
 
+            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);
+            this.addChild(this.info_button);
+
             battleview.layer_borders.add(this);
 
             if (battleview.battle) {
@@ -83,9 +91,9 @@ module TS.SpaceTac.UI {
             this.ships.forEach((item: ShipListItem) => {
                 var position = this.findPlayPosition(item.ship);
                 if (position === 0) {
-                    item.moveTo(20, 20 - this.y, animate);
+                    item.moveTo(18, 15 - this.y, animate);
                 } else {
-                    item.moveTo(8, 40 + position * 104 - this.y, animate);
+                    item.moveTo(0, 33 + position * 99 - this.y, animate);
                 }
                 this.setChildIndex(item, position);
             });

src/ui/battle/ShipListItem.ts

@@ -2,96 +2,53 @@ module TS.SpaceTac.UI {
     // One item in a ship list (used in BattleView)
     export class ShipListItem extends Phaser.Button {
         // Reference to the view
-        view: BattleView;
+        view: BattleView
 
         // Reference to the ship game object
-        ship: Ship;
+        ship: Ship
 
-        // Hull display
-        hull: ValueBar;
-
-        // Shield display
-        shield: ValueBar;
-
-        // Power display
-        power: ValueBar;
+        // Player indicator
+        player_indicator: Phaser.Image
 
         // Portrait
-        layer_portrait: Phaser.Image;
+        portrait: Phaser.Image
 
         // Damage flashing indicator
-        layer_damage: Phaser.Image;
+        damage_indicator: Phaser.Image
 
         // Hover indicator
-        layer_hover: Phaser.Image;
-
-        // Active effects group
-        active_effects: Phaser.Group;
+        hover_indicator: Phaser.Image
 
         // Create a ship button for the battle ship list
         constructor(list: ShipList, x: number, y: number, ship: Ship, owned: boolean) {
-            super(list.battleview.game, x, y, owned ? "battle-shiplist-own" : "battle-shiplist-enemy");
+            super(list.battleview.game, x, y, "battle-shiplist-item-background");
             this.view = list.battleview;
 
             this.ship = ship;
 
-            this.active_effects = new Phaser.Group(this.game);
-            this.addChild(this.active_effects);
+            this.player_indicator = new Phaser.Image(this.game, 42, 52, owned ? "battle-arena-ship-normal-own" : "battle-arena-ship-normal-enemy");
+            this.player_indicator.anchor.set(0.5, 0.5);
+            this.player_indicator.angle = 90;
+            this.addChild(this.player_indicator);
 
-            this.layer_portrait = new Phaser.Image(this.game, 8, 8, "ship-" + ship.model.code + "-portrait", 0);
-            this.layer_portrait.scale.set(0.3, 0.3);
-            this.addChild(this.layer_portrait);
+            this.portrait = new Phaser.Image(this.game, 18, 9, "ship-" + ship.model.code + "-portrait", 0);
+            this.portrait.scale.set(0.332, 0.332);
+            this.addChild(this.portrait);
 
-            this.layer_damage = new Phaser.Image(this.game, 8, 8, "battle-shiplist-damage", 0);
-            this.layer_damage.alpha = 0;
-            this.addChild(this.layer_damage);
+            this.damage_indicator = new Phaser.Image(this.game, 18, 9, "battle-shiplist-damage", 0);
+            this.damage_indicator.alpha = 0;
+            this.addChild(this.damage_indicator);
 
-            this.layer_hover = new Phaser.Image(this.game, 5, 5, "battle-arena-ship-hover", 0);
-            this.layer_hover.visible = false;
-            this.addChild(this.layer_hover);
-
-            this.hull = ValueBar.newStyled(this.game, "battle-shiplist-hull", 90, 39, true);
-            this.addChild(this.hull);
-
-            this.shield = ValueBar.newStyled(this.game, "battle-shiplist-shield", 98, 39, true);
-            this.addChild(this.shield);
-
-            this.power = ValueBar.newStyled(this.game, "battle-shiplist-energy", 106, 39, true);
-            this.addChild(this.power);
-
-            this.updateAttributes();
-            this.updateEffects();
-
-            let level = new Phaser.Text(this.game, 103, 22, `${ship.level.get()}`, { align: "center", font: "bold 10pt Arial", fill: "#000000" });
-            level.anchor.set(0.5, 0.5);
-            this.addChild(level);
+            this.hover_indicator = new Phaser.Image(this.game, 17, 8, "battle-shiplist-hover", 0);
+            this.hover_indicator.visible = false;
+            this.addChild(this.hover_indicator);
 
             UITools.setHoverClick(this, () => list.battleview.cursorOnShip(ship), () => list.battleview.cursorOffShip(ship), () => list.battleview.cursorClicked());
         }
 
-        // Update attributes from associated ship
-        updateAttributes() {
-            this.hull.setValue(this.ship.values.hull.get(), this.ship.attributes.hull_capacity.get());
-            this.shield.setValue(this.ship.values.shield.get(), this.ship.attributes.shield_capacity.get());
-            this.power.setValue(this.ship.values.power.get(), this.ship.attributes.power_capacity.get());
-        }
-
-        // Update effects applied on the ship
-        updateEffects() {
-            this.active_effects.removeAll(true);
-            var count = this.ship.sticky_effects.length;
-            var spacing = (8 * (count - 1) > 72) ? 72 / (count - 1) : 8;
-            this.ship.sticky_effects.forEach((effect, index) => {
-                var x = 46 - (count - 1) * spacing / 2 + index * spacing;
-                var badge = new Phaser.Image(this.game, x, 46, `battle-shiplist-effect-${effect.isBeneficial() ? "good" : "bad"}`);
-                badge.anchor.set(0.5, 0.5);
-                this.active_effects.addChild(badge);
-            });
-        }
-
         // Flash a damage indicator
         setDamageHit() {
-            this.game.tweens.create(this.layer_damage).to({ alpha: 1 }, 100).to({ alpha: 0 }, 150).repeatAll(2).start();
+            this.game.tweens.create(this.damage_indicator).to({ alpha: 1 }, 100).to({ alpha: 0 }, 150).repeatAll(2).start();
         }
 
         // Move to a given location on screen
@@ -108,7 +65,7 @@ module TS.SpaceTac.UI {
 
         // Set the hovered status
         setHovered(hovered: boolean) {
-            this.view.animations.setVisible(this.layer_hover, hovered, 200);
+            this.view.animations.setVisible(this.hover_indicator, hovered, 200);
         }
     }
 }