add json component

src/lib/components/App.svelte

@@ -1,7 +1,16 @@
-<Ribbon />
+<main>
-<Header />
 
-<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,53 +1,69 @@
 <header>
-  <h1>The Docks</h1>
+    <h1>The Docks</h1>
-  <h2>
+    <h2>
-    a <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship
+        a <a href="https://shop.groundzerogames.co.uk/rules.html"
-    builder
+            >Full Thrust</a
-  </h2>
+        > ship builder
-    <a  on:click|preventDefault={() => showAbout = true}>about the app</a>
+    </h2>
+    <a on:click|preventDefault={() => (showAbout = true)}>about the app</a>
 </header>
 
-    <Modal bind:open={showAbout}>
+<div>
-    <About/>
+    <Tabs bind:active={activeTab}>
-    </Modal>
+        <Tab tabid="editor">editor</Tab>
+        <Tab tabid="json">json view</Tab>
+        <Tab tabid="print">print view</Tab>
+    </Tabs>
+</div>
 
-    <script>
+<Modal bind:open={showAbout}>
-import {
+    <About />
-    Modal, Card, Nav
+</Modal>
-} from 'svelte-chota';
+
+<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 );
 
-import About from './About.svelte';
-  let showAbout = false;
 </script>
 
 <style>
-  header {
+    header {
-    display: flex;
+        display: flex;
-    align-items: baseline;
+        align-items: baseline;
-    width: var(--main-width);
+        width: var(--main-width);
-    margin-left: auto;
+        margin-left: auto;
-    margin-right: auto;
+        margin-right: auto;
-    margin-bottom: 3em;
+        margin-bottom: 3em;
-  }
+    }
-  h1,
+    h1,
-  h2 {
+    h2 {
-    text-align: left;
+        text-align: left;
-    font-family: Faktos;
+        font-family: Faktos;
-    padding: 0px;
+        padding: 0px;
-    margin: 0px;
+        margin: 0px;
-  }
+    }
 
-  h1 {
+    h1 {
-    font-size: var(--font-scale-15);
+        font-size: var(--font-scale-15);
-
+    }
-  }
+    h2 {
-  h2 {
+        flex: 1;
-    flex: 1;
+        padding-left: 1em;
-    padding-left: 1em;
+        font-size: var(--font-scale-13);
-    font-size: var(--font-scale-13);
+    }
-  }
+    header > a {
-  header > a {
+        margin: 0px 2em;
-      margin: 0px 2em;
+        font-size: var(--font-scale-10);
-      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,33 +1,49 @@
-<aside transition:fade>
+<div>
-  <pre><code>{json}</code></pre>
+<button class="button primary" on:click={handleSave}>save</button>
-</aside>
+
+<pre><code>{json}</code></pre>
+    </div>
+
+<a style:display="none" {href} {download} bind:this={fileDownload} />
 
 <script>
-  export let ship = {};
+    export let ship = {};
-  let json;
+    let json;
-  $: json = JSON.stringify(ship, null, 2);
+    $: json = JSON.stringify(ship, null, 2);
 
-  import { fly, fade } from "svelte/transition";
+    import { fly, fade } from "svelte/transition";
-  import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, getContext } from "svelte";
 
-  const dispatch = createEventDispatcher();
+    const { state } = getContext("ship");
-  const close = () => dispatch("close");
+
+    $: 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>
-  pre {
+div {
-    font-family: monospace;
+    position: relative;
-    font-size: var(--font-scale-9);
+}
-    overflow: scroll;
+button {
-    height: 90%;
+    position: absolute;
-  }
+    right: 2em;
-  div {
+    top: 1em;
-    text-align: right;
+}
-  }
+    pre {
-  aside {
+        font-family: monospace;
-    padding: 1em;
+        font-size: var(--font-scale-10);
-    border: 3px solid var(--indigo-dye);
+        overflow: scroll;
-    border-radius: 1em;
+        height: 90%;
-    font-size: var(--font-scale-11);
+    }
-  }
 </style>