Updated ship hover effect

graphics/ui/battle.svg

@@ -85,11 +85,11 @@
      borderopacity="1.0"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:zoom="2.8284271"
+     inkscape:zoom="5.6568542"
-     inkscape:cx="112.1938"
+     inkscape:cx="101.91241"
-     inkscape:cy="932.35192"
+     inkscape:cy="877.88947"
      inkscape:document-units="px"
-     inkscape:current-layer="layer14"
+     inkscape:current-layer="layer16"
      showgrid="false"
      units="px"
      showguides="true"
@@ -137,7 +137,8 @@
   <g
      inkscape:groupmode="layer"
      id="layer13"
-     inkscape:label="Ship list">
+     inkscape:label="Ship list"
+     style="display:inline">
     <g
        inkscape:groupmode="layer"
        id="layer14"
@@ -149,7 +150,10 @@
          width="133.01472"
          height="948.2301"
          x="0"
-         y="104.13197" />
+         y="104.13197"
+         inkscape:export-filename="/tmp/export.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90" />
     </g>
     <g
        inkscape:groupmode="layer"
@@ -157,9 +161,11 @@
        inkscape:label="Ship list portraits"
        style="display:inline">
       <g
-         style=""
          id="g4211"
-         transform="translate(-0.76574513,27.637839)">
+         transform="translate(-0.76574513,27.637839)"
+         inkscape:export-filename="/tmp/export.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90">
         <path
            transform="translate(0,-27.637839)"
            sodipodi:nodetypes="ccccc"
@@ -188,21 +194,30 @@
            height="42.341286"
            width="5.0654392"
            id="rect4437-3-3"
-           style="opacity:1;fill:#ffcc00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+           style="opacity:1;fill:#ffcc00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           inkscape:export-filename="/tmp/export.png"
+           inkscape:export-xdpi="90"
+           inkscape:export-ydpi="90" />
         <rect
            y="152.11865"
            x="107.0619"
            height="42.341286"
            width="5.0654392"
            id="rect4437-3-3-6"
-           style="opacity:1;fill:#d40000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+           style="opacity:1;fill:#d40000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           inkscape:export-filename="/tmp/export.png"
+           inkscape:export-xdpi="90"
+           inkscape:export-ydpi="90" />
         <rect
            y="152.11865"
            x="115.23164"
            height="42.341286"
            width="5.0654392"
            id="rect4437-3-3-6-7"
-           style="opacity:1;fill:#0044aa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+           style="opacity:1;fill:#0044aa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           inkscape:export-filename="/tmp/export.png"
+           inkscape:export-xdpi="90"
+           inkscape:export-ydpi="90" />
         <rect
            y="120.72739"
            x="15.854823"
@@ -234,6 +249,65 @@
              sodipodi:role="line">2</tspan></text>
       </g>
     </g>
+    <g
+       inkscape:groupmode="layer"
+       id="layer16"
+       inkscape:label="Ship list hover"
+       style="display:inline">
+      <rect
+         y="148.93114"
+         x="15.297348"
+         height="77.905304"
+         width="77.905304"
+         id="rect4248-3"
+         style="display:inline;opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#a833b0;stroke-width:3.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         inkscape:export-filename="/tmp/export.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90" />
+      <path
+         sodipodi:type="star"
+         style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#a833b0;stroke-width:3.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4312"
+         sodipodi:sides="3"
+         sodipodi:cx="54.25"
+         sodipodi:cy="156.75"
+         sodipodi:r1="5.131094"
+         sodipodi:r2="2.565547"
+         sodipodi:arg1="1.5707963"
+         sodipodi:arg2="2.6179939"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 54.25,161.88109 -4.443658,-7.69664 8.887316,0 z"
+         inkscape:transform-center-y="1.2827735" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#path4312"
+         inkscape:transform-center-y="-1.2827702"
+         id="use4314"
+         transform="matrix(1,0,0,-1,0,375.61555)"
+         width="100%"
+         height="100%" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#path4312"
+         id="use4316"
+         transform="matrix(0,-1,1,0,-133.125,242.13379)"
+         width="100%"
+         height="100%"
+         inkscape:transform-center-x="-1.2827735" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#path4312"
+         id="use4318"
+         transform="matrix(0,1,-1,0,241.5,133.63379)"
+         width="100%"
+         height="100%"
+         inkscape:transform-center-x="1.2827734" />
+    </g>
   </g>
   <g
      inkscape:groupmode="layer"
