weapon

src/lib/components/ShipEdit/Weaponry/Weapon/Arcs.svelte

@@ -12,7 +12,7 @@
 </svg>
 
 <script>
-  import Arc from "../../Weapons/Arc.svelte";
+  import Arc from "./Arc.svelte";
   import { createEventDispatcher } from "svelte";
 
   const all_arcs = ["FS", "F", "FP", "AP", "A", "AS"];

src/lib/components/ShipEdit/Weaponry/Weapon/Needle.svelte

@@ -1,29 +1,26 @@
-<label> needle weapon</label>
+<label>needle weapon</label>
+
 <Arcs selected={arcs} on:click_arc={({ detail }) => click_arc(detail)} />
 
 <script>
   import { getContext } from "svelte";
-  import Arcs from "../Arcs/index.svelte";
+  import Arcs from "./Arcs.svelte";
-  import dux from "$lib/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) => {
+      console.log(arc);
+      return;
     if (arcs[0] === arc) return;
     arcs = [arc];
   };
 
   const dispatch = createEventDispatcher();
-  let cache;
-  $: cache = arcs.join(":");
 
-  $: dispatch("change", {
+  $: dispatch("change", { arcs });
-    arcs: cache.split(":"),
-  });
 </script>
 
 <style>

src/lib/components/ShipEdit/Weaponry/Weapon/index.svelte

@@ -0,0 +1,121 @@
+<ShipItem {...reqs}>
+  <div class="weapon_row">
+    <button
+      class="button small red remove"
+      on:click={remove}>remove
+    </button>
+
+    <svelte:component
+      this={component[type]}
+      {...weapon}
+      on:change={update}
+    />
+  </div>
+</ShipItem>
+
+<script>
+  import { getContext } from "svelte";
+
+  import Arc from "./Arc.svelte";
+  import ShipItem from "$lib/components/ShipItem/index.svelte";
+  import Field from "$lib/components/Field/index.svelte";
+  /* import Beam from "./Beam/index.svelte"; */
+  /* import Submunition from "./Submunition/index.svelte"; */
+  /* import PointDefenceSystem from "./PointDefenceSystem/index.svelte"; */
+  /* import Scattergun from "./Scattergun/index.svelte"; */
+  import Needle from "./Needle.svelte";
+
+  const component = {
+    /* beam: Beam, */
+    /* submunition: Submunition, */
+    /* pds: PointDefenceSystem, */
+    /* scattergun: Scattergun, */
+     needle: Needle,
+  };
+
+  export let weapon = {};
+  $: reqs = weapon.reqs;
+  export let id;
+
+  const ship = getContext("ship");
+
+  $: type = weapon.type;
+
+  $: console.log(weapon);
+  const remove = () => ship.dispatch.removeWeapon(id);
+
+  const update = ({ detail }) => {
+    ship.dispatch.setWeapon({
+      id,
+      type,
+      ...detail,
+    });
+  };
+</script>
+
+<style>
+  .weapon {
+    display: flex;
+    align-items: center;
+  }
+
+  .weapon > * {
+    margin-right: 2em;
+  }
+
+  .arcs {
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    align-items: center;
+    justify-items: center;
+    width: 6em;
+  }
+
+  .arc input {
+    margin: 0px;
+  }
+
+  .arc.F {
+    grid-column: 2 / span 2;
+    grid-row: 1;
+  }
+
+  .arc.FS {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+  }
+
+  .arc.FP {
+    grid-column: 4;
+    grid-row: 1 / span 2;
+  }
+
+  .arc.AS {
+    grid-column: 1;
+    grid-row: 3 / span 2;
+  }
+
+  .arc.AP {
+    grid-column: 4;
+    grid-row: 3 / span 2;
+  }
+
+  .arc.A {
+    grid-column: 2 / span 2;
+    grid-row: 4;
+  }
+
+  .add-weapon {
+    display: block;
+  }
+
+  .weapon_row {
+    display: flex;
+    align-items: center;
+  }
+
+  .weapon_row > :global(*) {
+    margin-right: 2em;
+  }
+</style>

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

@@ -4,6 +4,11 @@
     <ADFC {...adfc} />
 
     <AddWeapon />
+
+    {#each weapons as weapon (weapon.id)}
+        <Weapon {weapon} id={weapon.id} />
+    {/each}
+
 </Section>
 
 <script>
@@ -16,6 +21,7 @@ import Field from '$lib/components/Field/index.svelte';
   import Firecons from './Firecons.svelte';
   import ADFC from './ADFC.svelte';
     import AddWeapon from './AddWeapon.svelte';
+    import Weapon from './Weapon/index.svelte';
 
   export let firecons = {};
   export let adfc = {};

src/lib/shipDux/weaponry/weapons.js

@@ -14,17 +14,22 @@ export const weaponTypes = [
 const dux = new Updux({
     initial: [],
     actions: {
-        addWeapon: null
+        addWeapon: null,
+        removeWeapon: null,
     },
 });
 
+dux.setMutation('removeWeapon', id => state => [
+    ...state.filter( (w) => w.id !== id   )
+])
+
 dux.setMutation('addWeapon', type => state => {
     return [
         ...state,
         {
-            id: state.length +1,
+            id: state.length === 0 ? 1 : state[state.length -1]+1,
-            type: weaponTypes[0].type,
+            type,
-            reqs: weaponReqs(weaponTypes[0].type),
+            reqs: weaponReqs({type}),
         }
     ]
 });