Propulsion

src/lib/components/GlobalStyle.svelte

@@ -16,6 +16,8 @@
   :root {
     --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
       Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    --font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
+      Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
     --font-scale-9: 0.75rem;
     --font-scale-10: 1em;

src/lib/components/Section.svelte

@@ -22,5 +22,6 @@
   hr {
     flex: 1;
     background: #333;
+    border-top: 1px solid black;
   }
 </style>

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

@@ -10,7 +10,7 @@
   {/each}
 </Section>
 
-<script>
+<script lang="ts">
 import { getContext } from 'svelte';
     import Field from '$lib/components/Field/index.svelte';
     import ShipItem from '$lib/components/ShipItem/index.svelte';

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

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

src/lib/components/ShipEdit/Propulsion.svelte

@@ -0,0 +1,15 @@
+<Section label="propulsion">
+  <Drive {...propulsion.drive} />
+  <Ftl {...propulsion.ftl} />
+</Section>
+
+<script lang="ts">
+  import Section from "$lib/components/Section.svelte";
+  import Drive from "./Propulsion/Engine.svelte";
+  import Ftl from "./Propulsion/Ftl.svelte";
+
+  export let propulsion = {
+    drive: {},
+    ftl: {},
+  };
+</script>

src/lib/components/ShipEdit/Propulsion/Engine.svelte

@@ -25,7 +25,7 @@
   export let rating = 0;
   export let api = getContext("api");
 
-  $: api.dispatch.setEngine({ rating, advanced });
+  $: api?.dispatch?.setEngine({ rating, advanced });
 </script>
 
 <style>
@@ -48,7 +48,7 @@
     border-bottom: 1px solid var(--indigo-dye);
     border-radius: 0px;
     height: calc(
-      1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2
+      1rem * var(--line-height) + var(--form-element-spacing-vertical) * 1
     );
     padding: 0 0.5rem;
     text-align: center;

src/lib/components/ShipEdit/Propulsion/Ftl.svelte

@@ -21,7 +21,7 @@
 
   const types = ["none", "standard", "advanced"];
 
-  $: api.dispatch.setFtl(type);
+  $: api?.dispatch.setFtl(type);
 </script>
 
 <style>

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

@@ -1,12 +0,0 @@
-<Section label="propulsion">
-    <Drive { ...propulsion.drive  } />
-    <Ftl { ...propulsion.ftl } />
-</Section>
-
-<script>
-  import Section from "$lib/components/Section/index.svelte";
-  import Drive from './Drive/index.svelte';
-  import Ftl from './Ftl.svelte';
-
-  export let propulsion = {};
-</script>