Added viewers, tree node viewers and fixed forms for new damage schema

app/imports/api/properties/Adjustments.js

@@ -2,7 +2,7 @@ import SimpleSchema from 'simpl-schema';
 
 const AdjustmentSchema = new SimpleSchema({
 	// The roll that determines how much to change the attribute
-  adjustment: {
+  amount: {
     type: String,
     optional: true,
     defaultValue: '1',

app/imports/api/properties/Damages.js

@@ -3,7 +3,7 @@ import DAMAGE_TYPES from '/imports/constants/DAMAGE_TYPES.js';
 
 const DamageSchema = new SimpleSchema({
 	// The roll that determines how much to damage the attribute
-  damage: {
+  amount: {
     type: String,
     optional: true,
     defaultValue: '1d8 + strength.modifier',

app/imports/constants/PROPERTIES.js

@@ -5,7 +5,7 @@ const PROPERTIES = Object.freeze({
   },
   adjustment: {
     icon: 'warning',
-    name: 'Adjustment'
+    name: 'Attribute damage'
   },
   attack: {
     icon: 'bolt',

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

@@ -79,6 +79,9 @@ export default {
 </script>
 
 <style lang="css">
+  .computed {
+    display: inline-block;
+  }
   .computed.symbols-are-errors .math-symbol {
     color: red;
   }

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

@@ -12,13 +12,13 @@
         @change="(value, ack) => $emit('change', {path: ['stat'], value, ack})"
       />
       <text-field
-        label="Adjustment"
+        label="Damage"
         hint="The amount of damage to apply to the selected stat, can be a calculation or roll"
         style="flex-basis: 300px;"
-        :value="model.adjustment"
-        :error-messages="errors.adjustment"
+        :value="model.amount"
+        :error-messages="errors.amount"
         :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['adjustment'], value, ack})"
+        @change="(value, ack) => $emit('change', {path: ['amount'], value, ack})"
       />
     </div>
     <smart-select

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

@@ -4,10 +4,10 @@
       <text-field
         label="Damage"
         style="flex-basis: 300px;"
-        :value="model.damage"
-        :error-messages="errors.damage"
+        :value="model.amount"
+        :error-messages="errors.amount"
         :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['damage'], value, ack})"
+        @change="(value, ack) => $emit('change', {path: ['amount'], value, ack})"
       />
       <smart-select
         label="Damage Type"
@@ -21,7 +21,6 @@
       />
     </div>
     <smart-select
-      v-if="parentTarget == 'multipleTargets'"
       label="Target"
       :hint="targetOptionHint"
       :items="targetOptions"

app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue

@@ -0,0 +1,31 @@
+<template lang="html">
+  <div class="layout row align-center justify-start">
+    <property-icon
+      class="mr-2"
+      :type="model.type"
+      :class="selected && 'primary--text'"
+    />
+    <div
+      class="text-no-wrap text-truncate"
+    >
+      <computed
+        class="mr-1"
+        :value="model.amount"
+        :expect-number="false"
+      />
+      {{ model.stat }} damage
+    </div>
+  </div>
+</template>
+
+<script>
+import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import ComputedForCreature from '/imports/ui/components/computation/ComputedForCreature.vue';
+
+export default {
+  components: {
+    Computed: ComputedForCreature,
+  },
+  mixins: [treeNodeViewMixin],
+}
+</script>

app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue

@@ -0,0 +1,31 @@
+<template lang="html">
+  <div class="layout row align-center justify-start">
+    <property-icon
+      class="mr-2"
+      :type="model.type"
+      :class="selected && 'primary--text'"
+    />
+    <div
+      class="text-no-wrap text-truncate"
+    >
+      <computed
+        class="mr-1"
+        :value="model.amount"
+        :expect-number="false"
+      />
+      {{ model.damageType }} damage
+    </div>
+  </div>
+</template>
+
+<script>
+import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import ComputedForCreature from '/imports/ui/components/computation/ComputedForCreature.vue';
+
+export default {
+  components: {
+    Computed: ComputedForCreature,
+  },
+  mixins: [treeNodeViewMixin],
+}
+</script>

app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue

@@ -0,0 +1,62 @@
+<template lang="html">
+  <div class="layout row align-center justify-start">
+    <v-icon
+      class="mr-2"
+      :class="selected && 'primary--text'"
+    >
+      {{ effectIcon }}
+    </v-icon>
+    <div
+      class="text-no-wrap text-truncate"
+    >
+      <template v-if="model.name">
+        {{ model.name }}
+      </template>
+      <template v-else>
+        <span class="mr-1">
+          {{ displayedValue }}
+        </span>
+        <span
+          v-for="stat in model.stats"
+          :key="stat"
+          class="mr-1"
+        >{{ stat }}</span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+// Most of this was copied from EffectViewer and should probably be generalised
+import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
+
+export default {
+  mixins: [treeNodeViewMixin],
+  computed: {
+    resolvedValue(){
+      return this.model.result !== undefined ? this.model.result : this.model.calculation;
+    },
+    effectIcon(){
+      let value = this.resolvedValue;
+      return getEffectIcon(this.model.operation, value);
+    },
+    displayedValue(){
+      let value = this.resolvedValue;
+      switch(this.model.operation) {
+        case 'base': return value;
+        case 'add': return isFinite(value) ? Math.abs(value) : value;
+        case 'mul': return value;
+        case 'min': return value;
+        case 'max': return value;
+        case 'advantage': return;
+        case 'disadvantage': return;
+        case 'passiveAdd': return isFinite(value) ? Math.abs(value) : value;
+        case 'fail': return;
+        case 'conditional': return;
+        default: return undefined;
+      }
+    },
+  }
+}
+</script>

app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js

@@ -1,6 +1,13 @@
 import DefaultTreeNode from '/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue';
+import AdjustmentTreeNode from '/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue';
 import ItemTreeNode from '/imports/ui/properties/treeNodeViews/ItemTreeNode.vue';
+import DamageTreeNode from '/imports/ui/properties/treeNodeViews/DamageTreeNode.vue';
+import EffectTreeNode from '/imports/ui/properties/treeNodeViews/EffectTreeNode.vue';
+
 export default {
   default: DefaultTreeNode,
+  adjustment: AdjustmentTreeNode,
+  damage: DamageTreeNode,
+  effect: EffectTreeNode,
   item: ItemTreeNode,
 }

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

@@ -0,0 +1,24 @@
+<template lang="html">
+  <div class="adjustment-viewer layout row align-center">
+    <computed
+      class="mr-2"
+      :value="model.amount"
+      :expect-number="false"
+    /> {{ model.stat }} damage
+  </div>
+</template>
+
+<script>
+	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
+  import ComputedForCreature from '/imports/ui/components/computation/ComputedForCreature.vue';
+
+	export default {
+    components: {
+      Computed: ComputedForCreature,
+    },
+		mixins: [propertyViewerMixin],
+	}
+</script>
+
+<style lang="css" scoped>
+</style>

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

@@ -0,0 +1,24 @@
+<template lang="html">
+  <div class="damage-viewer layout row align-center">
+    <computed
+      class="mr-2"
+      :value="model.amount"
+      :expect-number="false"
+    /> {{ model.damageType }} damage
+  </div>
+</template>
+
+<script>
+	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
+  import ComputedForCreature from '/imports/ui/components/computation/ComputedForCreature.vue';
+
+	export default {
+    components: {
+      Computed: ComputedForCreature,
+    },
+		mixins: [propertyViewerMixin],
+	}
+</script>
+
+<style lang="css" scoped>
+</style>

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

@@ -1,9 +1,11 @@
 import ActionViewer from '/imports/ui/properties/viewers/ActionViewer.vue';
+import AdjustmentViewer from '/imports/ui/properties/viewers/AdjustmentViewer.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';
 import ClassLevelViewer from '/imports/ui/properties/viewers/ClassLevelViewer.vue';
+import DamageViewer from '/imports/ui/properties/viewers/DamageViewer.vue';
 import DamageMultiplierViewer from '/imports/ui/properties/viewers/DamageMultiplierViewer.vue';
 import EffectViewer from '/imports/ui/properties/viewers/EffectViewer.vue';
 import ExperienceViewer from '/imports/ui/properties/viewers/ExperienceViewer.vue';
@@ -19,11 +21,13 @@ import SpellViewer from '/imports/ui/properties/viewers/SpellViewer.vue';
 
 export default {
   action: ActionViewer,
+  adjustment: AdjustmentViewer,
   attack: AttackViewer,
   attribute: AttributeViewer,
   buff: BuffViewer,
   container: ContainerViewer,
   classLevel: ClassLevelViewer,
+  damage: DamageViewer,
   damageMultiplier: DamageMultiplierViewer,
   experience: ExperienceViewer,
   effect: EffectViewer,