identification ui

package.json

@@ -35,14 +35,13 @@
     "@storybook/addon-svelte-csf": "^1.1.0",
     "@storybook/svelte": "^6.4.19",
     "@sveltejs/adapter-node": "^1.0.0-next.0",
-    "@yanick/updeep": "link:/home/yanick/work/javascript/updeep",
     "lodash": "^4.17.21",
     "redux": "^4.1.2",
     "reselect": "^4.1.5",
     "rollup-plugin-analyzer": "^4.0.0",
     "svelte-knobby": "^0.3.4",
     "ts-action": "^11.0.0",
-    "updux": "link:/home/yanick/work/javascript/updux/",
+    "updux": "link:/home/yanick/work/javascript/updux-js/",
     "webpack": "5"
   },
   "prettier": {

src/dux/index.js

@@ -36,8 +36,6 @@ const initial = {
     },
   };
 
-console.log(Updux);
-
 const dux = new Updux({
   subduxes: { ftl, engine, weaponry, structure, cargo, streamlining, carrier },
   initial

src/lib/components/ShipEdit/Identification/Identification.stories.svelte

@@ -0,0 +1,28 @@
+<Meta
+  title="Identification"
+  component={Identification}
+  argTypes={{
+  }}
+/>
+
+<Story name="Primary" args={{}} />
+
+<Template let:args>
+  <div style="width: 50em">
+    <Identification {...args} />
+  </div>
+</Template>
+
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import { action } from "@storybook/addon-actions";
+
+  import { setContext } from "svelte";
+
+  import Identification from "./index.svelte";
+
+  setContext("ship", {
+    dispatch: (type, detail) => action(type)(detail),
+  });
+
+</script>

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

@@ -0,0 +1,39 @@
+<div>
+  <Field
+    label="ship class"
+    value={shipClass}
+  />
+
+  <Field label="ship type">
+    <select value={shipType}>
+      {#each shipTypes as name (name)}
+        <option>{name}</option>
+      {/each}
+    </select>
+  </Field>
+</div>
+
+<script>
+  import Field from "$lib/components/Field/index.svelte";
+    import { candidateShipTypes } from './shipTypes.js';
+
+    export let shipClass = '';
+    export let shipType = '';
+    export let mass = 10;
+    export let isCarrier = false;
+
+    $: shipTypes = candidateShipTypes(mass,isCarrier).map( ({name})=>name );
+
+    $: if( shipTypes.length >0 &&  !shipTypes.includes(shipType)) shipType= shipTypes[0];
+
+
+
+</script>
+
+<style>
+  div {
+    display: flex;
+    align-items: end;
+    gap: 2em;
+  }
+</style>

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

@@ -20,7 +20,6 @@ const ship_types = [
   { name: "Attack Carrier", mass: [150, 300], abbrev: "CVA", carrier: true },
 ];
 
-export function candidate_ship_types(mass = 0, carrier = false) {
-    console.log({carrier});
+export function candidateShipTypes(mass = 0, carrier = false) {
   return ship_types.filter((c) => carrier == !!c.carrier).filter((c) => c.mass[0] <= mass).filter((c) => c.mass[1] >= mass);
 }

src/lib/components/ShipSpecs/index.svelte

@@ -6,9 +6,3 @@
   import Identification from "./Identification.svelte";
   import ShipCost from "./ShipCost.svelte";
 </script>
-
-<style>
-  div {
-    background-color: red;
-  }
-</style>

src/lib/shipDux/engine.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: {
+        setEngine: null,
+        setEngineReqs: null,
+    }
+});
+
+dux.addMutation('setEngine', changes => u(changes) );
+dux.addMutation('setEngineReqs', 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/index.js

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