armour

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

@@ -0,0 +1,34 @@
+<div class="layers">
+  {#each armour as layer (layer)}
+    <div class="layer">
+      {#each _.range(layer.rating) as i (i) }
+        <div class="cell">
+        </div>
+      {/each}
+    </div>
+  {/each}
+
+</div>
+
+<script>
+  import _ from 'lodash';
+
+  export let armour = [];
+
+  $: console.log(armour);
+</script>
+
+<style>
+.cell {
+  display: inline-block;
+  margin-right: 0.5em;
+  width: 1em;
+  height: 1em;
+  border: 1px solid black;
+  border-radius: 0.5em;
+}
+  .layers {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+</style>

src/components/Output/Print/index.svelte

@@ -1,5 +1,7 @@
 <div>
   <Identification {...ship.general} />
+
+  <Armour armour={ship.structure.armour} />
   <Integrity
     rating={ship.structure.hull.rating}
     advanced={ship.structure.hull.advanced}
@@ -10,6 +12,7 @@
 <script>
   import Identification from './Identification';
   import Integrity from './Hull/Integrity';
+  import Armour from './Hull/Armour';
   export let ship;
 
 </script>