aotds-docks/src/lib/components/ShipSpecs/Identification.svelte

<div>
  <Field
    label="ship class"
    value={general.ship_class}
    on:change={change_class}
  />

  <Field label="ship type">
    <select value={ship_type} on:change={change_ship_type}>
      {#each ship_types as type (type)}
        <option>{type}</option>
      {/each}
    </select>
  </Field>
</div>

<script>
  import { getContext } from "svelte";

  import Field from "$lib/components/Field/index.svelte";
  import { candidate_ship_types } from "../../dux/ship_types";

  export let ship = getContext("ship");
  let general;
  $: general = $ship.general;

  const change_class = (event) =>
    ship.dispatch(ship.actions.set_ship_class(event.target.value));

  let ship_type;
  $: ship_type = $ship.general.ship_type;

  const change_ship_type = ({ target: { value } }) =>
    ship.dispatch.set_ship_type(value);

  let ship_types;
  $: ship_types = candidate_ship_types(
    $ship.general.mass,
    $ship.carrier.bays > 0
  ).map(({ name }) => name);
</script>

<style>
  div {
    display: flex;
    align-items: end;
    gap: 2em;
  }
</style>