78 lines
1.7 KiB
Svelte
78 lines
1.7 KiB
Svelte
<div class="identification-row">
|
|
<div>
|
|
<Field label="ship class" bind:value={shipClass} />
|
|
<Field suffix>
|
|
<select bind:value={shipType}>
|
|
{#each shipTypes as name (name)}
|
|
<option>{name}</option>
|
|
{/each}
|
|
</select>
|
|
<label class="active">ship type</label>
|
|
<i>arrow_drop_down</i>
|
|
</Field>
|
|
<label class="switch icon">
|
|
<div>carrier</div>
|
|
<input type="checkbox" bind:checked={isCarrier} />
|
|
<span>
|
|
<i>airplanemode_inactive</i>
|
|
<i>airplanemode_active</i>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<ShipCost {...reqs} />
|
|
</div>
|
|
|
|
<script>
|
|
import { getContext } from "svelte";
|
|
|
|
import Field from "$lib/components/Field.svelte";
|
|
import { candidateShipTypes } from "./Identification/shipTypes.js";
|
|
import ShipCost from "./Identification/ShipCost.svelte";
|
|
|
|
export let shipClass = "";
|
|
export let shipType = "";
|
|
export let isCarrier = false;
|
|
export let reqs = {};
|
|
|
|
$: console.log("in the comp", isCarrier, shipClass);
|
|
|
|
export let api = getContext("api");
|
|
|
|
$: shipTypes = candidateShipTypes(reqs.mass, isCarrier).map(
|
|
({ name }) => name
|
|
);
|
|
|
|
$: if (shipTypes.length > 0 && !shipTypes.includes(shipType))
|
|
shipType = shipTypes[0];
|
|
|
|
$: api?.dispatch?.updateIdentification?.({ shipType, shipClass });
|
|
|
|
$: api?.dispatch.setCarrier?.(isCarrier);
|
|
</script>
|
|
|
|
<style>
|
|
div {
|
|
display: flex;
|
|
align-items: end;
|
|
gap: 2em;
|
|
}
|
|
.identification-row {
|
|
display: flex;
|
|
align-items: start;
|
|
}
|
|
select {
|
|
min-width: 10em;
|
|
}
|
|
|
|
.identification-row :global(> *:first-child) {
|
|
flex: 1;
|
|
}
|
|
label div {
|
|
font-size: var(--font-scale-10);
|
|
margin-right: 1em;
|
|
}
|
|
label.switch {
|
|
margin-left: 2em;
|
|
}
|
|
</style>
|