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

app/imports/api/engine/actions/applyProperty.js

@@ -21,6 +21,7 @@ const applyPropertyByType = {
   toggle,
 };
 
-export default function applyProperty(node, ...args){
+export default function applyProperty(node, opts, ...rest){
-  return applyPropertyByType[node.node.type]?.(node, ...args);
+  opts.scope[`#${node.node.type}`] = node.node;
+  return applyPropertyByType[node.node.type]?.(node, opts, ...rest);
 }

app/imports/api/engine/actions/applyPropertyByType/applyDamage.js

@@ -3,6 +3,7 @@ import { dealDamageWork } from '/imports/api/creature/creatureProperties/methods
 import {insertCreatureLog} from '/imports/api/creature/log/CreatureLogs.js';
 import resolve, { Context, toString } from '/imports/parser/resolve.js';
 import logErrors from './shared/logErrors.js';
+import applyEffectsToCalculationParseNode from '/imports/api/engine/actions/applyPropertyByType/shared/applyEffectsToCalculationParseNode.js';
 
 export default function applyDamage(node, {
   creature, targets, scope, log
@@ -35,11 +36,12 @@ export default function applyDamage(node, {
   const logName = prop.damageType === 'healing' ? 'Healing' : 'Damage';
 
   // Compile the dice roll and store that string first
-  const {result: compiled} = resolve('compiled', prop.amount.parseNode, scope, context);
+  // const {result: compiled} = resolve('compiled', prop.amount.parseNode, scope, context);
-  logValue.push(toString(compiled));
+  // logValue.push(toString(compiled));
-  logErrors(context.errors, log);
+  // logErrors(context.errors, log);
 
   // roll the dice only and store that string
+  applyEffectsToCalculationParseNode(prop.amount, log);
   const {result: rolled} = resolve('roll', prop.amount.parseNode, scope, context);
   logValue.push(toString(rolled));
   logErrors(context.errors, log);

app/imports/api/engine/actions/applyPropertyByType/shared/applyEffectsToCalculationParseNode.js

@@ -0,0 +1,24 @@
+import operator from '/imports/parser/parseTree/operator.js';
+import { parse } from '/imports/parser/parser.js';
+import logErrors from './logErrors.js';
+
+export default function applyEffectsToCalculationParseNode(calcObj, log){
+  if (!calcObj.effects) return;
+  calcObj.effects.forEach(effect => {
+    if (effect.operation !== 'add') return;
+    if (!effect.amount) return;
+    if (effect.amount.value === null) return;
+    let effectParseNode;
+    try {
+      effectParseNode = parse(effect.amount.value.toString());
+      calcObj.parseNode = operator.create({
+        left: calcObj.parseNode,
+        right: effectParseNode,
+        operator: '+',
+        fn: 'add'
+      });
+    } catch (e){
+      logErrors([e], log)
+    }
+  });
+}

app/imports/api/engine/actions/applyPropertyByType/shared/recalculateCalculation.js

@@ -1,9 +1,11 @@
 import evaluateCalculation from '/imports/api/engine/computation/utility/evaluateCalculation.js';
+import applyEffectsToCalculationParseNode from '/imports/api/engine/actions/applyPropertyByType/shared/applyEffectsToCalculationParseNode.js';
 import logErrors from './logErrors.js';
 
 export default function recalculateCalculation(calc, scope, log, context){
   if (!calc?.parseNode) return;
   calc._parseLevel = 'reduce';
+  applyEffectsToCalculationParseNode(calc, log);
   evaluateCalculation(calc, scope, context);
   logErrors(calc.errors, log);
 }

app/imports/api/engine/computation/CreatureComputation.js

@@ -6,6 +6,7 @@ export default class CreatureComputation {
     // Set up fields
     this.originalPropsById =  {};
     this.propsById =  {};
+    this.propsWithTag = {};
     this.scope = {};
     this.props =  properties;
     this.dependencyGraph = createGraph();
@@ -18,6 +19,17 @@ export default class CreatureComputation {
       // Store by id
       this.propsById[prop._id] = prop;
 
+      // Store sets of ids in each tag
+      if (prop.tags){
+        prop.tags.forEach(tag => {
+          if (this.propsWithTag[tag]){
+            this.propsWithTag[tag].push(prop._id);
+          } else {
+            this.propsWithTag[tag] = [prop._id];
+          }
+        });
+      }
+
       // Store the prop in the dependency graph
       this.dependencyGraph.addNode(prop._id, prop);
     });

app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash';
+import { get, intersection, difference } from 'lodash';
 
 const linkDependenciesByType = {
   action: linkAction,
@@ -127,11 +127,11 @@ function linkEffects(dependencyGraph, prop, computation){
   dependOnCalc({dependencyGraph, prop, key: 'amount'});
   // The stats depend on the effect
   if (prop.targetByTags){
-    // TODO: 
+    getEffectTagTargets(prop, computation).forEach(targetId => {
-    getEffectTagTargets(prop, computation).forEach(targetProp => {
+      const targetProp = computation.propsById[targetId];
       const key = prop.targetField || getDefaultCalculationField(targetProp);
       const calcObj = get(targetProp, key);
-      if (calcObj){
+      if (calcObj && calcObj.calculation){
         dependencyGraph.addLink(`${targetProp._id}.${key}`, prop._id , 'effect');
       }
     });
@@ -143,6 +143,67 @@ function linkEffects(dependencyGraph, prop, computation){
   }
 }
 
+// Returns an array of IDs of the properties the effect targets
+function getEffectTagTargets(effect, computation){
+  const targets = getTargetListFromTags(effect.targetTags, computation);
+  const notIds = [];
+  if (effect.extraTags){
+    effect.extraTags.forEach(ex => {
+      if (ex.operation === 'OR'){
+        targets.push(...getTargetListFromTags(ex.tags, computation));
+      } else if (ex.operation === 'NOT'){
+        ex.tags.forEach(tag => {
+          const idList = computation.propsWithTag[tag];
+          if (idList) notIds.push(...computation.propsWithTag[tag])
+        });
+      }
+    });
+  }
+  return difference(targets, notIds);
+}
+
+function getTargetListFromTags(tags, computation){
+  const targetTagIdLists = [];
+  if (!tags) return [];
+  tags.forEach(tag => {
+    const idList = computation.propsWithTag[tag];
+    if (idList) targetTagIdLists.push(idList);
+  });
+  const targets = intersection(...targetTagIdLists);
+  return targets;
+}
+
+function getDefaultCalculationField(prop){
+  switch (prop.type){
+    case 'action': return 'attackRoll';
+    case 'adjustment': return 'amount';
+    case 'attribute': return 'baseValue';
+    case 'branch': return 'condition';
+    case 'buff': return 'duration';
+    case 'class': return null;
+    case 'classLevel': return null;
+    case 'constant': return null;
+    case 'container': return null;
+    case 'damageMultiplier': return null;
+    case 'damage': return 'amount';
+    case 'effect': return 'amount';
+    case 'feature': return null;
+    case 'folder': return null;
+    case 'item': return null;
+    case 'note': return null;
+    case 'proficiency': return null;
+    case 'reference': return null;
+    case 'roll': return 'roll';
+    case 'savingThrow': return 'dc';
+    case 'skill': return 'baseValue';
+    case 'slotFiller': return null;
+    case 'slot': return 'quantityExpected';
+    case 'spellList': return 'attackRollBonus';
+    case 'spell': return null;
+    case 'toggle': return 'condition';
+  }
+}
+
 function linkRoll(dependencyGraph, prop){
   dependOnCalc({dependencyGraph, prop, key: 'roll'});
 }

app/imports/api/engine/computation/buildComputation/parseCalculationFields.js

@@ -29,7 +29,7 @@ function discoverInlineCalculationFields(prop, schemas){
 
       // Set the value to the uncomputed string for use in calculations
       inlineCalcObj.value = string;
-      
+
       // Has the text, if it matches the existing hash, stop
       const inlineCalcHash = cyrb53(inlineCalcObj.text);
       if (inlineCalcHash === inlineCalcObj.hash){
@@ -57,6 +57,9 @@ function parseAllCalculationFields(prop, schemas){
     // Determine the level the calculation should compute down to
     let parseLevel = schemas[prop.type].getDefinition(calcKey).parseLevel || 'reduce';
 
+    // Special case of effects, when targeting by tags compile
+    if (prop.type === 'effect' && prop.targetByTags) parseLevel = 'compile';
+
     // For all fields matching they keys
     // supports `keys.$.with.$.arrays`
     applyFnToKey(prop, calcKey, (prop, key) => {

app/imports/api/engine/computation/computeComputation/computeByType/computeCalculation.js

@@ -3,4 +3,46 @@ import evaluateCalculation from '../../utility/evaluateCalculation.js';
 export default function computeCalculation(computation, node){
   const calcObj = node.data;
   evaluateCalculation(calcObj, computation.scope);
+  aggregateCalculationEffects(node, computation);
+}
+
+export function aggregateCalculationEffects(node, computation){
+  const calcObj = node.data;
+  delete calcObj.effects;
+  computation.dependencyGraph.forEachLinkedNode(
+    node.id,
+    (linkedNode, link) => {
+      // Only effect links
+      if (link.data !== 'effect') return;
+      // That have effect data
+      if (!linkedNode.data) return;
+      // Ignore inactive props
+      if (linkedNode.data.inactive) return;
+
+      // Collate effects
+      calcObj.effects = calcObj.effects || [];
+      calcObj.effects.push({
+        _id: linkedNode.data._id,
+        name: linkedNode.data.name,
+        operation: linkedNode.data.operation,
+        amount: linkedNode.data.amount && {
+          value: linkedNode.data.amount.value,
+          //parseNode: linkedNode.data.amount.parseNode,
+        },
+        // ancestors: linkedNode.data.ancestors,
+      });
+    },
+    true // enumerate only outbound links
+  );
+  if (calcObj.effects && typeof calcObj.value === 'number'){
+    calcObj.baseValue = calcObj.value;
+    calcObj.effects.forEach(effect => {
+      if (
+        effect.operation === 'add' &&
+        effect.amount && typeof effect.amount.value === 'number'
+      ){
+        calcObj.value += effect.amount.value
+      }
+    });
+  }
 }

app/imports/api/engine/computation/computeComputation/computeByType/computeVariable.js

@@ -28,7 +28,7 @@ function aggregateLinks(computation, node){
       // Ignore inactive props
       if (linkedNode.data.inactive) return;
       // Apply all the aggregations
-      let arg = {node, linkedNode, link};
+      let arg = {node, linkedNode, link, computation};
       aggregate.classLevel(arg);
       aggregate.damageMultiplier(arg);
       aggregate.definition(arg);

app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/aggregate/aggregateEffect.js

@@ -16,10 +16,23 @@ export default function aggregateEffect({node, linkedNode, link}){
     conditional: [],
     rollBonus: [],
   };
+
+  // Store a summary of the effect itself
+  node.data.effects = node.data.effects || [];
+  node.data.effects.push({
+    _id: linkedNode.data._id,
+    name: linkedNode.data.name,
+    operation: linkedNode.data.operation,
+    amount: linkedNode.data.amount && {value: linkedNode.data.amount.value},
+    // ancestors: linkedNode.data.ancestors,
+  });
+
   // get a shorter reference to the aggregator document
   const aggregator = node.data.effectAggregator;
   // Get the result of the effect
   const result = linkedNode.data.amount?.value;
+  // Skip aggregating if the result is not resolved completely
+  if (typeof result === 'string') return;
   // Aggregate the effect based on its operation
   switch(linkedNode.data.operation){
     case 'base':

app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/computeVariableAsAttribute.js

@@ -23,4 +23,7 @@ export default function computeVariableAsAttribute(computation, node, prop){
   prop.hide = !node.data.effectAggregator &&
     prop.baseValue === undefined ||
     undefined
+
+  // Store effects
+  prop.effects = node.data.effects;
 }

app/imports/api/properties/subSchemas/computedField.js

@@ -24,6 +24,15 @@ function computedOnlyField(field){
       optional: true,
       removeBeforeCompute: true,
     },
+    // A list of effects targeting this calculation
+    [`${field}.effects`]: {
+      type: Array,
+      optional: true,
+    },
+    [`${field}.effects.$`]: {
+      type: Object,
+      blackbox: true,
+    },
     // A cache of the parse result of the calculation
     [`${field}.parseNode`]: {
       type: Object,

app/imports/parser/parseTree/rollArray.js

@@ -16,7 +16,7 @@ const rollArray = {
     };
   },
   toString(node){
-    return `[${node.values.join(', ')}]`;
+    return `${node.diceNum || ''}d${node.diceSize} [${node.values.join(', ')}]`;
   },
   reduce(node, scope, context){
     const total = node.values.reduce((a, b) => a + b, 0);

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;
+        return amount.value !== undefined ? amount.value : amount.calculation;
-			},
+      },
-			effectIcon(){
+      effectIcon(){
-				let value = this.resolvedValue;
+        let value = this.resolvedValue;
-				return getEffectIcon(this.model.operation, value);
+        return getEffectIcon(this.model.operation, value);
-			},
+      },
-			operation(){
+      operation(){
-				switch(this.model.operation) {
+        switch(this.model.operation) {
-					case 'base': return 'Base value';
+          case 'base': return 'Base value';
-					case 'add': return 'Add';
+          case 'add': return 'Add';
-					case 'mul': return 'Multiply';
+          case 'mul': return 'Multiply';
-					case 'min': return 'Minimum';
+          case 'min': return 'Minimum';
-					case 'max': return 'Maximum';
+          case 'max': return 'Maximum';
-					case 'advantage': return 'Advantage';
+          case 'advantage': return 'Advantage';
-					case 'disadvantage': return 'Disadvantage';
+          case 'disadvantage': return 'Disadvantage';
-					case 'passiveAdd': return 'Passive bonus';
+          case 'passiveAdd': return 'Passive bonus';
-					case 'fail': return 'Always fail';
+          case 'fail': return 'Always fail';
-					case 'conditional': return 'Conditional benefit' ;
+          case 'conditional': return 'Conditional benefit' ;
           default: return '';
-				}
+        }
-			},
+      },
-			showValue(){
+      showValue(){
-				switch(this.model.operation) {
+        switch(this.model.operation) {
-					case 'base': return true;
+          case 'base': return true;
-					case 'add': return true;
+          case 'add': return true;
-					case 'mul': return true;
+          case 'mul': return true;
-					case 'min': return true;
+          case 'min': return true;
-					case 'max': return true;
+          case 'max': return true;
-					case 'advantage': return false;
+          case 'advantage': return false;
-					case 'disadvantage': return false;
+          case 'disadvantage': return false;
-					case 'passiveAdd': return true;
+          case 'passiveAdd': return true;
-					case 'fail': return false;
+          case 'fail': return false;
-					case 'conditional': return false;
+          case 'conditional': return false;
           default: return false;
-				}
+        }
-			},
+      },
-			displayedValue(){
+      displayedValue(){
-				let value = this.resolvedValue;
+        let value = this.resolvedValue;
-				switch(this.model.operation) {
+        switch(this.model.operation) {
-					case 'base': return value;
+          case 'base': return value;
-					case 'add': return isFinite(value) ? Math.abs(value) : value;
+          case 'add': return isFinite(value) ? Math.abs(value) : value;
-					case 'mul': return value;
+          case 'mul': return value;
-					case 'min': return value;
+          case 'min': return value;
-					case 'max': return value;
+          case 'max': return value;
-					case 'advantage': return;
+          case 'advantage': return;
-					case 'disadvantage': return;
+          case 'disadvantage': return;
-					case 'passiveAdd': return isFinite(value) ? Math.abs(value) : value;
+          case 'passiveAdd': return isFinite(value) ? Math.abs(value) : value;
-					case 'fail': return;
+          case 'fail': return;
-					case 'conditional': return undefined;
+          case 'conditional': return undefined;
           default: return undefined;
-				}
+        }
-			}
+      }
-		},
+    },
     methods: {
       click(e){
         this.$emit('click', e);
       },
     },
-	};
+  };
 </script>
 
 <style lang="css" scoped>
-	.icon, .effect-icon {
+  .icon, .effect-icon {
-		min-width: 30px;
+    min-width: 30px;
-	}
+  }
-	.icon {
+  .icon {
-		color: inherit !important;
+    color: inherit !important;
-	}
+  }
-	.net-effect {
+  .net-effect {
-		flex-grow: 0;
+    flex-grow: 0;
-		flex-shrink: 0;
+    flex-shrink: 0;
-	}
+  }
-	.effect-value {
+  .effect-value {
-		min-width: 60px;
+    min-width: 60px;
     text-align: center;
-	}
+  }
 </style>

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>

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(){

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>
 

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;
     },

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: {
+  components: {
-		name: {
+    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>