2020-07-19 20:21:28 +00:00
|
|
|
<div class="ship-item">
|
|
|
|
<slot />
|
|
|
|
|
2020-07-25 15:56:23 +00:00
|
|
|
<div class="mass" bind:this={mass_el}>{ mass }</div>
|
|
|
|
<div class="cost" bind:this={cost_el}>{ cost }</div>
|
2020-07-19 20:21:28 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
2020-07-25 15:56:23 +00:00
|
|
|
import { tick } from 'svelte';
|
|
|
|
|
2020-07-19 20:21:28 +00:00
|
|
|
export let mass;
|
|
|
|
export let cost;
|
2020-07-25 15:56:23 +00:00
|
|
|
|
|
|
|
let mass_el;
|
|
|
|
let cost_el;
|
|
|
|
|
|
|
|
const update_el = async (el) => {
|
|
|
|
if(!el) return;
|
|
|
|
el.classList.remove('updated');
|
|
|
|
void el.offsetWidth;
|
|
|
|
el.classList.add('updated');
|
|
|
|
}
|
|
|
|
|
|
|
|
$: update_el( mass_el, mass );
|
|
|
|
$: update_el( cost_el, cost );
|
|
|
|
|
2020-07-19 20:21:28 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.ship-item {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ship-item :global(> *) {
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cost,.mass { width: 4em; flex: inherit; }
|
|
|
|
img {
|
|
|
|
width: 0.75em;
|
|
|
|
}
|
|
|
|
.cost:after { content: '\00A4'; margin-left: 0.5em; }
|
2020-07-24 18:11:18 +00:00
|
|
|
.mass:after { content: url(mass.svg); width: 0.75em; display:
|
2020-07-19 20:21:28 +00:00
|
|
|
inline-block; margin-left: 0.5em; }
|
2020-07-25 15:56:23 +00:00
|
|
|
|
|
|
|
:global(.updated) {
|
|
|
|
animation-name: update;
|
|
|
|
animation-duration: 1.5s;
|
|
|
|
animation-fill-mode: forwards;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes update {
|
|
|
|
0% {color:inherit; font-weight: inherit;}
|
|
|
|
20% {color:red; font-weight: bold;}
|
|
|
|
80% {color:red; font-weight: bold;}
|
|
|
|
100% {color:inherit; font-weight: inherit; }
|
|
|
|
}
|
|
|
|
|
2020-07-19 20:21:28 +00:00
|
|
|
</style>
|