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>
 
@@ -12,7 +12,7 @@ import Field from '~C/Field';
     export let nbr, cost, mass = (0,0,0);
 
     const dispatch = createEventDispatcher();
-    $: dispatch( 'change_firecons', nbr); 
+    $: dispatch( 'change_firecons', nbr);
 
 </script>
 

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

@@ -16,8 +16,14 @@
 
     const dispatch = createEventDispatcher();
 
-    $: dispatch( 'ship_change', 
+    $: dispatch( 'ship_change',
         dux.actions.set_armour_layer({layer,rating})
     );
 
 </script>
+
+<style>
+  input {
+    width: 5em;
+  }
+  </style>

src/components/Hull/Armour/index.svelte

@@ -46,7 +46,11 @@
 <style>
     .layers {
         display: flex;
-        
+
     }
-    
+
+    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} 
+<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));
+  $: ship_change(dux.actions.set_adfc(rating));
-
+</script>
-  </script>
-
-  <style>
-  div { display: flex }
-  </style>