Fixed computations throwing errors when not provided with context

app/imports/api/creature/computation/afterComputation/evaluateString.js

@@ -51,7 +51,6 @@ function substituteAccessors(scope){
       try {
         return evaluateAccessor(node, scope);
       } catch (e) {
-        console.log(typeof e);
         return replaceAccessorWithSymbol(node);
       }
     } else {

app/imports/ui/components/computation/Computed.vue

@@ -1,23 +1,27 @@
 <template lang="html">
   <div
-    v-html="computedValue"
     class="computed"
-    :class="expectNumber && 'symbols-are-errors'"
+    :class="{
+      'symbols-are-errors': expectNumber && scope,
+      'code': errors.length,
+    }"
+    v-html="computedValue"
   />
 </template>
 
 <script>
 import evaluateString from '/imports/api/creature/computation/afterComputation/evaluateString.js';
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
-import { isFinite } from 'lodash';
 
 export default {
   props: {
     value: {
       type: String,
+      default: '',
     },
     scope: {
       type: Object,
+      default: undefined,
     },
     expectNumber: {
       type: Boolean,
@@ -27,14 +31,30 @@ export default {
       type: Boolean
     },
   },
-  computed: {
-    computedValue(){
+  data(){return {
+    errors: false,
+    computedValue: '',
+  }},
+  watch: {
+    value(){
+      this.recalculate();
+    },
+    scope(){
+      this.recalculate();
+    },
+  },
+  mounted(){
+    this.recalculate();
+  },
+  methods: {
+    recalculate(){
       if (!this.value) return;
       let {result, errors} = evaluateString(this.value, this.scope);
       if (this.signed){
         result = numberToSignedString(result);
       }
-      return result;
+      this.computedValue = result;
+      this.errors = errors;
     }
   }
 }
@@ -44,4 +64,10 @@ export default {
   .computed.symbols-are-errors .math-symbol {
     color: red;
   }
+  .computed.code {
+    font-family: monospace,monospace;
+  }
+  .computed .math-binary-operator {
+    margin: 0 6px;
+  }
 </style>

app/imports/ui/components/computation/ComputedForCreature.vue

@@ -8,10 +8,11 @@
 
 <script>
 import Computed from '/imports/ui/components/computation/Computed.vue';
-import Creatures from '/imports/api/creature/Creatures.js';
 
 export default {
-  inject: ['computationContext'],
+  inject: {
+    computationContext: { default: {} }
+  },
   components: {
     Computed,
   },
@@ -21,14 +22,10 @@ export default {
       default: undefined,
     },
   },
-  meteor: {
-    creature(){
-      return Creatures.findOne(this.creatureId);
-    },
-  },
   computed: {
     scope(){
-      return this.computationContext.creature && this.computationContext.creature.variables;
+      return this.computationContext.creature &&
+      this.computationContext.creature.variables;
     }
   }
 }

app/imports/ui/properties/viewers/AttributeViewer.vue

@@ -11,8 +11,8 @@
         {{ model.value }}
       </div>
     </div>
-    <div v-if="model.mod !== undefined">
-      {{ numberToSignedString(model.mod) }}
+    <div v-if="model.modifier !== undefined">
+      {{ numberToSignedString(model.modifier) }}
     </div>
     <property-name :value="model.name" />
     <property-variable-name :value="model.variableName" />
@@ -24,13 +24,21 @@
     <p v-if="reset && model.attributeType !== 'hitDice'">
       {{ reset }}
     </p>
+    <property-description :value="model.description" />
+
     <effect-viewer
+      v-if="computationContext.creature"
       :model="{
+        name: 'Attribute base value',
         result: model.baseValue,
         operation: 'base'
       }"
     />
-    <property-description :value="model.description" />
+    <effect-viewer
+      v-for="effect in effects"
+      :key="effect._id"
+      :model="effect"
+    />
   </div>
 </template>
 
@@ -38,8 +46,12 @@
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 	import EffectViewer from '/imports/ui/properties/viewers/EffectViewer.vue';
+  import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 
 	export default {
+    inject: {
+      computationContext: { default: {} }
+    },
 		components: {
 			EffectViewer,
 		},
@@ -61,7 +73,21 @@
 		},
 		methods: {
 			numberToSignedString,
-		}
+		},
+    meteor: {
+      effects(){
+        if (this.computationContext.creature){
+          let creatureId = this.computationContext.creature._id;
+          return CreatureProperties.find({
+            'ancestors.id': creatureId,
+            'stats': this.model.variableName,
+            removed: {$ne: true},
+          });
+        } else {
+          return [];
+        }
+      },
+    },
 	}
 </script>
 

app/imports/ui/properties/viewers/EffectViewer.vue

@@ -1,10 +1,10 @@
 <template lang="html">
   <div class="effect-viewer">
-    <property-name
-      v-if="model.name"
-      :value="model.name"
-    />
     <div class="layout row align-center wrap">
+      <property-name
+        v-if="model.name"
+        :value="model.name"
+      />
       <div class="headline">
         <code
           v-for="stat in model.stats"