2020-07-28 18:03:59 +00:00
|
|
|
<div class="mass">
|
|
|
|
<Field label="ship tonnage">
|
|
|
|
<input
|
|
|
|
value={$ship.general.mass}
|
|
|
|
on:change={change_tonnage}
|
|
|
|
type="number"
|
|
|
|
min="10"
|
2022-03-01 17:42:33 +00:00
|
|
|
max="300"
|
|
|
|
/>
|
2022-04-05 23:58:32 +00:00
|
|
|
<img class="mass_symbol" src="{base}/mass.svg" alt="mass"/>
|
2020-07-28 18:03:59 +00:00
|
|
|
|
|
|
|
<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">
|
2022-03-01 17:42:33 +00:00
|
|
|
<span class="cost">{$ship.general.cost}</span></Field
|
|
|
|
>
|
2020-07-28 18:03:59 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
2022-04-05 23:58:32 +00:00
|
|
|
import { base } from '$app/paths';
|
2020-07-28 18:03:59 +00:00
|
|
|
import { getContext } from "svelte";
|
2021-05-17 13:48:31 +00:00
|
|
|
import Field from "$lib/components/Field/index.svelte";
|
2020-07-28 18:03:59 +00:00
|
|
|
|
|
|
|
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;
|
|
|
|
}
|
2022-04-05 23:58:32 +00:00
|
|
|
.mass_symbol {
|
2020-07-28 18:03:59 +00:00
|
|
|
width: 0.75em;
|
|
|
|
display: inline-block;
|
|
|
|
margin-left: 0.5em;
|
|
|
|
}
|
|
|
|
.warning {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
.note {
|
|
|
|
font-size: smaller;
|
|
|
|
}
|
|
|
|
|
2022-03-01 17:42:33 +00:00
|
|
|
.mass,
|
|
|
|
div.cost {
|
|
|
|
padding: 0px 2em;
|
|
|
|
justify-self: right;
|
2020-07-28 18:38:40 +00:00
|
|
|
}
|
|
|
|
|
2020-07-28 18:03:59 +00:00
|
|
|
.mass {
|
|
|
|
grid-column: 2;
|
|
|
|
}
|
|
|
|
div.cost {
|
|
|
|
grid-column: 3;
|
|
|
|
}
|
|
|
|
span.cost:after {
|
2022-03-01 17:42:33 +00:00
|
|
|
content: "\00A4";
|
2020-07-28 18:03:59 +00:00
|
|
|
margin-left: 0.5em;
|
|
|
|
}
|
|
|
|
</style>
|