Merge branch 'carrier-identification'

Taskfile.yml

@@ -3,7 +3,6 @@
 version: "3"
 
 vars:
-  GREETING: Hello, World!
   PARENT_BRANCH: main
 
 tasks:
@@ -14,6 +13,12 @@ tasks:
     cmds:
       - vitest src
 
+  test:update:
+    deps:
+      - histoire:build
+    cmds:
+      - vitest run -u src 
+
   check:
     deps:
       - histoire:build

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">
+  <div>
     <ShipItem {...reqs}>
       <Field label="bays">
-      <input class="short" type="number" min="0" bind:value={bays} />
+        <input class="short" type="number" min="1" bind:value={bays} />
       </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>
-</ShipItem>
+    <label class="active">squadron {id}</label>
+    <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.story.svelte

@@ -8,10 +8,18 @@
       mass: 13,
       usedMass: 9,
     }}
+    {api}
   />
 </Hst.Story>
 
 <script lang="ts">
   export let Hst;
+  import { logEvent } from "histoire/client";
   import Identification from "./Identification.svelte";
+
+  const api = {
+    dispatch: {
+      setCarrier: (isCarrier) => logEvent("isCarrier", { isCarrier }),
+    },
+  };
 </script>

src/lib/components/ShipEdit/Identification.svelte

@@ -10,6 +10,14 @@
       <label class="active">ship type</label>
       <i>arrow_drop_down</i>
     </Field>
+    <label class="switch icon">
+      <div>carrier</div>
+      <input type="checkbox" bind:checked={isCarrier} />
+      <span>
+        <i>airplanemode_inactive</i>
+        <i>airplanemode_active</i>
+      </span>
+    </label>
   </div>
   <ShipCost {...reqs} />
 </div>
@@ -26,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(
@@ -36,6 +46,8 @@
     shipType = shipTypes[0];
 
   $: api?.dispatch?.updateIdentification?.({ shipType, shipClass });
+
+  $: api?.dispatch.setCarrier?.(isCarrier);
 </script>
 
 <style>
@@ -48,8 +60,18 @@
     display: flex;
     align-items: start;
   }
+  select {
+    min-width: 10em;
+  }
 
   .identification-row :global(> *:first-child) {
     flex: 1;
   }
+  label div {
+    font-size: var(--font-scale-10);
+    margin-right: 1em;
+  }
+  label.switch {
+    margin-left: 2em;
+  }
 </style>

src/lib/components/ShipEdit/Identification.test.js

@@ -0,0 +1,10 @@
+import { render, fireEvent } from "@testing-library/svelte";
+import "@testing-library/jest-dom";
+import { tick } from "svelte";
+
+import Identification from "./Identification.svelte";
+
+test("carrier", () => {
+  const { getByText } = render(Identification);
+  expect(getByText("carrier")).toBeInTheDocument();
+});

src/lib/components/ShipEdit/Propulsion.story.svelte

@@ -1,8 +1,9 @@
-<Hst.Story>
+<Hst.Story title="ShipEdit/Propulsion/index">
   <Propulsion />
 </Hst.Story>
 
 <script>
   export let Hst;
+
   import Propulsion from "./Propulsion.svelte";
 </script>

src/lib/components/ShipEdit/index.svelte

@@ -11,7 +11,9 @@
 
   <Weaponry {...$shipState.weaponry} />
 
