Identification

src/lib/components/GlobalStyle.svelte

@@ -115,4 +115,15 @@
   select:focus {
     border: 1px solid var(--indigo-dye);
   }
+
+  input:not([type="checkbox"]) {
+    border: 0px;
+    border-bottom: 1px solid var(--indigo-dye);
+    border-radius: 0px;
+    height: calc(
+      1rem * var(--line-height) + var(--form-element-spacing-vertical) * 1
+    );
+    padding: 0 0.5rem;
+    text-align: center;
+  }
 </style>

src/lib/components/ShipEdit/Identification.story.svelte

@@ -0,0 +1,17 @@
+<Hst.Story title="ShipEdit/Identification">
+  <Identification
+    shipClass="Demeter"
+    shipType="Destroyer"
+    isCarrier={false}
+    reqs={{
+      cost: 12,
+      mass: 13,
+      usedMass: 9,
+    }}
+  />
+</Hst.Story>
+
+<script lang="ts">
+  export let Hst;
+  import Identification from "./Identification.svelte";
+</script>

src/lib/components/ShipEdit/Identification.svelte

@@ -0,0 +1,54 @@
+<div class="identification-row">
+  <div>
+    <Field label="ship class" bind:value={shipClass} />
+    <Field label="ship type">
+      <select bind:value={shipType}>
+        {#each shipTypes as name (name)}
+          <option>{name}</option>
+        {/each}
+      </select>
+    </Field>
+  </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 = {};
+
+  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?.setShipType?.(shipType);
+  $: api?.dispatch?.setShipClass?.(shipClass);
+</script>
+
+<style>
+  div {
+    display: flex;
+    align-items: end;
+    gap: 2em;
+  }
+  .identification-row {
+    display: flex;
+    align-items: start;
+  }
+
+  .identification-row :global(> *:first-child) {
+    flex: 1;
+  }
+</style>

src/lib/components/ShipEdit/Identification/Identification.stories.svelte.todo

@@ -1,22 +0,0 @@
-<Meta title="ShipEdit/Identification" component={Identification} argTypes={{}} />
-
-<Story name="Primary" args={{}} />
-
-<Template let:args>
-  <div style="width: 50em">
-    <Identification {...args} />
-  </div>
-</Template>
-
-<script>
-  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-  import { action } from "@storybook/addon-actions";
-
-  import { setContext } from "svelte";
-
-  import Identification from "./index.svelte";
-
-  setContext("ship", {
-    dispatch: (type, detail) => action(type)(detail),
-  });
-</script>

src/lib/components/ShipEdit/Identification/ShipCost.svelte

@@ -22,18 +22,18 @@
 <script>
   import { base } from "$app/paths";
   import { getContext } from "svelte";
-  import Field from "$lib/components/Field/index.svelte";
+  import Field from "$lib/components/Field.svelte";
 
-  export let ship = getContext("ship");
+  export let api = getContext("api");
 
   export let mass = 10;
   export let cost = 10;
-  export let usedMass = 5;
+  export let usedMass = 10;
 
   $: massUnused = mass - usedMass;
   $: withinBudget = massUnused >= 0;
 
-  $: ship.dispatch(ship.actions.setShipMass(mass));
+  $: api?.dispatch?.setShipMass?.(mass);
 
   /*   const change_tonnage = ({ target: { value } }) => */
   /*     ship.dispatch(ship.actions.set_ship_mass(parseInt(value))); */

src/lib/components/ShipEdit/Identification/index.svelte

@@ -1,40 +0,0 @@
-<div>
-  <Field label="ship class" bind:value={shipClass} />
-  <Field label="ship type">
-    <select bind:value={shipType}>
-      {#each shipTypes as name (name)}
-        <option>{name}</option>
-      {/each}
-    </select>
-  </Field>
-</div>
-
-<script>
-  import { getContext } from "svelte";
-
-  import Field from "$lib/components/Field/index.svelte";
-  import { candidateShipTypes } from "./shipTypes.js";
-
-  export let shipClass = "";
-  export let shipType = "";
-  export let mass = 10;
-  export let isCarrier = false;
-
-  const ship = getContext("ship");
-
-  $: shipTypes = candidateShipTypes(mass, isCarrier).map(({ name }) => name);
-
-  $: if (shipTypes.length > 0 && !shipTypes.includes(shipType))
-    shipType = shipTypes[0];
-
-  $: ship.dispatch(ship.actions.setShipType(shipType));
-  $: ship.dispatch(ship.actions.setShipClass(shipClass));
-</script>
-
-<style>
-  div {
-    display: flex;
-    align-items: end;
-    gap: 2em;
-  }
-</style>