Merge branch 'json' into main

src/components/App.svelte

@@ -1,7 +1,23 @@
 <Header />
+
+{#if show_notes}
+<Notes show={show_notes} on:close={toggle_notes} />
+{/if}
+
+{#if output === 'json'}
+  <OutputJson ship={$ship}
+    on:close={() => set_output(null)}/>
+{/if}
+
 <main>
   <nav>
     <input class="reset button small red" type="button"  value="reset" on:click={reset} />
+
+    <div class="spacer" />
+    <input type="button" class="button small notes" value="notes" on:click={toggle_notes} />
+
+    <input type="button" class="button small green" value="json"
+      on:click={() => set_output('json')} />
   </nav>
 
   <ShipSpecs />
@@ -41,15 +57,23 @@
 
   <Carrier {...$ship.carrier} />
 
+
 </main>
+  <footer>
+    Written by <a href="https://twitter.com/yenzie">Yanick Champoux</a>.
+    Code available on <a
+      href="https://github.com/yanick/aotds-shipyard">Github</a>
+  </footer>
 
 <script>
   import { setContext } from "svelte";
 
   import Header from './Header';
   import shipStore from "~/stores/ship";
+  import OutputJson from './Output/Json.svelte';
 
   import ShipSpecs from './ShipSpecs/index.svelte';
+  import Notes from './Notes';
   import ShipItem from "./ShipItem/index.svelte";
   import Field from "./Field/index.svelte";
   import Hull from "./Hull";
@@ -92,6 +116,14 @@
   const ship_dispatch = ({ detail }) => ship.dispatch(detail);
 
   setContext("ship_change", ship.dispatch);
+
+  let show_notes = false;
+  const toggle_notes = () => show_notes = !show_notes;
+
+  let output = null;
+
+  const set_output = value => output = value;
+
 </script>
 
 <style>
@@ -103,11 +135,32 @@
     margin-right: auto;
   }
 
-  main :global(> *) {
+  nav {
+    grid-column: 1 / span 3 !important;
+    display: flex;
+    margin: 1em 0;
+  }
+
+  nav .spacer {
+    flex: 1;
+  }
+
+
+  :global(main > *) {
     grid-column: 1;
   }
 
   input.reset {
     grid-column: 2;
   }
+
+  footer {
+    width: var(--main-width);
+    margin: 0 auto;
+    text-align: right;
+  }
+
+  .notes {
+    margin-right: 2em;
+  }
 </style>

src/components/Notes.svelte

@@ -0,0 +1,64 @@
+  <aside transition:fly={{x: -800, opacity: 1}}>
+    <div>
+      <input type="button" class="button small red" value="close"
+        on:click={close}/>
+    </div>
+    <h3>welcome to the shipyard</h3>
+
+    <p>
+      This app is a ship builder for the game
+      <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a>
+      .
+    </p>
+
+    <p>
+      The app, beside any exception mentioned here, is trying to follow the
+      <a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
+        Cross Dimensions rules
+      </a>
+      as closely as possible.
+    </p>
+
+    <p>
+      Written by
+      <a href="https://twitter.com/yenzie">Yanick Champoux</a>
+      . Code available on
+      <a href="https://github.com/yanick/aotds-shipyard">Github</a>
+    </p>
+  </aside>
+
+  <script>
+    import { fly } from 'svelte/transition';
+    import {createEventDispatcher} from 'svelte';
+
+    const dispatch = createEventDispatcher();
+    const close = () => dispatch('close');
+  </script>
+
+<style>
+  aside {
+    background-color: rgb(254, 218, 184);
+    position: absolute;
+    height: 20em;
+    max-width: 50%;
+    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 {
+    text-align: center;
+    margin: 0px;
+  }
+  div {
+  text-align: right;
+  }
+</style>

src/components/Output/Json.svelte

@@ -0,0 +1,50 @@
+<aside transition:fly={{x: 2000, opacity: 1}}>
+    <div>
+      <input type="button" class="button small red" value="close"
+        on:click={close}/>
+    </div>
+  <pre><code>{json}</code></pre>
+</aside>
+
+<script>
+  export let ship = {};
+  let json;
+  $: json = JSON.stringify(ship,null,2);
+
+    import { fly } from 'svelte/transition';
+    import {createEventDispatcher} from 'svelte';
+
+    const dispatch = createEventDispatcher();
+    const close = () => dispatch('close');
+</script>
+
+<style>
+  pre {
+    font-family: monospace;
+    font-size: var(--font-scale-9);
+    overflow: scroll;
+    height: 90%;
+
+  }
+  div {
+  text-align: right;
+  }
+  aside {
+    background-color: rgb(254, 218, 184);
+    position: absolute;
+    height: 80vh;
+    max-width: 80%;
+    min-width: 80%;
+    z-index: 200;
+
+    padding: 1em;
+    border: 3px solid var(--indigo-dye);
+    border-radius: 1em;
+    right: 0px;
+    border-right: 0px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    top: 6em;
+    font-size: var(--font-scale-11);
+  }
+</style>