carrier component

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

@@ -0,0 +1,8 @@
+<Hst.Story title="ShipEdit/Carrier">
+  <Carrier />
+</Hst.Story>
+
+<script>
+  export let Hst;
+  import Carrier from "./Carrier.svelte";
+</script>

src/lib/components/ShipEdit/Carrier.svelte

@@ -0,0 +1,34 @@
+<Section label="carrier">
+  <ShipItem {...reqs}>
+    <Field label="bays">
+      <input class="short" type="number" min="0" bind:value={bays} />
+    </Field>
+  </ShipItem>
+
+  {#each squadrons as squadron, id (id)}
+    <Squadron {...squadron} id={id + 1} />
+  {/each}
+</Section>
+
+<script lang="ts">
+  import { getContext } from "svelte";
+
+  import Field from "$lib/components/Field.svelte";
+  import ShipItem from "$lib/components/ShipItem.svelte";
+  import Section from "$lib/components/Section.svelte";
+  import Squadron from "./Carrier/Squadron.svelte";
+
+  export let bays = 0;
+  export let reqs = { cost: 0, mass: 0 };
+  export let squadrons = [];
+
+  export let api = getContext("api");
+
+  $: api?.dispatch?.setCarrierBays?.(bays);
+</script>
+
+<style>
+  input {
+    width: 5em;
+  }
+</style>

src/lib/components/ShipEdit/Carrier/Squadron.svelte

@@ -1,4 +1,5 @@
 <ShipItem {...reqs}>
+  <!--
   <Field label={`squadron ${id}`}>
     <select bind:value={type}>
       {#each types as type (type)}
@@ -6,23 +7,24 @@
       {/each}
     </select>
   </Field>
+    -->
 </ShipItem>
 
 <script>
   import { getContext } from "svelte";
 
-  import Section from "$lib/components/Section/index.svelte";
-  import Field from "$lib/components/Field/index.svelte";
-  import ShipItem from "$lib/components/ShipItem/index.svelte";
-  import { squadronTypes } from "$lib/shipDux/carrier";
+  import Section from "$lib/components/Section.svelte";
+  import Field from "$lib/components/Field.svelte";
+  import ShipItem from "$lib/components/ShipItem.svelte";
+  //  import { squadronTypes } from "$lib/shipDux/carrier";
 
   const types = squadronTypes.map(({ type }) => type);
 
   export let id = 1;
-  export let type = types[0].type;
+  export let type = ""; //types[0].type;
   export let reqs = {};
 
-  export let { dispatch } = getContext("ship");
+  export let { dispatch } = getContext("api");
 
   $: console.log(type);
   $: dispatch.setSquadronType({ type, id });

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

@@ -1,34 +0,0 @@
-<Section label="carrier">
-  <ShipItem {...reqs}>
-    <Field label="bays">
-      <input class="short" type="number" min="0" bind:value={bays} />
-    </Field>
-  </ShipItem>
-
-  {#each squadrons as squadron,id (id)}
-    <Squadron {...squadron} id={id+1} />
-  {/each}
-</Section>
-
-<script lang="ts">
-import { getContext } from 'svelte';
-    import Field from '$lib/components/Field/index.svelte';
-    import ShipItem from '$lib/components/ShipItem/index.svelte';
-    import Section from '$lib/components/Section/index.svelte';
-    import Squadron from './Squadron.svelte';
-
-    export let bays = 0;
-    export let reqs = {};
-export let squadrons = [];
-
-const { dispatch } = getContext('ship');
-
-$: dispatch.setCarrierBays(bays);
-
-</script>
-
-<style>
-input {
-    width: 5em;
-}
-</style>