armour

.storybook/main.js

@@ -1,3 +1,11 @@
+const path = require('path');
+
 module.exports = {
-    stories: [ '../src/**/*stories.js' ]
+    stories: [ '../src/**/*stories.js' ],
+    webpackFinal: (config) => {
+        config.resolve.alias['~'] = path.resolve(__dirname, '../src/');
+        config.resolve.alias['~C'] = path.resolve(__dirname, '../src/components/');
+
+        return config;
+    }
 };

src/App.svelte

@@ -65,7 +65,9 @@
         { ... $ship.structure.hull }
         on:change_hull={change_hull}
         screens={ $ship.structure.screens}
+        armour={$ship.structure.armour}
         on:set_screens={set_screens}
+        on:ship_change={ship_dispatch}
         />
 
 

src/components/Armour/Layer/index.svelte

@@ -0,0 +1,23 @@
+<Field label={ `layer ${layer}` }>
+    <input type="number" min="0" bind:value={rating} />
+</Field>
+
+
+<script>
+  import { createEventDispatcher} from 'svelte';
+
+    import dux from '~/dux/structure/armour';
+
+    import ShipItem from '~C/ShipItem/index.svelte';
+    import Field from '~C/Field/index.svelte';
+
+    export let layer = 1;
+    export let rating = 0;
+
+    const dispatch = createEventDispatcher();
+
+    $: dispatch( 'ship_change', 
+        dux.actions.set_armour_layer({layer,rating})
+    );
+
+</script>

src/components/Armour/index.svelte

@@ -0,0 +1,52 @@
+<ShipItem {cost} {mass} >
+
+<div>
+
+<div class="nbr_layers">
+<Field label="armour layers">
+    <input type="number" min="0" bind:value={nbr_layers} />
+</Field>
+</div>
+
+<div class="layers">
+    {#each armour as layer ( layer.layer )}
+        <Layer {...layer} on:ship_change/>
+    {/each}
+</div>
+
+
+</div>
+
+</ShipItem>
+
+<script>
+  import { createEventDispatcher} from 'svelte';
+
+    import ShipItem from '~C/ShipItem/index.svelte';
+    import Field from '~C/Field/index.svelte';
+    import Layer from './Layer/index.svelte';
+    import dux from '~/dux/structure/armour';
+    import _ from 'lodash';
+
+    export let armour = [];
+    export let cost = 0;
+    export let mass = 0;
+
+    $: cost = _.sum( _.map( armour, 'cost' ) );
+    $: mass = _.sum( _.map( armour, 'mass' ) );
+
+    let nbr_layers = armour.length;
+
+    const dispatch = createEventDispatcher();
+
+    $: dispatch( 'ship_change', dux.actions.set_armour_nbr_layers(nbr_layers) );
+
+</script>
+
+<style>
+    .layers {
+        display: flex;
+        
+    }
+    
+</style>

src/components/Armour/stories.js

@@ -0,0 +1,18 @@
+import Armour from './index.svelte';
+
+export default {
+    title: "Armour",
+};
+
+export const basic = () => ({
+    Component: Armour,
+    props: {
+        armour: [
+            { layer: 1, rating: 12, cost: 1, mass: 2 },
+            { layer: 2, rating: 12, cost: 1, mass: 2 },
+        ]
+    },
+    on: {
+        ship_change: ({detail}) => console.log(detail)
+    }
+});

src/components/Hull.svelte

@@ -11,6 +11,8 @@
 
 <Screens {...screens} on:set_screens />
 
+<Armour {armour} on:ship_change />
+
 </Section>
 
 <script>
@@ -20,9 +22,10 @@
     import Field from '~C/Field';
     import ShipItem from '~C/ShipItem';
     import Screens from './Screens';
+    import Armour from './Armour';
 
-    export let cost, mass, ship_mass, rating, screens = (
+    export let cost, mass, ship_mass, rating, screens, armour = (
-        0, 0, 10, 1, []
+        0, 0, 10, 1, [], []
     );
 
     let min, max;

src/dux/structure/armour/index.js

@@ -0,0 +1,36 @@
+import Updux from "updux";
+import { action, payload } from "ts-action";
+import u from "updeep";
+import { createSelector } from "reselect";
+import _ from 'lodash';
+
+const dux = new Updux({
+    initial: [],
+});
+
+const set_armour_nbr_layers = action('set_armour_nbr_layers',payload());
+
+dux.addMutation( set_armour_nbr_layers, nbr_layers => state => {
+    if( state.length > nbr_layers ) state = state.slice(0,nbr_layers);
+
+    if( state.length < nbr_layers ) {
+        state = [ state, _.times( nbr_layers - state.length, () => [] ) ].flat();
+    }
+
+    state = u.map( (el,i) => ({layer: i +1, rating: 0, cost: 0, mass: 0, ...el }), state);
+
+    return state;
+});
+
+dux.addMutation(
+    action('set_armour_layer', payload()),
+    ({layer, rating}) => u.map(
+        u.if(_.matches({layer}), u({
+            rating,
+            cost: 2 * layer * rating,
+            mass: 2 * rating,
+        })) 
+    )
+);
+
+export default dux.asDux;

src/dux/structure/index.js

@@ -4,6 +4,7 @@ import u from "updeep";
 import { createSelector } from "reselect";
 
 import screens from './screens';
+import armour from './armour';
 
 const dux = new Updux({
     initial: {
@@ -17,7 +18,8 @@ const dux = new Updux({
       }
     },
     subduxes: {
-        screens
+        screens,
+        armour,
     }
 })