FTL component

histoire.config.js

@@ -3,4 +3,5 @@ import { HstSvelte } from "@histoire/plugin-svelte";
 
 export default defineConfig({
     plugins: [HstSvelte()],
+    //    setupFile: "./src/histoire.setup.js",
 });

src/histoire.setup.js

@@ -0,0 +1 @@
+import "./lib/style/index.js";

src/lib/components/Field.svelte

@@ -10,7 +10,7 @@
 <script>
   export let label = "";
   export let value = "";
-  export let placeholder;
+  export let placeholder = label;
 </script>
 
 <style>

src/lib/components/Ftl.story.svelte

@@ -0,0 +1,17 @@
+<Hst.Story>
+  <Ftl {api} />
+</Hst.Story>
+
+<script>
+  export let Hst;
+  import { logEvent } from "histoire/client";
+
+  const api = {
+    dispatch: {
+      setFtl: (ftl) => logEvent("setFtl", { ftl }),
+    },
+  };
+
+  import Ftl from "./Ftl.svelte";
+  import GlobalStyle from "./GlobalStyle.svelte";
+</script>

src/lib/components/Ftl.svelte

@@ -1,4 +1,4 @@
-<ShipItem {mass} {cost}>
+<ShipItem {...reqs}>
   <Field label="FTL drive">
     {#each types as t (t)}
       <label
@@ -9,21 +9,19 @@
   </Field>
 </ShipItem>
 
-<script>
+<script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  import { getContext } from "svelte";
 
-  import ShipItem from "../ShipItem/index.svelte";
+  import ShipItem from "./ShipItem.svelte";
-  import Field from "../Field/index.svelte";
+  import Field from "./Field.svelte";
 
   export let type = "none";
-  export let cost = 0;
+  export let reqs = { mass: 0, cost: 0 };
-  export let mass = 0;
+  export let api = getContext("api");
-
-  const dispatch = createEventDispatcher();
-
-  const change = () => dispatch("change_ftl", type);
 
   const types = ["none", "standard", "advanced"];
+
+  $: api.dispatch.setFtl(type);
 </script>
 
 <style>

src/lib/components/GlobalStyle.svelte

@@ -0,0 +1,80 @@
+<script>
+  import "@picocss/pico";
+</script>
+
+<style global>
+  @font-face {
+    font-family: "Faktos";
+    font-style: normal;
+    src: url(/fonts/Faktos.ttf) format("truetype");
+  }
+  @font-face {
+    font-family: "Dosis";
+    src: url(/fonts/dosis/Dosis-VariableFont_wght.ttf) format("truetype");
+  }
+
+  :root {
+    --main-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;
+    --font-scale-11: 1.333rem;
+    --font-scale-12: 1.777rem;
+    --font-scale-13: 2.369rem;
+    --font-scale-14: 3.157rem;
+    --font-scale-15: 4.209rem;
+
+    --oxford-blue: hsla(226, 60%, 10%, 1);
+    --royal-blue-dark: hsla(218, 100%, 16%, 1);
+    --indigo-dye: hsla(209, 95%, 24%, 1);
+    --cg-blue: hsla(193, 80%, 35%, 1);
+    --white: hsla(20, 60%, 99%, 1);
+
+    --main-width: 60em;
+  }
+
+  input.short {
+    width: 5em !important;
+  }
+
+  small {
+    font-size: var(--font-scale-9);
+  }
+
+  h1 {
+    margin: 0px;
+    padding: 0px;
+    font-size: var(--font-scale-14);
+  }
+
+  h2 {
+    font-size: var(--font-scale-12);
+  }
+
+  body {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: var(--white);
+    color: #333;
+    margin: 0;
+    padding: 8px;
+    box-sizing: border-box;
+    font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  }
+
+  a {
+    color: rgb(0, 100, 200);
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  a:visited {
+    color: rgb(0, 80, 160);
+  }
+</style>

src/lib/style/index.js

@@ -1,5 +1,5 @@
 import "../../../static/fonts/faktos.css";
 import "../../../static/fonts/dosis/dosis.css";
 import "../../../static/global.css";
-import 'chota';
+import "@picocss/pico/css/pico.css";
 import "./index.css";