carrier component

src/lib/components/ShipEdit.svelte

@@ -3,17 +3,23 @@
 <Structure {...structure} />
 <Weaponry {...weaponry} />
 
+{#if identification.isCarrier}
+  <Carrier {...carrier} />
+{/if}
+
 <script>
   import Identification from "./ShipEdit/Identification.svelte";
   import Propulsion from "./ShipEdit/Propulsion.svelte";
   import shipDux from "$lib/store/ship";
   import Structure from "./ShipEdit/Structure.svelte";
   import Weaponry from "./ShipEdit/Weaponry.svelte";
+  import Carrier from "./ShipEdit/Carrier.svelte";
 
   export let identification = {};
   export let propulsion = {};
   export let structure = {};
   export let weaponry = {};
+  export let carrier = {};
 </script>
 
 <style>

src/lib/components/ShipEdit/Carrier.svelte

@@ -1,16 +1,18 @@
 <Section label="carrier">
-  <ShipItem {...reqs}>
+  <div>
-    <Field label="bays">
+    <ShipItem {...reqs}>
-      <input class="short" type="number" min="0" bind:value={bays} />
+      <Field label="bays">
-    </Field>
+        <input class="short" type="number" min="1" bind:value={bays} />
-  </ShipItem>
+      </Field>
+    </ShipItem>
+  </div>
 
   {#each squadrons as squadron, id (id)}
     <Squadron {...squadron} id={id + 1} />
   {/each}
 </Section>
 
-<script lang="ts">
+<script>
   import { getContext } from "svelte";
 
   import Field from "$lib/components/Field.svelte";
@@ -18,13 +20,15 @@
   import Section from "$lib/components/Section.svelte";
   import Squadron from "./Carrier/Squadron.svelte";
 
-  export let bays = 0;
+  export let bays = 1;
   export let reqs = { cost: 0, mass: 0 };
   export let squadrons = [];
 
+  if (bays < 1) bays = 1;
+
   export let api = getContext("api");
 
-  $: api?.dispatch?.setCarrierBays?.(bays);
+  $: api?.dispatch.setNbrCarrierBays(bays);
 </script>
 
 <style>

src/lib/components/ShipEdit/Carrier/Squadron.svelte

@@ -1,12 +1,14 @@
 <ShipItem {...reqs}>
-  <Field label={`squadron ${id}`}>
+  <div class="field label suffix">
     <select bind:value={type}>
       {#each types as type (type)}
         <option>{type}</option>
       {/each}
     </select>
-  </Field>
+    <label class="active">squadron {id}</label>
-</ShipItem>
+    <i>arrow_drop_down</i>
+  </div></ShipItem
+>
 
 <script>
   import { getContext } from "svelte";
@@ -14,7 +16,7 @@
   import Section from "$lib/components/Section.svelte";
   import Field from "$lib/components/Field.svelte";
   import ShipItem from "$lib/components/ShipItem.svelte";
-  //  import { squadronTypes } from "$lib/shipDux/carrier";
+  import { squadronTypes } from "$lib/store/ship/carrier.ts";
 
   const types = squadronTypes.map(({ type }) => type);
 
@@ -30,6 +32,9 @@
 
 <style>
   select {
-    width: inherit;
+    /* width: inherit; */
+  }
+  div {
+    display: inline-block;
   }
 </style>

src/lib/components/ShipEdit/Identification.svelte

@@ -34,6 +34,8 @@
   export let isCarrier = false;
   export let reqs = {};
 
+  $: console.log("in the comp", isCarrier, shipClass);
+
   export let api = getContext("api");
 
   $: shipTypes = candidateShipTypes(reqs.mass, isCarrier).map(
@@ -45,7 +47,6 @@
 
   $: api?.dispatch?.updateIdentification?.({ shipType, shipClass });
 
-  $: console.log(isCarrier);
   $: api?.dispatch.setCarrier?.(isCarrier);
 </script>
 

src/lib/components/ShipEdit/index.svelte

@@ -1,44 +1,46 @@
 <main>
-<div class="identification-row">
+  <div class="identification-row">
     <Identification {...$shipState.identification} />
 
     <ShipCost {...$shipState.reqs} />
-</div>
+  </div>
 
-<Propulsion propulsion={$shipState.propulsion}/>
+  <Propulsion propulsion={$shipState.propulsion} />
 
-<Structure {...$shipState.structure} />
+  <Structure {...$shipState.structure} />
 
-<Weaponry {...$shipState.weaponry}/>
+  <Weaponry {...$shipState.weaponry} />
 
-<Carrier {...$shipState.carrier} />
+  {#if $shipState.identification.isCarrier}
-    </main>
+    <Carrier {...$shipState.carrier} />
+  {/if}
+</main>
 
 <script>
-    import { getContext } from "svelte";
+  import { getContext } from "svelte";
 
-    import Identification from "./Identification/index.svelte";
+  import Identification from "./Identification/index.svelte";
-    import ShipCost from "./ShipCost.svelte";
+  import ShipCost from "./ShipCost.svelte";
-    import Propulsion from "./Propulsion/index.svelte";
+  import Propulsion from "./Propulsion/index.svelte";
-    import Structure from "./Structure/index.svelte";
+  import Structure from "./Structure/index.svelte";
-    import Carrier from "./Carrier/index.svelte";
+  import Carrier from "./Carrier/index.svelte";
-    import Weaponry from "./Weaponry/index.svelte";
+  import Weaponry from "./Weaponry/index.svelte";
 
-    const { state: shipState } = getContext("ship");
+  const { state: shipState } = getContext("ship");
 </script>
 
 <style>
-    .identification-row {
+  .identification-row {
-        display: flex;
+    display: flex;
-    }
+  }
 
-    .identification-row :global(> *:first-child) {
+  .identification-row :global(> *:first-child) {
-        flex: 1;
+    flex: 1;
-    }
+  }
 
-    main {
+  main {
-        width: var(--main-width);
+    width: var(--main-width);
-        margin-left: auto;
+    margin-left: auto;
-        margin-right: auto;
+    margin-right: auto;
-    }
+  }
 </style>

src/lib/store/api.ts

@@ -8,10 +8,15 @@ export const createApi = () => {
     ? JSON.parse(localStorage.getItem("ship") || "null")
     : undefined;
 
-  const api = ship.createStore(state || undefined);
+  const api = ship.createStore({
+    preloadedState: state,
+  });
+
+  api.dispatch.restore(state);
 
   if (browser) {
     api.subscribe(() => {
+      console.log("saving...", api.getState());
       localStorage.setItem("ship", JSON.stringify(api.getState()));
     });
   }

src/lib/store/ship.ts

@@ -1,5 +1,5 @@
 import { createSelector } from "@reduxjs/toolkit";
-import Updux from "updux";
+import Updux, { createPayloadAction } from "updux";
 import * as R from "remeda";
 import memoize from "memoize-one";
 
@@ -51,7 +51,12 @@ const weaponry = new Updux({
   },
 });
 
+const restore = createPayloadAction<typeof shipDux.initialState>("restore");
+
 const shipDux = new Updux({
+  actions: {
+    restore,
+  },
   initialState: {
     schemaVersion: "1",
   },
@@ -64,6 +69,8 @@ const shipDux = new Updux({
   },
 });
 
+shipDux.addMutation(restore, (state) => () => state);
+
 shipDux.addReaction((api) => {
   return createSelector(
     api.selectors.getFtlType,

src/routes/+page.svelte

@@ -1,4 +1,6 @@
-<ShipEdit {...ship} />
+{#if ship}
+  <ShipEdit {...ship} />
+{/if}
 
 <script>
   import { getContext } from "svelte";
@@ -7,7 +9,7 @@
 
   export let api = getContext("api");
 
-  let ship = {};
+  let ship = api?.getState() ?? {};
   api?.subscribe(() => {
     ship = api.getState();
   });