2022-03-05 00:10:51 +00:00
|
|
|
<ShipItem {...reqs}>
|
|
|
|
<div>
|
|
|
|
<div class="nbr_layers">
|
|
|
|
<Field label="armour layers">
|
2022-03-20 18:42:59 +00:00
|
|
|
<input class="short" type="number" min="0" bind:value={nbr_layers} />
|
2022-03-05 00:10:51 +00:00
|
|
|
</Field>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="layers">
|
|
|
|
{#each layers as rating,i (i)}
|
|
|
|
<Layer {rating} layer={i+1} />
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ShipItem>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { getContext } from 'svelte';
|
|
|
|
import ShipItem from "$lib/components/ShipItem/index.svelte";
|
|
|
|
import Field from "$lib/components/Field/index.svelte";
|
|
|
|
import Layer from "./Armor/Layer.svelte";
|
|
|
|
|
|
|
|
export let layers = [];
|
|
|
|
export let reqs = {};
|
|
|
|
|
|
|
|
let nbr_layers = layers.length;
|
|
|
|
|
|
|
|
const { dispatch } = getContext('ship');
|
|
|
|
|
|
|
|
$: dispatch.setArmorLayers(nbr_layers);
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.layers {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
input {
|
|
|
|
width: 5em;
|
|
|
|
}
|
|
|
|
</style>
|