wip

src/lib/components/Field.svelte

@@ -3,7 +3,7 @@
     <input type="text" bind:value on:change />
   </slot>
   {#if label}
-    <label class:active={!!value}>{label}</label>
+    <label class:active>{label}</label>
   {/if}
 </div>
 
@@ -13,6 +13,9 @@
   export let placeholder = label;
 
   export let suffix = false;
+  export let activeLabel = undefined;
+
+  $: active = typeof activeLabel === "boolean" ? activeLabel : value;
 </script>
 
 <style>

src/lib/components/ShipEdit/Propulsion/Engine.svelte

@@ -11,7 +11,10 @@
       />
     </Field>
 
-    <label><input type="checkbox" bind:checked={advanced} /> advanced</label>
+    <label class="checkbox">
+      <input type="checkbox" bind:checked={advanced} />
+      <span>advanced</span>
+    </label>
   </div>
 </ShipItem>
 
@@ -36,4 +39,7 @@
     display: flex;
     align-items: end;
   }
+  label {
+    margin-left: 2em;
+  }
 </style>

src/lib/components/ShipEdit/Propulsion/Ftl.svelte

@@ -1,12 +1,13 @@
 <ShipItem {...reqs}>
-  <Field label="FTL drive">
+  <div>FTL drive</div>
+  <nav>
     {#each ftlTypes as t (t)}
       <label
         ><input type="radio" bind:group={type} value={t} />
-        {t}
+        <span>{t}</span>
       </label>
     {/each}
-  </Field>
+  </nav>
 </ShipItem>
 
 <script lang="ts">

src/lib/components/ShipEdit/Structure/Screens.svelte

@@ -33,5 +33,6 @@
   div {
     display: flex;
     gap: 2em;
+    align-items: baseline;
   }
 </style>

src/lib/components/ShipEdit/Structure/Streamlining.svelte

@@ -1,20 +1,19 @@
 <ShipItem {...reqs}>
-  <Field label="streamlining">
+  <div>streamlining</div>
-    <div>
+  <div class="field middle-align">
-      <label>
+    <label class="radio">
       <input type="radio" bind:group={type} value="none" />
-        none</label
+      <span>none</span></label
     >
-      <label>
+    <label class="radio">
       <input type="radio" bind:group={type} value="partial" />
-        partial</label
+      <span>partial</span></label
     >
-      <label>
+    <label class="radio">
       <input type="radio" bind:group={type} value="full" />
-        full</label
+      <span>full</span></label
     >
   </div>
-  </Field>
 </ShipItem>
 
 <script>
@@ -36,6 +35,6 @@
     display: flex;
   }
   label {
-    margin-left: 1em;
+    margin-left: 2em !important;
   }
 </style>

src/lib/components/ShipEdit/Weaponry/AddWeapon.svelte

@@ -1,12 +1,13 @@
 <div>
-  <Field label="">
+  <button class="button small primary" on:click={addWeapon}>add weapon</button>
+  <Field label="" suffix>
     <select bind:value={type}>
       {#each weaponTypes as weapon (weapon.type)}
         <option value={weapon.type}>{weapon.name}</option>
       {/each}
     </select>
+    <i>arrow_drop_down</i>
   </Field>
-  <button class="button small primary" on:click={addWeapon}>add weapon</button>
 </div>
 
 <script>
@@ -30,6 +31,7 @@
   button {
     width: inherit;
     display: inline-block;
+    margin-right: 2em;
   }
   div :global(.field) {
     display: flex;
@@ -37,7 +39,8 @@
   }
   div {
     display: flex;
-    margin-left: 5em;
+    margin-left: 0em;
     margin-bottom: 2em;
+    align-items: baseline;
   }
 </style>

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

@@ -1,20 +1,22 @@
-<label>beam</label>
+<span>beam</span>
 
-<Field label="beam class">
+<Field label="beam class" suffix>
   <select bind:value={weaponClass}>
     <option value={1}>1</option>
     <option value={2}>2</option>
     <option value={3}>3</option>
     <option value={4}>4</option>
   </select>
+  <i>arrow_drop_down</i>
 </Field>
 
-<Field label="arcs">
+<Field label="arcs" suffix>
   <select bind:value={nbrArcs}>
     {#each arc_options[weaponClass] || [] as nbrArcs (nbrArcs)}
       <option>{nbrArcs}</option>
     {/each}
   </select>
+  <i>arrow_drop_down</i>
 </Field>
 
 <Arcs selected={arcs} on:clickArc={({ detail }) => setArcs(detail)} />

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

@@ -1,6 +1,6 @@
 <ShipItem {...reqs}>
   <div class="weapon_row">
-    <button class="button small red remove" on:click={remove}>remove </button>
+    <a on:click={remove}><i>Delete</i> </a>
 
     <svelte:component this={component[type]} {...specs} on:change={update} />
   </div>

src/lib/components/ShipItem.svelte

@@ -3,9 +3,12 @@
 
   <div class="reqs">
     <div class="mass" bind:this={mass_el}>
-      {mass} <img src="{base}/mass.svg" alt="mass" />
+      {mass} <i>Weight</i>
+    </div>
+    <div class="cost" bind:this={cost_el}>
+      {cost}
+      <i>Paid</i>
     </div>
-    <div class="cost" bind:this={cost_el}>{cost}</div>
   </div>
 </div>
 
@@ -53,10 +56,6 @@
   img {
     width: 0.75em;
   }
-  .cost:after {
-    content: "\00A4";
-    margin-left: 0.5em;
-  }
   .mass img {
     width: 0.75em;
     display: inline-block;