weaponry

public/global.css

@@ -104,4 +104,6 @@ input:focus, select:focus {
     border: 1px solid var(--indigo-dye);;
 }
 
-
+input.short {
+    width:5em;
+}

src/components/App.svelte

@@ -52,7 +52,7 @@
   import ShipSpecs from './ShipSpecs/index.svelte';
   import ShipItem from "./ShipItem/index.svelte";
   import Field from "./Field/index.svelte";
-  import Hull from "./Hull.svelte";
+  import Hull from "./Hull";
   import Firecons from "./Firecons.svelte";
   import Propulsion from "./Propulsion/index.svelte";
   import Section from "~C/Section";

src/components/Engine/index.svelte

@@ -35,4 +35,5 @@ div {
     align-items: end;
 }
 label { margin-left: 2em; }
+  input[type="number"] { width: 5em; }
 </style>

src/components/Firecons.svelte

@@ -1,6 +1,6 @@
 <ShipItem {cost} {mass}>
     <Field label="firecons">
-    <input type="number" bind:value={nbr} />
+    <input type="number" class="short" bind:value={nbr} />
     </Field>
 </ShipItem>
 

src/components/Hull/Armour/Layer/index.svelte

@@ -21,3 +21,9 @@
     );
 
 </script>
+
+<style>
+  input {
+    width: 5em;
+  }
+  </style>

src/components/Hull/Armour/index.svelte

@@ -49,4 +49,8 @@
 
     }
 
+    input {
+      width: 5em;
+    }
+
 </style>

src/components/Hull/Screens/index.svelte

@@ -1,5 +1,5 @@
-
 <ShipItem { cost } { mass }>
+  <div>
 
   <Field label="screens">
     <input type="number" bind:value={standard} min="0" />
@@ -8,6 +8,7 @@
   <Field label="advanced screens">
     <input type="number" bind:value={advanced} min="0" />
   </Field>
+</div>
 
 </ShipItem>
 
@@ -34,4 +35,8 @@
   input {
     width: 3em;
   }
+  div {
+    display: flex;
+    gap: 2em;
+  }
   </style>

src/components/Hull/index.svelte

@@ -39,4 +39,5 @@ const dispatch = createEventDispatcher();
 </script>
 
 <style>
+  input { width: 5em; }
 </style>

src/components/Propulsion/index.svelte

@@ -1,10 +1,10 @@
 
 <Section label="propulsion">
 
-    <Ftl {...ftl} on:change_ftl />
-
     <Engine {...engine} on:change_engine />
 
+    <Ftl {...ftl} on:change_ftl />
+
 </Section>
 
 <script>

src/components/Weapon/index.svelte

@@ -1,10 +1,12 @@
 <ShipItem {cost} {mass}>
 
+  <div class="weapon_row">
 <div class="remove" on:click={remove}>X</div>
 
 
 <svelte:component this={weapon_component[weapon_type]} {...weapon}
     on:change={update}/>
+</div>
 </ShipItem>
 
 <script>
@@ -118,5 +120,10 @@
     border-radius: 0.5em;
     height: 1em;
 }
+  .weapon_row {
+    display: flex;
+    gap: 2em;
+    align-items: center;
+  }
 
 </style>

src/components/Weaponry/ADFC/index.svelte

@@ -1,26 +1,22 @@
 <ShipItem {cost} {mass}>
   <Field label="ADFC">
-    <input type="number" bind:value={rating} />
+    <input type="number" class="short" bind:value={rating} />
   </Field>
 </ShipItem>
 
-  <script>
-  import get from 'lodash/get';
-  import ShipItem from '~C/ShipItem/index.svelte';
-  import Field from '~C/Field/index.svelte';
-  import dux from '~/dux';
 
-  import {getContext } from 'svelte';
+<script>
+  import get from "lodash/get";
+  import ShipItem from "~C/ShipItem/index.svelte";
+  import Field from "~C/Field/index.svelte";
+  import dux from "~/dux";
+
+  import { getContext } from "svelte";
 
   export let rating = 0;
   export let cost = 0;
   export let mass = 0;
-  export let ship_change = getContext('ship_change') || ( () => {} );
+  export let ship_change = getContext("ship_change") || (() => {});
 
-  $: ship_change( dux.actions.set_adfc(rating));
-
-  </script>
-
-  <style>
-  div { display: flex }
-  </style>
+  $: ship_change(dux.actions.set_adfc(rating));
+</script>