67 lines
1.2 KiB
Svelte
67 lines
1.2 KiB
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>
|