graser edit component

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

@@ -60,7 +60,6 @@
   const broadside = ["FS", "FP", "AP", "AS"];
 
   function setArcs(firstArc) {
-    console.log(firstArc);
     let newArcs;
     if (nbrArcs === "broadside") {
       newArcs = broadside;

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

@@ -0,0 +1,13 @@
+<Hst.Story title="ShipEdit/Weaponry/Weapon/Graser">
+  <Graser {api} />
+</Hst.Story>
+
+<script>
+  export let Hst;
+  import { logEvent } from "histoire/client";
+  import Graser from "./index.svelte";
+
+  const api = {
+    dispatch: {},
+  };
+</script>

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

@@ -0,0 +1,100 @@
+<span>graser</span>
+
+<Field label="graser class" suffix>
+  <select bind:value={weaponClass}>
+    {#each weaponClasses as value}
+      <option {value}>{value}</option>
+    {/each}
+  </select>
+  <i>arrow_drop_down</i>
+</Field>
+
+<Field label="arcs" suffix>
+  <select bind:value={nbrArcs}>
+    {#each nbrArcsOptions as value}
+      <option {value}>{value}</option>
+    {/each}
+  </select>
+  <i>arrow_drop_down</i>
+</Field>
+
+<div class="arcs">
+  <Arcs
+    size={48}
+    selected={arcs}
+    on:clickArc={({ detail }) => setFirstArc(detail)}
+  />
+</div>
+
+<script lang="ts">
+  import * as R from "remeda";
+  import u from "@yanick/updeep-remeda";
+  import { createEventDispatcher } from "svelte";
+  import memoize from "memoize-one";
+
+  import Arcs from "../Arcs.svelte";
+  import ShipItem from "$lib/components/ShipItem.svelte";
+  import Field from "$lib/components/Field.svelte";
+  import {
+    weaponTypes,
+    broadsideArcs,
+    arcs as allArcs,
+    isBroadside,
+  } from "$lib/store/ship/weaponry/rules.ts";
+
+  const options = weaponTypes.find(u.matches({ type: "graser" })).options;
+
+  const weaponClasses = options.map(R.prop("weaponClass"));
+
+  export let weaponClass = weaponClasses[0];
+
+  export let arcs = ["F"];
+
+  let nbrArcs = isBroadside(arcs) ? "broadside" : arcs.length;
+
+  $: classOptions = options.find(u.matches({ weaponClass }));
+
+  $: nbrArcsOptions = classOptions.nbrArcs;
+  $: broadside = classOptions.broadside;
+
+  $: if (!nbrArcsOptions.includes(nbrArcs)) nbrArcs = nbrArcsOptions[0];
+
+  function allowedArcs(arcs, options) {
+    if (options.broadside && isBroadside(arcs)) return true;
+
+    return options.nbrArcs.includes(arcs.length);
+  }
+
+  let firstArc = allArcs[0];
+  const setFirstArc = (a) => (firstArc = a);
+
+  $: arcs = setArcs(firstArc, nbrArcs);
+
+  function setArcs(firstArc, nbrArcs) {
+    if (nbrArcs === "broadside") return broadsideArcs;
+
+    let first_index = allArcs.findIndex((arc) => arc === firstArc);
+    if (first_index === -1) first_index = 0;
+
+    return Array.from({ length: nbrArcs }).map(
+      (_dummy, i) => allArcs[(first_index + i) % allArcs.length]
+    );
+  }
+
+  const dispatch = createEventDispatcher();
+
+  const memoChange = memoize((weaponClass, ...arcs) =>
+    dispatch("change", {
+      weaponClass,
+      arcs,
+    })
+  );
+
+  $: memoChange(weaponClass, ...arcs);
+</script>
+
+<style>
+  .arcs {
+    margin-top: 0.5rem;
+  }
+</style>

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

@@ -17,6 +17,7 @@
   import PointDefenceSystem from "./PDS.svelte";
   import Scattergun from "./Scattergun.svelte";
   import Needle from "./Needle.svelte";
+  import Graser from "./Graser/index.svelte";
 
   const component = {
     beam: Beam,
@@ -24,6 +25,7 @@
     pds: PointDefenceSystem,
     scattergun: Scattergun,
     needle: Needle,
+    graser: Graser,
   };
 
   export let reqs = {};

src/lib/store/ship/weaponry/rules.ts

@@ -2,6 +2,8 @@ import type { Reqs } from "$lib/shipDux/reqs";
 
 export const arcs = ["FS", "F", "FP", "AP", "A", "AS"] as const;
 
+export const broadsideArcs = ["FP", "AP", "AS", "FS"];
+
 export type Arc = (typeof arcs)[number];
 
 export type WeaponType = "beam";
@@ -34,30 +36,6 @@ type Graser = {
 export type Weapon = Beam | Submunition | PDS | Scattergun | Needle | Graser;
 
 export const weaponTypes = [
-    {
-        type: "graser",
-        name: "graser",
-        reqs: graserReqs,
-        initial: {
-            type: "graser",
-            weaponClass: 1,
-            arcs: ["F"],
-        } as any as Graser,
-        options: {
-            1: {
-                nbrArcs: [1, 3, 6],
-                broadside: true,
-            },
-            2: {
-                nbrArcs: [1, 2, 3, 4, 5, 6],
-                broadside: true,
-            },
-            3: {
-                nbrArcs: [1, 2, 3, 4, 5, 6],
-                broadside: true,
-            },
-        },
-    },
     {
         type: "beam",
         name: "beam",
@@ -68,6 +46,27 @@ export const weaponTypes = [
             arcs,
         } as any as Beam,
     },
+    {
+        type: "graser",
+        name: "graser",
+        reqs: graserReqs,
+        initial: {
+            type: "graser",
+            weaponClass: 1,
+            arcs: ["F"],
+        } as any as Graser,
+        options: [
+            { weaponClass: 1, nbrArcs: [1, 3, 6, "broadside"] },
+            {
+                weaponClass: 2,
+                nbrArcs: [1, 2, 3, 4, 5, 6, "broadside"],
+            },
+            {
+                weaponClass: 3,
+                nbrArcs: [1, 2, 3, 4, 5, 6, "broadside"],
+            },
+        ],
+    },
     {
         type: "submunition",
         name: "submunition pack",
@@ -110,7 +109,7 @@ export function weaponReqs(weapon): Reqs {
     return reqs;
 }
 
-const isBroadside = (arcs: Arc[]) => {
+export const isBroadside = (arcs: Arc[]) => {
     if (arcs.length !== 4) return false;
 
     // that'd be A or F