wip

.node-version

@@ -1 +1 @@
-15.14.0
+16.2.0

package.json

@@ -9,7 +9,7 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@sveltejs/kit": "^1.0.0-next.107",
+    "@sveltejs/kit": "^1.0.0-next.115",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.10",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
@@ -23,12 +23,13 @@
   "type": "module",
   "dependencies": {
     "@sveltejs/adapter-node": "^1.0.0-next.18",
-    "@sveltejs/adapter-static": "^1.0.0-next.9",
+    "@sveltejs/adapter-static": "^1.0.0-next.13",
     "@yanick/updeep": "link:/home/yanick/work/javascript/updeep",
     "bulma": "^0.9.2",
     "lodash": "^4.17.21",
     "redux": "^4.1.0",
     "reselect": "^4.0.0",
+    "rollup-plugin-analyzer": "^4.0.0",
     "ts-action": "^11.0.0",
     "updux": "link:/home/yanick/work/javascript/updux/"
   },

src/components/App.svelte

@@ -129,8 +129,6 @@
 
   const ship_dispatch = ({ detail }) => ship.dispatch(detail);
 
-  setContext("ship_change", ship.dispatch);
-
   let show_notes = false;
   const toggle_notes = () => (show_notes = !show_notes);
 

src/components/Carrier/Squadron/index.svelte

@@ -25,9 +25,9 @@
   export let cost =0;
   export let mass = 0;
 
-  export let ship_change = getContext('ship_change') || ( () => {} );
+  export let ship = getContext('ship');
 
-  $: ship_change( dux.actions.set_squadron({ id, type, }) );
+  $: ship?.dispatch_action('set_squadron',{ id, type, });
 
 </script>
 

src/components/Carrier/index.svelte

@@ -8,30 +8,24 @@
   {#each squadrons as squad (squad.id)}
     <Squadron {...squad} />
   {/each}
-
 </Section>
 
 <script>
-  import {getContext } from 'svelte';
+  import { getContext } from "svelte";
 
   import Section from "../Section/index.svelte";
   import Field from "../Field/index.svelte";
   import ShipItem from "../ShipItem/index.svelte";
-  import Squadron from './Squadron/index.svelte';
+  import Squadron from "./Squadron/index.svelte";
-  import dux from '../../dux/carrier';
+  import dux from "../../dux/carrier";
 
   export let bays = 0;
   export let squadrons = [];
   export let cost = 0;
   export let mass = 0;
-  export let ship_change = getContext('ship_change') || ( () => {} );
 
-  $: ship_change( dux.actions.set_carrier_bays(bays) );
+  export let ship = getContext("ship");
+
+  $: ship?.dispatch_action('set_carrier_bays',bays);
 
 </script>
-
-<style>
-div {
-  background-color: red;
-}
-</style>

src/components/Hull/Armour/Layer/index.svelte

@@ -4,21 +4,16 @@
 
 
 <script>
-  import { createEventDispatcher} from 'svelte';
+    import { getContext} from 'svelte';
 
-    import dux from '$lib/dux/structure/armour';
-
-    import ShipItem from '$lib/components/ShipItem/index.svelte';
     import Field from '$lib/components/Field/index.svelte';
 
     export let layer = 1;
     export let rating = 0;
 
-    const dispatch = createEventDispatcher();
+    const ship = getContext('ship');
 
-    $: dispatch( 'ship_change',
+    $: ship?.dispatch_action( 'set_armour_layer', {layer,rating} );
-        dux.actions.set_armour_layer({layer,rating})
-    );
 
 </script>
 

src/components/Hull/Cargo/index.svelte

@@ -5,21 +5,18 @@
 </ShipItem>
 
 <script>
-  import get from 'lodash/get.js';
+  import ShipItem from "$lib/components/ShipItem/index.svelte";
-  import ShipItem from '$lib/components/ShipItem/index.svelte';
+  import Field from "$lib/components/Field/index.svelte";
-  import Field from '$lib/components/Field/index.svelte';
-  import dux from '$lib/dux/cargo';
 
-  import {getContext, createEventDispatcher} from 'svelte';
+  import { getContext } from "svelte";
 
-  const ship = getContext('ship');
+  export let ship = getContext("ship");
 
   export let space = 0;
   export let cost = 0;
   export let mass = 0;
 
-  const dispatch = createEventDispatcher();
+  $: ship?.dispatch_action("set_cargo", space);
-  $: dispatch( 'set_cargo', dux.actions.set_cargo( space ) );
 
 </script>
 
@@ -27,4 +24,5 @@
   input {
     width: 5em;
   }
+
 </style>

src/components/Hull/Streamlining/index.svelte

@@ -16,19 +16,17 @@
 </ShipItem>
 
   <script>
-  import get from 'lodash/get.js';
   import ShipItem from '$lib/components/ShipItem/index.svelte';
   import Field from '$lib/components/Field/index.svelte';
-  import dux from '$lib/dux/streamlining';
 
   import {getContext } from 'svelte';
 
   export let type = 'none';
   export let cost = 0;
   export let mass = 0;
-  export let ship_change = getContext('ship_change') || ( () => {} );
+  export let ship = getContext('ship');
 
-  $: ship_change( dux.actions.set_streamlining(type));
+  $: ship?.dispatch_action( 'set_streamlining', type);
 
   </script>
 

src/components/Weapon/Beam/index.svelte

@@ -20,49 +20,45 @@
 <Arcs selected={arcs} on:click_arc={({ detail }) => click_arc(detail)} />
 
 <script>
-  import {getContext } from 'svelte';
+  import { getContext } from "svelte";
-    import Arc from '../../Weapons/Arc.svelte';
+  import Arc from "../../Weapons/Arc.svelte";
-  import Arcs from '../Arcs/index.svelte';
+  import Arcs from "../Arcs/index.svelte";
-    import { weapon_cost_mass } from '$lib/dux/weapons/rules';
+  import { weapon_cost_mass } from "$lib/dux/weapons/rules";
-    import _ from 'lodash';
+  import _ from "lodash";
-  import ShipItem from '$lib/components/ShipItem/index.svelte';
+  import ShipItem from "$lib/components/ShipItem/index.svelte";
-  import Field from '$lib/components/Field/index.svelte';
+  import Field from "$lib/components/Field/index.svelte";
-    import dux from '$lib/dux';
+  import dux from "$lib/dux";
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher } from "svelte";
 
