aotds-docks/src/lib/components/Weapon/Needle/index.svelte

<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 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) => {
    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>