story for print hull

docks66-json-schema
Yanick Champoux 2023-04-26 16:05:17 -04:00
parent b0f670fe4a
commit cab1036498
2 changed files with 87 additions and 0 deletions

View File

@ -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>

View File

@ -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>