+  {#if $shipState.identification.isCarrier}
     <Carrier {...$shipState.carrier} />
+  {/if}
 </main>
 
 <script>

src/lib/store/__snapshots__/ship.test.ts.snap

@@ -53,6 +53,14 @@ exports[`state has the expected shape 1`] = `
       },
       "space": 0,
     },
+    "carrier": {
+      "nbrBays": 0,
+      "reqs": {
+        "cost": 0,
+        "mass": 0,
+      },
+      "squadrons": [],
+    },
     "hull": {
       "max": 0,
       "min": 0,

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.test.ts

@@ -17,11 +17,13 @@ test("kicking the tires", () => {
   store.dispatch.setNbrCarrierBays(2);
   expect(store.getState().carrier.nbrBays).toEqual(2);
 
+  expect(store.getState.isCarrier()).toBe(false);
+
+  store.dispatch.setCarrier(true);
   store.dispatch.setSquadronType(2, "fast");
 
-  expect(store.getState().carrier.squadrons[1]).toHaveProperty("type", "fast");
-
   expect(store.getState.isCarrier()).toBe(true);
+  expect(store.getState().carrier.squadrons[1]).toHaveProperty("type", "fast");
 
   store.dispatch.setStreamlining("partial");
 

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";
 
@@ -30,6 +30,7 @@ const structure = new Updux({
     hull: hullDux,
     screens: screensDux,
     armor: armorDux,
+    carrier: carrierDux,
   },
 });
 
@@ -50,7 +51,12 @@ const weaponry = new Updux({
   },
 });
 
+const restore = createPayloadAction<typeof shipDux.initialState>("restore");
+
 const shipDux = new Updux({
+  actions: {
+    restore,
+  },
   initialState: {
     schemaVersion: "1",
   },
@@ -63,6 +69,8 @@ const shipDux = new Updux({
   },
 });
 
+shipDux.addMutation(restore, (state) => () => state);
+
 shipDux.addReaction((api) => {
   return createSelector(
     api.selectors.getFtlType,

src/lib/store/ship/carrier.ts

@@ -89,30 +89,3 @@ function squadronReqs(type: string) {
     cost: 6 * squadronTypes.find((s) => s.type === type)?.cost,
   };
 }
-
-/*
-export const { actions, reducer } = createSlice({
-    name: "carrier",
-    initialStateState,
-    reducers: {
-        setCarrierBays: (state, action: PayloadAction<number>) => {
-            state.bays = action.payload;
-            state.reqs = calcBaysReqs(action.payload);
-            state.squadrons = adjustSquadrons(action.payload)(state.squadrons);
-        },
-        setSquadronType: (
-            state,
-            action: PayloadAction<{ type: string; id: number }>
-        ) => {
-            state.squadrons[action.payload.id - 1] = {
-                type: action.payload.type,
-                reqs: squadronReqs(action.payload.type),
-            };
-        },
-    },
-});
-
-
-
-
-*/

src/lib/store/ship/identification.ts

@@ -1,6 +1,5 @@
 import Updux, { createAction, withPayload } from "updux";
 import u from "@yanick/updeep-remeda";
-import * as R from "remeda";
 import { carrierDux } from "./carrier";
 
 const initialState = {
@@ -17,6 +16,7 @@ const initialState = {
 const setShipClass = createAction("setShipClass", withPayload<string>());
 const updateIdentification = createAction("updateIdentification");
 const setShipReqs = createAction("setShipReqs", withPayload());
+const setCarrier = createAction("setCarrier", withPayload<boolean>());
 
 export const identificationDux = new Updux({
   initialState,
@@ -24,6 +24,7 @@ export const identificationDux = new Updux({
     setShipClass,
     updateIdentification,
     setShipReqs,
+    setCarrier,
   },
   selectors: {
     getShipMass: (state) => state.reqs.mass,
@@ -33,12 +34,15 @@ export const identificationDux = new Updux({
 
 identificationDux.addMutation(setShipClass, (shipClass) => u({ shipClass }));
 identificationDux.addMutation(updateIdentification, (update) => u(update));
+
+identificationDux.addMutation(setCarrier, (isCarrier) => u({ isCarrier }));
+identificationDux.addEffect(setCarrier, (api) => (next) => (action) => {
+  next(action);
+  if (!action.payload) {
+    api.dispatch(carrierDux.actions.setNbrCarrierBays(0));
+  }
+});
+
 identificationDux.addMutation(setShipReqs, (reqs) => u({ reqs }));
 
-identificationDux.addMutation(carrierDux.actions.setNbrCarrierBays, (nbrBays) =>
-  u({
-    isCarrier: nbrBays > 0,
-  })
-);
-
 export default identificationDux;

src/routes/+page.svelte

@@ -1,4 +1,6 @@
+{#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();
   });