Added results viewer

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

@@ -114,6 +114,8 @@
 </template>
 
 <script>
+  //TODO add a "no character found" screen if shown on a false address
+  // or on a character the user does not have permission to view
 	import Creatures from '/imports/api/creature/Creatures.js';
 	import removeCreature from '/imports/api/creature/removeCreature.js';
 	import isDarkColor from '/imports/ui/utility/isDarkColor.js';

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

@@ -1,28 +1,53 @@
 <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>
+    <property-field
+      name="Action type"
+      :value="model.actionType"
+    />
+    <property-field
+      name="Target"
+      :value="model.target"
+    />
+    <property-field
+      v-if="model.tags.length"
+      name="tags"
+      :value="model.tags.join(', ')"
+    />
+    <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" />
+    <results-viewer :model="model.results" />
+  </div>
 </template>
 
 <script>
-import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
+import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
+import ResultsViewer from '/imports/ui/properties/viewers/ResultsViewer.vue';
 
 export default {
+  components: {
+    ResultsViewer
+  },
   mixins: [propertyViewerMixin],
   computed: {
     reset(){
       let reset = this.model.reset
       if (reset === 'shortRest'){
-        return `Reset on a short rest`;
+        return 'Reset on a short rest';
       } else if (reset === 'longRest'){
-        return `Reset on a long rest`;
+        return 'Reset on a long rest';
       }
+      return undefined;
     }
   },
 }

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

@@ -1,35 +1,35 @@
 <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"/>
+      <computed
+        signed
+        :value="model.rollBonus"
+      />
     </property-field>
-    <property-description :value="model.description"/>
-	</div>
+    <action-viewer :model="model" />
+  </div>
 </template>
 
 <script>
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
 import ComputedForCreature from '/imports/ui/components/computation/ComputedForCreature.vue';
+import ActionViewer from '/imports/ui/properties/viewers/ActionViewer.vue';
 
 export default {
-  mixins: [propertyViewerMixin],
   components: {
+    ActionViewer,
     Computed: ComputedForCreature,
   },
+  mixins: [propertyViewerMixin],
   computed: {
     reset(){
       let reset = this.model.reset
       if (reset === 'shortRest'){
-        return `Reset on a short rest`;
+        return 'Reset on a short rest';
       } else if (reset === 'longRest'){
-        return `Reset on a long rest`;
+        return 'Reset on a long rest';
       }
+      return undefined;
     }
   },
 }

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

@@ -0,0 +1,88 @@
+<template lang="html">
+  <div class="results">
+    <div
+      v-if="model.damages.length"
+      class="damages"
+    >
+      <div class="caption">
+        Damage
+      </div>
+      <div class="mb-3">
+        <div
+          v-for="damage in model.damages"
+          :key="damage._id"
+          class="damage ml-2 subheading"
+        >
+          <computed
+            :value="damage.damage"
+            :expect-number="false"
+            class="d-inline"
+          /> {{ damage.damageType }} damage
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="model.adjustments.length"
+      class="adjustments"
+    >
+      <div class="caption">
+        Attribute Damage
+      </div>
+      <p
+        v-for="adjustment in model.adjustments"
+        :key="adjustment._id"
+        class="adjustment ml-2 subheading"
+      >
+        <computed
+          :value="adjustment.adjustment"
+          class="d-inline"
+          signed
+        /> to {{ adjustment.stat }}
+      </p>
+    </div>
+    <div
+      v-if="model.buffs.length"
+      class="buffs"
+    >
+      <div class="caption">
+        Buffs
+      </div>
+      <div
+        v-for="buff in model.buffs"
+        :key="buff._id"
+        class="buff mb-3"
+      >
+        <div class="subheading">
+          {{ buff.name }}
+        </div>
+        <property-field
+          name="Duration"
+          :value="buff.duration"
+        />
+        <property-description :value="buff.description" />
+        <effect-viewer
+          v-for="effect in buff.effects"
+          :key="effect._id"
+          :model="effect"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
+import EffectViewer from '/imports/ui/properties/viewers/EffectViewer.vue';
+import ComputedForCreature from '/imports/ui/components/computation/ComputedForCreature.vue';
+
+export default {
+  components: {
+    EffectViewer,
+    Computed: ComputedForCreature,
+  },
+  mixins: [propertyViewerMixin],
+}
+</script>
+
+<style lang="css" scoped>
+</style>