Updated battle UI sheet

2018-03-25 19:51:18 +02:00 · 2018-03-25 19:51:18 +02:00 · 43a3450d74
parent 9f81b4c992
commit 43a3450d74
2 changed files with 269 additions and 174 deletions
--- a/TODO.md
+++ b/TODO.md
@ -33,6 +33,7 @@ Battle

 * Fix stats only filling for one fleet
 * Display shield (and its (dis)appearance)
+* Display estimated damage and displacement in targetting mode
 * Add a voluntary retreat option
 * Toggle bar/text display in power section of action bar
 * Show a cooldown indicator on move action icon, if the simulation would cause the engine to overheat
@ -66,7 +67,7 @@ Ships models and actions
 * Add damage on collisions (when two ships are moved to the same place)
 * Add hull points to drones and make them take area damage
 * Allow to customize effects based on whether a target is enemy, allied or self
-* Add pinned effect (cannot be moved)
+* Add anchored effect (cannot be moved)
 * Add a reflect damage effect
 * Add untargettable effect (can only be targetted with area effects)
 * Add damage modifier (to change the options of incoming damage or outgoing damage)
--- a/graphics/ui/battle.svg
+++ b/graphics/ui/battle.svg
@ -27,19 +27,39 @@
     id="defs4">
    <linearGradient
       inkscape:collect="always"
-       id="linearGradient6136">
+       id="linearGradient9448">
      <stop
-         style="stop-color:#c8843d;stop-opacity:1"
+         style="stop-color:#2ad8dc;stop-opacity:0"
         offset="0"
-         id="stop6132" />
+         id="stop9444" />
      <stop
-         id="stop6140"
-         offset="0.45112255"
-         style="stop-color:#edcdad;stop-opacity:0.54509807" />
+         id="stop10454"
+         offset="0.26975143"
+         style="stop-color:#2ad8dc;stop-opacity:0.07058824;" />
      <stop
-         style="stop-color:#dfaf7f;stop-opacity:0"
+         id="stop9452"
+         offset="0.89691359"
+         style="stop-color:#2ad8dc;stop-opacity:0.24893618" />
+      <stop
+         style="stop-color:#438284;stop-opacity:1"
+         offset="0.91888863"
+         id="stop9456" />
+      <stop
+         id="stop9460"
+         offset="0.93959045"
+         style="stop-color:#348586;stop-opacity:1" />
+      <stop
+         id="stop9458"
+         offset="0.95714849"
+         style="stop-color:#9dc7c8;stop-opacity:1" />
+      <stop
+         style="stop-color:#2ad8dc;stop-opacity:0"
+         offset="0.98141533"
+         id="stop9454" />
+      <stop
+         style="stop-color:#2ad8dc;stop-opacity:0"
         offset="1"
-         id="stop6134" />
+         id="stop9446" />
    </linearGradient>
    <linearGradient
       inkscape:collect="always"
@ -1554,16 +1574,6 @@
       fx="359.19373"
       fy="-25.506496"
       r="16.402095" />
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient10353"
-       id="linearGradient7764"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.0353473,0,0,1.1776316,-42.405812,-111.90546)"
-       x1="1199.6506"
-       y1="642.58167"
-       x2="1199.6506"
-       y2="629.90344" />
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
@ -3182,15 +3192,6 @@
         result="composite2"
         id="feComposite5936" />
    </filter>
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient6136"
-       id="linearGradient6138"
-       x1="1006.6031"
-       y1="462.65561"
-       x2="1006.6031"
-       y2="471.59311"
-       gradientUnits="userSpaceOnUse" />
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient8959"
@ -3236,6 +3237,45 @@
         result="composite2"
         id="feComposite6086" />
    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient10353"
+       id="linearGradient9331"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.0353473,0,0,1.1776316,-42.405812,-111.90546)"
+       x1="1199.6506"
+       y1="642.58167"
+       x2="1199.6506"
+       y2="629.90344" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient9448"
+       id="linearGradient10364"
+       gradientUnits="userSpaceOnUse"
+       x1="972.31073"
+       y1="287.0278"
+       x2="1019.348"
+       y2="259.87082" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient9448"
+       id="radialGradient10825"
+       cx="972.31073"
+       cy="287.0278"
+       fx="972.31073"
+       fy="287.0278"
+       r="58.327335"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.98285538,0,0,0.98285538,16.669868,4.920981)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient9448"
+       id="linearGradient10840"
+       gradientUnits="userSpaceOnUse"
+       x1="972.31073"
+       y1="287.0278"
+       x2="1019.348"
+       y2="259.87082" />
  </defs>
  <sodipodi:namedview
     id="base"
