54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<span>
|
||
|
|
<div v-if="title"><component :is="title" /></div>
|
||
|
|
<component :is="description" />
|
||
|
|
<div v-if="effectDisplay"><br>Currently: <component :is="effectDisplay" /></div>
|
||
|
|
<br>
|
||
|
|
Cost: {{ cost }} {{ costResource }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { layers } from '../../store/layers';
|
||
|
|
import { coerceComponent } from '../../util/vue';
|
||
|
|
import { formatWhole } from '../../util/bignum';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'default-upgrade-display',
|
||
|
|
inject: [ 'tab' ],
|
||
|
|
props: {
|
||
|
|
layer: String,
|
||
|
|
id: [ Number, String ]
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
upgrade() {
|
||
|
|
return layers[this.layer || this.tab.layer].upgrades[this.id];
|
||
|
|
},
|
||
|
|
title() {
|
||
|
|
if (this.upgrade.title) {
|
||
|
|
return coerceComponent(this.upgrade.title, 'h2');
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
},
|
||
|
|
description() {
|
||
|
|
return coerceComponent(this.upgrade.description, 'div');
|
||
|
|
},
|
||
|
|
effectDisplay() {
|
||
|
|
if (this.upgrade.effectDisplay) {
|
||
|
|
return coerceComponent(this.upgrade.effectDisplay);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
},
|
||
|
|
cost() {
|
||
|
|
return formatWhole(this.upgrade.cost);
|
||
|
|
},
|
||
|
|
costResource() {
|
||
|
|
return this.upgrade.currencyDisplayName || layers[this.layer || this.tab.layer].resource;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
</style>
|