@@ -251,7 +325,10 @@
          height="131.76981"
          x="0"
          y="-27.637838"
-         transform="translate(0,27.637839)" />
+         transform="translate(0,27.637839)"
+         inkscape:export-filename="/tmp/export.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90" />
     </g>
     <g
        inkscape:groupmode="layer"
@@ -268,7 +345,10 @@
            width="1756.4532"
            height="28.991375"
            x="157.68481"
-           y="97.121567" />
+           y="97.121567"
+           inkscape:export-filename="/tmp/export.png"
+           inkscape:export-xdpi="90"
+           inkscape:export-ydpi="90" />
       </g>
       <g
          inkscape:groupmode="layer"
@@ -280,7 +360,10 @@
            d="m 206.22794,95.419286 1684.82326,0 16.8238,-12.121846 -1718.47077,0 z"
            id="rect4437"
            inkscape:connector-curvature="0"
-           sodipodi:nodetypes="ccccc" />
+           sodipodi:nodetypes="ccccc"
+           inkscape:export-filename="/tmp/export.png"
+           inkscape:export-xdpi="90"
+           inkscape:export-ydpi="90" />
         <use
            x="0"
            y="0"
@@ -305,7 +388,10 @@
            width="1723.3817"
            height="98.571426"
            x="185.84662"
-           y="9.000001" />
+           y="9.000001"
+           inkscape:export-filename="/tmp/export.png"
+           inkscape:export-xdpi="90"
+           inkscape:export-ydpi="90" />
       </g>
     </g>
     <g
@@ -431,21 +517,30 @@
        width="512.29291"
        height="263.92389"
        x="1015.7955"
-       y="137.88206" />
+       y="137.88206"
+       inkscape:export-filename="/tmp/export.png"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90" />
     <rect
        style="opacity:1;fill:#808080;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"
        id="rect4260"
        width="114"
        height="114"
        x="1035.5355"
-       y="152.46446" />
+       y="152.46446"
+       inkscape:export-filename="/tmp/export.png"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90" />
     <text
        xml:space="preserve"
        style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        x="1188"
        y="184.99998"
        id="text4262"
-       sodipodi:linespacing="125%"><tspan
+       sodipodi:linespacing="125%"
+       inkscape:export-filename="/tmp/export.png"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90"><tspan
          sodipodi:role="line"
          id="tspan4264"
          x="1188"
@@ -457,7 +552,10 @@
        x="1222.749"
        y="226.18408"
        id="text4262-6"
-       sodipodi:linespacing="125%"><tspan
+       sodipodi:linespacing="125%"
+       inkscape:export-filename="/tmp/export.png"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90"><tspan
          sodipodi:role="line"
          id="tspan4264-7"
          x="1222.749"
@@ -469,7 +567,10 @@
        x="1205.6049"
        y="261.82718"
        id="text4284"
-       sodipodi:linespacing="125%"><tspan
+       sodipodi:linespacing="125%"
+       inkscape:export-filename="/tmp/export.png"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90"><tspan
          sodipodi:role="line"
          x="1205.6049"
          y="261.82718"
@@ -479,7 +580,10 @@
        xml:space="preserve"
        id="flowRoot4288"
        style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="translate(114,0)"><flowRegion
+       transform="translate(114,0)"
+       inkscape:export-filename="/tmp/export.png"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90"><flowRegion
          id="flowRegion4290"><rect
            id="rect4292"
            width="478.7113"

src/game/Battle.ts