@ -3244,30 +3284,30 @@
     borderopacity="1"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
-     inkscape:zoom="1.4142136"
-     inkscape:cx="1342.5671"
-     inkscape:cy="597.16284"
+     inkscape:zoom="2.0000001"
+     inkscape:cx="365.78465"
+     inkscape:cy="940.99399"
     inkscape:document-units="px"
-     inkscape:current-layer="g7473"
+     inkscape:current-layer="layer38"
     showgrid="false"
     units="px"
     showguides="true"
-     inkscape:snap-bbox="false"
+     inkscape:snap-bbox="true"
     inkscape:bbox-nodes="true"
-     inkscape:bbox-paths="true"
+     inkscape:bbox-paths="false"
     inkscape:snap-to-guides="true"
     inkscape:object-nodes="true"
     inkscape:snap-intersection-paths="false"
     inkscape:object-paths="false"
-     inkscape:snap-global="false"
+     inkscape:snap-global="true"
     inkscape:showpageshadow="false"
     showborder="true"
     borderlayer="false"
-     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-bbox-midpoints="true"
     inkscape:lockguides="true"
-     inkscape:snap-nodes="true"
-     inkscape:snap-others="false"
-     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="true"
+     inkscape:snap-bbox-edge-midpoints="false"
     inkscape:measure-start="1539.72,611.294"
     inkscape:measure-end="1539.72,559.321"
     inkscape:snap-page="true"
@ -3275,7 +3315,9 @@
     inkscape:window-height="1037"
     inkscape:window-x="0"
     inkscape:window-y="20"
-     inkscape:window-maximized="0" />
+     inkscape:window-maximized="0"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-midpoints="false" />
  <metadata
     id="metadata7">
    <rdf:RDF>
@ -3294,80 +3336,10 @@
     inkscape:label="Arena"
     style="display:inline"
     transform="translate(0,-67.5)">
-    <g
-       inkscape:groupmode="layer"
-       id="layer31"
-       inkscape:label="Arena ships"
-       style="display:inline">
-      <use
-         style="display:inline;enable-background:new"
-         x="0"
-         y="0"
-         xlink:href="#g4184"
-         id="use4320"
-         transform="matrix(0.06661534,0.18302414,-0.18302414,0.06661534,240.876,694.89507)"
-         width="100%"
-         height="100%" />
-      <use
-         style="display:inline;enable-background:new"
-         x="0"
-         y="0"
-         xlink:href="#use4320"
-         id="use4429"
-         transform="rotate(165,602.63823,633.24734)"
-         width="100%"
-         height="100%" />
-      <use
-         x="0"
-         y="0"
-         xlink:href="#use5033"
-         id="use9787"
-         width="100%"
-         height="100%"
-         transform="rotate(41.669894,867.78876,842.84322)" />
-      <use
-         x="0"
-         y="0"
-         xlink:href="#use9787"
-         id="use10105"
-         width="100%"
-         height="100%"
-         transform="rotate(75,864.85174,532.53795)" />
-      <use
-         transform="translate(616.4383,-116.37964)"
-         style="display:inline;enable-background:new"
-         x="0"
-         y="0"
-         xlink:href="#use6127"
-         id="use5771"
-         width="100%"
-         height="100%" />
-      <use
-         transform="translate(616.4383,-116.37964)"
-         style="display:inline;enable-background:new"
-         x="0"
-         y="0"
-         xlink:href="#use6129"
-         id="use5773"
-         width="100%"
-         height="100%" />
-    </g>
-    <g
-       inkscape:groupmode="layer"
-       id="layer18"
-       inkscape:label="Ship info"
-       style="display:inline">
-      <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 1813.5023,252.88619 h -191.7315 v 124.33387 l -224.5641,0.16573"
-         id="path6124"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="cccc" />
-    </g>
    <g
       inkscape:groupmode="layer"
       id="layer38"
-       inkscape:label="New ship HUD"
+       inkscape:label="HUD Back"
       style="display:inline">
      <g
         id="g10025"
@ -3519,7 +3491,7 @@
             height="14.83267"
             width="91.712814"
             id="rect10347"
-             style="fill:url(#linearGradient7764);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.0351876px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter10397)"
+             style="fill:url(#linearGradient9331);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.0351876px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter10397)"
             transform="matrix(1.0590246,0,0,0.99415563,-70.811353,3.7252191)" />
          <path
             style="fill:#1d5664;fill-opacity:1;fill-rule:evenodd;stroke:#287583;stroke-width:1.875;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
