story for print hull

src/routes/export/print/PrintShip/Hull/index.story.svelte

@@ -0,0 +1,21 @@
+<Hst.Story title="Export/PrintShip/Hull">
+  <Hst.Variant>
+    <Hull {rating} {advanced} {shipMass} />
+  </Hst.Variant>
+
+  <svelte:fragment slot="controls">
+    <Hst.Number bind:value={rating} title="rating" />
+    <Hst.Checkbox bind:value={advanced} title="advanced" />
+    <Hst.Number bind:value={shipMass} title="ship mass" />
+  </svelte:fragment>
+</Hst.Story>
+
+<script>
+  import Hull from "./index.svelte";
+
+  export let Hst;
+
+  let rating = 12;
+  let advanced = true;
+  let shipMass = 10;
+</script>

src/routes/export/print/PrintShip/Hull/index.svelte

@@ -0,0 +1,66 @@
+<div>
+  {#each rows as row, i (i)}
+    <div class="row">
+      {#each row as threshold, j (j)}
+        <div class="cell">
+          {#if threshold}
+            <img src="/icons/crew-star.svg" alt="crew loss threshold" />
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/each}
+</div>
+
+<script>
+  export let rating = 0;
+  export let advanced = false;
+  export let shipMass = 10;
+
+  let nbr_rows;
+  $: nbr_rows = advanced ? 3 : 4;
+
+  let cells;
+  $: cells = Array(rating).fill(false);
+
+  let dcp;
+  $: dcp = Math.ceil(shipMass / 20);
+
+  $: cells = divide(cells, dcp)
+    .map((g) => {
+      g[g.length - 1] = true;
+      return g;
+    })
+    .flat();
+
+  function divide(list, divider) {
+    if (divider <= 1) return [list];
+
+    let div = list.length / divider;
+    const mod = list.length % divider;
+
+    if (mod) div++;
+
+    return [list.slice(0, div), ...divide(list.slice(div), divider - 1)];
+  }
+
+  let rows = [];
+  $: rows = divide(cells, nbr_rows);
+</script>
+
+<style>
+  .row {
+    margin-bottom: 0.5em;
+  }
+  .cell {
+    display: inline-block;
+    margin-right: 0.5em;
+    width: 1.5em;
+    height: 1.5em;
+    border: 1px solid black;
+  }
+  img {
+    width: 1em;
+    margin-left: 0.2em;
+  }
+</style>