tidy up the layour

public/icons/firecon.svg

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 409 409"
+   enable-background="new 0 0 960 560"
+   xml:space="preserve"
+   sodipodi:docname="firecon.svg"
+   width="409"
+   height="409"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
+   id="metadata116"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs114" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="778"
+   inkscape:window-height="481"
+   id="namedview112"
+   showgrid="false"
+   fit-margin-top="0"
+   fit-margin-left="0"
+   fit-margin-right="0"
+   fit-margin-bottom="0"
+   inkscape:zoom="0.36770833"
+   inkscape:cx="205"
+   inkscape:cy="205"
+   inkscape:window-x="0"
+   inkscape:window-y="34"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Layer_1" />
+<rect
+   x="12.5"
+   y="12.5"
+   stroke-miterlimit="10"
+   width="384"
+   height="384"
+   id="rect107"
+   style="fill:none;stroke:#000000;stroke-width:25;stroke-miterlimit:10" />
+<circle
+   stroke-miterlimit="10"
+   cx="205"
+   cy="204"
+   r="121.6"
+   id="circle109"
+   style="stroke:#000000;stroke-width:22.25449944;stroke-miterlimit:10" />
+</svg>

public/icons/screen-advanced.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 457.3924 458.52048"
+   enable-background="new 0 0 960 560"
+   xml:space="preserve"
+   sodipodi:docname="screen-advanced.svg"
+   width="457.3924"
+   height="458.52048"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
+   id="metadata247"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs245" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="778"
+   inkscape:window-height="481"
+   id="namedview243"
+   showgrid="false"
+   fit-margin-top="0"
+   fit-margin-left="0"
+   fit-margin-right="0"
+   fit-margin-bottom="0"
+   inkscape:zoom="0.36770833"
+   inkscape:cx="228.69619"
+   inkscape:cy="224.72809"
+   inkscape:window-x="0"
+   inkscape:window-y="34"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Layer_1" />
+<g
+   id="g240"
+   transform="translate(-251.30381,-46.207612)">
+	<rect
+   x="387.29999"
+   y="280.79999"
+   transform="matrix(0.7071,0.7071,-0.7071,0.7071,404.6839,-230.0195)"
+   width="185.5"
+   height="185.5"
+   id="rect234" />
+	<polyline
+   stroke-miterlimit="10"
+   points="654.3,330.5 480,156.2 305.7,330.5  "
+   id="polyline236"
+   style="fill:none;stroke:#000000;stroke-width:13;stroke-miterlimit:10" />
+	<polyline
+   stroke-miterlimit="10"
+   points="704.1,279.5 480,55.4 255.9,279.5  "
+   id="polyline238"
+   style="fill:none;stroke:#000000;stroke-width:13;stroke-miterlimit:10" />
+</g>
+</svg>

public/icons/screen.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 396.50296 456.80048"
+   enable-background="new 0 0 960 560"
+   xml:space="preserve"
+   sodipodi:docname="screen.svg"
+   width="396.50296"
+   height="456.80048"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
+   id="metadata171"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs169" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="778"
+   inkscape:window-height="481"
+   id="namedview167"
+   showgrid="false"
+   fit-margin-top="0"
+   fit-margin-left="0"
+   fit-margin-right="0"
+   fit-margin-bottom="0"
+   inkscape:zoom="0.36770833"
+   inkscape:cx="198.30113"
+   inkscape:cy="218.59999"
+   inkscape:window-x="0"
+   inkscape:window-y="34"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Layer_1" />
+<g
+   id="g164"
+   transform="translate(-281.69887,-41.799529)">
+	<circle
+   cx="480"
+   cy="366.79999"
+   r="131.8"
+   id="circle158" />
+	<path
+   stroke-miterlimit="10"
+   d="m 348.2,193.3 c 0,0 130,-67.9 263.6,0"
+   id="path160"
+   inkscape:connector-curvature="0"
+   style="fill:none;stroke:#000000;stroke-width:39.33679962;stroke-miterlimit:10" />
+	<path
+   stroke-miterlimit="10"
+   d="m 290.8,104.7 c 0,0 186.6,-97.4 378.5,0"
+   id="path162"
+   inkscape:connector-curvature="0"
+   style="fill:none;stroke:#000000;stroke-width:39.33679962;stroke-miterlimit:10" />
+</g>
+</svg>

public/ssd-icons/AdvFireCont1.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
-<rect x="287.5" y="88.5" fill="none" stroke="#000000" stroke-width="25" stroke-miterlimit="10" width="384" height="384"/>
-<circle stroke="#000000" stroke-width="22.2545" stroke-miterlimit="10" cx="480" cy="280" r="121.6"/>
-</svg>

