integrity print

src/lib/components/Output/Print/Hull/Integrity/Integrity.stories.svelte

@@ -0,0 +1,20 @@
+<Meta title="Output/Print/Structure/Integrity" component={Integrity} argTypes={{
+    shipMass: {defaultValue:50},
+    rating: {defaultValue:14},
+    advanced: {defaultValue:false},
+}} />
+
+<Story name="Primary" args={{}} />
+<Story name="Advanced" args={{ advanced: true }} />
+
+<Template let:args>
+  <div style="width: 50em">
+    <Integrity {...args} />
+  </div>
+</Template>
+
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+
+  import Integrity from './index.svelte';
+</script>

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

@@ -1,9 +1,9 @@
 <div>
   {#each rows as row, i (i)}
     <div class="row">
-      {#each row as item, j (j)}
+      {#each row as threshold, j (j)}
         <div class="cell">
-          {#if item}
+          {#if threshold}
             <img src="icons/crew-star.svg" alt="crew loss threshold" />
           {/if}
         </div>
@@ -13,9 +13,7 @@
 </div>
 
 <script>
-  import { ceil } from "$lib/dux/utils";
-
-  export let ship_mass = 0;
+  export let shipMass = 0;
   export let rating = 0;
   export let advanced = false;
 
@@ -26,7 +24,7 @@
   $: cells = Array(rating).fill(false);
 
   let dcp;
-  $: dcp = ceil(ship_mass / 20);
+  $: dcp = Math.ceil(shipMass / 20);
 
   $: cells = divide(cells, dcp)
     .map((g) => {
@@ -52,15 +50,17 @@
 
 <style>
 .row {
+    margin-bottom: 0.5em;
 }
   .cell {
     display: inline-block;
     margin-right: 0.5em;
-    width: 1em;
-    height: 1em;
+    width: 1.5em;
+    height: 1.5em;
     border: 1px solid black;
   }
   img {
     width: 1em;
+    margin-left: 0.2em;
   }
 </style>