move styles

src/histoire.setup.js

@@ -1 +1,3 @@
-import "./lib/style/index.js";
+//import "./lib/style/index.js";
+import "@picocss/pico";
+import "../static/global.css";

src/lib/components/GlobalStyle.svelte

@@ -1,129 +0,0 @@
-<script>
-  import "@picocss/pico";
-</script>
-
-<style global>
-  @font-face {
-    font-family: "Faktos";
-    font-style: normal;
-    src: url(/fonts/Faktos.ttf) format("truetype");
-  }
-  @font-face {
-    font-family: "Dosis";
-    src: url(/fonts/dosis/Dosis-VariableFont_wght.ttf) format("truetype");
-  }
-
-  :root {
-    --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-    --font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-
-    --font-scale-9: 0.75rem;
-    --font-scale-10: 1em;
-    --font-scale-11: 1.333rem;
-    --font-scale-12: 1.777rem;
-    --font-scale-13: 2.369rem;
-    --font-scale-14: 3.157rem;
-    --font-scale-15: 4.209rem;
-
-    --oxford-blue: hsla(226, 60%, 10%, 1);
-    --royal-blue-dark: hsla(218, 100%, 16%, 1);
-    --indigo-dye: hsla(209, 95%, 24%, 1);
-    --cg-blue: hsla(193, 80%, 35%, 1);
-    --white: hsla(20, 60%, 99%, 1);
-
-    --main-width: 60em;
-  }
-
-  input.short {
-    width: 5em !important;
-  }
-
-  small {
-    font-size: var(--font-scale-9);
-  }
-
-  h1 {
-    margin: 0px;
-    padding: 0px;
-    font-size: var(--font-scale-14);
-  }
-
-  h2 {
-    font-size: var(--font-scale-12);
-  }
-
-  body {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background-color: var(--white);
-    color: #333;
-    margin: 0;
-    padding: 8px;
-    box-sizing: border-box;
-    font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  }
-
-  a {
-    color: rgb(0, 100, 200);
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-  a:visited {
-    color: rgb(0, 80, 160);
-  }
-
-  label {
-    display: block;
-  }
-
-  input,
-  button,
-  select,
-  textarea {
-    font-family: inherit;
-    font-size: inherit;
-    padding: 0.4em;
-    margin: 0 0 0.5em 0;
-    box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 2px;
-  }
-
-  input:disabled {
-    color: #ccc;
-  }
-
-  input[type="range"] {
-    height: 0;
-  }
-
-  /* input, */
-  /* select { */
-  /*   border: 0px; */
-  /*   border-bottom: 1px solid var(--indigo-dye); */
-  /* } */
-
-  input:focus,
-  select:focus {
-    border: 1px solid var(--indigo-dye);
-  }
-
-  input:not([type="checkbox"]):not([type="radio"]) {
-    border: 0px;
-    border-bottom: 1px solid var(--indigo-dye);
-    border-radius: 0px;
-    height: calc(
-      1rem * var(--line-height) + var(--form-element-spacing-vertical) * 1
-    );
-    padding: 0 0.5rem;
-    text-align: center;
-  }
-</style>

src/lib/components/ShipEdit.story.svelte

@@ -14,5 +14,8 @@
 
   let ship = api.getState();
 
-  api.subscribe(() => (ship = api.getState()));
+  api.subscribe(() => {
+    console.log("update!");
+    ship = api.getState();
+  });
 </script>

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

@@ -1,5 +1,4 @@
 <ShipItem {...reqs}>
-  <!--
   <Field label={`squadron ${id}`}>
     <select bind:value={type}>
       {#each types as type (type)}
@@ -7,7 +6,6 @@
       {/each}
     </select>
   </Field>
-    -->
 </ShipItem>
 
 <script>

src/lib/components/ShipEdit/Propulsion.svelte

@@ -1,6 +1,6 @@
 <Section label="propulsion">
-  <Drive {...propulsion.drive} />
+  <Drive {...drive} />
-  <Ftl {...propulsion.ftl} />
+  <Ftl {...ftl} />
 </Section>
 
 <script lang="ts">
@@ -8,8 +8,6 @@
   import Drive from "./Propulsion/Engine.svelte";
   import Ftl from "./Propulsion/Ftl.svelte";
 
-  export let propulsion = {
+  export let drive = {};
-    drive: {},
+  export let ftl = {};
-    ftl: {},
-  };
 </script>

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

@@ -13,5 +13,4 @@
   };
 
   import Engine from "./Engine.svelte";
-  import "$lib/components/GlobalStyle.svelte";
 </script>

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

@@ -25,7 +25,8 @@
   export let rating = 0;
   export let api = getContext("api");
 
-  $: api?.dispatch?.setEngine?.({ rating, advanced });
+  console.log(api?.dispatch?.setDrive);
+  $: api?.dispatch?.setDrive?.({ rating, advanced });
 </script>
 
 <style>

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

@@ -13,5 +13,4 @@
   };
 
   import Ftl from "./Ftl.svelte";
-  import "$lib/components/GlobalStyle.svelte";
 </script>

