add a bunch of weapons

src/App.svelte

@@ -9,7 +9,6 @@
     import Hull from './components/Hull.svelte';
   import Identification from './components/Identification.svelte';
   import Firecons from './components/Firecons.svelte';
-  import AddWeapon from './components/Weapons/Add.svelte';
   import Propulsion from './components/Propulsion/index.svelte';
   import Section from '~C/Section';
   import Weapon from '~C/Weapon';
@@ -17,6 +16,7 @@
   import Streamlining from '~C/Streamlining/index.svelte';
   import Carrier from '~C/Carrier';
   import ADFC from '~C/Weaponry/ADFC';
+  import AddWeapon from '~C/Weaponry/AddWeapon';
 
     const ship = shipStore();
 
@@ -81,7 +81,7 @@
 
           <ADFC {...$ship.weaponry.adfc } />
 
-        <input type="button" value="add weapon" on:click={add_weapon}/>
+        <AddWeapon />
 
         {#each weapons as weapon (weapon.id)}
             <Weapon {weapon} id={weapon.id} cost={weapon.cost} mass={weapon.mass} />

src/components/Weapon/Arcs/index.svelte

@@ -0,0 +1,30 @@
+
+<svg width="60px" height="60px">
+{#each all_arcs as arc (arc)}
+    <Arc {arc} radius={30} 
+        active={selected.includes(arc)}
+        on:click={()=>click_arc(arc)}
+    />
+{/each}
+    <circle cx="30" cy="30" r="15" />
+</svg>
+
+<script>
+  import Arc from '../../Weapons/Arc.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+    const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
+
+    export let selected = [];
+
+  const dispatch = createEventDispatcher();
+
+  const click_arc = arc => dispatch('click_arc',arc);
+
+</script>
+
+<style>
+circle {
+    fill: white;
+}
+</style>

src/components/Weapon/Beam/index.svelte

@@ -1,5 +1,6 @@
+<label>beam</label>
 
-<Field label="weapon class">
+<Field label="beam class">
 <select bind:value={weapon_class}>
 <option>1</option>
 <option>2</option>
@@ -16,20 +17,12 @@
     </select>
 </Field>
 
-
+<Arcs selected={arcs} on:click_arc={({detail}) => click_arc(detail)} />
-<svg width="60px" height="60px">
-{#each all_arcs as arc (arc)}
-    <Arc {arc} radius={30} 
-        active={arcs.includes(arc)}
-        on:click={()=>click_arc(arc)}
-    />
-{/each}
-    <circle cx="30" cy="30" r="15" />
-</svg>
 
 <script>
   import {getContext } from 'svelte';
     import Arc from '../../Weapons/Arc.svelte';
+    import Arcs from '../Arcs';
     import { weapon_cost_mass } from '~/dux/weapons/rules';
     import fp from 'lodash/fp';
     import _ from 'lodash';
@@ -115,8 +108,5 @@
     margin-right: 1em;
 }
 
-circle {
-    fill: white;
-}
   </style>
 

src/components/Weapon/Needle/index.svelte

@@ -0,0 +1,37 @@
+<label> needle weapon</label>
+<Arcs selected={arcs} on:click_arc={({detail}) => click_arc(detail)} />
+
+<script>
+  import {getContext } from 'svelte';
+    import Arcs from '../Arcs';
+    import dux from '~/dux';
+  import { createEventDispatcher } from 'svelte';
+  
+    const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
+
+    export let arcs = ['F'];
+    export let ship_change = getContext('ship_change') || ( () => {} );
+
+    const click_arc = (arc) => {
+      if( arcs[0] === arc ) return;
+      arcs = [ arc ];
+    }
+
+    const dispatch = createEventDispatcher();
+    let cache;
+    $: cache = arcs.join(":");
+
+    $: dispatch( 'change', {
+      arcs: cache.split(":"),
+    })
+</script>
+
+<style>
+.arc {
+    display: flex;
+    flex-direction: column;
+    margin-right: 1em;
+}
+
+  </style>
+

src/components/Weapon/PointDefenceSystem/index.svelte

@@ -0,0 +1,2 @@
+<label>point defence system</label>
+

src/components/Weapon/Scattergun/index.svelte

@@ -0,0 +1,2 @@
+<label>scattergun</label>
+

src/components/Weapon/Submunition/index.svelte

@@ -0,0 +1,37 @@
+<label> submunition pack</label>
+<Arcs selected={arcs} on:click_arc={({detail}) => click_arc(detail)} />
+
+<script>
+  import {getContext } from 'svelte';
+    import Arcs from '../Arcs';
+    import dux from '~/dux';
+  import { createEventDispatcher } from 'svelte';
+  
+    const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
+
+    export let arcs = ['F'];
+    export let ship_change = getContext('ship_change') || ( () => {} );
+
+    const click_arc = (arc) => {
+      if( arcs[0] === arc ) return;
+      arcs = [ arc ];
+    }
+
+    const dispatch = createEventDispatcher();
+    let cache;
+    $: cache = arcs.join(":");
+
+    $: dispatch( 'change', {
+      arcs: cache.split(":"),
+    })
+</script>
+
+<style>
+.arc {
+    display: flex;
+    flex-direction: column;
+    margin-right: 1em;
+}
+
+  </style>
+

src/components/Weapon/index.svelte

@@ -2,11 +2,6 @@
 
 <div class="remove" on:click={remove}>X</div>
 
-<Field label="weapon type">
-<select bind:value={weapon_type}>
-    <option>beam</option>
-</select>
-</Field>
 
 <svelte:component this={weapon_component[weapon_type]} {...weapon} 
     on:change={update}/>
@@ -23,10 +18,18 @@
     import ShipItem from '~C/ShipItem';
     import Field from '~C/Field';
     import Beam from './Beam';
+    import Submunition from './Submunition';
+    import PointDefenceSystem from './PointDefenceSystem';
+    import Scattergun from './Scattergun';
+    import Needle from './Needle';
     import dux from '~/dux';
 
   const weapon_component = {
     beam: Beam,
+    'submunition': Submunition,
+    'pds': PointDefenceSystem,
+    scattergun: Scattergun,
+    needle: Needle,
   };
 
     export let weapon = {};
@@ -35,11 +38,11 @@
     export let mass;
     export let ship_change = getContext('ship_change') || ( () => {} );
 
-    let weapon_type;
+    let weapon_type = weapon.weapon_type;
-    $: weapon_type = weapon.weapon_type;
 
     const remove = () => ship_change( dux.actions.remove_weapon(id) );
 
+
   const update = ({detail}) => {
     ship_change( dux.actions.set_weapon({
       id, weapon_type, ...detail

src/components/Weaponry/AddWeapon/index.svelte

@@ -0,0 +1,24 @@
+
+<Field label="weapon type">
+<select bind:value={weapon_type}>
+    <option>beam</option>
+    <option value="submunition">submunition pack</option>
+    <option value="pds">point defence system</option>
+    <option>scattergun</option>
+    <option value="needle">needle weapon</option>
+</select>
+
+<input type="button" value="add weapon" on:click={ add_weapon }/>
+
+</Field>
+
+<script>
+  import Field from '~C/Field';
+  import {getContext } from 'svelte';
+  import dux from '~/dux';
+
+  export let weapon_type = "beam";
+  export let ship_change = getContext('ship_change') || ( () => {} );
+
+  const add_weapon = () => ship_change( dux.actions.add_weapon(weapon_type) );
+</script>

src/dux/weaponry/weapons/index.js

@@ -2,24 +2,43 @@ import Updux from "updux";
 import { action, payload } from "ts-action";
 import u from "updeep";
 import { createSelector } from "reselect";
+import { weapon_cost_mass } from '../../weapons/rules';
 
-import weapon from './weapon';
+const add_weapon = action('add_weapon', payload());
-
-const add_weapon = action('add_weapon');
 const remove_weapon = action('remove_weapon', payload());
 
+const uu = transform => state => transform(state)(state)
+
+const with_reqs = uu( weapon => u(weapon_cost_mass(weapon)));
+
 const dux = new Updux({
     initial: [],
-    subduxes: { '*': weapon }
 })
 
-dux.addMutation( add_weapon, () => state => {
+const weapon_initial = {
+    beam: { weapon_type: "beam", weapon_class: 1, arcs: ['F'] },
+    submunition: { 
+        weapon_type: "submunition", arcs: ['F'] },
+    pds: { weapon_type: 'pds' },
+    scattergun: { weapon_type: 'scattergun' },
+    needle: { weapon_type: 'needle', arcs: ['F'] },
+};
+
+dux.addMutation( add_weapon, (type) => state => {
     const id = 1 + Math.max( 0, ... state.map(({id})=>id) );
-    return [ ...state, { ...weapon.initial, id }];
+    return [ ...state, { ...with_reqs(weapon_initial[type]), id }];
 });
 
 dux.addMutation( remove_weapon, id => state => 
     state.filter( w => w.id !== id )
 );
 
+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)) )
+    )
+);
+
 export default dux.asDux;

src/dux/weaponry/weapons/weapon/index.js

@@ -1,30 +0,0 @@
-import Updux from "updux";
-import { action, payload } from "ts-action";
-import u from "updeep";
-import { createSelector } from "reselect";
-import { weapon_cost_mass } from '../../../weapons/rules';
-
-const uu = transform => state => transform(state)(state)
-
-const with_reqs = uu( weapon => u(weapon_cost_mass(weapon)));
-
-const initial = with_reqs({
-        weapon_type: 'beam',
-        weapon_class: 1,
-    });
-
-console.log(initial);
-
-const dux = new Updux({
-    initial
-});
-
-const set_weapon = action('set_weapon',payload());
-
-dux.addMutation(
-    set_weapon, payload => u.if( s => s.id === payload.id, 
-        state => with_reqs(u(payload,state))
-    )
-)
-
-export default dux.asDux;

src/dux/weapons/rules.js

@@ -7,6 +7,21 @@ export function weapon_cost_mass(weapon){
         return beam_cost_mass(weapon);
     }
 
+    if( weapon.weapon_type == 'submunition' ) {
+        return { mass: 1, cost: 3 };
+    }
+
+    if( weapon.weapon_type === 'pds' ) {
+        return { mass: 1, cost: 3 };
+    }
+
+    if( weapon.weapon_type === 'scattergun' ) {
+        return { mass: 1, cost: 4 };
+    }
+
+    if( weapon.weapon_type === 'needle' ) {
+        return { mass: 2, cost: 6 };
+    }
 
     return { cost, mass };
 }