aotds-docks/src/lib/components/Output/Print/Hull/Integrity/index.svelte

<div>
  {#each rows as row, i (i)}
    <div class="row">
      {#each row as item, j (j)}
        <div class="cell">
          {#if item}
            <img src="icons/crew-star.svg" alt="crew loss threshold" />
          {/if}
        </div>
      {/each}
    </div>
  {/each}
</div>

<script>
  import { ceil } from "$lib/dux/utils";

  export let ship_mass = 0;
  export let rating = 0;
  export let advanced = false;

  let nbr_rows;
  $: nbr_rows = advanced ? 3 : 4;

  let cells;
  $: cells = Array(rating).fill(false);

  let dcp;
  $: dcp = ceil(ship_mass / 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 {
  }
  .cell {
    display: inline-block;
    margin-right: 0.5em;
    width: 1em;
    height: 1em;
    border: 1px solid black;
  }
  img {
    width: 1em;
  }
</style>