Began work on viewers for attacks and actions

app/imports/api/properties/Spells.js

@@ -91,11 +91,6 @@ let SpellSchema = new SimpleSchema({})
 		defaultValue: 'abjuration',
 		allowedValues: magicSchools,
 	},
-  // Set better defaults for the action
-  actionType: {
-    type: String,
-    defaultValue: 'spell',
-  },
 });
 
 export { SpellSchema };

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

@@ -1,9 +1,15 @@
 <template lang="html">
-  <div v-html="computedValue" class="computed" :class="expectNumber && 'symbols-are-errors'"/>
+  <div
+    v-html="computedValue"
+    class="computed"
+    :class="expectNumber && 'symbols-are-errors'"
+  />
 </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: {
@@ -16,12 +22,18 @@ export default {
     expectNumber: {
       type: Boolean,
       default: true,
-    }
+    },
+    signed: {
+      type: Boolean
+    },
   },
   computed: {
     computedValue(){
       if (!this.value) return;
       let {result, errors} = evaluateString(this.value, this.scope);
+      if (this.signed){
+        result = numberToSignedString(result);
+      }
       return result;
     }
   }

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

@@ -1,5 +1,5 @@
 <template lang="html">
-  <computed :value="value" :scope="scope"/>
+  <computed :value="value" :scope="scope" v-bind="$attrs"/>
 </template>
 
 <script>

app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue

@@ -3,7 +3,7 @@
  	 <template slot="toolbar">
  		 <property-icon :type="model.type" class="mr-2"/>
  		 <div class="title">
- 			 {{getPropertyName(model.type)}}
+ 			 {{model.name || getPropertyName(model.type)}}
  		 </div>
  		 <v-spacer/>
 		 <v-menu v-if="editing" bottom left transition="slide-y-transition">
@@ -73,13 +73,14 @@ import CreatureProperties, {
 	pullFromProperty,
 	softRemoveProperty,
 } from '/imports/api/creature/CreatureProperties.js';
+import Creatures from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
 import propertyViewerIndex from '/imports/ui/properties/viewers/shared/propertyViewerIndex.js';
 import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
-import { get } from 'lodash';
+import { get, findLast } from 'lodash';
 
 let formIndex = {};
 for (let key in propertyFormIndex){
@@ -111,6 +112,21 @@ export default {
 			return CreatureProperties.findOne(this._id);
 		},
 	},
+  computed: {
+    creature(){
+      if (!this.model) return;
+      let nearestCreatureAncestor = findLast(
+        this.model.ancestors,
+        ref => ref.collection === "creatures"
+      );
+      if (!nearestCreatureAncestor) return;
+      return Creatures.findOne(nearestCreatureAncestor.id);
+    }
+  },
+  reactiveProvide: {
+    name: 'computationContext',
+    include: ['creature'],
+  },
 	methods: {
 		getPropertyName,
 		change({path, value, ack}){

app/imports/ui/properties/components/actions/AttackListTile.vue

@@ -4,7 +4,7 @@
     v-on="hasClickListener ? {click} : {}"
   >
     <v-list-tile-content>
-      <computed :value="model.rollBonus"/>
+      <computed signed :value="model.rollBonus"/>
       {{ model.name }}
     </v-list-tile-content>
   </v-list-tile>

app/imports/ui/properties/forms/ActionForm.vue

@@ -25,6 +25,13 @@
       :debounce-time="debounceTime"
       @change="(value, ack) => $emit('change', {path: ['rollBonus'], value, ack})"
     />
+    <text-area
+      label="Description"
+      :value="model.description"
+      :error-messages="errors.description"
+      :debounce-time="debounceTime"
+      @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+    />
     <form-sections>
       <form-section name="Results">
         <results-form

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

@@ -0,0 +1,32 @@
+<template lang="html">
+  <div class="action-viewer">
+    <property-field name="Action type" :value="model.actionType"/>
+    <property-field name="Target" :value="model.target"/>
+    <property-field name="tags" :value="model.tags.join(', ')" v-if="model.tags.length"/>
+    <property-field name="Uses" :value="model.uses"/>
+    <property-field name="Uses used" :value="model.usesUsed"/>
+    <property-field name="Reset" :value="reset"/>
+		<property-description :value="model.description"/>
+	</div>
+</template>
+
+<script>
+import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
+
+export default {
+  mixins: [propertyViewerMixin],
+  computed: {
+    reset(){
+      let reset = this.model.reset
+      if (reset === 'shortRest'){
+        return `Reset on a short rest`;
+      } else if (reset === 'longRest'){
+        return `Reset on a long rest`;
+      }
+    }
+  },
+}
+</script>
+
+<style lang="css" scoped>
+</style>

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

@@ -0,0 +1,39 @@
+<template lang="html">
+  <div class="attack-viewer">
+    <property-field name="Action type" :value="model.actionType"/>
+    <property-field name="Target" :value="model.target"/>
+    <property-field name="tags" :value="model.tags.join(', ')" v-if="model.tags.length"/>
+    <property-field name="Uses" :value="model.uses"/>
+    <property-field name="Uses used" :value="model.usesUsed"/>
+    <property-field name="Reset" :value="reset"/>
+    <property-field name="Attack roll bonus">
+      <computed signed :value="model.rollBonus"/>
+    </property-field>
+    <property-description :value="model.description"/>
+	</div>
+</template>
+
+<script>
+import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
+import ComputedForCreature from '/imports/ui/components/computation/ComputedForCreature.vue';
+
+export default {
+  mixins: [propertyViewerMixin],
+  components: {
+    Computed: ComputedForCreature,
+  },
+  computed: {
+    reset(){
+      let reset = this.model.reset
+      if (reset === 'shortRest'){
+        return `Reset on a short rest`;
+      } else if (reset === 'longRest'){
+        return `Reset on a long rest`;
+      }
+    }
+  },
+}
+</script>
+
+<style lang="css" scoped>
+</style>

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

@@ -1,11 +1,13 @@
 <template lang="html">
-  <div v-if="value !== undefined">
+  <div v-if="value !== undefined || $slots.default">
   	<div class="caption">
   		{{name}}
   	</div>
-		<p class="ml-2 subheading">
-			{{value}}
-		</p>
+    <p class="ml-2 subheading">
+      <slot>
+        {{value}}
+      </slot>
+    </p>
   </div>
 </template>
 

app/imports/ui/properties/viewers/shared/propertyViewerIndex.js

@@ -1,4 +1,5 @@
-//import ActionViewer from '/imports/ui/properties/viewers/ActionViewer.vue';
+import ActionViewer from '/imports/ui/properties/viewers/ActionViewer.vue';
+import AttackViewer from '/imports/ui/properties/viewers/AttackViewer.vue';
 import AttributeViewer from '/imports/ui/properties/viewers/AttributeViewer.vue';
 import BuffViewer from '/imports/ui/properties/viewers/BuffViewer.vue';
 import ContainerViewer from '/imports/ui/properties/viewers/ContainerViewer.vue';
@@ -17,7 +18,8 @@ import SpellListViewer from '/imports/ui/properties/viewers/SpellListViewer.vue'
 import SpellViewer from '/imports/ui/properties/viewers/SpellViewer.vue';
 
 export default {
-//  action: ActionViewer,
+  action: ActionViewer,
+  attack: AttackViewer,
   attribute: AttributeViewer,
   buff: BuffViewer,
   container: ContainerViewer,