@@ -25,6 +25,10 @@ module SpaceTac.Game {
         // Boolean indicating if its the first turn
         first_turn: boolean;
 
+        // Size of the battle area
+        width = 1000
+        height = 500
+
         // Create a battle between two fleets
         constructor(fleet1: Fleet = null, fleet2: Fleet = null) {
             super();
@@ -89,8 +93,8 @@ module SpaceTac.Game {
         // Defines the initial ship positions of all engaged fleets
         placeShips(): void {
             this.first_turn = true;
-            this.placeFleetShips(this.fleets[0], 50, 320, 0);
+            this.placeFleetShips(this.fleets[0], this.width * 0.05, this.height * 0.5, 0);
-            this.placeFleetShips(this.fleets[1], 1020, 320, Math.PI);
+            this.placeFleetShips(this.fleets[1], this.width * 0.95, this.height * 0.5, Math.PI);
         }
 
         // Count the number of fleets still alive
@@ -242,7 +246,7 @@ module SpaceTac.Game {
         //  facing_angle is the forward angle in radians
         private placeFleetShips(fleet: Fleet, x: number, y: number, facing_angle: number): void {
             var side_angle = facing_angle + Math.PI * 0.5;
-            var spacing = 140;
+            var spacing = this.height * 0.2;
             var total_length = spacing * (fleet.ships.length - 1);
             var dx = Math.cos(side_angle);
             var dy = Math.sin(side_angle);

src/game/specs/Battle.spec.ts

@@ -39,23 +39,23 @@ module SpaceTac.Game {
             battle.placeShips();
 
             expect(ship1.arena_x).toBeCloseTo(50, 0.0001);
-            expect(ship1.arena_y).toBeCloseTo(180, 0.0001);
+            expect(ship1.arena_y).toBeCloseTo(150, 0.0001);
             expect(ship1.arena_angle).toBeCloseTo(0, 0.0001);
 
             expect(ship2.arena_x).toBeCloseTo(50, 0.0001);
-            expect(ship2.arena_y).toBeCloseTo(320, 0.0001);
+            expect(ship2.arena_y).toBeCloseTo(250, 0.0001);
             expect(ship2.arena_angle).toBeCloseTo(0, 0.0001);
 
             expect(ship3.arena_x).toBeCloseTo(50, 0.0001);
-            expect(ship3.arena_y).toBeCloseTo(460, 0.0001);
+            expect(ship3.arena_y).toBeCloseTo(350, 0.0001);
             expect(ship3.arena_angle).toBeCloseTo(0, 0.0001);
 
-            expect(ship4.arena_x).toBeCloseTo(1020, 0.0001);
+            expect(ship4.arena_x).toBeCloseTo(950, 0.0001);
-            expect(ship4.arena_y).toBeCloseTo(390, 0.0001);
+            expect(ship4.arena_y).toBeCloseTo(300, 0.0001);
             expect(ship4.arena_angle).toBeCloseTo(Math.PI, 0.0001);
 
-            expect(ship5.arena_x).toBeCloseTo(1020, 0.0001);
+            expect(ship5.arena_x).toBeCloseTo(950, 0.0001);
-            expect(ship5.arena_y).toBeCloseTo(250, 0.0001);
+            expect(ship5.arena_y).toBeCloseTo(200, 0.0001);
             expect(ship5.arena_angle).toBeCloseTo(Math.PI, 0.0001);
         });
 

src/view/battle/ArenaShip.ts

@@ -70,7 +70,7 @@ module SpaceTac.View {
             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.to({ x: x, y: y });
                 tween_group.start();
                 Tools.rotationTween(tween_sprite, facing_angle);
                 tween_sprite.start();
@@ -85,14 +85,14 @@ module SpaceTac.View {
         displayDamage(hull: number, shield: number) {
             if (hull > 0) {
                 var hull_text = new Phaser.Text(this.game, -20, -20, Math.round(hull).toString(),
-                    {font: "bold 16px Arial", align: "center", fill: "#ffbbbb"});
+                    { font: "bold 16px Arial", align: "center", fill: "#ffbbbb" });
                 hull_text.anchor.set(0.5, 0.5);
                 this.addChild(hull_text);
                 this.animateDamageText(hull_text);
             }
             if (shield > 0) {
                 var shield_text = new Phaser.Text(this.game, 20, -20, Math.round(shield).toString(),
-                    {font: "bold 16px Arial", align: "center", fill: "#bbbbff"});
+                    { font: "bold 16px Arial", align: "center", fill: "#bbbbff" });
                 shield_text.anchor.set(0.5, 0.5);
                 this.addChild(shield_text);
                 this.animateDamageText(shield_text);
@@ -102,8 +102,8 @@ module SpaceTac.View {
         private animateDamageText(text: Phaser.Text) {
             text.alpha = 0;
             var tween = this.game.tweens.create(text);
-            tween.to({alpha: 1}, 100, Phaser.Easing.Circular.In, false, 500);
+            tween.to({ alpha: 1 }, 100, Phaser.Easing.Circular.In, false, 500);
-            tween.to({y: -50, alpha: 0}, 800, Phaser.Easing.Circular.In, false, 200);
+            tween.to({ y: -50, alpha: 0 }, 800, Phaser.Easing.Circular.In, false, 200);
             tween.onComplete.addOnce(() => {
                 text.destroy();
             });

src/view/battle/BattleView.ts

@@ -40,9 +40,6 @@ module SpaceTac.View {
         // Indicator of interaction disabled
         icon_waiting: Phaser.Image;
 
-        // Lines used to highlight hovered ship
-        private line_hover_left: Phaser.Graphics;
-
         // Init the view, binding it to a specific battle
         init(player: Game.Player, battle: Game.Battle) {
             super.init();
@@ -53,7 +50,6 @@ module SpaceTac.View {
             this.ship_hovered = null;
             this.log_processor = null;
             this.background = null;
-            this.line_hover_left = null;
         }
 
         // Create view graphics
@@ -83,11 +79,7 @@ module SpaceTac.View {
             this.icon_waiting.anchor.set(0.5, 0.5);
             this.icon_waiting.scale.set(0.5, 0.5);
             game.add.existing(this.icon_waiting);
-            game.tweens.create(this.icon_waiting).to({"angle": 360}, 3000).repeat(-1).start();
+            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);
 
             // Start processing the battle log
             this.log_processor = new LogProcessor(this);
@@ -124,11 +116,6 @@ module SpaceTac.View {
                 this.arena = null;
             }
 
-            if (this.line_hover_left) {
-                this.line_hover_left.destroy();
-                this.line_hover_left = null;
-            }
-
             this.battle = null;
 
             super.shutdown();
@@ -137,10 +124,10 @@ module SpaceTac.View {
         // Display an animated "BATTLE" text in the center of the view
         displayFightMessage(): void {
             var text = this.game.add.text(this.getMidWidth(), this.getMidHeight(), "BATTLE !",
-                {align: "center", font: "bold 42px Arial", fill: "#EE2233"});
+                { align: "center", font: "bold 42px Arial", fill: "#EE2233" });
             text.anchor.set(0.5, 0.5);
-            this.game.tweens.create(text.scale).to({x: 3, y: 3}).start();
+            this.game.tweens.create(text.scale).to({ x: 3, y: 3 }).start();
-            var text_anim = this.game.tweens.create(text).to({alpha: 0});
+            var text_anim = this.game.tweens.create(text).to({ alpha: 0 });
             text_anim.onComplete.addOnce(() => {
                 text.destroy();
             });
@@ -194,34 +181,6 @@ 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 / 2, 0));
-                    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);
-
-                    Animation.fadeIn(this.game, this.line_hover_left, 200);
-                } else {
-                    Animation.fadeOut(this.game, this.line_hover_left, 200);
-                }
-            } else {
-                Animation.fadeOut(this.game, this.line_hover_left, 200);
-            }
         }
 
         // Enable or disable the global player interaction

src/view/battle/ShipListItem.ts

@@ -42,7 +42,7 @@ module SpaceTac.View {
             this.addChild(this.layer_portrait);
 
             this.layer_hover = new Phaser.Image(this.game, 30, 30, "battle-arena-shipspritehover", 0);
-            this.layer_hover.anchor.set(0.5, 0.5);
+            this.layer_hover.position.set(5, 5);
             this.layer_hover.visible = false;
             this.addChild(this.layer_hover);