screens

package.json

@@ -60,6 +60,7 @@
       "eslint-plugin-prettier": "3.1.4",
       "eslint-plugin-svelte3": "2.7.3",
       "eslint-plugin-you-dont-need-lodash-underscore": "^6.10.0",
+      "file-loader": "^6.0.0",
       "npm-run-all": "^4.1.5",
       "rollup": "^2.3.4",
       "rollup-plugin-livereload": "^1.0.0",
@@ -67,6 +68,7 @@
       "rollup-plugin-terser": "^5.1.2",
       "svelte": "^3.0.0",
       "svelte-material-ui": "^1.0.0-beta.21",
+      "svg-inline-loader": "^0.8.2",
       "tap": "^14.10.7"
    },
    "eslintConfig": {

src/App.svelte

@@ -38,7 +38,7 @@
 
   const reset = ship.dispatch.reset;
 
-  const add_screen = ({detail}) => ship.dispatch.add_screen(detail);
+  const set_screens = ({detail}) => ship.dispatch.set_screens(detail);
 
 </script>
 
@@ -49,10 +49,10 @@
 
     <ShipCost />
 
-    <Propulsion 
-        ftl={$ship.ftl} 
+    <Propulsion
+        ftl={$ship.ftl}
         engine={$ship.engine}
-        on:change_ftl={change_ftl} 
+        on:change_ftl={change_ftl}
         on:change_engine={change_engine}
         />
 
@@ -60,7 +60,7 @@
         { ... $ship.structure.hull }
         on:change_hull={change_hull}
         screens={ $ship.structure.screens}
-        on:add_screen={add_screen}
+        on:set_screens={set_screens}
         />
 
 

src/components/CostMass.svelte

@@ -14,6 +14,6 @@
     width: 0.75em;
   }
   .cost:after { content: '\00A4'; margin-left: 0.5em; }
-  .mass:after { content: url("/mass.svg"); width: 0.75em; display:
+  .mass:after { content: url("mass.svg"); width: 0.75em; display:
   inline-block; margin-left: 0.5em; }
 </style>

src/components/Hull.svelte

@@ -9,9 +9,7 @@
 </ShipItem>
 
 
-<!--
-<Screens {screens} on:add_screen />
--->
+<Screens {...screens} on:set_screens />
 
 </Section>
 

src/components/Screens/index.svelte

@@ -1,10 +1,14 @@
 
-<input type="button" value="add screen" on:click={() => add_screen()} />
-<input type="button" value="add advanced screen" 
-    on:click={ () => add_screen(true) }/>
+<ShipItem { cost } { mass }>
+
+  <Field label="screens">
+    <input type="number" bind:value={standard} min="0" />
+  </Field>
+
+  <Field label="advanced screens">
+    <input type="number" bind:value={advanced} min="0" />
+  </Field>
 
-<ShipItem cost="10" mass="10">
-    { nbr_regular } { nbr_advanced }
 </ShipItem>
 
 <script>
@@ -14,18 +18,20 @@
     import Field from '~C/Field';
     import ShipItem from '~C/ShipItem';
 
-    export let screens = [];
-
-    $: if( !Array.isArray(screens) ) screens = [];
+    export let cost = 0;
+    export let mass = 0;
+    export let standard = 0;
+    export let advanced = 0;
 
     let nbr_regular, nbr_advanced;
-    $: {
-        nbr_regular = screens.filter( ({advanced}) => !advanced ).length;
-        nbr_advanced = screens.length - nbr_regular;
-    }
 
     const dispatch = createEventDispatcher();
-    const add_screen = (advanced) => {
-    console.log(advanced); return dispatch( 'add_screen', advanced ); };
 
+    $: dispatch( 'set_screens', { standard, advanced } );
 </script>
+
+<style>
+  input {
+    width: 3em;
+  }
+  </style>

src/components/ShipItem/index.svelte

@@ -24,6 +24,6 @@
     width: 0.75em;
   }
   .cost:after { content: '\00A4'; margin-left: 0.5em; }
