ShipSpecs

src/components/App.svelte

@@ -2,10 +2,7 @@
 <main>
   <input class="reset" type="button" value="reset" on:click={reset} />
 
-  <Identification />
+  <ShipSpecs />
-
-  <ShipCost />
-
   <Propulsion
     ftl={$ship.ftl}
     engine={$ship.engine}
@@ -51,11 +48,10 @@
   import Header from './Header';
   import shipStore from "~/stores/ship";
 
+  import ShipSpecs from './ShipSpecs/index.svelte';
   import ShipItem from "./ShipItem/index.svelte";
-  import ShipCost from "./ShipCost.svelte";
   import Field from "./Field/index.svelte";
   import Hull from "./Hull.svelte";
-  import Identification from "./Identification.svelte";
   import Firecons from "./Firecons.svelte";
   import Propulsion from "./Propulsion/index.svelte";
   import Section from "~C/Section";

src/components/ShipCost.svelte

@@ -1,58 +0,0 @@
-<div class="ship_cost">
-<div>
-  <label>Ship tonnage</label>
-  <input
-    value={$ship.general.mass}
-    on:change={change_tonnage}
-    type="number" min="10" max="300" />
-  <div>
-
-  <div class="note" class:warning={!within_budget}>
-    {#if within_budget}
-    mass unused: { mass_unused }
-  {:else}
-    excessive mass: { -mass_unused }
-
-    {/if}
-  </div>
-
-</div>
-</div>
-
-<div>
-  <label>Ship cost</label>
-  <div>{$ship.general.cost}</div>
-</div>
-  </div>
-
-<script>
-  import { getContext } from 'svelte';
-
-  export let ship = getContext('ship');
-
-  const change_tonnage =
-  ({target: {value}}) =>
-  ship.dispatch(ship.actions.set_ship_mass(parseInt(value)));
-
-  let mass_unused;
-  $: mass_unused = $ship.general.mass - $ship.general.used_mass;
-
-  let within_budget = true;
-
-  $: within_budget = mass_unused >= 0;
-
-</script>
-
-<style>
-  .ship_cost {
-    display: flex;
-    grid-column: span 3;
-    justify-content: space-around;
-  }
-  .warning {
-    color: red;
-  }
-  .note {
-    font-size: smaller;
-  }
-</style>

src/components/ShipSpecs/Identification.svelte

@@ -1,5 +1,4 @@
-<div class="identification">
+<div>
-
     <Field label="ship class" value={general.ship_class}
         on:change={change_class} />
 
@@ -10,13 +9,12 @@
         {/each}
       </select>
     </Field>
-
 </div>
 
 <script>
   import { getContext } from 'svelte';
 
-  import Field from './Field/index.svelte';
+  import Field from '~C/Field';
   import { candidate_ship_types } from '~/dux/ship_types';
 
   export let ship = getContext('ship');
@@ -41,9 +39,9 @@
 </script>
 
 <style>
-.identification {
+  div {
-    grid-column: span 3;
     display: flex;
-    justify-content: space-around;
+    align-items: end;
-}
+    gap: 2em;
+  }
 </style>

src/components/ShipSpecs/ShipCost.svelte

@@ -0,0 +1,73 @@
+<div class="mass">
+  <Field label="ship tonnage">
+    <input
+      value={$ship.general.mass}
+      on:change={change_tonnage}
+      type="number"
+      min="10"
+      max="300" />
+    <span class="mass_symbol"></span>
+
+    <div class="note" class:warning={!within_budget}>
+      {#if within_budget}
+        mass unused: {mass_unused}
+      {:else}excessive mass: {-mass_unused}{/if}
+    </div>
+  </Field>
+</div>
+
+<div class="cost">
+  <Field label="cost">
+    <span class="cost">{$ship.general.cost}</span></Field>
+</div>
+
+<script>
+  import { getContext } from "svelte";
+  import Field from "~C/Field";
+
+  export let ship = getContext("ship");
+
+  const change_tonnage = ({ target: { value } }) =>
+    ship.dispatch(ship.actions.set_ship_mass(parseInt(value)));
+
+  let mass_unused;
+  $: mass_unused = $ship.general.mass - $ship.general.used_mass;
+
+  let within_budget = true;
+
+  $: within_budget = mass_unused >= 0;
+</script>
+
+<style>
+  .ship_cost {
+    display: flex;
+    grid-column: span 3;
+    justify-content: space-around;
+  }
+  input {
+    width: 5em;
+  }
+  .mass_symbol:after {
+    content: url(mass.svg);
+    width: 0.75em;
+    display: inline-block;
+    margin-left: 0.5em;
+  }
+  .warning {
+    color: red;
+  }
+  .note {
+    font-size: smaller;
+  }
+
+  .mass {
+    grid-column: 2;
+  }
+  div.cost {
+    grid-column: 3;
+  }
+  span.cost:after {
+    content: '\00A4';
+    margin-left: 0.5em;
+  }
+</style>

src/components/ShipSpecs/index.svelte

@@ -0,0 +1,16 @@
+  <Identification />
+
+  <ShipCost />
+
+
+<script>
+  import Identification from "./Identification.svelte";
+  import ShipCost from "./ShipCost.svelte";
+
+</script>
+
+<style>
+div {
+  background-color: red;
+}
+</style>