Applied style rules to genocide all \t characters
This commit is contained in:
Stefan Zermatten
@@ -29,9 +29,7 @@
|
||||
slot="item"
|
||||
slot-scope="item"
|
||||
>
|
||||
<v-icon
|
||||
class="icon mr-2"
|
||||
>
|
||||
<v-icon class="icon mr-2">
|
||||
{{ getEffectIcon(item.item.value, 1) }}
|
||||
</v-icon>
|
||||
{{ item.item.text }}
|
||||
@@ -157,9 +155,7 @@
|
||||
<slot name="children" />
|
||||
</form-section>
|
||||
|
||||
<form-section
|
||||
name="Advanced"
|
||||
>
|
||||
<form-section name="Advanced">
|
||||
<v-expand-transition>
|
||||
<text-field
|
||||
v-if="model.targetByTags"
|
||||
@@ -185,155 +181,162 @@
|
||||
</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';
|
||||
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: '',
|
||||
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'});
|
||||
}
|
||||
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);
|
||||
}
|
||||
},
|
||||
addExtraTags(){
|
||||
this.addExtraTagsLoading = true;
|
||||
this.$emit('push', {
|
||||
path: ['extraTags'],
|
||||
value: {
|
||||
_id: Random.id(),
|
||||
operation: 'OR',
|
||||
tags: [],
|
||||
},
|
||||
ack: () => this.addExtraTagsLoading = false,
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
},
|
||||
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;
|
||||
}
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user