json output

TODO

@@ -0,0 +1 @@
+- menu: add Import/Export

package.json

@@ -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",

src/lib/components/MainLayout.svelte

@@ -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")}

src/lib/components/ShipEdit/Weaponry.story.svelte.todo

@@ -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>

src/routes/+page.svelte

@@ -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>

src/routes/editor/+page.svelte

@@ -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>

src/routes/export/+layout.svelte

@@ -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>

src/routes/export/json/+page.svelte

@@ -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>

src/routes/export/yaml/+page.svelte

@@ -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>