164 lines
4.1 KiB
Vue
164 lines
4.1 KiB
Vue
<template lang="html">
|
|
<div class="effect-form">
|
|
<text-field
|
|
label="Name"
|
|
:value="model.name"
|
|
:error-messages="errors.name"
|
|
@change="change('name', ...arguments)"
|
|
/>
|
|
<smart-select
|
|
label="Operation"
|
|
append-icon="arrow_drop_down"
|
|
class="mx-2"
|
|
:error-messages="errors.operation"
|
|
:menu-props="{transition: 'slide-y-transition', lazy: true}"
|
|
:items="operations"
|
|
:value="model.operation"
|
|
@change="change('operation', ...arguments)"
|
|
>
|
|
<v-icon
|
|
slot="prepend"
|
|
class="icon"
|
|
:class="iconClass"
|
|
>
|
|
{{ displayedIcon }}
|
|
</v-icon>
|
|
<template
|
|
slot="item"
|
|
slot-scope="item"
|
|
>
|
|
<v-icon
|
|
class="icon mr-2"
|
|
>
|
|
{{ getEffectIcon(item.item.value, 1) }}
|
|
</v-icon>
|
|
{{ item.item.text }}
|
|
</template>
|
|
</smart-select>
|
|
<smart-combobox
|
|
label="Stats"
|
|
class="mr-2"
|
|
multiple
|
|
chips
|
|
deletable-chips
|
|
:value="model.stats"
|
|
:items="attributeList"
|
|
:error-messages="errors.stats"
|
|
@change="change('stats', ...arguments)"
|
|
/>
|
|
<text-field
|
|
label="Value"
|
|
class="mr-2"
|
|
:persistent-hint="needsValue"
|
|
:value="needsValue ? (model.calculation) : ' '"
|
|
:disabled="!needsValue"
|
|
:error-messages="errors.calculation"
|
|
:hint="!isFinite(model.calculation) && model.result ? model.result + '' : '' "
|
|
@change="change('calculation', ...arguments)"
|
|
/>
|
|
<calculation-error-list :errors="model.errors" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
|
|
import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
|
|
import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
|
|
import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
|
|
|
|
const ICON_SPIN_DURATION = 300;
|
|
export default {
|
|
components: {
|
|
CalculationErrorList,
|
|
},
|
|
mixins: [propertyFormMixin, attributeListMixin],
|
|
data(){ return {
|
|
displayedIcon: 'add',
|
|
iconClass: '',
|
|
operations: [
|
|
{value: 'base', text: 'Base Value'},
|
|
{value: 'add', text: 'Add'},
|
|
{value: 'mul', text: 'Multiply'},
|
|
{value: 'min', text: 'Minimum'},
|
|
{value: 'max', text: 'Maximum'},
|
|
{value: 'set', text: 'Set'},
|
|
{value: 'advantage', text: 'Advantage'},
|
|
{value: 'disadvantage', text: 'Disadvantage'},
|
|
{value: 'passiveAdd', text: 'Passive Bonus'},
|
|
{value: 'fail', text: 'Fail'},
|
|
{value: 'conditional', text: 'Conditional Benefit'},
|
|
],
|
|
}},
|
|
computed: {
|
|
needsValue(){
|
|
switch(this.model.operation) {
|
|
case 'base': return true;
|
|
case 'add': return true;
|
|
case 'mul': return true;
|
|
case 'min': return true;
|
|
case 'max': return true;
|
|
case 'set': return true;
|
|
case 'advantage': return false;
|
|
case 'disadvantage': return false;
|
|
case 'passiveAdd': return true;
|
|
case 'fail': return false;
|
|
case 'conditional': return false;
|
|
case 'rollBonus': return true;
|
|
default: return true;
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
'model.operation': {
|
|
immediate: true,
|
|
handler(newValue, oldValue){
|
|
let newIcon = getEffectIcon(newValue, 1);
|
|
if (!oldValue){
|
|
// Skip animation
|
|
this.displayedIcon = newIcon;
|
|
} else {
|
|
this.iconClass='leaving';
|
|
setTimeout(() => {
|
|
this.displayedIcon = newIcon;
|
|
this.iconClass='arriving';
|
|
requestAnimationFrame(() => {
|
|
this.iconClass='';
|
|
});
|
|
}, ICON_SPIN_DURATION / 2);
|
|
}
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
getEffectIcon,
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.theme--light .icon {
|
|
color: black;
|
|
}
|
|
.icon {
|
|
min-width: 30px;
|
|
transition: transform 0.15s linear, opacity 0.15s ease;
|
|
transform-origin: 18px center;
|
|
margin-left: -12px;
|
|
}
|
|
.icon.leaving {
|
|
transform: translateY(-24px);
|
|
opacity: 0;
|
|
}
|
|
.icon.arriving {
|
|
transform: translateY(24px);
|
|
opacity: 0;
|
|
transition: none;
|
|
}
|
|
.hidden {
|
|
visibility: hidden;
|
|
}
|
|
.effect-form > div {
|
|
flex-basis: 220px;
|
|
}
|
|
</style>
|