add json component

src/lib/components/App.svelte

@@ -1,7 +1,16 @@
-<Ribbon />
-<Header />
+<main>
 
-<ShipEdit />
+<Ribbon />
+<Header on:changeTab={({ detail }) => activeTab = detail}/>
+
+<div class:hide={activeTab !== 'editor'}>
+    <ShipEdit />
+</div>
+<div class:hide={activeTab !== 'json'}>
+    <JsonOutput />
+</div>
+
+</main>
 
 <script>
     import { Modal, Card, Nav } from "svelte-chota";
@@ -10,6 +19,10 @@
     import Header from "./Header.svelte";
     import ShipEdit from "./ShipEdit/index.svelte";
     import About from "./About.svelte";
+    import JsonOutput from './Output/Json.svelte';
+
+    let activeTab = 'editor';
+    $: console.log(activeTab);
 </script>
 
 <style>
@@ -18,4 +31,12 @@
         margin-left: auto;
         margin-right: auto;
     }
+    .hide {
+        display: none;
+    }
+    main {
+        width: var(--main-width);
+        margin-right: auto;
+        margin-left: auto;
+    }
 </style>

src/lib/components/Header.svelte

@@ -1,23 +1,36 @@
 <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>
+    <a on:click|preventDefault={() => (showAbout = true)}>about the app</a>
 </header>
 
-    <Modal bind:open={showAbout}>
-    <About/>
-    </Modal>
+<div>
+    <Tabs bind:active={activeTab}>
+        <Tab tabid="editor">editor</Tab>
+        <Tab tabid="json">json view</Tab>
+        <Tab tabid="print">print view</Tab>
+    </Tabs>
+</div>
 
-    <script>
-import {
-    Modal, Card, Nav
-} from 'svelte-chota';
+<Modal bind:open={showAbout}>
+    <About />
+</Modal>
 
-import About from './About.svelte';
+<script>
+import { createEventDispatcher } from 'svelte';
+    import { Modal, Card, Nav, Tab, Tabs } from "svelte-chota";
+
+    import About from "./About.svelte";
     let showAbout = false;
+    let activeTab = 'editor';
+
+const dispatch = createEventDispatcher();
+$: dispatch( 'changeTab', activeTab );
+
 </script>
 
 <style>
@@ -39,7 +52,6 @@ import About from './About.svelte';
 
     h1 {
         font-size: var(--font-scale-15);
-
     }
     h2 {
         flex: 1;
@@ -50,4 +62,8 @@ import About from './About.svelte';
         margin: 0px 2em;
         font-size: var(--font-scale-10);
     }
+    div :global(nav span) {
+        margin-right: 1em;
+        padding-bottom: 0.125em !important;
+    }
 </style>

src/lib/components/Output/Json.svelte

@@ -1,6 +1,10 @@
-<aside transition:fade>
-  <pre><code>{json}</code></pre>
-</aside>
+<div>
+<button class="button primary" on:click={handleSave}>save</button>
+
+<pre><code>{json}</code></pre>
+    </div>
+
+<a style:display="none" {href} {download} bind:this={fileDownload} />
 
 <script>
     export let ship = {};
@@ -8,26 +12,38 @@
     $: json = JSON.stringify(ship, null, 2);
 
     import { fly, fade } from "svelte/transition";
-  import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, getContext } from "svelte";
+
+    const { state } = getContext("ship");
+
+    $: json = JSON.stringify($state, null, 2);
 
     const dispatch = createEventDispatcher();
     const close = () => dispatch("close");
+
+    $: href = "data:text/plain;charset=utf-8," + encodeURIComponent(json);
+    $: download = ($state?.identification?.shipClass ?? "ship") + ".json";
+
+    let fileDownload;
+
+    function handleSave() {
+        fileDownload?.click();
+    }
 </script>
 
 <style>
+div {
+    position: relative;
+}
+button {
+    position: absolute;
+    right: 2em;
+    top: 1em;
+}
     pre {
         font-family: monospace;
-    font-size: var(--font-scale-9);
+        font-size: var(--font-scale-10);
         overflow: scroll;
         height: 90%;
     }
-  div {
-    text-align: right;
-  }
-  aside {
-    padding: 1em;
-    border: 3px solid var(--indigo-dye);
-    border-radius: 1em;
-    font-size: var(--font-scale-11);
-  }
 </style>