src/lib/shipDux/carrier.ts

@@ -1,79 +1,79 @@
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
-import { reqs, Reqs } from "./reqs";
+import { reqs, type Reqs } from "./reqs";
 
 type Squadron = {
-  type: string;
+    type: string;
-  reqs: Reqs;
+    reqs: Reqs;
 };
 
 const initialState = {
-  bays: 0,
+    bays: 0,
-  squadrons: [] as Squadron[],
+    squadrons: [] as Squadron[],
-  reqs,
+    reqs,
 };
 
 export const { actions, reducer } = createSlice({
-  name: "carrier",
+    name: "carrier",
-  initialState,
+    initialState,
-  reducers: {
+    reducers: {
-    setCarrierBays: (state, action: PayloadAction<number>) => {
+        setCarrierBays: (state, action: PayloadAction<number>) => {
-      state.bays = action.payload;
+            state.bays = action.payload;
-      state.reqs = calcBaysReqs(action.payload);
+            state.reqs = calcBaysReqs(action.payload);
-      state.squadrons = adjustSquadrons(action.payload)(state.squadrons);
+            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),
+            };
+        },
     },
-    setSquadronType: (
-      state,
-      action: PayloadAction<{ type: string; id: number }>
-    ) => {
-      state.squadrons[action.payload.id - 1] = {
-        type: action.payload.type,
-        reqs: squadronReqs(action.payload.type),
-      };
-    },
-  },
 });
 
 export const squadronTypes = [
-  { type: "standard", cost: 3 },
+    { type: "standard", cost: 3 },
-  { type: "fast", cost: 4 },
+    { type: "fast", cost: 4 },
-  { type: "heavy", cost: 5 },
+    { type: "heavy", cost: 5 },
-  { type: "interceptor", cost: 3 },
+    { type: "interceptor", cost: 3 },
-  { type: "attack", cost: 4 },
+    { type: "attack", cost: 4 },
-  { type: "long range", cost: 4 },
+    { type: "long range", cost: 4 },
-  { type: "torpedo", cost: 6 },
+    { type: "torpedo", cost: 6 },
 ];
 
 function squadronReqs(type: string) {
-  return {
+    return {
-    mass: 6,
+        mass: 6,
-    cost: 6 * squadronTypes.find((s) => s.type === type)?.cost,
+        cost: 6 * squadronTypes.find((s) => s.type === type)?.cost,
-  };
+    };
 }
 
 const adjustSquadrons = (bays) => (squadrons) => {
-  if (squadrons.length > bays) {
+    if (squadrons.length > bays) {
-    squadrons = squadrons.slice(0, bays);
+        squadrons = squadrons.slice(0, bays);
-  }
+    }
 
-  if (squadrons.length < bays) {
+    if (squadrons.length < bays) {
-    squadrons = [
+        squadrons = [
-      ...squadrons,
+            ...squadrons,
-      ..._.times(bays - squadrons.length, () => ({
+            ..._.times(bays - squadrons.length, () => ({
-        type: squadronTypes[0].type,
+                type: squadronTypes[0].type,
-        reqs: {
+                reqs: {
-          cost: 6 * squadronTypes[0].cost,
+                    cost: 6 * squadronTypes[0].cost,
-          mass: 6,
+                    mass: 6,
-        },
+                },
-      })),
+            })),
-    ];
+        ];
-  }
+    }
 
-  return squadrons;
+    return squadrons;
 };
 
 function calcBaysReqs(bays) {
-  return {
+    return {
-    mass: 9 * bays,
+        mass: 9 * bays,
-    cost: 18 * bays,
+        cost: 18 * bays,
-  };
+    };
 }

src/lib/shipDux/engine.ts

@@ -1,42 +1,41 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
-import { Updux } from "updux";
 import u from "updeep";
 
