From df5ca2d577d1ac47f0d11e93f05f7fa87a1bd193 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.dyndns.org>
Date: Tue, 28 Jul 2020 17:20:30 -0400
Subject: [PATCH 1/2] add notes

---
 src/components/App.svelte   | 37 ++++++++++++++++++++-
 src/components/Notes.svelte | 64 +++++++++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Notes.svelte

diff --git a/src/components/App.svelte b/src/components/App.svelte
index 2a011de..1bf0911 100644
--- a/src/components/App.svelte
+++ b/src/components/App.svelte
@@ -1,7 +1,15 @@
 <Header />
+
+{#if show_notes}
+<Notes show={show_notes} on:close={toggle_notes} />
+{/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" value="notes" on:click={toggle_notes} />
   </nav>
 
   <ShipSpecs />
@@ -41,7 +49,13 @@
 
   <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";
@@ -50,6 +64,7 @@
   import shipStore from "~/stores/ship";
 
   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 +107,9 @@
   const ship_dispatch = ({ detail }) => ship.dispatch(detail);
 
   setContext("ship_change", ship.dispatch);
+
+  let show_notes = true;
+  const toggle_notes = () => show_notes = !show_notes;
 </script>
 
 <style>
@@ -103,11 +121,28 @@
     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;
+  }
 </style>
diff --git a/src/components/Notes.svelte b/src/components/Notes.svelte
new file mode 100644
index 0000000..8fb753d
--- /dev/null
+++ b/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>

From b014f02d912b4a96ef5c80cc5912766bac4a0894 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.dyndns.org>
Date: Tue, 28 Jul 2020 18:00:39 -0400
Subject: [PATCH 2/2] json component

---
 src/components/App.svelte         | 22 ++++++++++++--
 src/components/Output/Json.svelte | 50 +++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Output/Json.svelte

diff --git a/src/components/App.svelte b/src/components/App.svelte
index 1bf0911..8fe86cd 100644
--- a/src/components/App.svelte
+++ b/src/components/App.svelte
@@ -4,12 +4,20 @@
 <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" value="notes" on:click={toggle_notes} />
+    <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 />
@@ -62,6 +70,7 @@
 
   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';
@@ -108,8 +117,13 @@
 
   setContext("ship_change", ship.dispatch);
 
-  let show_notes = true;
+  let show_notes = false;
   const toggle_notes = () => show_notes = !show_notes;
+
+  let output = null;
+
+  const set_output = value => output = value;
+
 </script>
 
 <style>
@@ -145,4 +159,8 @@
     margin: 0 auto;
     text-align: right;
   }
+
+  .notes {
+    margin-right: 2em;
+  }
 </style>
diff --git a/src/components/Output/Json.svelte b/src/components/Output/Json.svelte
new file mode 100644
index 0000000..f6a3204
--- /dev/null
+++ b/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>