back to storybook

.storybook/main.js

@@ -0,0 +1,34 @@
+const path = require("path");
+const preprocess = require("svelte-preprocess");
+
+module.exports = {
+  staticDirs: ["../static", "../pictures"],
+  stories: [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.svelte",
+    "../src/**/stories.svelte",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-svelte-csf",
+  ],
+  framework: "@storybook/svelte",
+  svelteOptions: {
+    preprocess: preprocess(),
+  },
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve?.alias,
+          $app: path.resolve("./fake/app"),
+          "\\$lib": path.resolve(__dirname, "../src/lib/"),
+          $lib: path.resolve(__dirname, "../src/lib/"),
+        },
+      },
+    };
+  },
+};

.storybook/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

.storybook/preview.js

@@ -0,0 +1,11 @@
+import "$lib/style/index.js";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

.vitebook/App.svelte

@@ -1,5 +1,6 @@
+<svelte:component this={component} />
+
 <script>
+  import "$lib/style/index.js";
   export let component;
 </script>
-
-<svelte:component this={component} />

.vitebook/config.js

@@ -1,30 +1,30 @@
-import { svelte } from '@sveltejs/vite-plugin-svelte';
-import { clientPlugin, defineConfig } from '@vitebook/client/node';
-import { defaultThemePlugin } from '@vitebook/theme-default/node';
-import preprocess from 'svelte-preprocess';
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { clientPlugin, defineConfig } from "@vitebook/client/node";
+import { defaultThemePlugin } from "@vitebook/theme-default/node";
+import preprocess from "svelte-preprocess";
 
 export default defineConfig({
-  include: ['src/**/*.story.svelte'],
+  include: ["src/**/*.story.svelte"],
   alias: {
-    $app: '/node_modules/@sveltejs/kit/assets/app',
-    $lib: '/src/lib',
+    $app: "/node_modules/@sveltejs/kit/assets/app",
+    $lib: "/src/lib",
   },
   plugins: [
-    clientPlugin({ appFile: 'App.svelte' }),
+    clientPlugin({ appFile: "App.svelte" }),
     defaultThemePlugin(),
     svelte({
       compilerOptions: {
-        hydratable: true
+        hydratable: true,
       },
-      extensions: ['.svelte'],
+      extensions: [".svelte"],
       // Consult https://github.com/sveltejs/svelte-preprocess for more information
       // about preprocessors.
       preprocess: preprocess(),
     }),
   ],
   site: {
-    title: '',
-    description: '',
+    title: "",
+    description: "",
     /** @type {(import('@vitebook/theme-default/node').DefaultThemeConfig} */
     theme: {},
   },

.vitebook/theme/index.js

@@ -1,3 +1,3 @@
-import Theme from '@vitebook/theme-default';
+import Theme from "@vitebook/theme-default";
 
 export default Theme;

package.json

@@ -7,6 +7,7 @@
     "preview": "svelte-kit preview",
     "lint": "prettier --check . && eslint --ignore-path .gitignore .",
     "format": "prettier --write .",
+    "storybook": "storybook-server",
     "vitebook:dev": "vitebook dev",
     "vitebook:build": "vitebook build",
     "vitebook:preview": "vitebook preview"
@@ -28,14 +29,21 @@
   },
   "type": "module",
   "dependencies": {
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "6.4.19",
+    "@storybook/addon-svelte-csf": "^1.1.0",
+    "@storybook/svelte": "^6.4.19",
     "@sveltejs/adapter-node": "^1.0.0-next.0",
     "@yanick/updeep": "link:/home/yanick/work/javascript/updeep",
     "lodash": "^4.17.21",
     "redux": "^4.1.2",
     "reselect": "^4.1.5",
     "rollup-plugin-analyzer": "^4.0.0",
+    "svelte-knobby": "^0.3.4",
     "ts-action": "^11.0.0",
-    "updux": "link:/home/yanick/work/javascript/updux/"
+    "updux": "link:/home/yanick/work/javascript/updux/",
+    "webpack": "5"
   },
   "prettier": {
     "svelteSortOrder": "options-markup-scripts-styles",

src/lib/components/App-original.svelte

@@ -1,7 +1,5 @@
 <nav>
-  <button class="button is-danger" type="button" on:click={reset}
-    >reset</button
-  >
+  <button class="button is-danger" type="button" on:click={reset}>reset</button>
 
   <div class="spacer" />
 
@@ -15,9 +13,7 @@
       <button class="button" on:click={() => set_output("json")}>json</button>
     </p>
     <p class="control">
-      <button class="button" on:click={() => set_output("print")}
-        >print</button
-      >
+      <button class="button" on:click={() => set_output("print")}>print</button>
     </p>
   </div>
 </nav>
@@ -65,12 +61,7 @@
       <AddWeapon />
 
       {#each weapons as weapon (weapon.id)}
-        <Weapon
-          {weapon}
-          id={weapon.id}
-          cost={weapon.cost}
-          mass={weapon.mass}
-        />
+        <Weapon {weapon} id={weapon.id} cost={weapon.cost} mass={weapon.mass} />
       {/each}
     </Section>
 

src/lib/components/App.svelte

@@ -2,10 +2,8 @@
 <Header />
 
 <script>
-import Ribbon from './Ribbon.svelte';
-import Header from './Header.svelte';
-
-
+  import Ribbon from "./Ribbon.svelte";
+  import Header from "./Header.svelte";
 </script>
 
 <style>

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

@@ -0,0 +1,14 @@
+<Carrier />
+
+<script>
+  import Carrier from "./index.svelte";
+
+  const props = {
+    bays: 3,
+    squadrons: [
+      { id: 1, type: "standard", ftl: false, nbr_fighters: 6 },
+      { id: 2, type: "fast", ftl: false, nbr_fighters: 6 },
+      { id: 3, type: "none", ftl: false, nbr_fighters: 6 },
+    ],
+  };
+</script>

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

@@ -1,4 +1,4 @@
-<ShipItem {cost} {mass} >
+<ShipItem {cost} {mass}>
   <Field label={`squadron ${id}`}>
     <select bind:value={type}>
       {#each types as type (type)}
@@ -9,30 +9,29 @@
 </ShipItem>
 
 <script>
-  import {getContext } from 'svelte';
+  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 dux from '$lib/dux/carrier';
-  import squadron_types from '$lib/dux/carrier/squadron_types';
+  import dux from "$lib/dux/carrier";
+  import squadron_types from "$lib/dux/carrier/squadron_types";
 
-  const types = squadron_types.map( ({type}) => type );
+  const types = squadron_types.map(({ type }) => type);
 
   export let id = 1;
   export let type = "standard";
   export let ftl = false;
-  export let cost =0;
+  export let cost = 0;
   export let mass = 0;
 
-  export let ship = getContext('ship');
-
-  $: ship?.dispatch_action('set_squadron',{ id, type, });
+  export let ship = getContext("ship");
 
+  $: ship?.dispatch_action("set_squadron", { id, type });
 </script>
 
 <style>
-div {
-  background-color: red;
-}
+  div {
+    background-color: red;
+  }
 </style>

src/lib/components/Carrier/index.svelte

@@ -1,3 +1,4 @@
+<!--
 <Section label="carrier">
   <ShipItem {cost} {mass}>
     <Field label="bays">
@@ -9,15 +10,18 @@
     <Squadron {...squad} />
   {/each}
 </Section>
+-->
+
+Hey!
 
 <script>
   import { getContext } from "svelte";
 
-  import Section from "../Section/index.svelte";
-  import Field from "../Field/index.svelte";
-  import ShipItem from "../ShipItem/index.svelte";
-  import Squadron from "./Squadron/index.svelte";
-  import dux from "../../dux/carrier";
+  /* import Section from "../Section/index.svelte"; */
+  /* import Field from "../Field/index.svelte"; */
+  /* import ShipItem from "../ShipItem/index.svelte"; */
+  //  import Squadron from "./Squadron/index.svelte";
+  //  import dux from "../../dux/carrier";
 
   export let bays = 0;
   export let squadrons = [];
@@ -26,6 +30,5 @@
 
   export let ship = getContext("ship");
 
-  $: ship?.dispatch_action('set_carrier_bays',bays);
-
+  $: ship?.dispatch_action("set_carrier_bays", bays);
 </script>

src/lib/components/Carrier/stories.js

@@ -1,20 +1,20 @@
-import { action } from '@storybook/addon-actions';
+import { action } from "@storybook/addon-actions";
 
-import Carrier from './index.svelte';
+import Carrier from "./index.svelte";
 
 export default {
-    title: 'Carrier',
+  title: "Carrier",
 };
 
 export const basic = () => ({
-    Component: Carrier,
-    props: {
-        bays: 3,
-        squadrons: [
-            { id: 1, type: "standard", ftl: false, nbr_fighters: 6 },
-            { id: 2, type: "fast", ftl: false, nbr_fighters: 6 },
-            { id: 3, type: "none", ftl: false, nbr_fighters: 6 },
-        ],
-        ship_change: action('ship_change'),
-    },
-})
+  Component: Carrier,
+  props: {
+    bays: 3,
+    squadrons: [
+      { id: 1, type: "standard", ftl: false, nbr_fighters: 6 },
+      { id: 2, type: "fast", ftl: false, nbr_fighters: 6 },
+      { id: 3, type: "none", ftl: false, nbr_fighters: 6 },
+    ],
+    ship_change: action("ship_change"),
+  },
+});

src/lib/components/Cost.story.svelte

@@ -1,5 +1,5 @@
-<Cost cost={12}/>
+<Cost cost={12} />
 
 <script>
-import Cost from './Cost.svelte';
+  import Cost from "./Cost.svelte";
 </script>

src/lib/components/Cost.svelte

@@ -5,5 +5,8 @@
 </script>
 
 <style>
-  div:after { content: '\00A4'; margin-left: 0.5em; }
+  div:after {
+    content: "\00A4";
+    margin-left: 0.5em;
+  }
 </style>

src/lib/components/CostMass.svelte

@@ -1,21 +1,29 @@
-<div class="mass">{ mass }</div>
-<div class="cost">{ cost }</div>
+<div class="mass">{mass}</div>
+<div class="cost">{cost}</div>
 
 <script>
   export let mass;
   export let cost;
-
 </script>
 
 <style>
-  .cost { grid-column: 3; }
-  .mass { grid-column: 2; }
+  .cost {
+    grid-column: 3;
+  }
+  .mass {
+    grid-column: 2;
+  }
   img {
     width: 0.75em;
   }
-  .cost:after { content: '\00A4'; margin-left: 0.5em; }
-  .mass:after { content: url("/mass.svg"); width: 0.75em; display:
-  inline-block; margin-left: 0.5em; }
-
-
+  .cost:after {
+    content: "\00A4";
+    margin-left: 0.5em;
+  }
+  .mass:after {
+    content: url("/mass.svg");
+    width: 0.75em;
+    display: inline-block;
+    margin-left: 0.5em;
+  }
 </style>

src/lib/components/Engine/Engine.stories.svelte

@@ -0,0 +1,33 @@
+<Meta
+  title="Engine"
+  component={Engine}
+  argTypes={{
+    rating: { type: "number", defaultValue: 6 },
+    advanced: { type: "boolean", defaultValue: false },
+    reqs: { type: "object", defaultValue: { cost: 6, mass: 3 } },
+  }}
+/>
+
+<Story name="Primary" args={{}} />
+
+<Template let:args>
+  <div style="width: 50em">
+    <Engine {...args} />
+  </div>
+</Template>
+
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import { action } from "@storybook/addon-actions";
+
+  import { setContext } from "svelte";
+
+  import Engine from "./index.svelte";
+
+  setContext("ship", {
+    dispatch: (type, detail) => action(type)(detail),
+  });
+
+  let advanced = false;
+  let rating = 0;
+</script>

src/lib/components/Engine/index.svelte

@@ -1,40 +1,39 @@
-<ShipItem {cost} {mass}>
-
-<div>
-<Field label="thrust rating">
-    <input type="number" bind:value={ rating }
-        min="0" max="20" step="1" />
-</Field>
-
-<label><input type="checkbox" bind:checked={advanced} /> advanced</label>
-</div>
-
+<ShipItem {...reqs}>
+  <div>
+    <Field label="thrust rating">
+      <input 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 { createEventDispatcher } from 'svelte';
-
-  import Field from '$lib/components/Field/index.svelte';
-  import ShipItem from '$lib/components/ShipItem/index.svelte';
-
-    export let cost;
-    export let mass;
-    export let advanced = false;
-    export let rating = 0;
+  import { getContext } from "svelte";
+  import Field from "$lib/components/Field/index.svelte";
+  import ShipItem from "$lib/components/ShipItem/index.svelte";
 
-    const dispatch = createEventDispatcher();
+  export let reqs = {};
+  export let advanced = false;
+  export let rating = 0;
 
-console.log(advanced);
-    $: dispatch( 'change_engine', { rating, advanced } );
+  const ship = getContext("ship") || {
+    dispatch: (...args) => console.log(args),
+  };
 
+  $: ship.dispatch("setEngine", { rating, advanced });
 </script>
 
 <style>
-div {
+  div {
     display: flex;
     align-items: end;
-}
-label { margin-left: 2em; }
-  input[type="number"] { width: 5em; }
+  }
+  label {
+    font-family: var(--main-font-family);
+    margin-left: 2em;
+  }
+  input[type="number"] {
+    width: 5em;
+  }
 </style>

src/lib/components/Field/BasicStory.svelte

@@ -1,5 +1,5 @@
 <Field label="the label" />
 
 <script>
-import Field from './index.svelte';
+  import Field from "./index.svelte";
 </script>

src/lib/components/Field/index.svelte

@@ -1,29 +1,32 @@
 <div>
-{#if label}
-<label>{label}</label>
-{/if}
-<slot>
-<input type="text" {placeholder} {value} on:change />
-</slot>
+  {#if label}
+    <label>{label}</label>
+  {/if}
+  <slot>
+    <input type="text" {placeholder} {value} on:change />
+  </slot>
 </div>
 
 <script>
-    export let label = "";
-    export let value = "";
-    export let placeholder;
+  export let label = "";
+  export let value = "";
+  export let placeholder;
 </script>
 
 <style>
+  div {
+    font-family: var(--main-font-family);
+  }
   div > :global(*) {
     margin-left: 1em;
   }
   div > label {
     margin-left: 0em;
   }
-label {
+  label {
     font-size: var(--font-scale-8);
     font-weight: lighter;
     font-family: Dosis;
-    color:  var(--indigo-dye);
-}
+    color: var(--indigo-dye);
+  }
 </style>

src/lib/components/Field/stories.js

@@ -1,12 +1,12 @@
-import Component from './index.svelte';
-import BasicStory from './BasicStory.svelte';
+import Component from "./index.svelte";
+import BasicStory from "./BasicStory.svelte";
 
-import '../../../public/global.css';
+import "../../../public/global.css";
 
 export default {
-    title: 'Field'
+  title: "Field",
 };
 
 export const basic = () => ({
-    Component: BasicStory,
+  Component: BasicStory,
 });

src/lib/components/Firecons.svelte

@@ -1,19 +1,20 @@
 <ShipItem {cost} {mass}>
-    <Field label="firecons">
+  <Field label="firecons">
     <input type="number" class="short" bind:value={nbr} />
-    </Field>
+  </Field>
 </ShipItem>
 
 <script>
-import { createEventDispatcher } from 'svelte';
-  import ShipItem from './ShipItem/index.svelte';
-  import Field from './Field/index.svelte';
+  import { createEventDispatcher } from "svelte";
+  import ShipItem from "./ShipItem/index.svelte";
+  import Field from "./Field/index.svelte";
 
-    export let nbr, cost, mass = (0,0,0);
-
-    const dispatch = createEventDispatcher();
-    $: dispatch( 'change_firecons', nbr);
+  export let nbr,
+    cost,
+    mass = (0, 0, 0);
 
+  const dispatch = createEventDispatcher();
+  $: dispatch("change_firecons", nbr);
 </script>
 
 <style>

src/lib/components/Ftl/index.svelte

@@ -1,35 +1,34 @@
-<script>
-    import { createEventDispatcher } from 'svelte';
-
-    import ShipItem from '../ShipItem/index.svelte';
-    import Field from '../Field/index.svelte';
+<ShipItem {mass} {cost}>
+  <Field label="FTL drive">
+    {#each types as t (t)}
+      <label
+        ><input type="radio" bind:group={type} value={t} on:change={change} />
+        {t}
+      </label>
+    {/each}
+  </Field>
+</ShipItem>
 
-    export let type = 'none';
-    export let cost = 0;
-    export let mass = 0;
+<script>
+  import { createEventDispatcher } from "svelte";
 
-    const dispatch = createEventDispatcher();
+  import ShipItem from "../ShipItem/index.svelte";
+  import Field from "../Field/index.svelte";
 
-    const change = () => dispatch( 'change_ftl', type );
+  export let type = "none";
+  export let cost = 0;
+  export let mass = 0;
 
-    const types = [ 'none', 'standard', 'advanced' ];
+  const dispatch = createEventDispatcher();
 
+  const change = () => dispatch("change_ftl", type);
 
+  const types = ["none", "standard", "advanced"];
 </script>
 
-<ShipItem {mass} {cost}>
-    <Field label="FTL drive">
-
-    {#each types as t (t)}
-        <label><input type="radio" bind:group={type} value={t} 
-            on:change={change} /> {t} </label>
-    {/each}
-    </Field>
-</ShipItem>
-
 <style>
-label {
+  label {
     display: inline;
     margin-right: 1em;
-}
+  }
 </style>

src/lib/components/Ftl/stories.js

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

src/lib/components/Header.svelte

@@ -1,19 +1,21 @@
 <header>
   <h1>The Docks</h1>
-  <h2>a <a
-        href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship builder</h2>
-  </header>
+  <h2>
+    a <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship
+    builder
+  </h2>
+</header>
 
-  <style>
-
-    header {
+<style>
+  header {
     display: flex;
     align-items: baseline;
-      width: var(--main-width);
-      margin-left: auto;
-      margin-right: auto;
-    }
-  h1, h2 {
+    width: var(--main-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
+  h1,
+  h2 {
     font-family: Faktos;
     padding: 0px;
     margin: 0px;
@@ -25,4 +27,4 @@
     padding-left: 2em;
     font-size: var(--font-scale-12);
   }
-  </style>
+</style>

src/lib/components/Hull/Armour/Layer/index.svelte

@@ -1,24 +1,22 @@
-<Field label={ `layer ${layer}` }>
-    <input type="number" min="0" bind:value={rating} />
+<Field label={`layer ${layer}`}>
+  <input type="number" min="0" bind:value={rating} />
 </Field>
 
-
 <script>
-    import { getContext} from 'svelte';
-
-    import Field from '$lib/components/Field/index.svelte';
+  import { getContext } from "svelte";
 
-    export let layer = 1;
-    export let rating = 0;
+  import Field from "$lib/components/Field/index.svelte";
 
-    const ship = getContext('ship');
+  export let layer = 1;
+  export let rating = 0;
 
-    $: ship?.dispatch_action( 'set_armour_layer', {layer,rating} );
+  const ship = getContext("ship");
 
+  $: ship?.dispatch_action("set_armour_layer", { layer, rating });
 </script>
 
 <style>
   input {
     width: 5em;
   }
-  </style>
+</style>

src/lib/components/Hull/Armour/index.svelte

@@ -1,56 +1,48 @@
-<ShipItem {cost} {mass} >
-
-<div>
-
-<div class="nbr_layers">
-<Field label="armour layers">
-    <input type="number" min="0" bind:value={nbr_layers} />
-</Field>
-</div>
-
-<div class="layers">
-    {#each armour as layer ( layer.layer )}
-        <Layer {...layer} on:ship_change/>
-    {/each}
-</div>
-
-
-</div>
-
+<ShipItem {cost} {mass}>
+  <div>
+    <div class="nbr_layers">
+      <Field label="armour layers">
+        <input type="number" min="0" bind:value={nbr_layers} />
+      </Field>
+    </div>
+
+    <div class="layers">
+      {#each armour as layer (layer.layer)}
+        <Layer {...layer} on:ship_change />
+      {/each}
+    </div>
+  </div>
 </ShipItem>
 
 <script>
-  import { createEventDispatcher} from 'svelte';
-
-    import ShipItem from '$lib/components/ShipItem/index.svelte';
-    import Field from '$lib/components/Field/index.svelte';
-    import Layer from './Layer/index.svelte';
-    import dux from '$lib/dux/structure/armour';
-    import _ from 'lodash';
+  import { createEventDispatcher } from "svelte";
 
-    export let armour = [];
-    export let cost = 0;
-    export let mass = 0;
+  import ShipItem from "$lib/components/ShipItem/index.svelte";
+  import Field from "$lib/components/Field/index.svelte";
+  import Layer from "./Layer/index.svelte";
+  import dux from "$lib/dux/structure/armour";
+  import _ from "lodash";
 
-    $: cost = _.sum( _.map( armour, 'cost' ) );
-    $: mass = _.sum( _.map( armour, 'mass' ) );
+  export let armour = [];
+  export let cost = 0;
+  export let mass = 0;
 
-    let nbr_layers = armour.length;
+  $: cost = _.sum(_.map(armour, "cost"));
+  $: mass = _.sum(_.map(armour, "mass"));
 
-    const dispatch = createEventDispatcher();
+  let nbr_layers = armour.length;
 
-    $: dispatch( 'ship_change', dux.actions.set_armour_nbr_layers(nbr_layers) );
+  const dispatch = createEventDispatcher();
 
+  $: dispatch("ship_change", dux.actions.set_armour_nbr_layers(nbr_layers));
 </script>
 
 <style>
-    .layers {
-        display: flex;
-
-    }
-
-    input {
-      width: 5em;
-    }
+  .layers {
+    display: flex;
+  }
 
+  input {
+    width: 5em;
+  }
 </style>

src/lib/components/Hull/Armour/stories.js

@@ -1,18 +1,18 @@
-import Armour from './index.svelte';
+import Armour from "./index.svelte";
 
 export default {
-    title: "Armour",
+  title: "Armour",
 };
 
 export const basic = () => ({
-    Component: Armour,
-    props: {
-        armour: [
-            { layer: 1, rating: 12, cost: 1, mass: 2 },
-            { layer: 2, rating: 12, cost: 1, mass: 2 },
-        ]
-    },
-    on: {
-        ship_change: ({detail}) => console.log(detail)
-    }
+  Component: Armour,
+  props: {
+    armour: [
+      { layer: 1, rating: 12, cost: 1, mass: 2 },
+      { layer: 2, rating: 12, cost: 1, mass: 2 },
+    ],
+  },
+  on: {
+    ship_change: ({ detail }) => console.log(detail),
+  },
 });

src/lib/components/Hull/Cargo/index.svelte

@@ -17,12 +17,10 @@
   export let mass = 0;
 
   $: ship?.dispatch_action("set_cargo", space);
-
 </script>
 
 <style>
   input {
     width: 5em;
   }
-
 </style>

src/lib/components/Hull/Screens/index.svelte

@@ -1,34 +1,32 @@
-<ShipItem { cost } { mass }>
+<ShipItem {cost} {mass}>
   <div>
-
-  <Field label="screens">
-    <input type="number" bind:value={standard} min="0" />
-  </Field>
-
-  <Field label="advanced screens">
-    <input type="number" bind:value={advanced} min="0" />
-  </Field>
-</div>
-
+    <Field label="screens">
+      <input type="number" bind:value={standard} min="0" />
+    </Field>
+
+    <Field label="advanced screens">
+      <input type="number" bind:value={advanced} min="0" />
+    </Field>
+  </div>
 </ShipItem>
 
 <script>
-    import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher } from "svelte";
 
-  import Section from '$lib/components/Section/index.svelte';
-  import Field from '$lib/components/Field/index.svelte';
-  import ShipItem from '../../ShipItem/index.svelte';
+  import Section from "$lib/components/Section/index.svelte";
+  import Field from "$lib/components/Field/index.svelte";
+  import ShipItem from "../../ShipItem/index.svelte";
 
-    export let cost = 0;
-    export let mass = 0;
-    export let standard = 0;
-    export let advanced = 0;
+  export let cost = 0;
+  export let mass = 0;
+  export let standard = 0;
+  export let advanced = 0;
 
-    let nbr_regular, nbr_advanced;
+  let nbr_regular, nbr_advanced;
 
-    const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-    $: dispatch( 'set_screens', { standard, advanced } );
+  $: dispatch("set_screens", { standard, advanced });
 </script>
 
 <style>
@@ -39,4 +37,4 @@
     display: flex;
     gap: 2em;
   }
-  </style>
+</style>

src/lib/components/Hull/Streamlining/index.svelte

@@ -1,38 +1,41 @@
 <ShipItem {cost} {mass}>
   <Field label="streamlining">
-  <div>
-    <label>
-    <input type="radio" bind:group={type} value="none" />
-    none</label>
-    <label>
-
-    <input type="radio" bind:group={type} value="partial" />
-    partial</label>
-    <label>
-    <input type="radio" bind:group={type} value="full" />
-    full</label>
+    <div>
+      <label>
+        <input type="radio" bind:group={type} value="none" />
+        none</label
+      >
+      <label>
+        <input type="radio" bind:group={type} value="partial" />
+        partial</label
+      >
+      <label>
+        <input type="radio" bind:group={type} value="full" />
+        full</label
+      >
     </div>
   </Field>
 </ShipItem>
 
-  <script>
-  import ShipItem from '$lib/components/ShipItem/index.svelte';
-  import Field from '$lib/components/Field/index.svelte';
+<script>
+  import ShipItem from "$lib/components/ShipItem/index.svelte";
+  import Field from "$lib/components/Field/index.svelte";
 
-  import {getContext } from 'svelte';
+  import { getContext } from "svelte";
 
-  export let type = 'none';
+  export let type = "none";
   export let cost = 0;
   export let mass = 0;
-  export let ship = getContext('ship');
-
-  $: ship?.dispatch_action( 'set_streamlining', type);
+  export let ship = getContext("ship");
 
-  </script>
+  $: ship?.dispatch_action("set_streamlining", type);
+</script>
 
-  <style>
-  div { display: flex }
+<style>
+  div {
+    display: flex;
+  }
   label {
     margin-left: 1em;
   }
-  </style>
+</style>

src/lib/components/Hull/index.svelte

@@ -1,51 +1,51 @@
 <Section label="hull">
-
-<ShipItem {cost} {mass} >
+  <ShipItem {cost} {mass}>
     <Field label="integrity">
-        <input
-            bind:value={rating}
-            type="number" {min} {max} />
+      <input bind:value={rating} type="number" {min} {max} />
     </Field>
-</ShipItem>
-
+  </ShipItem>
 
-<Screens {...screens} on:set_screens />
+  <Screens {...screens} on:set_screens />
 
-<Armour {armour} on:ship_change />
+  <Armour {armour} on:ship_change />
 
-<Cargo {...cargo} on:set_cargo />
+  <Cargo {...cargo} on:set_cargo />
 
-<Streamlining {...streamlining} />
+  <Streamlining {...streamlining} />
 </Section>
 
 <script>
-    import { createEventDispatcher } from 'svelte';
-
-  import Section from '../Section/index.svelte';
-  import Field from '../Field/index.svelte';
-  import ShipItem from '../ShipItem/index.svelte';
-  import Screens from './Screens/index.svelte';
-  import Armour from './Armour/index.svelte';
-  import Cargo from './Cargo/index.svelte';
-  import Streamlining from './Streamlining/index.svelte';
-
-    export let cost, mass, ship_mass, rating, screens, armour = (
-        0, 0, 10, 1, [], []
-    );
+  import { createEventDispatcher } from "svelte";
+
+  import Section from "../Section/index.svelte";
+  import Field from "../Field/index.svelte";
+  import ShipItem from "../ShipItem/index.svelte";
+  import Screens from "./Screens/index.svelte";
+  import Armour from "./Armour/index.svelte";
+  import Cargo from "./Cargo/index.svelte";
+  import Streamlining from "./Streamlining/index.svelte";
+
+  export let cost,
+    mass,
+    ship_mass,
+    rating,
+    screens,
+    armour = (0, 0, 10, 1, [], []);
 
   export let cargo = {};
   export let streamlining = {};
 
-    let min, max;
+  let min, max;
   $: min = Math.ceil(ship_mass / 10);
   $: max = ship_mass;
 
-const dispatch = createEventDispatcher();
-
-    $: dispatch( 'change_hull', { rating } );
+  const dispatch = createEventDispatcher();
 
+  $: dispatch("change_hull", { rating });
 </script>
 
 <style>
-  input { width: 5em; }
+  input {
+    width: 5em;
+  }
 </style>

src/lib/components/Notes.svelte

@@ -24,9 +24,9 @@
   </p>
 
   <p>
-    The app is mostly developed for Firefox. I also check as much as I can
-    that I don't mess things too badly on Chrome. For the other browsers...
-    caveat emptor.
+    The app is mostly developed for Firefox. I also check as much as I can that
+    I don't mess things too badly on Chrome. For the other browsers... caveat
+    emptor.
   </p>
 
   <p>

src/lib/components/Output/Json.svelte

@@ -5,13 +5,13 @@
 <script>
   export let ship = {};
   let json;
-  $: json = JSON.stringify(ship,null,2);
+  $: json = JSON.stringify(ship, null, 2);
 
-    import { fly, fade } from 'svelte/transition';
-    import {createEventDispatcher} from 'svelte';
+  import { fly, fade } from "svelte/transition";
+  import { createEventDispatcher } from "svelte";
 
-    const dispatch = createEventDispatcher();
-    const close = () => dispatch('close');
+  const dispatch = createEventDispatcher();
+  const close = () => dispatch("close");
 </script>
 
 <style>
@@ -20,13 +20,11 @@
     font-size: var(--font-scale-9);
     overflow: scroll;
     height: 90%;
-
   }
   div {
-  text-align: right;
+    text-align: right;
   }
   aside {
-
     padding: 1em;
     border: 3px solid var(--indigo-dye);
     border-radius: 1em;

src/lib/components/Output/Print/Hull/Armour/index.svelte

@@ -1,17 +1,15 @@
 <div class="layers">
   {#each armour as layer (layer)}
     <div class="layer">
-      {#each _.range(layer.rating) as i (i) }
-        <div class="cell">
-        </div>
+      {#each _.range(layer.rating) as i (i)}
+        <div class="cell" />
       {/each}
     </div>
   {/each}
-
 </div>
 
 <script>
-  import _ from 'lodash';
+  import _ from "lodash";
 
   export let armour = [];
 
@@ -19,14 +17,14 @@
 </script>
 
 <style>
-.cell {
-  display: inline-block;
-  margin-right: 0.5em;
-  width: 1em;
-  height: 1em;
-  border: 1px solid black;
-  border-radius: 0.5em;
-}
+  .cell {
+    display: inline-block;
+    margin-right: 0.5em;
+    width: 1em;
+    height: 1em;
+    border: 1px solid black;
+    border-radius: 0.5em;
+  }
   .layers {
     display: flex;
     flex-direction: column-reverse;

src/lib/components/Output/Print/Hull/Integrity/index.svelte

@@ -1,7 +1,7 @@
 <div>
-  {#each rows as row,i (i)}
+  {#each rows as row, i (i)}
     <div class="row">
-      {#each row as item,j (j)}
+      {#each row as item, j (j)}
         <div class="cell">
           {#if item}
             <img src="icons/crew-star.svg" alt="crew loss threshold" />
@@ -10,11 +10,10 @@
       {/each}
     </div>
   {/each}
-
 </div>
 
 <script>
-  import { ceil } from '$lib/dux/utils';
+  import { ceil } from "$lib/dux/utils";
 
   export let ship_mass = 0;
   export let rating = 0;
@@ -27,45 +26,40 @@
   $: cells = Array(rating).fill(false);
 
   let dcp;
-  $: dcp= ceil(ship_mass/20);
+  $: dcp = ceil(ship_mass / 20);
 
-  $: cells = divide(cells, dcp).map(
-    g => {
-      g[g.length-1] = true;
+  $: cells = divide(cells, dcp)
+    .map((g) => {
+      g[g.length - 1] = true;
       return g;
-    }
-  ).flat();
+    })
+    .flat();
 
   function divide(list, divider) {
-    if( divider <= 1 ) return [ list ];
+    if (divider <= 1) return [list];
 
     let div = list.length / divider;
     const mod = list.length % divider;
 
-    if(mod) div++;
+    if (mod) div++;
 
-    return [
-      list.slice(0,div),
-      ...divide( list.slice(div), divider-1 )
-    ]
+    return [list.slice(0, div), ...divide(list.slice(div), divider - 1)];
   }
 
   let rows = [];
-  $: rows = divide( cells, nbr_rows );
-
-
+  $: rows = divide(cells, nbr_rows);
 </script>
 
 <style>
   .row {
   }
-.cell {
-  display: inline-block;
-  margin-right: 0.5em;
-  width: 1em;
-  height: 1em;
-  border: 1px solid black;
-}
+  .cell {
+    display: inline-block;
+    margin-right: 0.5em;
+    width: 1em;
+    height: 1em;
+    border: 1px solid black;
+  }
   img {
     width: 1em;
   }

src/lib/components/Output/Print/Hull/Integrity/stories.js

@@ -1,23 +1,23 @@
-import Component from '.';
+import Component from ".";
 
 export default {
-    title: "printouts/hull/integrity"
+  title: "printouts/hull/integrity",
 };
 
 export const basic = () => ({
-    Component,
-    props: {
-        ship_mass: 50,
-        rating: 14,
-        advanced: false,
-    }
+  Component,
+  props: {
+    ship_mass: 50,
+    rating: 14,
+    advanced: false,
+  },
 });
 
 export const advanced = () => ({
-    Component,
-    props: {
-        ship_mass: 50,
-        rating: 14,
-        advanced: true,
-    }
+  Component,
+  props: {
+    ship_mass: 50,
+    rating: 14,
+    advanced: true,
+  },
 });

src/lib/components/Output/Print/Hull/index.svelte

@@ -8,8 +8,8 @@
 </div>
 
 <script>
-  import Integrity from './Integrity/index.svelte';
-  import Armour from './Armour/index.svelte';
+  import Integrity from "./Integrity/index.svelte";
+  import Armour from "./Armour/index.svelte";
 
   export let structure = {};
   export let ship_mass = 0;

src/lib/components/Output/Print/Identification/index.svelte

@@ -1,4 +1,6 @@
-<h1>ship name: <div class="fill"></div> </h1>
+<h1>
+  ship name: <div class="fill" />
+</h1>
 
 <div class="details">
   <h2>{ship_class}-class, {ship_type}</h2>
@@ -10,12 +12,13 @@
 </div>
 
 <script>
-  import Cost from '../../../Cost.svelte';
-  import Mass from '$lib/components/Mass.svelte';
+  import Cost from "../../../Cost.svelte";
+  import Mass from "$lib/components/Mass.svelte";
 
-export let ship_class;
-export let ship_type;
-  export let cost, mass = ( 0, 0 );
+  export let ship_class;
+  export let ship_type;
+  export let cost,
+    mass = (0, 0);
 </script>
 
 <style>

src/lib/components/Output/Print/MainSystems/index.svelte

@@ -1,6 +1,5 @@
 <div class="main_systems">
-
-  {#if ftl !== "none" }
+  {#if ftl !== "none"}
     <img class="ftl" src="icons/ftl-drive.svg" alt="ftl drive" />
   {/if}
 
@@ -8,13 +7,16 @@
     <div class="thrust">{engine}</div>
   {/if}
 
-  <img class="internal" src="icons/internal-systems.svg" alt="internal systems"/>
-  </div>
+  <img
+    class="internal"
+    src="icons/internal-systems.svg"
+    alt="internal systems"
+  />
+</div>
 
 <script>
-  export let ftl = 'none';
+  export let ftl = "none";
   export let engine = 0;
-
 </script>
 
 <style>
@@ -27,14 +29,16 @@
     line-height: 2em;
     text-align: center;
   }
-.main_systems {
-  display: flex;
-  align-items: center;
-  gap: 1em;
-  justify-content: space-evenly;
-  margin-top: 1em;
-}
-  img.ftl { height: 2em; }
+  .main_systems {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    justify-content: space-evenly;
+    margin-top: 1em;
+  }
+  img.ftl {
+    height: 2em;
+  }
   img.internal {
     height: 2em;
   }

src/lib/components/Output/Print/MainSystems/stories.js

@@ -1,13 +1,13 @@
-import Component from '.';
+import Component from ".";
 
 export default {
-    title: "printouts/main_systems"