beams

src/components/Output/Print/Weapons/Beam/index.svelte

@@ -0,0 +1,30 @@
+<div>
+  <Arcs selected={arcs} size="40">
+    <text x="50%" y="50%" >
+    {weapon_class}
+    </text>
+  </Arcs>
+</div>
+
+<script>
+  import Arcs from '~C/Weapon/Arcs';
+  export let weapon_class = 1;
+  export let arcs = [];
+</script>
+
+<style>
+  div :global(path) {
+    fill: white;
+  }
+  div :global(path:hover) {
+    fill: white;
+  }
+  div :global(path.active:hover) {
+    fill: black;
+  }
+  text {
+    text-anchor: middle;
+    dominant-baseline: central;
+    font-size: var(--font-scale-10);
+  }
+</style>

src/components/Output/Print/Weapons/index.svelte

@@ -0,0 +1,22 @@
+<div class="weapons">
+
+  <div class="beams">
+  {#each beams as beam}
+    <Beam {...beam} />
+  {/each}
+  </div>
+
+
+</div>
+
+<script>
+  import Beam from './Beam';
+  export let weapons = [];
+
+  let beams = [];
+  $: beams = weapons.filter( ({ weapon_type }) => weapon_type === 'beam' );
+
+</script>
+
+<style>
+</style>

src/components/Output/Print/Weapons/stories.js

@@ -0,0 +1,33 @@
+import Component from '.';
+
+export default {
+    title: "printouts/weapons"
+};
+
+export const basic = () => ({
+    Component,
+    props: {
+    "weapons": [
+      {
+        "weapon_type": "submunition",
+        "arcs": [
+          "F"
+        ],
+        "mass": 1,
+        "cost": 3,
+        "id": 1
+      },
+      {
+        "weapon_type": "beam",
+        "weapon_class": "2",
+        "arcs": [
+          "A",
+          "AS",
+          "FS"
+        ],
+        "mass": 2,
+        "cost": 6,
+        "id": 2
+      }, ]
+    }
+})

src/components/Output/Print/index.svelte

@@ -1,6 +1,8 @@
 <div>
   <Identification {...ship.general} />
 
+  <Weapons weapons={ship.weaponry.weapons} />
+
   <Armour armour={ship.structure.armour} />
   <Integrity
     rating={ship.structure.hull.rating}
@@ -20,6 +22,7 @@
   import Integrity from './Hull/Integrity';
   import Armour from './Hull/Armour';
   import MainSystems from './MainSystems';
+  import Weapons from './Weapons';
   export let ship;
 
 </script>

src/components/Weapon/Arcs/index.svelte

@@ -1,12 +1,13 @@
 
-<svg width="60px" height="60px">
+<svg width="{size}px" height="{size}px">
 {#each all_arcs as arc (arc)}
-    <Arc {arc} radius={30} 
+  <Arc {arc} radius={size/2}
         active={selected.includes(arc)}
         on:click={()=>click_arc(arc)}
     />
 {/each}
-    <circle cx="30" cy="30" r="15" />
+    <circle cx="50%" cy="50%" r={size /3} />
+    <slot />
 </svg>
 
 <script>
@@ -16,6 +17,7 @@
     const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
 
     export let selected = [];
+  export let size = 60;
 
   const dispatch = createEventDispatcher();