-    const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
+  const all_arcs = ["FS", "F", "FP", "AP", "A", "AS"];
 
-    export let weapon_type;
-    export let id;
   export let weapon_class = 1;
-    export let arcs = ['F'];
+  export let arcs = ["F"];
-    export let ship_change = getContext('ship_change') || ( () => {} );
+  export let id;
 
   let arc_options = {
     1: [6],
     2: [3, 6],
-        3: [ 1, 2, 3, 4, 5, 6, 'broadside' ],
+    3: [1, 2, 3, 4, 5, 6, "broadside"],
-        4: [ 1, 2, 3, 4, 5, 6, 'broadside' ]
+    4: [1, 2, 3, 4, 5, 6, "broadside"],
   };
 
   let nbr_arcs = 6;
   $: nbr_arcs = arc_options[weapon_class][0];
 
-    $: console.log({arcs,nbr_arcs})
+  $: console.log({ arcs, nbr_arcs });
 
   $: if (arcs.length !== nbr_arcs) {
-        if( nbr_arcs === 'broadside' ) {
+    if (nbr_arcs === "broadside") {
-            arcs = all_arcs.filter( arc => arc.length === 1 )
+      arcs = all_arcs.filter((arc) => arc.length === 1);
-        }
+    } else {
-        else{
+      let first_index = all_arcs.findIndex((arc) => arcs[0]);
-
-        let first_index = all_arcs.findIndex( arc => arcs[0] );
       if (first_index === -1) first_index = 0;
 
       const new_arcs = [];
 
-        _.range(nbr_arcs).forEach( i => {
+      _.range(nbr_arcs).forEach((i) => {
-            new_arcs.push( all_arcs[first_index] )
+        new_arcs.push(all_arcs[first_index]);
         first_index = (first_index + 1) % all_arcs.length;
       });
 
@@ -71,33 +67,33 @@
   }
 
   const click_arc = (first_arc) => {
-        if( nbr_arcs === 'broadside' ) return;
+    if (nbr_arcs === "broadside") return;
 
-        let first_index = all_arcs.findIndex( arc => arc === first_arc );
+    let first_index = all_arcs.findIndex((arc) => arc === first_arc);
 
     const new_arcs = [];
 
-        _.range(nbr_arcs).forEach( i => {
+    _.range(nbr_arcs).forEach((i) => {
       new_arcs.push(all_arcs[first_index]);
       first_index = (first_index + 1) % all_arcs.length;
     });
 
     arcs = new_arcs;
-
+  };
-    }
 
   let i = 1;
   $: if (weapon_class) i = 1;
 
-    let cache = '';
+  let cache = "";
   $: cache = arcs.join(":");
 
   const dispatch = createEventDispatcher();
 
-    $: dispatch( 'change', {
+  $: dispatch("change", {
     weapon_class,
     arcs: cache.split(":"),
-    })
+  });
+
 </script>
 
 <style>
@@ -108,4 +104,3 @@
   }
 
 </style>
-

src/components/Weapon/index.svelte

@@ -1,36 +1,40 @@
 <ShipItem {cost} {mass}>
-
   <div class="weapon_row">
+    <input
+      type="button"
+      class="button small red remove"
+      value="remove"
+      on:click={remove}
+    />
 
-    <input type="button" class="button small red remove" value="remove"
+    <svelte:component
-      on:click={remove} />
+      this={weapon_component[weapon_type]}
-
+      {...weapon}
-
+      on:change={update}
-<svelte:component this={weapon_component[weapon_type]} {...weapon}
+    />
-    on:change={update}/>
   </div>
 </ShipItem>
 
 <script>
-  import {getContext } from 'svelte';
+  import { getContext } from "svelte";
 
-    import Arc from '../Weapons/Arc.svelte';
+  import Arc from "../Weapons/Arc.svelte";
-    import { weapon_cost_mass } from '../../dux/weapons/rules.js';
+  import { weapon_cost_mass } from "../../dux/weapons/rules.js";
-    import _ from 'lodash';
+  import _ from "lodash";
-    import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher } from "svelte";
-  import ShipItem from '../ShipItem/index.svelte';
+  import ShipItem from "../ShipItem/index.svelte";
-  import Field from '../Field/index.svelte';
+  import Field from "../Field/index.svelte";
-  import Beam from './Beam/index.svelte';
+  import Beam from "./Beam/index.svelte";
-  import Submunition from './Submunition/index.svelte';
+  import Submunition from "./Submunition/index.svelte";
-  import PointDefenceSystem from './PointDefenceSystem/index.svelte';
+  import PointDefenceSystem from "./PointDefenceSystem/index.svelte";
-  import Scattergun from './Scattergun/index.svelte';
+  import Scattergun from "./Scattergun/index.svelte";
-  import Needle from './Needle/index.svelte';
+  import Needle from "./Needle/index.svelte";
-  import dux from '../../dux';
+  import dux from "../../dux";
 
   const weapon_component = {
     beam: Beam,
-    'submunition': Submunition,
+    submunition: Submunition,
-    'pds': PointDefenceSystem,
+    pds: PointDefenceSystem,
     scattergun: Scattergun,
     needle: Needle,
   };
@@ -39,22 +43,23 @@
   export let id;
   export let cost;
   export let mass;
-    export let ship_change = getContext('ship_change') || ( () => {} );
+  export let ship = getContext("ship");
 
   let weapon_type = weapon.weapon_type;
 
-    const remove = () => ship_change( dux.actions.remove_weapon(id) );
+  const remove = () => ship?.dispatch_action("remove_weapon", id);
-
 
   const update = ({ detail }) => {
-    ship_change( dux.actions.set_weapon({
+    ship?.dispatch_action("set_weapon", {
-      id, weapon_type, ...detail
+      id,
-    }) );
+      weapon_type,
-  }
+      ...detail,
+    });
+  };
+
 </script>
 
 <style>
-
   .weapon {
     display: flex;
     align-items: center;
@@ -73,12 +78,10 @@
     width: 6em;
   }
 
-
   .arc input {
     margin: 0px;
   }
 
-
   .arc.F {
     grid-column: 2 / span 2;
     grid-row: 1;
@@ -122,5 +125,4 @@
     margin-right: 2em;
   }
 
-
 </style>

src/components/Weaponry/ADFC/index.svelte

@@ -6,17 +6,15 @@
 
 
 <script>
-  import get from "lodash/get.js";
   import ShipItem from "../../ShipItem/index.svelte";
   import Field from "../../Field/index.svelte";
-  import dux from "../../../dux";
 
   import { getContext } from "svelte";
 
   export let rating = 0;
   export let cost = 0;
   export let mass = 0;
-  export let ship_change = getContext("ship_change") || (() => {});
+  export let ship = getContext("ship");
 
-  $: ship_change(dux.actions.set_adfc(rating));
+  $: ship?.dispatch_action('set_adfc',rating);
 </script>

src/components/Weaponry/AddWeapon/index.svelte

@@ -1,4 +1,3 @@
-
 <Field label="weapon type">
   <select bind:value={weapon_type}>
     <option>beam</option>
@@ -8,17 +7,21 @@
     <option value="needle">needle weapon</option>
   </select>
 
-<input type="button" value="add weapon" class="button small blue" on:click={ add_weapon }/>
+  <input
-
+    type="button"
+    value="add weapon"
+    class="button small blue"
+    on:click={add_weapon}
+  />
 </Field>
 
 <script>
-  import Field from '../../Field/index.svelte';
+  import { getContext } from "svelte";
-  import {getContext } from 'svelte';
+  import Field from "../../Field/index.svelte";
-  import dux from '../../../dux';
 
   export let weapon_type = "beam";
-  export let ship_change = getContext('ship_change') || ( () => {} );
+  export let ship = getContext("ship");
+
+  const add_weapon = () => ship?.dispatch_action("add_weapon", weapon_type);
 
-  const add_weapon = () => ship_change( dux.actions.add_weapon(weapon_type) );
 </script>

src/dux/weaponry/weapons/index.js

@@ -1,3 +1,4 @@
+import matches from 'lodash/matches.js';
 import Updux from "updux";
 import { action, payload } from "ts-action";
 import u from "@yanick/updeep";
@@ -43,7 +44,7 @@ const set_weapon = action("set_weapon", payload());
 
 dux.addMutation(set_weapon, (payload) =>
   u.map(
-    u.if(_.matches({ id: payload.id }), (state) => with_reqs(u(payload, state)))
+    u.if(matches({ id: payload.id }), (state) => with_reqs(u(payload, state)))
   )
 );
 

src/stores/ship.js

@@ -1,4 +1,4 @@
-import { browser } from '$app/env';
+import { browser } from "$app/env";
 import { readable } from "svelte/store";
 import { compose, applyMiddleware } from "redux";
 
@@ -15,16 +15,13 @@ import shipDux from "../dux";
 export default () => {
   let saved;
 
-    if(browser) saved = window.localStorage.getItem('aotds-shipyard');
+  if (browser) saved = window.localStorage.getItem("aotds-shipyard");
 
   if (saved) {
     saved = JSON.parse(saved);
-    }
+  } else {
-    else {
     saved = undefined;
   }
-    console.log(saved);
-
 
   const duxStore = shipDux.createStore(saved, (mw) =>
     composeEnhancers(applyMiddleware(mw))
@@ -35,7 +32,7 @@ export default () => {
   );
 
   Object.entries(duxStore.actions).forEach(([type, action]) => {
-      duxStore.dispatch[ type ] = payload => duxStore.dispatch( action(payload) )
+    duxStore.dispatch[type] = (payload) => duxStore.dispatch(action(payload));
   });
 
   let previous = undefined;
@@ -43,11 +40,9 @@ export default () => {
     let current = duxStore.getState();
     if (previous === current) return;
     previous = current;
-      console.log(current);
 
-      if(browser)window.localStorage.setItem(
+    if (browser)
-          'aotds-shipyard', JSON.stringify(current)
+      window.localStorage.setItem("aotds-shipyard", JSON.stringify(current));
-      );
   });
 
   const state = readable(duxStore.getState(), (set) =>
@@ -56,10 +51,14 @@ export default () => {
     })
   );
 
+  const dispatch_action = (action, payload) =>
+    duxStore.dispatch[action](payload);
+
   return {
     subscribe: state.subscribe,
     dispatch: duxStore.dispatch,
     actions: duxStore.actions,
     selectors: duxStore.selectors,
+    dispatch_action,
   };
 };

svelte.config.js

@@ -1,4 +1,5 @@
 import adapter from '@sveltejs/adapter-static';
+import analyze from 'rollup-plugin-analyzer';
 
 /** @type {import('@sveltejs/kit').Config} */
 export default {
@@ -13,6 +14,7 @@ export default {
         vite: {
     build: {
         rollupOptions: {
+            plugins: [ analyze() ],
 //            external: ['updux','@yanick/updeep']
         }
     }