Effects targeting calculations by tag now work in the engine and actions

2022-02-15 15:59:41 +02:00
parent e0f621cc44
commit 378da71f5d
19 changed files with 454 additions and 98 deletions
--- a/app/imports/ui/properties/components/attributes/AttributeEffect.vue
+++ b/app/imports/ui/properties/components/attributes/AttributeEffect.vue
@@ -27,7 +27,7 @@
      <div class="text-body-1 mb-1">
        {{ displayedText }}
      </div>
-      <div v-if="!hideBreadcrumbs">
+      <div v-if="!hideBreadcrumbs && model.ancestors">
        <breadcrumbs
          :model="model"
          class="text-caption"
@@ -41,20 +41,22 @@
 </template>

 <script lang="js">
-	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
-	import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
+  import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
  import Breadcrumbs from '/imports/ui/creature/creatureProperties/Breadcrumbs.vue';
  import { isFinite } from 'lodash';

-	export default {
+  export default {
    components: {
      Breadcrumbs,
    },
-		mixins: [propertyViewerMixin],
    props: {
-      hideBreadcrumbs: Boolean
+      hideBreadcrumbs: Boolean,
+      model: {
+        type: Object,
+        required: true,
+      },
    },
-		computed: {
+    computed: {
      hasClickListener(){
        return this.$listeners && this.$listeners.click
      },
@@ -65,83 +67,83 @@
          return this.model.name || this.operation
        }
      },
-			resolvedValue(){
+      resolvedValue(){
        let amount = this.model.amount;
        if (!amount) return;
-				return amount.value !== undefined ? amount.value : 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 'advantage': return 'Advantage';
-					case 'disadvantage': return 'Disadvantage';
-					case 'passiveAdd': return 'Passive bonus';
-					case 'fail': return 'Always fail';
-					case 'conditional': return 'Conditional benefit' ;
+        return amount.value !== undefined ? amount.value : 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 'advantage': return 'Advantage';
+          case 'disadvantage': return 'Disadvantage';
+          case 'passiveAdd': return 'Passive bonus';
+          case 'fail': return 'Always fail';
+          case 'conditional': return 'Conditional benefit' ;
          default: return '';
-				}
-			},
-			showValue(){
-				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 'advantage': return false;
-					case 'disadvantage': return false;
-					case 'passiveAdd': return true;
-					case 'fail': return false;
-					case 'conditional': return false;
+        }
+      },
+      showValue(){
+        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 'advantage': return false;
+          case 'disadvantage': return false;
+          case 'passiveAdd': return true;
+          case 'fail': return false;
+          case 'conditional': return false;
          default: return false;
-				}
-			},
-			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 undefined;
+        }
+      },
+      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 undefined;
          default: return undefined;
-				}
-			}
-		},
+        }
+      }
+    },
    methods: {
      click(e){
        this.$emit('click', e);
      },
    },
-	};
+  };
 </script>

 <style lang="css" scoped>
-	.icon, .effect-icon {
-		min-width: 30px;
-	}
-	.icon {
-		color: inherit !important;
-	}
-	.net-effect {
-		flex-grow: 0;
-		flex-shrink: 0;
-	}
-	.effect-value {
-		min-width: 60px;
+  .icon, .effect-icon {
+    min-width: 30px;
+  }
+  .icon {
+    color: inherit !important;
+  }
+  .net-effect {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+  .effect-value {
+    min-width: 60px;
    text-align: center;
-	}
+  }
 </style>
--- a/app/imports/ui/properties/components/effects/InlineEffect.vue
+++ b/app/imports/ui/properties/components/effects/InlineEffect.vue
@@ -0,0 +1,136 @@
+<template lang="html">
+  <v-list-item
+    class="effect-viewer layout align-center"
+    dense
+    v-on="!hideBreadcrumbs ? {click} : {}"
+  >
+    <div class="effect-icon">
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-icon
+            class="mx-2"
+            style="cursor: default;"
+            v-on="on"
+          >
+            {{ effectIcon }}
+          </v-icon>
+        </template>
+        <span>{{ operation }}</span>
+      </v-tooltip>
+    </div>
+    <v-list-item-content>
+      <v-list-item-title>
+        <span
+          class="effect-value mr-2"
+        >
+          {{ displayedValue }}
+        </span>
+        {{ displayedText }}
+      </v-list-item-title>
+    </v-list-item-content>
+  </v-list-item>
+</template>
+
+<script lang="js">
+  import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
+  import { isFinite } from 'lodash';
+
+  export default {
+    props: {
+      hideBreadcrumbs: Boolean,
+      model: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      hasClickListener(){
+        return this.$listeners && this.$listeners.click
+      },
+      displayedText(){
+        if (this.model.operation === 'conditional'){
+          return this.model.text || this.model.name || this.operation
+        } else {
+          return this.model.name || this.operation
+        }
+      },
+      resolvedValue(){
+        let amount = this.model.amount;
+        if (!amount) return;
+        return amount.value !== undefined ? amount.value : 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 'advantage': return 'Advantage';
+          case 'disadvantage': return 'Disadvantage';
+          case 'passiveAdd': return 'Passive bonus';
+          case 'fail': return 'Always fail';
+          case 'conditional': return 'Conditional benefit' ;
+          default: return '';
+        }
+      },
+      showValue(){
+        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 'advantage': return false;
+          case 'disadvantage': return false;
+          case 'passiveAdd': return true;
+          case 'fail': return false;
+          case 'conditional': return false;
+          default: return false;
+        }
+      },
+      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 undefined;
+          default: return undefined;
+        }
+      }
+    },
+    methods: {
+      click(e){
+        this.$emit('click', e);
+      },
+    },
+  };
+</script>
+
+<style lang="css" scoped>
+  .icon, .effect-icon {
+    min-width: 20px;
+  }
+  .icon {
+    color: inherit !important;
+  }
+  .net-effect {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+  .effect-value {
+    min-width: 30px;
+    text-align: center;
+  }
+</style>
--- a/app/imports/ui/properties/forms/EffectForm.vue
+++ b/app/imports/ui/properties/forms/EffectForm.vue
@@ -10,6 +10,7 @@
    <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}"
