Merge branch 'export-json'

docks66-json-schema
Yanick Champoux 2023-04-23 12:42:21 -04:00
commit 0d67abc301
11 changed files with 185 additions and 17 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 27 KiB

View File

@ -49,10 +49,12 @@
"remeda": "^1.9.1",
"reselect": "^4.1.5",
"svelte-chota": "^1.8.6",
"svelte-copy-clipboard-action": "^0.0.3",
"svelte-knobby": "^0.3.4",
"svelte-moveable": "^0.20.0",
"ts-action": "^11.0.0",
"vite": "^4.2.1"
"vite": "^4.2.1",
"yaml": "^2.2.1"
},
"prettier": {
"svelteSortOrder": "options-markup-scripts-styles",

View File

@ -5,7 +5,23 @@
</h1>
<h3 class="max">a Full Thrust ship builder</h3>
<div class="tabs in left-align">
<a class="spaced" class:active={currentPath === "/"} href="/">Editor</a>
<a
class="spaced"
class:active={currentPath.startsWith("/editor")}
href="/editor">Editor</a
>
<!--
<a
class="spaced"
class:active={currentPath.startsWith("/import")}
href="/import">Import</a
>
-->
<a
class="spaced"
class:active={currentPath.startsWith("/export")}
href="/export/json">Export</a
>
<a
class="spaced"
class:active={currentPath.startsWith("/about")}

View File

@ -7,11 +7,9 @@
import Weaponry from "./Weaponry.svelte";
import u from "@yanick/updeep-remeda";
import { weaponTypes } from "$lib/store/ship/weaponry/rules";
import Changelog from "../Changelog.svelte";
const weapons = [
weaponTypes.find(u.matches({ type: "beam" })).initial,
weaponTypes.find(u.matches({ type: "submunition" })).initial,
].map((specs, id) => ({ specs, id }));
console.log(weapons);
</script>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 27 KiB

View File

@ -1,16 +1,6 @@
{#if ship}
<ShipEdit {...ship} />
{/if}
<script>
import { getContext } from "svelte";
import { goto } from "$app/navigation";
import { browser } from "$app/environment";
import ShipEdit from "$lib/components/ShipEdit.svelte";
export let api = getContext("api");
let ship = api?.getState() ?? {};
api?.subscribe(() => {
ship = api.getState();
});
if (browser) goto("/editor");
</script>

View File

@ -0,0 +1,16 @@
{#if ship}
<ShipEdit {...ship} />
{/if}
<script>
import { getContext } from "svelte";
import ShipEdit from "$lib/components/ShipEdit.svelte";
export let api = getContext("api");
let ship = api?.getState() ?? {};
api?.subscribe(() => {
ship = api.getState();
});
</script>

View File

@ -0,0 +1,27 @@
<nav class="m l left">
<a href="/export/json">
<i>output</i>
<span>json</span>
</a>
<a href="/export/yaml">
<i>output</i>
<span>yaml</span>
</a>
<!-- TODO
<a>
<i>Quiz</i>
<span>See also</span>
</a>
<a>
<i>Format_List_Bulleted</i>
<span>Changelog</span>
</a>
-->
</nav>
<slot />
<style>
nav {
margin-top: 70px;
}
</style>

View File

@ -0,0 +1,59 @@
<article>
<nav>
<button
use:clipboard={{ text: shipJson }}
on:copied={copied}
on:error={copyError}>{copyLabel} <i>content_paste</i></button
>
<button on:click={handleSave}>download <i>download</i></button>
</nav>
<pre><code>{shipJson}</code></pre>
<a hidden {href} {download} bind:this={fileDownload} />
</article>
<script>
import { getContext } from "svelte";
import { clipboard } from "svelte-copy-clipboard-action";
// TODO copy
const api = getContext("api");
let shipData = api.getState();
api.subscribe(() => (shipDate = api.getState()));
let copyLabel = "clipboard";
const copied = () => {
copyLabel = "copied!";
setTimeout(() => (copyLabel = "clipboard"), 2000);
};
const copyError = () => {
copyLabel = "error copying";
setTimeout(() => (copyLabel = "clipboard"), 2000);
};
$: shipJson = JSON.stringify(shipData, null, 2);
$: href = "data:text/plain;charset=utf-8," + encodeURIComponent(shipJson);
$: download = (shipData?.identification?.shipClass || "ship") + ".json";
let fileDownload;
function handleSave() {
fileDownload?.click();
}
</script>
<style>
article {
background-color: var(--primary-container);
}
button {
font-size: var(--font-scale-10);
}
nav {
position: absolute;
right: 5em;
}
</style>

View File

@ -0,0 +1,60 @@
<article>
<nav>
<button
use:clipboard={{ text: shipJson }}
on:copied={copied}
on:error={copyError}>{copyLabel} <i>content_paste</i></button
>
<button on:click={handleSave}>download <i>download</i></button>
</nav>
<pre><code>{shipJson}</code></pre>
<a hidden {href} {download} bind:this={fileDownload} />
</article>
<script>
import { getContext } from "svelte";
import { clipboard } from "svelte-copy-clipboard-action";
import { stringify } from "yaml";
// TODO copy
const api = getContext("api");
let shipData = api.getState();
api.subscribe(() => (shipDate = api.getState()));
let copyLabel = "clipboard";
const copied = () => {
copyLabel = "copied!";
setTimeout(() => (copyLabel = "clipboard"), 2000);
};
const copyError = () => {
copyLabel = "error copying";
setTimeout(() => (copyLabel = "clipboard"), 2000);
};
$: shipJson = stringify(shipData, null, 2);
$: href = "data:text/plain;charset=utf-8," + encodeURIComponent(shipJson);
$: download = (shipData?.identification?.shipClass || "ship") + ".yml";
let fileDownload;
function handleSave() {
fileDownload?.click();
}
</script>
<style>
article {
background-color: var(--primary-container);
}
button {
font-size: var(--font-scale-10);
}
nav {
position: absolute;
right: 5em;
}
</style>