Merge branch 'main' into pages

.gitignore

@@ -12,3 +12,4 @@ package-lock.json
 .temp
 node_modules/
 dist/yarn-error.log
+.task/

.versionrc.json

@@ -1,4 +1,7 @@
 {
+  "scripts": {
+    "postchangelog": "gotask changelog"
+  },
   "types": [
     { "type": "feat", "section": "Features" },
     { "type": "fix", "section": "Bug Fixes" },

CHANGELOG.md

@@ -2,20 +2,29 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## [2.2.0](///compare/v2.1.0...v2.2.0) (2022-04-11)
+## 2.3.0 (2022-04-17)
 
 
 ### Features
 
-* allow to edit the print layout 381d497
+* add 'reset ship' button 
+* add changelog to app 
+* add version to About component 
 
-## [2.1.0](///compare/v2.0.0...v2.1.0) (2022-04-07)
+## 2.2.0 (2022-04-11)
 
 
 ### Features
 
-* add localStorage memory bf7206a
+* allow to edit the print layout 
-* can move main system comps in the print output b425f4a
+
+## 2.1.0 (2022-04-07)
 
 
-* add standard-version 2fd047f
+### Features
+
+* add localStorage memory 
+* can move main system comps in the print output 
+
+
+* add standard-version 

Taskfile.yml

@@ -0,0 +1,22 @@
+# https://taskfile.dev
+
+version: "3"
+
+vars:
+  GREETING: Hello, World!
+
+tasks:
+  release:
+    cmds:
+      - standard-version -a
+  changelog:
+    sources: [CHANGELOG.md]
+    generates: [src/lib/components/Changelog.svelte]
+    cmds:
+      - pnpx showdown makehtml -i CHANGELOG.md -o src/lib/components/Changelog.svelte
+      - git add src/lib/components/Changelog.svelte
+
+  default:
+    cmds:
+      - echo "{{.GREETING}}"
+    silent: true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aotds-docks",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "type": "module",
   "private": true,
   "scripts": {
@@ -18,14 +18,19 @@
     "@sveltejs/adapter-static": "^1.0.0-next.29",
     "@sveltejs/kit": "^1.0.0-next.304",
     "@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",
     "prettier": "~2.5.1",
     "prettier-plugin-svelte": "^2.6.0",
+    "showdown": "^2.0.3",
     "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/About.svelte

@@ -1,5 +1,20 @@
-<Card>
+{#if showChangelog}
-  <h2 slot="header">Welcome to the docks</h2>
+  <Card>
+    <h2 slot="header">Changelog for the Docks</h2>
+    <div class="changelog">
+      <Changelog />
+    </div>
+  </Card>
+{:else}
+  <Card>
+    <div slot="header" class="header">
+      <h2>Welcome to the docks</h2>
+
+      <div class="version">
+        <div>version {import.meta.env.PACKAGE_VERSION}</div>
+        <a on:click={() => (showChangelog = true)}>changelog</a>
+      </div>
+    </div>
 
     <p>
       This app is a ship builder for the game
@@ -16,56 +31,62 @@
     </p>
 
     <p>
-    The app is mostly developed for Firefox. I also check as much as I can that
+      The app is mostly developed for Firefox. I also check as much as I can
-    I don't mess things too badly on Chrome. For the other browsers... caveat
+      that I don't mess things too badly on Chrome. For the other browsers...
-    emptor.
+      caveat emptor.
     </p>
 
     <p>
       Written by
       <a href="https://twitter.com/yenzie">Yanick Champoux</a>
       . Code available on
-    <a href="https://github.com/aotds/aotds-shipyard">Github</a>
+      <a href="https://github.com/aotds/aotds-shipyard">Github</a>.
     </p>
-        <div slot="footer" />
+  </Card>
-</Card>
+{/if}
 
 <script>
-import {
+  import { Modal, Card } from "svelte-chota";
-    Modal, Card
+  import Changelog from "./Changelog.svelte";
-} from 'svelte-chota';
 
+  let showChangelog = false;
 </script>
 
 <style>
-h2 {
+  h2 {
-    margin-bottom: 1em;
     font-size: var(--font-scale-14);
     font-family: Faktos;
-}
+    margin-bottom: 0px;
-  aside {
+  }
-    background-color: rgb(254, 218, 184);
+  .header {
-    position: absolute;
+    margin-bottom: 1em;
-    height: 20em;
+    display: flex;
-    max-width: 50%;
+    align-items: center;
-    z-index: 200;
-
-    padding: 1em;
-    border: 3px solid var(--indigo-dye);
-    border-radius: 1em;
-    left: 0px;
-    border-left: 0px;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    top: 6em;
-    font-size: var(--font-scale-11);
   }
 
-  h3 {
+  p {
-    text-align: center;
-    margin: 0px;
-  }
-p {
     margin-left: 2em;
-}
+  }
+
+  .version {
+    flex: 1;
+    text-align: right;
+  }
+
+  .changelog :global(h1),
+  :global(h1 + p) {
+    display: none;
+  }
+
+  .changelog :global(h2) {
+    font-size: var(--font-scale-12);
+    font-family: Faktos;
+  }
+  .changelog :global(h3) {
+    font-size: var(--font-scale-12);
+    font-family: Faktos;
+  }
+  .version a {
+    display: inline-block;
+  }
 </style>

src/lib/components/About.test.js

@@ -0,0 +1,11 @@
+import { test, expect } from "vitest";
+import { render } from "@testing-library/svelte";
+
+import About from "./About.svelte";
+
+test("version is present", () => {
+  import.meta.env.PACKAGE_VERSION = '1.2.3';
+  const { queryByText } = render(About);
+
+  expect(queryByText(/version 1.2.3/)).toBeTruthy();
+});

src/lib/components/App.svelte

@@ -3,38 +3,35 @@
 </svelte:head>
 
 <main>
+  <Ribbon />
+  <Header on:changeTab={({ detail }) => (activeTab = detail)} />
 
-<Ribbon />
+  <div class:hide={activeTab !== "editor"}>
-<Header on:changeTab={({ detail }) => activeTab = detail}/>
-
-<div class:hide={activeTab !== 'editor'}>
     <ShipEdit />
-</div>
+  </div>
-<div class:hide={activeTab !== 'json'}>
+  <div class:hide={activeTab !== "json"}>
     <JsonOutput />
-</div>
+  </div>
-
-{#if activeTab === 'print'}
-    <PrintOutput ship={$state}/>
-{/if}
 
+  {#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 JsonOutput from "./Output/Json.svelte";
-    import PrintOutput from './Output/Print/index.svelte';
+  import PrintOutput from "./Output/Print/index.svelte";
 
-    let activeTab = 'editor';
+  let activeTab = "editor";
-    $: console.log(activeTab);
 
-    const {state} = getContext('ship');
+  const { state } = getContext("ship");
 </script>
 
 <style>

src/lib/components/Changelog.stories.svelte

@@ -0,0 +1,15 @@
+<Meta title="Changelog" component={Changelog} argTypes={{}} />
+
+<Story name="Primary" args={{}} />
+
+<Template let:args>
+  <div style="width: 50em">
+    <Changelog />
+  </div>
+</Template>
+
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+
+  import Changelog from "./Changelog.svelte";
+</script>

src/lib/components/Changelog.svelte

@@ -0,0 +1,21 @@
+<h1 id="changelog">Changelog</h1>
+<p>All notable changes to this project will be documented in this file. See <a href="https://github.com/conventional-changelog/standard-version">standard-version</a> for commit guidelines.</p>
+<h2 id="23020220417">2.3.0 (2022-04-17)</h2>
+<h3 id="features">Features</h3>
+<ul>
+<li>add 'reset ship' button </li>
+<li>add changelog to app </li>
+<li>add version to About component </li>
+</ul>
+<h2 id="22020220411">2.2.0 (2022-04-11)</h2>
+<h3 id="features-1">Features</h3>
+<ul>
+<li>allow to edit the print layout </li>
+</ul>
+<h2 id="21020220407">2.1.0 (2022-04-07)</h2>
+<h3 id="features-2">Features</h3>
+<ul>
+<li><p>add localStorage memory </p></li>
+<li><p>can move main system comps in the print output </p></li>
+<li><p>add standard-version </p></li>
+</ul>

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"
+    a <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship
-            >Full Thrust</a
+    builder
-        > 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();
+  const ship = getContext("ship");
-$: dispatch( 'changeTab', activeTab );
 
+  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,

svelte.config.js

@@ -8,6 +8,11 @@ export default {
     adapter: adapter({ fallback: "index.html" }),
     paths: { base: dev ? "" : "/aotds-docks" },
     vite: {
+      define: {
+        "import.meta.env.PACKAGE_VERSION": JSON.stringify(
+          process.env.npm_package_version
+        ),
+      },
       build: {
         rollupOptions: {
           plugins: [analyze()],

vitest.config.js

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