332 lines
9.5 KiB
Vue
332 lines
9.5 KiB
Vue
<template lang="html">
|
|
<div class="effect-form">
|
|
<text-field
|
|
ref="focusFirst"
|
|
label="Name"
|
|
:value="model.name"
|
|
:error-messages="errors.name"
|
|
@change="change('name', ...arguments)"
|
|
/>
|
|
<smart-select
|
|
label="Operation"
|
|
append-icon="mdi-menu-down"
|
|
:disabled="model.targetByTags"
|
|
:hint="operationHint"
|
|
: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-inner"
|
|
class="icon ml-0"
|
|
: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>
|
|
<text-field
|
|
v-if="model.operation === 'conditional'"
|
|
label="Text"
|
|
hint="The text to display on the affected stats"
|
|
:value="model.text"
|
|
:error-messages="errors.text"
|
|
@change="change('text', ...arguments)"
|
|
/>
|
|
<computed-field
|
|
v-else
|
|
label="Value"
|
|
hint="Number or calculation to determine the value of this effect"
|
|
:persistent-hint="needsValue"
|
|
:disabled="!needsValue"
|
|
:model="model.amount"
|
|
:error-messages="errors.amount"
|
|
@change="({path, value, ack}) =>
|
|
$emit('change', {path: ['amount', ...path], value, ack})"
|
|
/>
|
|
<v-btn-toggle
|
|
mandatory
|
|
:value="radioGroup"
|
|
class="ma-2 mb-8"
|
|
@change="changeTargetByTags"
|
|
>
|
|
<v-btn value="stats">
|
|
Target stats by variable name
|
|
</v-btn>
|
|
<v-btn value="tags">
|
|
Target properties by tag
|
|
</v-btn>
|
|
</v-btn-toggle>
|
|
|
|
<smart-combobox
|
|
v-if="!model.targetByTags"
|
|
label="Stats"
|
|
class="mr-2"
|
|
multiple
|
|
chips
|
|
deletable-chips
|
|
hint="Which stats will this effect apply to"
|
|
persistent-hint
|
|
:value="model.stats"
|
|
:items="attributeList"
|
|
:error-messages="errors.stats"
|
|
@change="change('stats', ...arguments)"
|
|
/>
|
|
<v-layout
|
|
v-if="model.targetByTags"
|
|
align-center
|
|
>
|
|
<v-btn
|
|
icon
|
|
style="margin-top: -30px;"
|
|
class="mr-2"
|
|
:loading="addExtraTagsLoading"
|
|
:disabled="extraTagsFull"
|
|
@click="addExtraTags"
|
|
>
|
|
<v-icon>
|
|
mdi-plus
|
|
</v-icon>
|
|
</v-btn>
|
|
<smart-combobox
|
|
label="Tags Required"
|
|
hint="The effect will apply to properties that have all the listed tags"
|
|
multiple
|
|
chips
|
|
deletable-chips
|
|
persistent-hint
|
|
:value="model.targetTags"
|
|
:error-messages="errors.targetTags"
|
|
@change="change('targetTags', ...arguments)"
|
|
/>
|
|
</v-layout>
|
|
<v-slide-x-transition
|
|
v-if="model.targetByTags"
|
|
group
|
|
>
|
|
<div
|
|
v-for="(extras, i) in model.extraTags"
|
|
:key="extras._id"
|
|
class="target-tags layout align-center justify-space-between"
|
|
>
|
|
<smart-select
|
|
label="Operation"
|
|
style="width: 90px; flex-grow: 0;"
|
|
:items="['OR', 'NOT']"
|
|
:value="extras.operation"
|
|
:error-messages="errors.extraTags && errors.extraTags[i]"
|
|
@change="change(['extraTags', i, 'operation'], ...arguments)"
|
|
/>
|
|
<smart-combobox
|
|
label="Tags"
|
|
:hint="extras.operation === 'OR' ? 'The effect will also target properties that have all of these tags instead' : 'The effect will ignore properties that have any of these tags'"
|
|
class="mx-2"
|
|
multiple
|
|
chips
|
|
deletable-chips
|
|
persistent-hint
|
|
:value="extras.tags"
|
|
@change="change(['extraTags', i, 'tags'], ...arguments)"
|
|
/>
|
|
<v-btn
|
|
icon
|
|
style="margin-top: -30px;"
|
|
@click="$emit('pull', {path: ['extraTags', i]})"
|
|
>
|
|
<v-icon>mdi-delete</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
</v-slide-x-transition>
|
|
<form-section
|
|
name="Advanced"
|
|
standalone
|
|
>
|
|
<v-expand-transition>
|
|
<text-field
|
|
v-if="model.targetByTags"
|
|
label="Target field"
|
|
:value="model.targetField"
|
|
hint="Target a specific calculation field on the affected properties"
|
|
:error-messages="errors.targetField"
|
|
@change="change('targetField', ...arguments)"
|
|
/>
|
|
</v-expand-transition>
|
|
<smart-combobox
|
|
label="Tags"
|
|
multiple
|
|
chips
|
|
deletable-chips
|
|
:value="model.tags"
|
|
:error-messages="errors.tags"
|
|
@change="change('tags', ...arguments)"
|
|
/>
|
|
</form-section>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
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 { EffectSchema } from '/imports/api/properties/Effects.js';
|
|
import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
|
|
|
|
const ICON_SPIN_DURATION = 300;
|
|
export default {
|
|
components: {
|
|
FormSection,
|
|
},
|
|
mixins: [propertyFormMixin, attributeListMixin],
|
|
data(){ return {
|
|
displayedIcon: 'add',
|
|
iconClass: '',
|
|
addExtraTagsLoading: false,
|
|
oldOperation: undefined,
|
|
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: {
|
|
radioGroup(){
|
|
return this.model.targetByTags ? 'tags' : 'stats';
|
|
},
|
|
extraTagsFull(){
|
|
if (!this.model.extraTags) return false;
|
|
let maxCount = EffectSchema.get('extraTags', 'maxCount');
|
|
return this.model.extraTags.length >= maxCount;
|
|
},
|
|
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;
|
|
default: return true;
|
|
}
|
|
},
|
|
operationHint(){
|
|
switch(this.model.operation) {
|
|
case 'base': return 'Stats take their largest base value, and then apply all other effects';
|
|
case 'add': return 'Add this vaulue to the stat';
|
|
case 'mul': return 'Multiply the stat by this value';
|
|
case 'min': return 'The stat will be at least this value';
|
|
case 'max': return 'The stat will not exceed this value';
|
|
case 'set': return 'The stat will be set to this value';
|
|
case 'advantage': return 'If this stat is the basis for a check, that check will be at advantage';
|
|
case 'disadvantage': return 'If this stat is the basis for a check, that check will be at advantage';
|
|
case 'passiveAdd': return 'This value will be added to the passive check';
|
|
case 'fail': return 'Targeted skills and checks will always fail';
|
|
case 'conditional': return 'Add a text note to this stat';
|
|
default: return '';
|
|
}
|
|
},
|
|
},
|
|
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,
|
|
changeTargetByTags(value){
|
|
if(value === 'stats'){
|
|
this.$emit('change', {path: ['targetByTags'], value: undefined});
|
|
if (this.oldOperation && this.oldOperation !== this.model.operation){
|
|
this.$emit('change', {path: ['operation'], value: this.oldOperation});
|
|
}
|
|
} else if (value === 'tags'){
|
|
this.$emit('change', {path: ['targetByTags'], value: true});
|
|
if (this.model.operation !== 'add'){
|
|
this.oldOperation = this.model.operation;
|
|
this.$emit('change', {path: ['operation'], value: 'add'});
|
|
}
|
|
}
|
|
},
|
|
addExtraTags(){
|
|
this.addExtraTagsLoading = true;
|
|
this.$emit('push', {
|
|
path: ['extraTags'],
|
|
value: {
|
|
_id: Random.id(),
|
|
operation: 'OR',
|
|
tags: [],
|
|
},
|
|
ack: () => this.addExtraTagsLoading = false,
|
|
});
|
|
},
|
|
}
|
|
};
|
|
</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>
|