aotds/aotds-docks
1
0
Fork 0
Code Issues 28 Pull Requests Projects 2 Releases Wiki Activity

feat: add json output

Browse Source 
Merge branch 'json-view' into version-2
This commit is contained in:
Yanick Champoux 2022-03-22 10:54:13 -04:00
commit 00a08fce3b
3 changed files with 131 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/components/App.svelte
View File

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

109
src/lib/components/Header.svelte
View File

@ -1,53 +1,76 @@
<header> <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> </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> </script>
<style> <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: 1em;
} }
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) {
margin-left: 2em;
margin-bottom: 2em;
}
div :global(nav span) {
font-weight: bold;
font-family: var(--main-font-family);
font-size: var(--font-scale-12);
margin-right: 1em;
padding-bottom: 0.125em !important;
}
</style> </style>

66
src/lib/components/Output/Json.svelte
View File

@ -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> <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> </script>
<style> <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> </style>