-  .mass:after { content: url("/mass.svg"); width: 0.75em; display:
+  .mass:after { content: url(mass.svg); width: 0.75em; display:
   inline-block; margin-left: 0.5em; }
 </style>

src/dux/index.js

@@ -9,6 +9,7 @@ import weaponry from './weaponry';
 import { calc_ftl_reqs } from "./ftl/rules";
 import { calc_ship_req } from "./utils";
 import { candidate_ship_types } from './ship_types';
+import structure from './structure';
 
 const set_ship_mass = action("set_ship_mass", payload());
 const set_name = action("set_name", payload());
@@ -29,32 +30,13 @@ const initial = {
       used_mass: 0,
       cost: 10,
     },
-    structure: {
-      mass: 0,
-      cost: 0,
-      hull: {
-        rating: 1,
-        advanced: false,
-        cost: 2,
-        mass: 1,
-      },
-      screens: [],
-    },
   };
 
 const dux = new Updux({
-  subduxes: { ftl, engine, weaponry, },
+  subduxes: { ftl, engine, weaponry, structure },
   initial
 });
 
-const add_screen = action( 'add_screen', payload() );
-
-
-dux.addMutation(add_screen, advanced => u.updateIn( 'structure.screens', state => {
-    return [ ...(state||[]), { advanced } ]
-}));
-
-
 dux.addMutation( reset, () => () => initial );
 
 dux.addMutation(set_hull, ({rating}) => (state) => {
@@ -80,23 +62,22 @@ dux.addSubscription((store) =>
   createSelector(calc_ship_req, (reqs) => store.dispatch(set_ship_reqs(reqs)))
 );
 
-dux.addSubscription((store) => 
+dux.addSubscription((store) =>
     createSelector(
         store => store.general.mass,
         store => store.general.ship_type,
         (mass,type) => {
             const candidates = candidate_ship_types(mass,false);
-            console.log({candidates});
             if( candidates.length === 0 ) return;
 
             if( candidates.find( ({name}) => name === type ) ) return;
 
             store.dispatch(
-                store.actions.set_ship_type( 
+                store.actions.set_ship_type(
                     candidates[0].name
                 )
             )
-                
+
         }
     )
 );
@@ -111,6 +92,27 @@ dux.addSubscription((store) =>
   )
 );
 
+// to get around 3.00001 ceiling up to 4
+const ceil = number => Math.ceil( Math.round(10*number)/10 );
+
+dux.addSubscription( store => createSelector(
+    ship => ship.general.mass,
+    ship => ship.structure.screens.standard,
+    ship => ship.structure.screens.advanced,
+    (mass,standard,advanced) => {
+        console.log({
+            mass, standard, advanced
+        })
+        const standard_mass = standard * Math.max(3,ceil( 0.05 * mass ));
+        const advanced_mass = advanced * Math.max(4,ceil( 0.075 * mass ));
+
+        store.dispatch( dux.actions.set_screens_reqs({
+            mass: standard_mass + advanced_mass,
+            cost: 3 * standard_mass + 4 * advanced_mass
+        }));
+    }
+));
+
 dux.addSubscription((store) =>
   createSelector(
     [

src/dux/structure/index.js

@@ -0,0 +1,24 @@
+import Updux from "updux";
+import { action, payload } from "ts-action";
+import u from "updeep";
+import { createSelector } from "reselect";
+
+import screens from './screens';
+
+const dux = new Updux({
+    initial: {
+      mass: 0,
+      cost: 0,
+      hull: {
+        rating: 1,
+        advanced: false,
+        cost: 2,
+        mass: 1,
+      }
+    },
+    subduxes: {
+        screens
+    }
+})
+
+export default dux.asDux;

src/dux/structure/screens/index.js

@@ -0,0 +1,18 @@
+import Updux from "updux";
+import { action, payload } from "ts-action";
+import u from "updeep";
+import { createSelector } from "reselect";
+
+const dux = new Updux({
+    initial: {
+        standard: 0, advanced: 0, cost: 0, mass: 0,
+    }
+});
+
+const set_screens = action('set_screens', payload() );
+dux.addMutation(set_screens, payload => u(payload) );
+
+const set_screens_reqs = action('set_screens_reqs', payload() );
+dux.addMutation(set_screens_reqs, payload => u(payload) );
+
+export default dux.asDux;

webpack.config.js

@@ -42,9 +42,15 @@ module.exports = {
            * For developing, use 'style-loader' instead.
            * */
           prod ? MiniCssExtractPlugin.loader : "style-loader",
-          "css-loader",
+            { loader: "css-loader",
+                options: {url: false}
+            }
         ],
       },
+    {
+        test: /\.svg$/,
+        loader: 'file-loader'
+    },
       {
         test: /\.s[ac]ss$/i,
         use: [