From e87c9a5ae4519f342851dc05292e81d82d33d870 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.dyndns.org>
Date: Tue, 28 Jul 2020 14:03:59 -0400
Subject: [PATCH] ShipSpecs

---
 src/components/App.svelte                     |  8 +-
 src/components/ShipCost.svelte                | 58 ---------------
 .../{ => ShipSpecs}/Identification.svelte     | 14 ++--
 src/components/ShipSpecs/ShipCost.svelte      | 73 +++++++++++++++++++
 src/components/ShipSpecs/index.svelte         | 16 ++++
 5 files changed, 97 insertions(+), 72 deletions(-)
 delete mode 100644 src/components/ShipCost.svelte
 rename src/components/{ => ShipSpecs}/Identification.svelte (85%)
 create mode 100644 src/components/ShipSpecs/ShipCost.svelte
 create mode 100644 src/components/ShipSpecs/index.svelte

diff --git a/src/components/App.svelte b/src/components/App.svelte
index 4dc6778..0742f09 100644
--- a/src/components/App.svelte
+++ b/src/components/App.svelte
@@ -2,10 +2,7 @@
 <main>
   <input class="reset" type="button" value="reset" on:click={reset} />
 
-  <Identification />
-
-  <ShipCost />
-
+  <ShipSpecs />
   <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";
diff --git a/src/components/ShipCost.svelte b/src/components/ShipCost.svelte
deleted file mode 100644
index 5098761..0000000
--- a/src/components/ShipCost.svelte
+++ /dev/null
@@ -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>
diff --git a/src/components/Identification.svelte b/src/components/ShipSpecs/Identification.svelte
similarity index 85%
rename from src/components/Identification.svelte
rename to src/components/ShipSpecs/Identification.svelte
index b02b1ea..b050eb8 100644
--- a/src/components/Identification.svelte
+++ b/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 {
-    grid-column: span 3;
+  div {
     display: flex;
-    justify-content: space-around;
-}
+    align-items: end;
+    gap: 2em;
+  }
 </style>
diff --git a/src/components/ShipSpecs/ShipCost.svelte b/src/components/ShipSpecs/ShipCost.svelte
new file mode 100644
index 0000000..a5f0360
--- /dev/null
+++ b/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>
diff --git a/src/components/ShipSpecs/index.svelte b/src/components/ShipSpecs/index.svelte
new file mode 100644
index 0000000..87d0d57
--- /dev/null
+++ b/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>