Engine component

src/lib/components/Ftl.svelte

@@ -1,32 +0,0 @@
-<ShipItem {...reqs}>
-  <Field label="FTL drive">
-    {#each types as t (t)}
-      <label
-        ><input type="radio" bind:group={type} value={t} />
-        {t}
-      </label>
-    {/each}
-  </Field>
-</ShipItem>
-
-<script lang="ts">
-  import { getContext } from "svelte";
-
-  import ShipItem from "./ShipItem.svelte";
-  import Field from "./Field.svelte";
-
-  export let type = "none";
-  export let reqs = { mass: 0, cost: 0 };
-  export let api = getContext("api");
-
-  const types = ["none", "standard", "advanced"];
-
-  $: api.dispatch.setFtl(type);
-</script>
-
-<style>
-  label {
-    display: inline;
-    margin-right: 1em;
-  }
-</style>

src/lib/components/Ftl/stories.js.todo

@@ -1,13 +0,0 @@
-export default {
-  title: "FTL Drive",
-};
-
-import Component from ".";
-import shipStore from "../../stores/ship.js";
-
-export const basic = () => ({
-  Component,
-  props: {
-    ship: shipStore(),
-  },
-});

src/lib/components/GlobalStyle.svelte

@@ -77,4 +77,40 @@
   a:visited {
     color: rgb(0, 80, 160);
   }
+
+  label {
+    display: block;
+  }
+
+  input,
+  button,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0.4em;
+    margin: 0 0 0.5em 0;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+  }
+
+  input:disabled {
+    color: #ccc;
+  }
+
+  input[type="range"] {
+    height: 0;
+  }
+
+  /* input, */
+  /* select { */
+  /*   border: 0px; */
+  /*   border-bottom: 1px solid var(--indigo-dye); */
+  /* } */
+
+  input:focus,
+  select:focus {
+    border: 1px solid var(--indigo-dye);
+  }
 </style>

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

@@ -26,7 +26,7 @@
 
   const ship = getContext("ship");
 
-  $: ship.dispatch(ship.actions.setDrive({ rating, advanced }));
+  $: ship.dispatch(ship.actions.setEngine({ rating, advanced }));
 </script>
 
 <style>

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

@@ -0,0 +1,17 @@
+<Hst.Story title="ShipEdit/Propulsion/Engine">
+  <Engine {api} />
+</Hst.Story>
+
+<script>
+  export let Hst;
+  import { logEvent } from "histoire/client";
+
+  const api = {
+    dispatch: {
+      setEngine: (engine) => logEvent("setEngine", { engine }),
+    },
+  };
+
+  import Engine from "./Engine.svelte";
+  import "$lib/components/GlobalStyle.svelte";
+</script>

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

@@ -0,0 +1,56 @@
+<ShipItem {...reqs}>
+  <div>
+    <Field label="thrust rating">
+      <input
+        class="short"
+        type="number"
+        bind:value={rating}
+        min="0"
+        max="20"
+        step="1"
+      />
+    </Field>
+
+    <label><input type="checkbox" bind:checked={advanced} /> advanced</label>
+  </div>
+</ShipItem>
+
+<script>
+  import { getContext } from "svelte";
+  import Field from "$lib/components/Field.svelte";
+  import ShipItem from "$lib/components/ShipItem.svelte";
+
+  export let reqs = { cost: 0, mass: 0 };
+  export let advanced = false;
+  export let rating = 0;
+  export let api = getContext("api");
+
+  $: api.dispatch.setEngine({ rating, advanced });
+</script>
+
+<style>
+  div {
+    display: flex;
+    align-items: end;
+  }
+  label {
+    font-family: var(--main-font-family);
+    margin-left: 2em;
+  }
+  input[type="number"] {
+    width: 5em;
+  }
+  input {
+    margin-bottom: 0px !important;
+  }
+  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) * 2
+    );
+    padding: 0 0.5rem;
+    text-align: center;
+  }
+</style>

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

@@ -1,4 +1,4 @@
-<Hst.Story>
+<Hst.Story title="ShipEdit/Propulsion/Ftl">
   <Ftl {api} />
 </Hst.Story>
 
@@ -13,5 +13,5 @@
   };
 
   import Ftl from "./Ftl.svelte";
-  import GlobalStyle from "./GlobalStyle.svelte";
+  import "$lib/components/GlobalStyle.svelte";
 </script>

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

@@ -9,19 +9,19 @@
   </Field>
 </ShipItem>
 
-<script>
+<script lang="ts">
   import { getContext } from "svelte";
-  import Field from "$lib/components/Field/index.svelte";
-  import ShipItem from "$lib/components/ShipItem/index.svelte";
+
+  import ShipItem from "$lib/components/ShipItem.svelte";
+  import Field from "$lib/components/Field.svelte";
+
+  export let type = "none";
+  export let reqs = { mass: 0, cost: 0 };
+  export let api = getContext("api");
 
   const types = ["none", "standard", "advanced"];
 
-  export let reqs = {};
-  export let type = types[0];
-
-  const ship = getContext("ship");
-
-  $: ship.dispatch.setFtl(type);
+  $: api.dispatch.setFtl(type);
 </script>
 
 <style>