Improved how effects on calculated fields are displayed

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

@@ -103,7 +103,7 @@ function subDocsExist(prop, key) {
 
 export function removeEmptyCalculations(prop) {
   prop._computationDetails.emptyCalculations.forEach(calcObj => {
-    if (!calcObj.effects?.length) {
+    if (!calcObj.effectIds?.length && !calcObj.proficiencyIds?.length) {
       unset(prop, calcObj._key);
     }
   });

app/imports/client/ui/properties/components/effects/InlineEffect.vue

@@ -33,16 +33,22 @@
 
 <script lang="js">
   import getEffectIcon from '/imports/client/ui/utility/getEffectIcon';
-  import { isFinite } from 'lodash';
+import { isFinite } from 'lodash';
+  import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties';
 
   export default {
     props: {
       hideBreadcrumbs: Boolean,
-      model: {
-        type: Object,
+      effectId: {
+        type: String,
         required: true,
       },
     },
+    meteor: {
+      model() {
+        return CreatureProperties.findOne(this.effectId);
+      },
+    },
     computed: {
       hasClickListener(){
         return this.$listeners && this.$listeners.click

app/imports/client/ui/properties/components/proficiencies/InlineProficiency.vue

@@ -27,17 +27,23 @@
 <script lang="js">
 import ProficiencyIcon from '/imports/client/ui/properties/shared/ProficiencyIcon.vue';
 import numberToSignedString from '/imports/api/utility/numberToSignedString';
+import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties';
 
 export default {
   components: {
     ProficiencyIcon,
   },
   props: {
-    model: {
-      type: Object,
+    proficiencyId: {
+      type: String,
       required: true,
     },
   },
+  meteor: {
+    model() {
+      return CreatureProperties.findOne(this.proficiencyId);
+    },
+  },
   computed: {
     displayedText(){
       return this.model.name || (this.model.type == 'proficiency' ? 'Proficiency' : 'Skill')

app/imports/client/ui/properties/forms/shared/ComputedField.vue

@@ -46,12 +46,11 @@ export default {
       return true;
     },
     displayedValue() {
-      let value = this.model.value;
-      // Use the base value instead if the calculation has it, because effects can modify the value
-      if (this.model.baseValue !== undefined) {
-        value = this.model.baseValue;
+      // Use the unaffected value instead if the calculation has it, because effects can modify the value
+      if (this.model.unaffected !== undefined) {
+        return this.model.unaffected;
       }
-      return value;
+      return this.model.value;
     },
     errorList(){
       if (this.model.parseError){

app/imports/client/ui/properties/viewers/shared/PropertyField.vue

@@ -31,9 +31,9 @@
             'justify-end': end,
             'flex-wrap': wrap,
             'mono': isMono,
-            'flex-grow-0': calculation && calculation.effects,
-            'flex-grow-1': !calculation || !calculation.effects,
-            'ma-3': calculation && calculation.effects,
+            'flex-grow-0': hasEffectsOrProficiencies,
+            'flex-grow-1': !hasEffectsOrProficiencies, 
+            'ma-3': hasEffectsOrProficiencies,
             ...$attrs.class,
           }"
           style="overflow-x: auto;"
@@ -49,36 +49,32 @@
           </slot>
         </div>
         <div
-          v-if="calculation && (calculation.effects || calculation.proficiencies)"
+          v-if="hasEffectsOrProficiencies"
           class="flex-grow-1"
           style="max-width: 100%;"
         >
           <inline-effect
-            v-if="typeof calculation.value === 'number' && calculation.baseValue !== 0"
-            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)"
+            v-for="effectId in calculation.effectIds"
+            :key="effectId"
+            :data-id="effectId"
+            :effect-id="effectId"
+            @click="clickEffect(effectId)"
           />
           <inline-proficiency
-            v-for="proficiency in calculation.proficiencies"
-            :key="proficiency._id"
-            :data-id="proficiency._id"
-            :model="proficiency"
-            :proficiency-bonus="calculation.proficiencyBonus"
-            @click="clickEffect(proficiency._id)"
+            v-for="proficiencyId in calculation.proficiencyIds"
+            :key="proficiencyId"
+            :data-id="proficiencyId"
+            :proficiency-id="proficiencyId"
+            @click="clickEffect(proficiencyId)"
           />
         </div>
+        <div
+          v-if="hasEffectsOrProficiencies"
+          class="d-flex justify-end border-t-sm pt-2"
+          style="width: 100%; opacity: 0.5"
+        >
+          {{ calculation.value }}
+        </div>
       </div>
     </fieldset>
   </v-col>
@@ -152,6 +148,9 @@ export default {
       if (this.signed) {
         return numberToSignedString(calculation.value);
       }
+      if (this.hasEffectsOrProficiencies) {
+        return calculation.unaffected;
+      }
       return calculation.value;
     },
     // large and center are only applied to calculations if we are showing their
@@ -172,6 +171,15 @@ export default {
       if (this.valueNotReduced) return true;
       return this.mono;
     },
+    hasEffects(){
+      return this.calculation?.effectIds?.length > 0;
+    },
+    hasProficiencies(){
+      return this.calculation?.proficiencyIds?.length > 0;
+    },
+    hasEffectsOrProficiencies() {
+      return this.hasEffects || this.hasProficiencies;
+    },
   },
   methods: {
     numberToSignedString,