import ship

src/lib/components/ShipEdit.svelte

@@ -8,6 +8,8 @@
 {/if}
 
 <script>
+  import { getContext } from "svelte";
+
   import Identification from "./ShipEdit/Identification.svelte";
   import Propulsion from "./ShipEdit/Propulsion.svelte";
   import shipDux from "$lib/store/ship";
@@ -20,6 +22,8 @@
   export let structure = {};
   export let weaponry = {};
   export let carrier = {};
+
+  const api = getContext("api");
 </script>
 
 <style>
@@ -28,4 +32,6 @@
     margin-left: auto;
     margin-right: auto;
   }
+  .reset {
+  }
 </style>

src/lib/components/ShipEdit/Identification.svelte

@@ -28,6 +28,7 @@
   import Field from "$lib/components/Field.svelte";
   import { candidateShipTypes } from "./Identification/shipTypes.js";
   import ShipCost from "./Identification/ShipCost.svelte";
+  import shipDux from "$lib/store/ship";
 
   export let shipClass = "";
   export let shipType = "";

src/lib/store/ship.ts

@@ -52,10 +52,13 @@ const weaponry = new Updux({
 });
 
 const restore = createPayloadAction<typeof shipDux.initialState>("restore");
+const importShip =
+    createPayloadAction<typeof shipDux.initialState>("importShip");
 
 const shipDux = new Updux({
     actions: {
         restore,
+        importShip,
     },
     initialState: {
         schemaVersion: "1",
@@ -70,6 +73,7 @@ const shipDux = new Updux({
 });
 
 shipDux.addMutation(restore, (state) => () => state);
+shipDux.addMutation(importShip, (state) => () => state);
 
 shipDux.addReaction((api) => {
     return createSelector(

src/routes/(editor)/+layout.svelte

@@ -8,7 +8,7 @@
     <i>print</i>
     <span>print</span>
   </a>
-  <a href="/export/json">
+  <a href="/export">
     <i>output</i>
     <span>export</span>
   </a>
@@ -16,9 +16,25 @@
     <i>input</i>
     <span>import</span>
   </a>
+  <a on:click={handleReset}>
+    <i>restart_alt</i>
+    <span>reset</span>
+  </a>
 </nav>
 <slot />
 
+<script>
+  import { getContext } from "svelte";
+  import shipDux from "$lib/store/ship";
+
+  export let api = getContext("api");
+
+  async function handleReset() {
+    if (!(await window.confirm("really reset the ship?"))) return;
+    api?.dispatch?.importShip(shipDux.initialState);
+  }
+</script>
+
 <style>
   nav {
     margin-top: 70px;

src/routes/(editor)/import/+page.svelte

@@ -0,0 +1,102 @@
+<article>
+  <nav>
+    <button class="primary" disabled={error} on:click={handleSet}>set </button>
+    <div class="max" />
+
+    <div class="my-error">
+      {#if error}
+        invalid
+      {/if}
+    </div>
+
+    <button class="primary" on:click={() => fileInput.click()}
+      ><i>upload</i> upload</button
+    >
+  </nav>
+  <div class="support">
+    both <code>json</code> and <code>yaml</code> formats are supported
+  </div>
+  <textarea rows="20" bind:value={stringData} />
+  <input
+    bind:this={fileInput}
+    bind:files
+    type="file"
+    on:change={handleUpload}
+  />
+</article>
+
+<script>
+  import { clipboard } from "$lib/actions/clipboard.js";
+  import { getContext } from "svelte";
+  import yaml from "yaml";
+  import { goto } from "$app/navigation";
+
+  export let format = "json";
+
+  let fileInput;
+  let files;
+  const handleUpload = async () => {
+    stringData = await files[0].text();
+  };
+
+  const api = getContext("api");
+
+  let shipData = api.svelteStore;
+
+  let stringData = JSON.stringify($shipData, null, 2);
+
+  let serialized = {};
+  let error = false;
+  $: try {
+    error = false;
+    serialized = yaml.parse(stringData);
+  } catch (e) {
+    error = true;
+  }
+
+  async function handleSet() {
+    if (await window.confirm("import ship (and clobber the current one)?")) {
+      api?.dispatch?.importShip?.(serialized);
+      goto("/editor");
+    }
+  }
+</script>
+
+<style>
+  article {
+    background-color: var(--primary-container);
+  }
+  button {
+    font-size: var(--font-scale-10);
+  }
+  nav {
+    margin-bottom: 1em;
+  }
+  .my-switch {
+    display: flex;
+    align-items: center;
+  }
+  .my-switch > span {
+    display: inline-block;
+    font-size: var(--font-scale-10);
+  }
+  label {
+    margin: 0px 0.5rem;
+  }
+  textarea {
+    width: 100%;
+    height: 70vh;
+  }
+  .support {
+    margin-bottom: 1rem;
+    text-align: right;
+  }
+  .my-error {
+    color: red;
+    font-size: var(--font-scale-11);
+  }
+  input[type="file"] {
+    position: inherit;
+    visibility: hidden;
+  }
+</style>

vite.config.js

@@ -5,7 +5,7 @@ import packageJson from "./package.json";
 /** @type {import('vite').UserConfig} */
 const config = {
     plugins: [sveltekit()],
-  publicDir: "./static",
+    //  publicDir: "./static",
     ssr: {},
     optimizeDeps: {},
     define: {