@ -3766,15 +3738,6 @@
      <g
         id="g7762"
         transform="translate(958.33333,-251.66667)">
-        <use
-           style="display:inline;enable-background:new"
-           x="0"
-           y="0"
-           xlink:href="#g4184"
-           id="use5033"
-           transform="matrix(0.06661534,0.18302414,-0.18302414,0.06661534,446.80558,677.68201)"
-           width="100%"
-           height="100%" />
        <use
           transform="translate(-263.83332,262.33334)"
           height="100%"
@ -3791,14 +3754,23 @@
           xlink:href="#g10129"
           y="0"
           x="0" />
+        <use
+           style="display:inline;enable-background:new"
+           x="0"
+           y="0"
+           xlink:href="#image9266"
+           id="use9392"
+           width="100%"
+           height="100%"
+           transform="rotate(-21.867087,1566.2157,1967.7006)" />
      </g>
-      <path
-         style="fill:#553a1f;fill-opacity:1;fill-rule:evenodd;stroke:#9e754d;stroke-width:1.04155529px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.75531918"
-         d="m 980.15128,462.58208 h 51.00192 l 2.4857,4.51102 -2.4857,4.51101 h -51.00192 l -2.48566,-4.51101 z"
-         id="rect13238"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="ccccccc"
-         inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-success-back.png"
+      <circle
+         style="display:inline;fill:url(#radialGradient10825);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.83083099px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new"
+         id="path10802"
+         cx="972.31073"
+         cy="287.0278"
+         r="57.327335"
+         inkscape:export-filename="/home/michael/workspace/spacetac/data/stage2/image/battle/arena/shield.png"
         inkscape:export-xdpi="96"
         inkscape:export-ydpi="96" />
      <use
@ -3809,15 +3781,133 @@
         width="100%"
         height="100%"
         transform="translate(787.44696,-360.31107)" />
-      <path
-         sodipodi:nodetypes="ccccccc"
-         inkscape:connector-curvature="0"
-         id="path6129"
-         d="m 980.15128,462.58208 h 51.00192 l 2.4857,4.51102 -2.4857,4.51101 h -51.00192 l -2.48566,-4.51101 z"
-         style="opacity:1;fill:url(#linearGradient6138);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.04155529px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.75531915"
-         inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-success-fill.png"
+      <g
+         id="g10834"
+         inkscape:export-filename="/home/michael/workspace/spacetac/data/stage2/image/battle/arena/shield.png"
         inkscape:export-xdpi="96"
-         inkscape:export-ydpi="96" />
+         inkscape:export-ydpi="96"
+         transform="translate(36.00003,-134)">
+        <g
+           transform="translate(0,-5.6339063e-6)"
+           id="g10344">
+          <path
+             style="fill:url(#linearGradient10840);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.09507573px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.02340429"
+             d="m 1003.6689,232.71381 31.3582,54.31399 h -62.71638 z"
+             id="path9154"
+             inkscape:connector-curvature="0"
+             sodipodi:nodetypes="cccc" />
+        </g>
+        <use
+           transform="rotate(-60,972.3107,287.0278)"
+           height="100%"
+           width="100%"
+           id="use10346"
+           xlink:href="#g10344"
+           y="0"
+           x="0" />
+        <use
+           transform="rotate(-120,972.3107,287.0278)"
+           height="100%"
+           width="100%"
+           id="use10348"
+           xlink:href="#g10344"
+           y="0"
+           x="0" />
+        <use
+           transform="rotate(180,972.3107,287.0278)"
+           height="100%"
+           width="100%"
+           id="use10350"
+           xlink:href="#g10344"
+           y="0"
+           x="0" />
+        <use
+           transform="rotate(120,972.3107,287.0278)"
+           height="100%"
+           width="100%"
+           id="use10352"
+           xlink:href="#g10344"
+           y="0"
+           x="0" />
+        <use
+           transform="rotate(60,972.3107,287.0278)"
+           height="100%"
+           width="100%"
+           id="use10354"
+           xlink:href="#g10344"
+           y="0"
+           x="0" />
+      </g>
+    </g>
+    <g
+       inkscape:groupmode="layer"
+       id="layer31"
+       inkscape:label="Arena ships"
+       style="display:inline">
+      <use
+         transform="translate(616.4383,-116.37964)"
+         style="display:inline;enable-background:new"
+         x="0"
+         y="0"
+         xlink:href="#use6127"
+         id="use5771"
+         width="100%"
+         height="100%" />
+      <use
+         transform="translate(616.4383,-116.37964)"
+         style="display:inline;enable-background:new"
+         x="0"
+         y="0"
+         xlink:href="#use6129"
+         id="use5773"
+         width="100%"
+         height="100%" />
+      <image
+         sodipodi:absref="/home/michael/workspace/spacetac/graphics/ui/pics/sprite.png"
+         xlink:href="pics/sprite.png"
+         width="98.685097"
+         height="98.685097"
+         preserveAspectRatio="none"
+         id="image9266"
+         x="922.96796"
+         y="237.68599"
+         style="display:inline;enable-background:new" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#image9266"
+         id="use9421"
+         width="100%"
+         height="100%"
+         transform="rotate(145.64836,953.86992,404.14966)" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#image9266"
+         id="use9423"
+         width="100%"
+         height="100%"
+         transform="rotate(20.124054,593.54688,-573.67691)" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#image9266"
+         id="use9425"
+         width="100%"
+         height="100%"
+         transform="rotate(-19.010378,1654.5561,2818.6742)" />
+    </g>
+    <g
+       inkscape:groupmode="layer"
+       id="layer18"
+       inkscape:label="Ship info"
+       style="display:inline">
+      <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 1813.5023,252.88619 h -191.7315 v 124.33387 l -224.5641,0.16573"
+         id="path6124"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccc" />
    </g>
    <g
       inkscape:groupmode="layer"
