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

@@ -3,38 +3,35 @@
 </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 { 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 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>

src/lib/components/Header.svelte

@@ -1,19 +1,22 @@
 <header>
   <h1>The Docks</h1>
   <h2>
-        a <a href="https://shop.groundzerogames.co.uk/rules.html"
-            >Full Thrust</a
-        > ship builder
+    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>
+<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}>
@@ -21,16 +24,23 @@
 </Modal>
 
 <script>
-import { createEventDispatcher } from 'svelte';
+  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';
+  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>
@@ -73,4 +83,12 @@ $: dispatch( 'changeTab', activeTab );
     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,

vitest.config.js

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