2020-07-19 20:21:28 +00:00
|
|
|
<ShipItem {cost} {mass}>
|
|
|
|
|
|
|
|
<div class="remove" on:click={remove}>X</div>
|
|
|
|
|
|
|
|
<Field label="weapon type">
|
|
|
|
<select bind:value={weapon_type}>
|
|
|
|
<option>beam</option>
|
|
|
|
</select>
|
|
|
|
</Field>
|
|
|
|
|
2020-07-27 20:19:08 +00:00
|
|
|
<svelte:component this={weapon_component[weapon_type]} {...weapon}
|
|
|
|
on:change={update}/>
|
2020-07-19 20:21:28 +00:00
|
|
|
</ShipItem>
|
|
|
|
|
|
|
|
<script>
|
2020-07-27 19:26:07 +00:00
|
|
|
import {getContext } from 'svelte';
|
|
|
|
|
2020-07-19 20:21:28 +00:00
|
|
|
import Arc from '../Weapons/Arc.svelte';
|
|
|
|
import { weapon_cost_mass } from '../../dux/weapons/rules.js';
|
|
|
|
import fp from 'lodash/fp';
|
|
|
|
import _ from 'lodash';
|
|
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
import ShipItem from '~C/ShipItem';
|
|
|
|
import Field from '~C/Field';
|
2020-07-27 20:19:08 +00:00
|
|
|
import Beam from './Beam';
|
2020-07-27 19:26:07 +00:00
|
|
|
import dux from '~/dux';
|
|
|
|
|
2020-07-27 20:19:08 +00:00
|
|
|
const weapon_component = {
|
|
|
|
beam: Beam,
|
|
|
|
};
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2020-07-27 20:19:08 +00:00
|
|
|
export let weapon = {};
|
2020-07-19 20:21:28 +00:00
|
|
|
export let id;
|
|
|
|
export let cost;
|
|
|
|
export let mass;
|
2020-07-27 19:26:07 +00:00
|
|
|
export let ship_change = getContext('ship_change') || ( () => {} );
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2020-07-27 20:19:08 +00:00
|
|
|
let weapon_type;
|
|
|
|
$: weapon_type = weapon.weapon_type;
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2020-07-27 19:26:07 +00:00
|
|
|
const remove = () => ship_change( dux.actions.remove_weapon(id) );
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2020-07-27 20:19:08 +00:00
|
|
|
const update = ({detail}) => {
|
|
|
|
ship_change( dux.actions.set_weapon({
|
|
|
|
id, weapon_type, ...detail
|
|
|
|
}) );
|
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
.weapon {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.weapon > * {
|
|
|
|
margin-right: 2em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.arcs {
|
|
|
|
display: grid;
|
|
|
|
grid-template-rows: 1fr 1fr 1fr 1fr;
|
|
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
|
|
align-items: center;
|
|
|
|
justify-items: center;
|
|
|
|
width: 6em;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.arc input {
|
|
|
|
margin: 0px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.arc.F {
|
|
|
|
grid-column: 2 / span 2;
|
|
|
|
grid-row: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.arc.FS {
|
|
|
|
grid-column: 1;
|
|
|
|
grid-row: 1 / span 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
.arc.FP {
|
|
|
|
grid-column: 4;
|
|
|
|
grid-row: 1 / span 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
.arc.AS {
|
|
|
|
grid-column: 1;
|
|
|
|
grid-row: 3 / span 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
.arc.AP {
|
|
|
|
grid-column: 4;
|
|
|
|
grid-row: 3 / span 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
.arc.A {
|
|
|
|
grid-column: 2 / span 2;
|
|
|
|
grid-row: 4;
|
|
|
|
}
|
|
|
|
|
|
|
|
.add-weapon {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
.remove {
|
|
|
|
width: 1em;
|
|
|
|
flex: 0;
|
|
|
|
color: white;
|
|
|
|
background-color: black;
|
|
|
|
border-radius: 0.5em;
|
|
|
|
height: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|