-import { Reqs, reqs } from "./reqs.js";
+import { type Reqs, reqs } from "./reqs.js";
 
 const initialState = {
-  rating: 1,
+    rating: 1,
-  advanced: false,
+    advanced: false,
-  reqs,
+    reqs,
 };
 
 const engine = createSlice({
-  name: "engine",
+    name: "engine",
-  initialState,
+    initialState,
-  reducers: {
+    reducers: {
-    setDriveRating(state, action: PayloadAction<number>) {
+        setDriveRating(state, action: PayloadAction<number>) {
-      state.rating = action.payload;
+            state.rating = action.payload;
+        },
+        setDriveAdvanced(state, action: PayloadAction<boolean>) {
+            state.advanced = action.payload;
+        },
+        setDriverReqs(state, action: PayloadAction<Reqs>) {
+            state.reqs = action.payload;
+        },
     },
-    setDriveAdvanced(state, action: PayloadAction<boolean>) {
-      state.advanced = action.payload;
-    },
-    setDriverReqs(state, action: PayloadAction<Reqs>) {
-      state.reqs = action.payload;
-    },
-  },
 });
 
 export const { actions, reducer } = engine;
 
 export function calcDriveReqs(
-  shipMass: number,
+    shipMass: number,
-  rating: number,
+    rating: number,
-  advanced = false
+    advanced = false
 ) {
-  const mass = Math.ceil(rating * 0.05 * shipMass);
+    const mass = Math.ceil(rating * 0.05 * shipMass);
-  const cost = mass * (advanced ? 3 : 2);
+    const cost = mass * (advanced ? 3 : 2);
 
-  return { mass, cost };
+    return { mass, cost };
 }
 
 export default engine;

src/lib/shipDux/propulsion/drive.ts

@@ -2,28 +2,28 @@ import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 import { reqs, Reqs } from "../reqs";
 
 type DriveProps = {
-  rating: number;
+    rating: number;
-  advanced: boolean;
+    advanced: boolean;
 };
 
 export const initialState: DriveProps & { reqs: Reqs } = {
-  rating: 0,
+    rating: 0,
-  advanced: false,
+    advanced: false,
-  reqs,
+    reqs,
 };
 
 const driveSlice = createSlice({
-  initialState,
+    initialState,
-  name: "drive",
+    name: "drive",
-  reducers: {
+    reducers: {
-    setDrive: (state, action: PayloadAction<DriveProps>) => {
+        setDrive: (state, action: PayloadAction<DriveProps>) => {
-      state.rating = action.payload.rating;
+            state.rating = action.payload.rating;
-      state.advanced = action.payload.advanced;
+            state.advanced = action.payload.advanced;
+        },
+        setDriveReqs: (state, action: PayloadAction<Reqs>) => {
+            state.reqs = action.payload;
+        },
     },
-    setDriveReqs: (state, action: PayloadAction<Reqs>) => {
-      state.reqs = action.payload;
-    },
-  },
 });
 
 export const { actions, reducer } = driveSlice;
@@ -41,10 +41,4 @@ export const calculateDriveReqs = (store) =>
       store.dispatch.setDriveReqs(calcDriveReqs(ship_mass, rating, advanced))
   );
 
-export function calcDriveReqs(shipMass, rating, advanced = false) {
-  const mass = Math.ceil(rating * 0.05 * shipMass);
-  const cost = mass * (advanced ? 3 : 2);
-
-  return { mass, cost };
-}
 */

src/lib/store/ship.test.ts

@@ -1,10 +1,14 @@
 import { test, expect } from "vitest";
 import ship from "./ship";
 
-test("ftlReqs reaction", () => {
+test("misc", () => {
     const store = ship.createStore();
     store.dispatch.setFtlType("standard");
 
     expect(store.getState().propulsion.ftl.reqs.mass).toEqual(1);
     expect(store.getState().identification.reqs.usedMass).toEqual(1);
+
+    store.dispatch.setDrive({ rating: 3, advanced: true });
+
+    expect(store.getState().propulsion.drive.reqs).toEqual({ mass: 2, cost: 6 });
 });

src/lib/store/ship.ts

@@ -4,13 +4,17 @@ import * as R from "remeda";
 
 import identification from "./ship/identification";
 import ftl, { calcFtlReqs } from "./ship/propulsion/ftl";
+import drive from "./ship/propulsion/drive";
+import { calcDriveReqs } from "$lib/shipDux/engine";
 
 const shipDux = new Updux({
     subduxes: {
         identification,
         propulsion: new Updux({
+            initial: {},
             subduxes: {
                 ftl,
+                drive,
             },
         }),
     },
@@ -45,4 +49,14 @@ shipDux.addReaction((api) => (state) => {
     api.dispatch.setShipReqs({ cost, usedMass: mass });
 });
 
+shipDux.addReaction((api) =>
+    createSelector(
+        api.selectors.getShipMass,
+        (state) => state.propulsion.drive.rating,
+        (state) => state.propulsion.drive.advanced,
+        (mass, rating, advanced) =>
+            api.dispatch.setDriveReqs(calcDriveReqs(mass, rating, advanced))
+    )
+);
+
 export default shipDux;

src/lib/store/ship/propulsion/drive.ts

@@ -0,0 +1,38 @@
+import { reqs, type Reqs } from "$lib/shipDux/reqs";
+import Updux, { createPayloadAction } from "updux";
+import u from "@yanick/updeep-remeda";
+
+type DriveProps = {
+    rating: number;
+    advanced: boolean;
+};
+
+const initial: DriveProps & { reqs: Reqs } = {
+    rating: 0,
+    advanced: false,
+    reqs,
+};
+
+const setDrive = createPayloadAction<DriveProps>("setDrive");
+const setDriveReqs = createPayloadAction<Reqs>("setDriveReqs");
+
+const dux = new Updux({
+    initial,
+    actions: { setDrive, setDriveReqs },
+});
+
+export default dux;
+
+dux.addMutation(setDrive, (change) => u(change));
+dux.addMutation(setDriveReqs, (reqs) => u({ reqs }));
+
+export function calcDriveReqs(
+    shipMass: number,
+    rating: number,
+    advanced = false
+) {
+    const mass = Math.ceil(rating * 0.05 * shipMass);
+    const cost = mass * (advanced ? 3 : 2);
+
+    return { mass, cost };
+}