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} />
-  <Ftl {...propulsion.ftl} />
+  <Drive {...drive} />
+  <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 = {
-    drive: {},
-    ftl: {},
-  };
+  export let drive = {};
+  export let 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,5 +1,5 @@
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-import { reqs, Reqs } from "./reqs";
+import { createSlice } from "@reduxjs/toolkit";
+import { reqs, type Reqs } from "./reqs";
 
 type Squadron = {
     type: string;

src/lib/shipDux/engine.ts

@@ -1,8 +1,7 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { Updux } from "updux";
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 import u from "updeep";
 
-import { Reqs, reqs } from "./reqs.js";
+import { type Reqs, reqs } from "./reqs.js";
 
 const initialState = {
     rating: 1,

src/lib/shipDux/propulsion/drive.ts

@@ -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 };
+}