Calculation errors moved to the build page

Can be hidden, restyled to improve usability
in light mode

app/imports/api/creature/creatures/Creatures.js

@@ -38,6 +38,11 @@ let CreatureSettingsSchema = new SimpleSchema({
     type: Boolean,
     optional: true,
   },
+  // Hide calculation errors
+  hideCalculationErrors: {
+    type: Boolean,
+    optional: true,
+  },
   // How much each hitDice resets on a long rest
   hitDiceResetMultiplier: {
     type: Number,

app/imports/ui/creature/character/characterSheetTabs/BuildTab.vue

@@ -1,5 +1,13 @@
 <template lang="html">
   <v-container fluid>
+    <v-row dense>
+      <v-col cols="12">
+        <character-errors
+          class="mt-4"
+          :creature-id="creatureId"
+        />
+      </v-col>
+    </v-row>
     <v-row dense>
       <v-col cols="12">
         <slot-cards-to-fill :creature-id="creatureId" />
@@ -126,6 +134,7 @@ import BuildTreeNodeList from '/imports/ui/creature/buildTree/BuildTreeNodeList.
 import SlotCardsToFill from '/imports/ui/creature/slots/SlotCardsToFill.vue';
 import CreatureVariables from '../../../../api/creature/creatures/CreatureVariables';
 import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
+import CharacterErrors from '/imports/ui/creature/character/errors/CharacterErrors.vue';
 
 function traverse(tree, callback, parents = []){
   tree.forEach(node => {
@@ -136,6 +145,7 @@ function traverse(tree, callback, parents = []){
 
 export default {
   components: {
+    CharacterErrors,
     BuildTreeNodeList,
     SlotCardsToFill,
   },

app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue

@@ -2,11 +2,6 @@
   <div
     class="stats-tab ma-2"
   >
-    <character-errors
-      class="mx-2 mt-4"
-      :creature-id="creatureId"
-    />
-
     <health-bar-card-container :creature-id="creatureId" />
 
     <column-layout>
@@ -374,7 +369,6 @@
   import ToggleCard from '/imports/ui/properties/components/toggles/ToggleCard.vue';
   import doCastSpell from '/imports/api/engine/actions/doCastSpell.js';
   import {snackbar} from '/imports/ui/components/snackbars/SnackbarQueue.js';
-  import CharacterErrors from '/imports/ui/creature/character/errors/CharacterErrors.vue';
   
   const getProperties = function(creature, filter, options = {
     sort: {order: 1}
@@ -419,7 +413,6 @@
 			SpellSlotListTile,
       ActionCard,
       ToggleCard,
-      CharacterErrors,
 		},
 		props: {
 			creatureId: {

app/imports/ui/creature/character/errors/CharacterErrors.vue

@@ -1,45 +1,85 @@
 <template>
-  <div
-    v-if="creature && creature.computeErrors"
-    class="character-sheet-errors"
-  >
-    <template v-for="(error, index) in creature.computeErrors">
-      <dependency-loop-error
-        v-if="error.type === 'dependencyLoop'"
-        :key="index + 'dependencyLoopError'"
-        :model="error"
-      />
-      <v-alert
-        v-else
-        :key="index + 'otherError'"
-        outlined
-        dense
-        type="error"
+  <div v-if="creature && creature.computeErrors">
+    <v-btn
+      fab
+      small
+      absolute
+      right
+      color="warning"
+      class="mr-4"
+      style="margin-top: -20px;"
+      @click="expanded = !expanded"
+    >
+      <v-icon
+        v-if="expanded"
+        style="color: rgba(0,0,0,0.8);"
       >
-        {{ error.type }}
-      </v-alert>
-    </template>
+        mdi-close
+      </v-icon>
+      <v-icon
+        v-else
+        style="color: rgba(0,0,0,0.8);"
+      >
+        mdi-alert-circle-outline
+      </v-icon>
+    </v-btn>
+    <v-slide-y-transition>
+      <div
+        v-if="expanded"
+        class="character-sheet-errors"
+      >
+        <template v-for="(error, index) in creature.computeErrors">
+          <dependency-loop-error
+            v-if="error.type === 'dependencyLoop'"
+            :key="index + 'dependencyLoopError'"
+            :model="error"
+          />
+          <v-alert
+            v-else
+            :key="index + 'otherError'"
+            border="bottom"
+            colored-border
+            elevation="2"
+            type="error"
+          >
+            {{ error.type }}
+          </v-alert>
+        </template>
+      </div>
+    </v-slide-y-transition>
   </div>
 </template>
 
 <script lang="js">
 import Creatures from '/imports/api/creature/creatures/Creatures.js';
 import DependencyLoopError from '/imports/ui/creature/character/errors/DependencyLoopError.vue';
+import updateCreature from '/imports/api/creature/creatures/methods/updateCreature.js';
 
 export default {
   components: {
     DependencyLoopError,
   },
+  inject: {
+    context: { default: {} },
+    theme: {
+      default: {
+        isDark: false,
+      },
+    },
+  },
   props: {
     creatureId: {
       type: String,
       default: undefined,
     }
   },
+  data() { return {
+    expanded: false,
+  }},
   meteor: {
     creature() {
       if (!this.creatureId) return;
-      return Creatures.findOne(this.creatureId, {fields: {computeErrors: 1}});
+      return Creatures.findOne(this.creatureId, {fields: {computeErrors: 1, settings: 1}});
     }
   },
   computed: {
@@ -51,7 +91,24 @@ export default {
           error.text = 'Dependency Loop Detected';
         }
       });
-    }
+    },
+  },
+  watch: {
+    expanded(value) {
+      if (this.context.editPermission === false) return;
+      updateCreature.call({
+        _id: this.creatureId,
+        path: ['settings', 'hideCalculationErrors'],
+        value: !value || null,
+      }, (error) => {
+        if (error){
+          console.error(error);
+        }
+      });
+    },
+  },
+  mounted() {
+    this.expanded = !this.creature.settings.hideCalculationErrors;
   },
 }
 </script>

app/imports/ui/creature/character/errors/DependencyLoopError.vue

@@ -1,8 +1,9 @@
 <template>
   <v-alert
-    v-if="model"
-    outlined
-    dense
+    v-if="model && model.details && model.details.nodes && model.details.nodes.length"
+    border="bottom"
+    colored-border
+    elevation="2"
     type="warning"
     class="dependency-loop-error"
   >
@@ -54,6 +55,13 @@ export default {
   components: {
     TreeNodeView,
   },
+  inject: {
+    theme: {
+      default: {
+        isDark: false,
+      },
+    },
+  },
   props: {
     model: {
       type: Object,
@@ -86,7 +94,7 @@ export default {
         elementId: `breadcrumb-${id}`,
         data: {_id: id},
       });
-      },
+    },
   }
 }
 </script>