@ -3853,15 +3943,38 @@
         id="path9595"
         inkscape:connector-curvature="0"
         sodipodi:nodetypes="cc" />
-      <use
-         x="0"
-         y="0"
-         xlink:href="#use4320"
-         id="use11345"
-         transform="rotate(20,381.95295,1788.6887)"
-         width="100%"
-         height="100%"
-         style="display:inline;opacity:0.58499995;enable-background:new" />
+      <g
+         transform="matrix(0,0.19477022,-0.19477022,0,610.33666,712.60774)"
+         id="use11345">
+        <rect
+           style="opacity:1;fill:#666666;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="rect9427"
+           width="16.970562"
+           height="60.811184"
+           x="-437.6991"
+           y="68.069527" />
+        <rect
+           style="opacity:1;fill:#666666;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="rect9429"
+           width="19.091883"
+           height="73.539108"
+           x="-262.33661"
+           y="60.998459" />
+        <ellipse
+           style="opacity:1;fill:#999999;fill-opacity:1;fill-rule:evenodd;stroke:#4f4f4f;stroke-width:3.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="ellipse9431"
+           cx="-339.41125"
+           cy="108.37461"
+           rx="53.740116"
+           ry="99.702057" />
+        <ellipse
+           style="opacity:1;fill:#999999;fill-opacity:1;fill-rule:evenodd;stroke:#4f4f4f;stroke-width:3.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="ellipse9433"
+           cx="-336.58282"
+           cy="143.3764"
+           rx="130.81476"
+           ry="65.407379" />
+      </g>
      <g
         id="g4978"
         inkscape:export-filename="/tmp/export.png"
@ -7835,7 +7948,7 @@
         height="193.97655"
         width="193.97672"
         id="rect4260-1"
-         style="display:inline;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;enable-background:new;filter:url(#filter6088)" />
+         style="display:inline;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(#filter6088);enable-background:new" />
    </g>
  </g>
  <g
@ -7950,34 +8063,15 @@
    <g
       id="g4184"
       transform="translate(0,67.498889)">
-      <rect
-         y="68.069527"
-         x="-437.6991"
-         height="60.811184"
-         width="16.970562"
-         id="rect4180"
-         style="opacity:1;fill:#666666;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" />
-      <rect
-         y="60.998459"
-         x="-262.33661"
-         height="73.539108"
-         width="19.091883"
-         id="rect4182"
-         style="opacity:1;fill:#666666;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" />
-      <ellipse
-         ry="99.702057"
-         rx="53.740116"
-         cy="108.37461"
-         cx="-339.41125"
-         id="path4176"
-         style="opacity:1;fill:#999999;fill-opacity:1;fill-rule:evenodd;stroke:#4f4f4f;stroke-width:3.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-      <ellipse
-         ry="65.407379"
-         rx="130.81476"
-         cy="143.3764"
-         cx="-336.58282"
-         id="path4178"
-         style="opacity:1;fill:#999999;fill-opacity:1;fill-rule:evenodd;stroke:#4f4f4f;stroke-width:3.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <use
+         style="display:inline;enable-background:new"
+         x="0"
+         y="0"
+         xlink:href="#image9266"
+         id="use9392-3"
+         width="100%"
+         height="100%"
+         transform="matrix(2.84425,0,0,2.84425,-3104.9056,-708.00622)" />
    </g>
  </g>
  <g