json component

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>

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>