ShipCost component

src/lib/components/ShipEdit/ShipCost.svelte

@@ -0,0 +1,86 @@
+<div class="mass">
+    <Field label="ship tonnage">
+        <input bind:value={mass} type="number" min="10" max="300" />
+        <span class="mass_symbol" />
+
+        <div class="note" class:warning={!withinBudget}>
+            {#if withinBudget}
+                mass unused: {massUnused}
+            {:else}
+                excessive mass: {-massUnused}
+            {/if}
+        </div>
+    </Field>
+</div>
+
+<div class="cost">
+    <Field label="cost">
+        <span class="cost">{cost}</span>
+    </Field>
+</div>
+
+<script>
+    import { getContext } from "svelte";
+    import Field from "$lib/components/Field/index.svelte";
+
+    export let ship = getContext("ship");
+
+    export let mass = 10;
+    export let cost = 10;
+    export let usedMass = 5;
+
+    $: massUnused = mass - usedMass;
+    $: withinBudget = massUnused >= 0;
+
+    $: ship.dispatch.setShipMass(mass);
+
+    /*   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,
+    div.cost {
+        padding: 0px 2em;
+        justify-self: right;
+    }
+
+    .mass {
+        grid-column: 2;
+    }
+    div.cost {
+        grid-column: 3;
+    }
+    span.cost:after {
+        content: "\00A4";
+        margin-left: 0.5em;
+    }
+</style>

src/lib/components/ShipEdit/index.svelte

@@ -1,12 +1,24 @@
-<Identification {...$shipState.identification} {...$shipState.reqs} />
+<div class="identification-row">
+    <Identification {...$shipState.identification} {...$shipState.reqs} />
+
+    <ShipCost {...$shipState.reqs} />
+</div>
 
 <script>
-  import { getContext } from "svelte";
+    import { getContext } from "svelte";
 
-  import Identification from "./Identification/index.svelte";
+    import Identification from "./Identification/index.svelte";
+    import ShipCost from "./ShipCost.svelte";
 
-  const { state: shipState } = getContext("ship");
+    const { state: shipState } = getContext("ship");
 </script>
 
 <style>
+    .identification-row {
+        display: flex;
+    }
+
+    .identification-row :global(> *:first-child) {
+        flex: 1;
+    }
 </style>

src/lib/shipDux/index.js

@@ -1,4 +1,5 @@
 import { Updux } from "updux";
+import u from 'updeep';
 
 import engine from "./engine.js";
 import identification from "./identification.js";
@@ -10,8 +11,13 @@ const dux = new Updux({
     engine,
   },
   initial: {
-    reqs: { cost: 0, mass: 10 },
+    reqs: { cost: 0, mass: 10, usedMass: 0 },
   },
+    actions: {
+        setShipMass: null,
+    }
 });
 
+dux.setMutation( 'setShipMass', mass => u({reqs: {mass}}) );
+
 export default dux;