125 lines
3.1 KiB
Vue
125 lines
3.1 KiB
Vue
<template lang="html">
|
|
<div class="effect-viewer">
|
|
<v-row dense>
|
|
<property-field name="Operation">
|
|
<div
|
|
class="layout"
|
|
style="overflow: hidden;"
|
|
>
|
|
<v-icon class="mr-2">
|
|
{{ effectIcon }}
|
|
</v-icon>
|
|
{{ operation }}
|
|
</div>
|
|
</property-field>
|
|
<property-field
|
|
v-if="model.operation !== 'conditional'"
|
|
name="Amount"
|
|
:value="displayedValue || ' '"
|
|
/>
|
|
<property-target-tags
|
|
v-if="model.targetByTags"
|
|
:model="model"
|
|
/>
|
|
<property-field
|
|
v-else
|
|
name="Stats"
|
|
>
|
|
<div class="d-flex flex-wrap">
|
|
<v-chip
|
|
v-for="(stat, index) in model.stats"
|
|
:key="index"
|
|
class="ma-1"
|
|
>
|
|
{{ stat }}
|
|
</v-chip>
|
|
</div>
|
|
</property-field>
|
|
<property-field
|
|
v-if="model.operation === 'conditional'"
|
|
name="Text"
|
|
:cols="{cols: 12}"
|
|
:value="model.text || ' '"
|
|
/>
|
|
</v-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import propertyViewerMixin from '/imports/client/ui/properties/viewers/shared/propertyViewerMixin.js';
|
|
import PropertyTargetTags from '/imports/client/ui/properties/viewers/shared/PropertyTargetTags.vue';
|
|
import getEffectIcon from '/imports/client/ui/utility/getEffectIcon.js';
|
|
import { isFinite } from 'lodash';
|
|
|
|
export default {
|
|
components: {
|
|
PropertyTargetTags,
|
|
},
|
|
mixins: [propertyViewerMixin],
|
|
computed: {
|
|
resolvedValue() {
|
|
if (!this.model.amount) return;
|
|
return this.model.amount.value !== undefined ?
|
|
this.model.amount.value :
|
|
this.model.amount.calculation;
|
|
},
|
|
effectIcon() {
|
|
let value = this.resolvedValue;
|
|
return getEffectIcon(this.model.operation, value);
|
|
},
|
|
operation() {
|
|
switch (this.model.operation) {
|
|
case 'base': return 'Base value';
|
|
case 'add': return 'Add';
|
|
case 'mul': return 'Multiply';
|
|
case 'min': return 'Minimum';
|
|
case 'max': return 'Maximum';
|
|
case 'set': return 'Set';
|
|
case 'advantage': return 'Advantage';
|
|
case 'disadvantage': return 'Disadvantage';
|
|
case 'passiveAdd': return 'Passive bonus';
|
|
case 'fail': return 'Always fail';
|
|
case 'conditional': return 'Conditional benefit';
|
|
default: return this.model.operation;
|
|
}
|
|
},
|
|
displayedValue() {
|
|
let value = this.resolvedValue;
|
|
switch (this.model.operation) {
|
|
case 'base': return value;
|
|
case 'add': return isFinite(value) ? Math.abs(value) : value;
|
|
case 'mul': return value;
|
|
case 'min': return value;
|
|
case 'max': return value;
|
|
case 'advantage': return;
|
|
case 'disadvantage': return;
|
|
case 'passiveAdd': return isFinite(value) ? Math.abs(value) : value;
|
|
case 'fail': return;
|
|
case 'conditional': return;
|
|
default: return undefined;
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.icon {
|
|
min-width: 30px;
|
|
}
|
|
|
|
.icon {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.net-effect {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.value,
|
|
.calculation {
|
|
min-width: 80px;
|
|
}
|
|
</style>
|