public/ssd-icons/AdvScreen.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
-<g>
-	<rect x="387.3" y="280.8" transform="matrix(0.7071 0.7071 -0.7071 0.7071 404.6839 -230.0195)" width="185.5" height="185.5"/>
-	<polyline fill="none" stroke="#000000" stroke-width="13" stroke-miterlimit="10" points="654.3,330.5 480,156.2 305.7,330.5 	"/>
-	<polyline fill="none" stroke="#000000" stroke-width="13" stroke-miterlimit="10" points="704.1,279.5 480,55.4 255.9,279.5 	"/>
-</g>
-</svg>

public/ssd-icons/Screens.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
-<g>
-	<circle cx="480" cy="366.8" r="131.8"/>
-	<path fill="none" stroke="#000000" stroke-width="39.3368" stroke-miterlimit="10" d="M348.2,193.3c0,0,130-67.9,263.6,0"/>
-	<path fill="none" stroke="#000000" stroke-width="39.3368" stroke-miterlimit="10" d="M290.8,104.7c0,0,186.6-97.4,378.5,0"/>
-</g>
-</svg>

src/components/Output/Print/Hull/index.svelte

@@ -0,0 +1,16 @@
+<div>
+  <Armour armour={structure.armour} />
+  <Integrity
+    rating={structure.hull.rating}
+    advanced={structure.hull.advanced}
+    {ship_mass}
+  />
+</div>
+
+<script>
+  import Integrity from './Integrity';
+  import Armour from './Armour';
+
+  export let structure = {};
+  export let ship_mass = 0;
+</script>

src/components/Output/Print/Systems/Firecons/index.svelte

@@ -0,0 +1,19 @@
+  <div>
+    {#each _.range(firecons) as firecon }
+      <img class="firecon" src="icons/firecon.svg" alt="firecon" />
+    {/each}
+  </div>
+
+  <script>
+    export let firecons = 0;
+  </script>
+
+  <style>
+    div {
+      display: flex;
+      gap: 0.5em;
+    }
+  img.firecon {
+    width: 1em;
+  }
+</style>

src/components/Output/Print/Systems/Screens/index.svelte

@@ -0,0 +1,26 @@
+<div>
+  {#each _.range(standard) as i }
+    <img src="icons/screen.svg" alt="screen" />
+  {/each}
+  {#each _.range(advanced) as i }
+    <img src="icons/screen-advanced.svg" alt="advanced screen" />
+  {/each}
+
+</div>
+
+<script>
+  import _ from 'lodash';
+
+  export let standard = 0;
+  export let advanced = 0;
+</script>
+
+<style>
+  img {
+    width: 1em;
+  }
+  div {
+    display: flex;
+    gap: 0.5em;
+  }
+</style>

src/components/Output/Print/Systems/index.svelte

@@ -0,0 +1,28 @@
+<div>
+  <Firecons {firecons}/>
+
+  <Screens {...screens} />
+</div>
+
+<script>
+  import Firecons from './Firecons';
+  import Screens from './Screens';
+
+  export let firecons = 0;
+  export let screens = {};
+
+</script>
+
+<style>
+  div {
+    text-align: center;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  div > :global(*) {
+    margin-bottom: 1em;
+
+  }
+  </style>

src/components/Output/Print/Weapons/index.svelte

@@ -19,4 +19,7 @@
 </script>
 
 <style>
+  div {
+    margin-bottom: 2em;
+  }
 </style>

src/components/Output/Print/index.svelte

@@ -1,14 +1,17 @@
-<div>
+<div class="ship-sheet">
   <Identification {...ship.general} />
 
   <Weapons weapons={ship.weaponry.weapons} />
 
-  <Armour armour={ship.structure.armour} />
+  <div class="section-2">
-  <Integrity
+  <Hull structure={ship.structure}
-    rating={ship.structure.hull.rating}
+    ship_mass={ship.general.mass} />
-    advanced={ship.structure.hull.advanced}
+
-    ship_mass={ship.general.mass}
+  <Systems
+    firecons={ship.weaponry.firecons.nbr}
+    screens={ship.structure.screens}
   />
+</div>
 
   <MainSystems
     ftl={ship.ftl.type}
@@ -18,20 +21,31 @@
 </div>
 
 <script>
+  import _ from 'lodash';
+
   import Identification from './Identification';
-  import Integrity from './Hull/Integrity';
-  import Armour from './Hull/Armour';
   import MainSystems from './MainSystems';
+  import Hull from './Hull';
   import Weapons from './Weapons';
+  import Systems from './Systems';
+
   export let ship;
 
 </script>
 
 <style>
-div {
+.ship-sheet {
   width: 4.25in;
   height: 5.5in;
   border: 1px solid black;
   padding: 1em;
 }
+
+.section-2 {
+  display: flex;
+  align-items: start;
+}
+
+
+
 </style>

src/components/Output/Print/sample.js

@@ -69,8 +69,8 @@ export default {
       "mass": 22
     },
     "screens": {
-      "standard": 5,
+      "standard": 2,
-      "advanced": 0,
+      "advanced": 1,
       "cost": 105,
       "mass": 35
     },