@@ -192,6 +193,7 @@
 			displayedIcon: 'add',
 			iconClass: '',
      addExtraTagsLoading: false,
+      oldOperation: undefined,
 			operations: [
 				{value: 'base', text: 'Base Value'},
 				{value: 'add', text: 'Add'},
@@ -274,8 +276,15 @@
      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(){
--- a/app/imports/ui/properties/forms/shared/ComputedField.vue
+++ b/app/imports/ui/properties/forms/shared/ComputedField.vue
@@ -12,7 +12,7 @@
        {{ model.value }}
      </template>
    </text-field>
-    <calculation-error-list :errors="model.errors" />
+    <calculation-error-list :errors="errorList" />
  </div>
 </template>

@@ -29,6 +29,15 @@ export default {
      default: () => ({}),
    },
  },
+  computed: {
+    errorList(){
+      if (this.model.parseError){
+        return [this.model.parseError, ...this.model.errors];
+      } else {
+        return this.model.errors;
+      }
+    }
+  }
 }
 </script>

--- a/app/imports/ui/properties/viewers/ActionViewer.vue
+++ b/app/imports/ui/properties/viewers/ActionViewer.vue
@@ -29,7 +29,7 @@
        large
        center
        signed
-        :value="rollBonus"
+        :calculation="model.attackRoll"
      />
      <property-field
        name="Action type"
@@ -157,13 +157,6 @@ export default {
      }
      return undefined;
    },
-    rollBonus(){
-      if (
-        !this.model.attackRoll ||
-        !isFinite(this.model.attackRoll.value)
-      ) return;
-      return numberToSignedString(this.model.attackRoll.value);
-    },
    rollBonusTooLong(){
      return this.rollBonus && this.rollBonus.length > 3;
    },
--- a/app/imports/ui/properties/viewers/shared/PropertyField.vue
+++ b/app/imports/ui/properties/viewers/shared/PropertyField.vue
@@ -19,7 +19,7 @@
        {{ name }}
      </v-sheet>
      <div
-        class="flex-grow-1 layout align-center"
+        class="flex-grow-1 layout align-center justify-center flex-wrap"
        style="width: 100%;"
      >
        <div
@@ -30,6 +30,8 @@
            'justify-center': isCenter,
            'justify-end': end,
            'mono': isMono,
+            'flex-grow-0': calculation && calculation.effects,
+            'ma-3': calculation && calculation.effects,
          }"
          style="overflow-x: auto;"
          v-bind="$attrs"
@@ -43,6 +45,28 @@
            </template>
          </slot>
        </div>
+        <div
+          v-if="calculation && calculation.effects"
+          class="flex-grow-1"
+        >
+          <inline-effect
+            v-if="typeof calculation.value === 'number'"
+            hide-breadcrumbs
+            :model="{
+              name: 'Base value',
+              operation: 'base',
+              amount: {value: calculation.baseValue},
+            }"
+            @click="clickEffect(effect._id)"
+          />
+          <inline-effect
+            v-for="effect in calculation.effects"
+            :key="effect._id"
+            :data-id="effect._id"
+            :model="effect"
+            @click="clickEffect(effect._id)"
+          />
+        </div>
      </div>
    </v-sheet>
  </v-col>
@@ -50,14 +74,18 @@

 <script lang="js">
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+import InlineEffect from '/imports/ui/properties/components/effects/InlineEffect.vue';

 export default {
-	props: {
-		name: {
+  components: {
+    InlineEffect,
+  },
+  props: {
+    name: {
      type: String,
      default: undefined,
    },
-		value: {
+    value: {
      type: [String, Number, Boolean],
      default: undefined,
    },
@@ -74,7 +102,7 @@ export default {
      type: Object,
      default: () => ({cols: 12, sm: 6, md: 4}),
    },
-	},
+  },
  computed: {
    showCalculationInsteadOfValue(){
      if (!this.calculation) return;
@@ -118,6 +146,13 @@ export default {
  },
  methods: {
    numberToSignedString,
+    clickEffect(id){
+      this.$store.commit('pushDialogStack', {
+        component: 'creature-property-dialog',
+        elementId: `${id}`,
+        data: {_id: id},
+      });
+    },
  }
 }
 </script>