57 lines
1.1 KiB
Svelte
57 lines
1.1 KiB
Svelte
<ShipItem {cost} {mass} >
|
|
|
|
<div>
|
|
|
|
<div class="nbr_layers">
|
|
<Field label="armour layers">
|
|
<input type="number" min="0" bind:value={nbr_layers} />
|
|
</Field>
|
|
</div>
|
|
|
|
<div class="layers">
|
|
{#each armour as layer ( layer.layer )}
|
|
<Layer {...layer} on:ship_change/>
|
|
{/each}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</ShipItem>
|
|
|
|
<script>
|
|
import { createEventDispatcher} from 'svelte';
|
|
|
|
import ShipItem from '$lib/components/ShipItem/index.svelte';
|
|
import Field from '$lib/components/Field/index.svelte';
|
|
import Layer from './Layer/index.svelte';
|
|
import dux from '$lib/dux/structure/armour';
|
|
import _ from 'lodash';
|
|
|
|
export let armour = [];
|
|
export let cost = 0;
|
|
export let mass = 0;
|
|
|
|
$: cost = _.sum( _.map( armour, 'cost' ) );
|
|
$: mass = _.sum( _.map( armour, 'mass' ) );
|
|
|
|
let nbr_layers = armour.length;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
$: dispatch( 'ship_change', dux.actions.set_armour_nbr_layers(nbr_layers) );
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.layers {
|
|
display: flex;
|
|
|
|
}
|
|
|
|
input {
|
|
width: 5em;
|
|
}
|
|
|
|
</style>
|