Merge branch 'gh15-reset-button'

package.json

@@ -18,6 +18,8 @@
     "@sveltejs/adapter-static": "^1.0.0-next.28",
     "@sveltejs/kit": "^1.0.0-next.288",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.38",
+    "@testing-library/svelte": "^3.1.1",
+    "@testing-library/user-event": "^13.5.0",
     "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.4.0",
     "eslint-plugin-svelte3": "^3.4.1",
@@ -25,7 +27,9 @@
     "prettier-plugin-svelte": "^2.6.0",
     "standard-version": "^9.3.2",
     "storybook-builder-vite": "0.1.21",
-    "svelte": "^3.46.4"
+    "svelte": "^3.46.4",
+    "vitest": "^0.9.3",
+    "vitest-svelte-kit": "^0.0.6"
   },
   "dependencies": {
     "@storybook/addon-essentials": "^6.4.19",

src/lib/components/App.svelte

@@ -1,54 +1,51 @@
 <svelte:head>
-    <meta name="viewport" content="width=960" />
+  <meta name="viewport" content="width=960" />
 </svelte:head>
 
 <main>
+  <Ribbon />
+  <Header on:changeTab={({ detail }) => (activeTab = detail)} />
 
-<Ribbon />
-<Header on:changeTab={({ detail }) => activeTab = detail}/>
-
-<div class:hide={activeTab !== 'editor'}>
+  <div class:hide={activeTab !== "editor"}>
     <ShipEdit />
-</div>
-<div class:hide={activeTab !== 'json'}>
+  </div>
+  <div class:hide={activeTab !== "json"}>
     <JsonOutput />
-</div>
-
-{#if activeTab === 'print'}
-    <PrintOutput ship={$state}/>
-{/if}
+  </div>
 
+  {#if activeTab === "print"}
+    <PrintOutput ship={$state} />
+  {/if}
 </main>
 
 <script>
-import { getContext } from 'svelte';
-    import { Modal, Card, Nav } from "svelte-chota";
+  import { getContext } from "svelte";
+  import { Modal, Card, Nav } from "svelte-chota";
 
-    import Ribbon from "./Ribbon.svelte";
-    import Header from "./Header.svelte";
-    import ShipEdit from "./ShipEdit/index.svelte";
-    import About from "./About.svelte";
-    import JsonOutput from './Output/Json.svelte';
-    import PrintOutput from './Output/Print/index.svelte';
+  import Ribbon from "./Ribbon.svelte";
+  import Header from "./Header.svelte";
+  import ShipEdit from "./ShipEdit/index.svelte";
+  import About from "./About.svelte";
+  import JsonOutput from "./Output/Json.svelte";
+  import PrintOutput from "./Output/Print/index.svelte";
 
-    let activeTab = 'editor';
-    $: console.log(activeTab);
+  let activeTab = "editor";
 
-    const {state} = getContext('ship');
+  const { state } = getContext("ship");
 </script>
 
 <style>
-    .nav {
-        width: var(--main-width);
-        margin-left: auto;
-        margin-right: auto;
-    }
-    .hide {
-        display: none;
-    }
-    main {
-        width: var(--main-width);
-        margin-right: auto;
-        margin-left: auto;
-    }
+  .nav {
+    width: var(--main-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .hide {
+    display: none;
+  }
+  main {
+    width: var(--main-width);
+    margin-right: auto;
+    margin-left: auto;
+  }
 </style>

src/lib/components/Header.svelte

@@ -1,76 +1,94 @@
 <header>
-    <h1>The Docks</h1>
-    <h2>
-        a <a href="https://shop.groundzerogames.co.uk/rules.html"
-            >Full Thrust</a
-        > ship builder
-    </h2>
-    <a on:click|preventDefault={() => (showAbout = true)}>about the app</a>
+  <h1>The Docks</h1>
+  <h2>
+    a <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship
+    builder
+  </h2>
+  <a on:click|preventDefault={() => (showAbout = true)}>about the app</a>
 </header>
 
-<div>
-    <Tabs bind:active={activeTab}>
-        <Tab tabid="editor">editor</Tab>
-        <Tab tabid="json">json view</Tab>
-        <Tab tabid="print">print view</Tab>
-    </Tabs>
+<div class="menu">
+  <Tabs bind:active={activeTab}>
+    <Tab tabid="editor">editor</Tab>
+    <Tab tabid="json">json view</Tab>
+    <Tab tabid="print">print view</Tab>
+  </Tabs>
+
+  <div class="actions">
+    <a on:click|preventDefault={resetShip}>reset ship</a>
+  </div>
 </div>
 
 <Modal bind:open={showAbout}>
-    <About />
+  <About />
 </Modal>
 
 <script>
-import { createEventDispatcher } from 'svelte';
-    import { Modal, Card, Nav, Tab, Tabs } from "svelte-chota";
+  import { getContext, createEventDispatcher } from "svelte";
+  import { Modal, Card, Nav, Tab, Tabs } from "svelte-chota";
 
-    import About from "./About.svelte";
-    let showAbout = false;
-    let activeTab = 'editor';
+  import About from "./About.svelte";
+  let showAbout = false;
+  let activeTab = "editor";
 
-const dispatch = createEventDispatcher();
-$: dispatch( 'changeTab', activeTab );
+  const ship = getContext("ship");
 
+  const dispatch = createEventDispatcher();
+  $: dispatch("changeTab", activeTab);
+
+  const resetShip = () => {
+    if (!window.confirm("you really want to reset the ship?")) return;
+
+    ship.dispatch.resetShip();
+  };
 </script>
 
 <style>
-    header {
-        display: flex;
-        align-items: baseline;
-        width: var(--main-width);
-        margin-left: auto;
-        margin-right: auto;
-        margin-bottom: 1em;
-    }
-    h1,
-    h2 {
-        text-align: left;
-        font-family: Faktos;
-        padding: 0px;
-        margin: 0px;
-    }
+  header {
+    display: flex;
+    align-items: baseline;
+    width: var(--main-width);
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 1em;
+  }
+  h1,
+  h2 {
+    text-align: left;
+    font-family: Faktos;
+    padding: 0px;
+    margin: 0px;
+  }
 
-    h1 {
-        font-size: var(--font-scale-15);
-    }
-    h2 {
-        flex: 1;
-        padding-left: 1em;
-        font-size: var(--font-scale-13);
-    }
-    header > a {
-        margin: 0px 2em;
-        font-size: var(--font-scale-10);
-    }
-    div :global(nav) {
-        margin-left: 2em;
-        margin-bottom: 2em;
-    }
-    div :global(nav span) {
-        font-weight: bold;
-        font-family: var(--main-font-family);
-        font-size: var(--font-scale-12);
-        margin-right: 1em;
-        padding-bottom: 0.125em !important;
-    }
+  h1 {
+    font-size: var(--font-scale-15);
+  }
+  h2 {
+    flex: 1;
+    padding-left: 1em;
+    font-size: var(--font-scale-13);
+  }
+  header > a {
+    margin: 0px 2em;
+    font-size: var(--font-scale-10);
+  }
+  div :global(nav) {
+    margin-left: 2em;
+    margin-bottom: 2em;
+  }
+  div :global(nav span) {
+    font-weight: bold;
+    font-family: var(--main-font-family);
+    font-size: var(--font-scale-12);
+    margin-right: 1em;
+    padding-bottom: 0.125em !important;
+  }
+  .menu {
+    display: flex;
+    align-items: baseline;
+  }
+  .menu .actions {
+    flex: 1;
+    text-align: right;
+  }
 </style>

src/lib/components/Header.test.js

@@ -0,0 +1,10 @@
+import { test, expect } from "vitest";
+import { render } from "@testing-library/svelte";
+
+import App from "./Header.svelte";
+
+test("reset ship link is present", () => {
+  const { queryByText } = render(App);
+
+  expect(queryByText("reset ship")).toBeTruthy();
+});

src/lib/shipDux/index.js

@@ -25,6 +25,7 @@ const dux = new Updux({
     setShipReqs: null,
     setUITransform: null,
     resetLayout: null,
+    resetShip: null,
   },
 });
 
@@ -37,6 +38,8 @@ function resetUITransform(thing) {
   );
 }
 
+dux.setMutation("resetShip", () => () => dux.initial);
+
 dux.setMutation("resetLayout", () => resetUITransform);
 
 dux.setMutation("setShipMass", (mass) => u({ reqs: { mass } }));

src/lib/shipDux/propulsion/drive.js

@@ -7,7 +7,7 @@ import reqs from "../reqs.js";
 const dux = new Updux({
   subduxes: { reqs },
   initial: {
-    rating: 1,
+    rating: 0,
     advanced: false,
   },
   actions: {
@@ -20,7 +20,7 @@ dux.setMutation("setDrive", (changes) => u(changes));
 dux.setMutation("setDriveReqs", (reqs) => u({ reqs }));
 
 // needs to be at the top level
-export const calculateDriveReqs = store =>
+export const calculateDriveReqs = (store) =>
   createSelector(
     [
       (ship) => ship.reqs.mass,
@@ -29,7 +29,7 @@ export const calculateDriveReqs = store =>
     ],
     (ship_mass, rating, advanced) =>
       store.dispatch.setDriveReqs(calcDriveReqs(ship_mass, rating, advanced))
-      );
+  );
 
 export function calcDriveReqs(shipMass, rating, advanced = false) {
   const mass = Math.ceil(rating * 0.05 * shipMass);

vitest.config.js

@@ -0,0 +1,9 @@
+import { extractFromSvelteConfig } from "vitest-svelte-kit";
+
+export default extractFromSvelteConfig().then((config) => ({
+    ...config,
+    test: {
+      globals: true,
+      environment: "jsdom",
+    },
+  }));