2020-07-19 20:21:28 +00:00
|
|
|
<ShipItem {cost} {mass}>
|
2020-07-28 18:55:08 +00:00
|
|
|
<div class="weapon_row">
|
2021-06-13 15:36:59 +00:00
|
|
|
<input
|
|
|
|
type="button"
|
|
|
|
class="button small red remove"
|
|
|
|
value="remove"
|
|
|
|
on:click={remove}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<svelte:component
|
|
|
|
this={weapon_component[weapon_type]}
|
|
|
|
{...weapon}
|
|
|
|
on:change={update}
|
|
|
|
/>
|
|
|
|
</div>
|
2020-07-19 20:21:28 +00:00
|
|
|
</ShipItem>
|
|
|
|
|
|
|
|
<script>
|
2021-06-13 15:36:59 +00:00
|
|
|
import { getContext } from "svelte";
|
|
|
|
|
|
|
|
import Arc from "../Weapons/Arc.svelte";
|
|
|
|
import { weapon_cost_mass } from "../../dux/weapons/rules.js";
|
|
|
|
import _ from "lodash";
|
|
|
|
import { createEventDispatcher } from "svelte";
|
|
|
|
import ShipItem from "../ShipItem/index.svelte";
|
|
|
|
import Field from "../Field/index.svelte";
|
|
|
|
import Beam from "./Beam/index.svelte";
|
|
|
|
import Submunition from "./Submunition/index.svelte";
|
|
|
|
import PointDefenceSystem from "./PointDefenceSystem/index.svelte";
|
|
|
|
import Scattergun from "./Scattergun/index.svelte";
|
|
|
|
import Needle from "./Needle/index.svelte";
|
|
|
|
import dux from "../../dux";
|
2020-07-27 19:26:07 +00:00
|
|
|
|
2020-07-27 20:19:08 +00:00
|
|
|
const weapon_component = {
|
|
|
|
beam: Beam,
|
2021-06-13 15:36:59 +00:00
|
|
|
submunition: Submunition,
|
|
|
|
pds: PointDefenceSystem,
|
2020-07-27 22:17:55 +00:00
|
|
|
scattergun: Scattergun,
|
|
|
|
needle: Needle,
|
2020-07-27 20:19:08 +00:00
|
|
|
};
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
export let weapon = {};
|
|
|
|
export let id;
|
|
|
|
export let cost;
|
|
|
|
export let mass;
|
|
|
|
export let ship = getContext("ship");
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
let weapon_type = weapon.weapon_type;
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
const remove = () => ship?.dispatch_action("remove_weapon", id);
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
const update = ({ detail }) => {
|
|
|
|
ship?.dispatch_action("set_weapon", {
|
|
|
|
id,
|
|
|
|
weapon_type,
|
|
|
|
...detail,
|
|
|
|
});
|
|
|
|
};
|
2020-07-19 20:21:28 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
2021-06-13 15:36:59 +00:00
|
|
|
.weapon {
|
2020-07-19 20:21:28 +00:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2021-06-13 15:36:59 +00:00
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
.weapon > * {
|
2020-07-19 20:21:28 +00:00
|
|
|
margin-right: 2em;
|
2021-06-13 15:36:59 +00:00
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
.arcs {
|
2020-07-19 20:21:28 +00:00
|
|
|
display: grid;
|
|
|
|
grid-template-rows: 1fr 1fr 1fr 1fr;
|
|
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
|
|
align-items: center;
|
|
|
|
justify-items: center;
|
|
|
|
width: 6em;
|
2021-06-13 15:36:59 +00:00
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
.arc input {
|
|
|
|
margin: 0px;
|
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
.arc.F {
|
|
|
|
grid-column: 2 / span 2;
|
|
|
|
grid-row: 1;
|
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
.arc.FS {
|
|
|
|
grid-column: 1;
|
|
|
|
grid-row: 1 / span 2;
|
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
.arc.FP {
|
|
|
|
grid-column: 4;
|
|
|
|
grid-row: 1 / span 2;
|
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
.arc.AS {
|
|
|
|
grid-column: 1;
|
|
|
|
grid-row: 3 / span 2;
|
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
.arc.AP {
|
|
|
|
grid-column: 4;
|
|
|
|
grid-row: 3 / span 2;
|
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
.arc.A {
|
|
|
|
grid-column: 2 / span 2;
|
|
|
|
grid-row: 4;
|
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2021-06-13 15:36:59 +00:00
|
|
|
.add-weapon {
|
2020-07-19 20:21:28 +00:00
|
|
|
display: block;
|
2021-06-13 15:36:59 +00:00
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2020-07-28 18:55:08 +00:00
|
|
|
.weapon_row {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
|
2020-07-30 22:12:10 +00:00
|
|
|
.weapon_row > :global(*) {
|
|
|
|
margin-right: 2em;
|
|
|
|
}
|
2020-07-19 20:21:28 +00:00
|
|
|
</style>
|