print beam

src/routes/export/print/PrintShip/Firecons/index.svelte

@@ -0,0 +1,19 @@
+<div>
+  {#each Array.from({ length: stations }) as firecon}
+    <img class="firecon" src="/icons/firecon.svg" alt="firecon" />
+  {/each}
+</div>
+
+<script>
+  export let stations = 0;
+</script>
+
+<style>
+  div {
+    display: flex;
+    gap: 0.5em;
+  }
+  img.firecon {
+    width: 1em;
+  }
+</style>

src/routes/export/print/PrintShip/Weapons/Beam.svelte

@@ -1,11 +1,4 @@
-<div
-  style:transform={uiTransform}
-  use:movable={{
-    disabled: !isMovable,
-    ship,
-    system: ["weapon", id],
-  }}
->
+<div>
   <Arcs selected={arcs} size="40">
     <text x="50%" y="50%">
       {weaponClass}
@@ -14,20 +7,12 @@
 </div>
 
 <script>
-  import { getContext } from "svelte";
-  import { movable } from "../../movable.js";
   import Arcs from "$lib/components/ShipEdit/Weaponry/Weapon/Arcs.svelte";
   export let weaponClass = 1;
   export let arcs = [];
-  export let uiTransform = "";
-  export let isMovable = false;
-  export let id = -1;
-  const ship = getContext("ship");
 </script>
 
 <style>
-  div :global(path) {
-  }
   div :global(path:hover) {
     fill: white;
   }

src/routes/export/print/PrintShip/Weapons/index.story.svelte

@@ -0,0 +1,24 @@
+<Hst.Story title="Export/PrintShip/Weapons">
+  <svelte:component this={weaponComp} {...initial} />
+
+  <svelte:fragment slot="controls">
+    <Hst.Select bind:value={type} {options} title="weapon type" />
+  </svelte:fragment>
+</Hst.Story>
+
+<script>
+  import printComps from "./printComps.js";
+  import { weaponTypes } from "$lib/store/ship/weaponry/rules.ts";
+
+  export let Hst;
+
+  const types = weaponTypes.map(({ type }) => type);
+  let type = types[0];
+
+  $: options = Object.fromEntries(types.map((t) => [t, t]));
+
+  console.log(type);
+
+  $: initial = types.find((t) => t.type === type)?.initial ?? {};
+  $: weaponComp = printComps[type];
+</script>

src/routes/export/print/PrintShip/Weapons/index.svelte

@@ -0,0 +1,10 @@
+<div>TODO</div>
+
+<script>
+</script>
+
+<style>
+  div {
+    background-color: red;
+  }
+</style>

src/routes/export/print/PrintShip/Weapons/index.test.js

@@ -0,0 +1,12 @@
+import { render, fireEvent } from "@testing-library/svelte";
+import "@testing-library/jest-dom";
+import { weaponTypes } from "$lib/store/ship/weaponry/rules";
+
+import printComp from "./printComp.js";
+
+describe("all weapons have a print component", () => {
+    test.each(weaponTypes)("$type", ({ type, initial }) => {
+        expect(printComp).toHaveProperty(type);
+        render(printComp[type], { props: initial });
+    });
+});

src/routes/export/print/PrintShip/Weapons/printComps.js

@@ -0,0 +1,5 @@
+import Beam from "./Beam.svelte";
+
+export default {
+  beam: Beam,
+};

src/routes/export/print/PrintShip/index.svelte

@@ -3,6 +3,8 @@
 <div class="print-output">
   <Identification {...identification} />
 
+  <Weapons {weapons} />
+
   <div class="grid">
     <div class="s6">
       <Armor layers={structure?.armor?.layers} />
@@ -15,6 +17,7 @@
 
     <div class="s6">
       <Screens {...screens} />
+      <Firecons {...firecons} />
     </div>
   </div>
 
@@ -27,12 +30,17 @@
   import Hull from "./Hull/index.svelte";
   import Armor from "./Armor/index.svelte";
   import Screens from "./Screens/index.svelte";
+  import Firecons from "./Firecons/index.svelte";
+  import Weapons from "./Weapons/index.svelte";
 
   export let identification = {};
   export let propulsion = {};
   export let structure = {};
+  export let weaponry = {};
 
   $: screens = structure?.screens ?? {};
+  $: firecons = weaponry?.firecons ?? {};
+  $: weapons = weaponry?.weapons ?? [];
 </script>
 
 <style>
@@ -57,4 +65,8 @@
     flex-direction: column;
     align-items: center;
   }
+
+  .s6 :global(> div) {
+    margin-bottom: 1em;
+  }
 </style>