Drive UI

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

@@ -1,6 +1,6 @@
 <Meta
-  title="Engine"
-  component={Engine}
+  title="ShipEdit/Propulsion/Drive"
+  component={Drive}
   argTypes={{
     rating: { type: "number", defaultValue: 6 },
     advanced: { type: "boolean", defaultValue: false },
@@ -12,7 +12,7 @@
 
 <Template let:args>
   <div style="width: 50em">
-    <Engine {...args} />
+    <Drive {...args} />
   </div>
 </Template>
 
@@ -22,10 +22,12 @@
 
   import { setContext } from "svelte";
 
-  import Engine from "./index.svelte";
+  import Drive from "./index.svelte";
 
   setContext("ship", {
-    dispatch: (type, detail) => action(type)(detail),
+      dispatch: {
+          setDrive: action('setDrive')
+      },
   });
 
   let advanced = false;

src/lib/components/ShipEdit/Propulsion/Drive/index.svelte

@@ -17,11 +17,10 @@
   export let advanced = false;
   export let rating = 0;
 
-  const ship = getContext("ship") || {
-    dispatch: (...args) => console.log(args),
-  };
+  const ship = getContext("ship");
 
-  $: ship.dispatch("setEngine", { rating, advanced });
+  console.log( ship.dispatch )
+  $: ship.dispatch.setDrive({ rating, advanced });
 </script>
 
 <style>

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

@@ -0,0 +1,11 @@
+<Section label="propulsion">
+    <Drive { ...propulsion.drive  } />
+</Section>
+
+<script>
+  import Section from "$lib/components/Section/index.svelte";
+  import Drive from './Drive/index.svelte';
+
+  export let propulsion = {};
+  $: console.log(propulsion)
+</script>

src/lib/components/ShipEdit/index.svelte

@@ -4,11 +4,14 @@
     <ShipCost {...$shipState.reqs} />
 </div>
 
+<Propulsion propulsion={$shipState.propulsion}/>
+
 <script>
     import { getContext } from "svelte";
 
     import Identification from "./Identification/index.svelte";
     import ShipCost from "./ShipCost.svelte";
+    import Propulsion from "./Propulsion/index.svelte";
 
     const { state: shipState } = getContext("ship");
 </script>

src/lib/shipDux/engine.js

@@ -10,13 +10,13 @@ const dux = new Updux({
     advanced: false,
   },
   actions: {
-    setEngine: null,
-    setEngineReqs: null,
+    setDrive: null,
+    setDriveReqs: null,
   },
 });
 
-dux.setMutation("setEngine", (changes) => u(changes));
-dux.setMutation("setEngineReqs", (reqs) => u({ reqs }));
+dux.setMutation("setDrive", (changes) => u(changes));
+dux.setMutation("setDriveReqs", (reqs) => u({ reqs }));
 
 export function calcDriveReqs(shipMass, rating, advanced = false) {
   const mass = Math.ceil(rating * 0.05 * shipMass);

src/lib/shipDux/index.js

@@ -1,14 +1,13 @@
 import { Updux } from "updux";
 import u from 'updeep';
 
-import engine from "./engine.js";
+import propulsion from "./propulsion/index.js";
 import identification from "./identification.js";
-import reqs from "./reqs.js";
 
 const dux = new Updux({
   subduxes: {
     identification,
-    engine,
+    propulsion
   },
   initial: {
     reqs: { cost: 0, mass: 10, usedMass: 0 },

src/lib/shipDux/propulsion/drive.js

@@ -0,0 +1,28 @@
+import { Updux } from "updux";
+import u from "updeep";
+
+import reqs from "../reqs.js";
+
+const dux = new Updux({
+  subduxes: { reqs },
+  initial: {
+    rating: 1,
+    advanced: false,
+  },
+  actions: {
+    setDrive: null,
+    setDriveReqs: null,
+  },
+});
+
+dux.setMutation("setDrive", (changes) => u(changes));
+dux.setMutation("setDriveReqs", (reqs) => u({ reqs }));
+
+export function calcDriveReqs(shipMass, rating, advanced = false) {
+  const mass = Math.ceil(rating * 0.05 * shipMass);
+  const cost = mass * (advanced ? 3 : 2);
+
+  return { mass, cost };
+}
+
+export default dux;

src/lib/shipDux/propulsion/index.js

@@ -0,0 +1,12 @@
+import { Updux } from "updux";
+import u from 'updeep';
+
+import drive from './drive.js';
+
+const dux = new Updux({
+  subduxes: {
+        drive
+  },
+});
+
+export default dux;