Added UI backend that can do computations with context

app/imports/ui/creature/character/CharacterSheet.vue

@@ -3,8 +3,8 @@
     <v-toolbar
       app
       clipped-left
-      :color="character.color || 'secondary'"
-      :dark="isDarkColor(character.color || theme.primary)"
+      :color="creature.color || 'secondary'"
+      :dark="isDarkColor(creature.color || theme.primary)"
     >
       <v-btn
         v-if="showMenuButton"
@@ -15,12 +15,12 @@
         <v-icon>menu</v-icon>
       </v-btn>
       <div class="flex">
-        {{ character.name }}
+        {{ creature.name }}
       </div>
       <v-btn
         flat
         icon
-        @click="recompute(character._id)"
+        @click="recompute(creature._id)"
       >
         <v-icon>refresh</v-icon>
       </v-btn>
@@ -143,6 +143,10 @@
         required: true,
       },
 		},
+    reactiveProvide: {
+      name: 'computationContext',
+      include: ['creature'],
+    },
 		data(){return {
 			theme,
 			tab: 0,
@@ -181,7 +185,7 @@
 					component: 'delete-confirmation-dialog',
 					elementId: 'creature-menu',
 					data: {
-						name: this.character.name,
+						name: this.creature.name,
 						typeName: 'Character'
 					},
 					callback(confirmation){
@@ -204,13 +208,10 @@
 					return [this.creatureId];
 				},
 			},
-			character(){
+			creature(){
 				return Creatures.findOne(this.creatureId) || {};
 			},
 		},
-    provide: {
-      creature: this.character,
-    }
 	}
 </script>
 

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

@@ -162,6 +162,14 @@
               :data-id="action._id"
               @click="clickProperty({_id: action._id})"
             />
+            <v-subheader>Attacks</v-subheader>
+            <attack-list-tile
+              v-for="attack in attacks"
+              :key="attack._id"
+              :model="attack"
+              :data-id="attack._id"
+              @click="clickProperty({_id: attack._id})"
+            />
           </v-list>
         </v-card>
       </div>
@@ -180,6 +188,7 @@
 	import ResourceCard from '/imports/ui/properties/components/attributes/ResourceCard.vue';
 	import SpellSlotListTile from '/imports/ui/properties/components/attributes/SpellSlotListTile.vue';
   import ActionListTile from '/imports/ui/properties/components/actions/ActionListTile.vue';
+  import AttackListTile from '/imports/ui/properties/components/actions/AttackListTile.vue';
 
 	const getAttributeOfType = function(charId, type){
 		return CreatureProperties.find({
@@ -215,6 +224,7 @@
 			ResourceCard,
 			SpellSlotListTile,
       ActionListTile,
+      AttackListTile,
 		},
 		props: {
 			creatureId: {
@@ -300,6 +310,14 @@
 					sort: {order: 1},
 				});
 			},
+      attacks(){
+				return CreatureProperties.find({
+					'ancestors.id': this.creatureId,
+					type: 'attack',
+				}, {
+					sort: {order: 1},
+				});
+			},
 		},
 		methods: {
 			clickProperty({_id}){