From 4a039e769b623b25b961c50df95cb8c9fe8b3ffe Mon Sep 17 00:00:00 2001
From: Thaum Rystra <stefanzermatten@gmail.com>
Date: Tue, 19 May 2020 00:15:05 +0200
Subject: [PATCH] Added viewers, tree node viewers and fixed forms for new
 damage schema

---
 app/imports/api/properties/Adjustments.js     |  2 +-
 app/imports/api/properties/Damages.js         |  2 +-
 app/imports/constants/PROPERTIES.js           |  2 +-
 .../ui/components/computation/Computed.vue    |  3 +
 .../ui/properties/forms/AdjustmentForm.vue    |  8 +--
 .../ui/properties/forms/DamageForm.vue        |  7 +--
 .../treeNodeViews/AdjustmentTreeNode.vue      | 31 ++++++++++
 .../treeNodeViews/DamageTreeNode.vue          | 31 ++++++++++
 .../treeNodeViews/EffectTreeNode.vue          | 62 +++++++++++++++++++
 .../treeNodeViews/treeNodeViewIndex.js        |  7 +++
 .../properties/viewers/AdjustmentViewer.vue   | 24 +++++++
 .../ui/properties/viewers/DamageViewer.vue    | 24 +++++++
 .../viewers/shared/propertyViewerIndex.js     |  4 ++
 13 files changed, 196 insertions(+), 11 deletions(-)
 create mode 100644 app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue
 create mode 100644 app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue
 create mode 100644 app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue
 create mode 100644 app/imports/ui/properties/viewers/AdjustmentViewer.vue
 create mode 100644 app/imports/ui/properties/viewers/DamageViewer.vue

diff --git a/app/imports/api/properties/Adjustments.js b/app/imports/api/properties/Adjustments.js
index 72d99ab1..8e6b316a 100644
--- a/app/imports/api/properties/Adjustments.js
+++ b/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',
diff --git a/app/imports/api/properties/Damages.js b/app/imports/api/properties/Damages.js
index 4aaa2fcb..e5a2e5ee 100644
--- a/app/imports/api/properties/Damages.js
+++ b/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',
diff --git a/app/imports/constants/PROPERTIES.js b/app/imports/constants/PROPERTIES.js
index a5adb990..510538df 100644
--- a/app/imports/constants/PROPERTIES.js
+++ b/app/imports/constants/PROPERTIES.js
@@ -5,7 +5,7 @@ const PROPERTIES = Object.freeze({
   },
   adjustment: {
     icon: 'warning',
-    name: 'Adjustment'
+    name: 'Attribute damage'
   },
   attack: {
     icon: 'bolt',
diff --git a/app/imports/ui/components/computation/Computed.vue b/app/imports/ui/components/computation/Computed.vue
index 5cafdaae..81c94303 100644
--- a/app/imports/ui/components/computation/Computed.vue
+++ b/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;
   }
diff --git a/app/imports/ui/properties/forms/AdjustmentForm.vue b/app/imports/ui/properties/forms/AdjustmentForm.vue
index cfcb4174..68f60bfd 100644
--- a/app/imports/ui/properties/forms/AdjustmentForm.vue
+++ b/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
diff --git a/app/imports/ui/properties/forms/DamageForm.vue b/app/imports/ui/properties/forms/DamageForm.vue
index 3f930001..0e399fbd 100644
--- a/app/imports/ui/properties/forms/DamageForm.vue
+++ b/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"
diff --git a/app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue b/app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue
new file mode 100644
index 00000000..2c3719e2
--- /dev/null
+++ b/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>
diff --git a/app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue b/app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue
new file mode 100644
index 00000000..70c5ef07
--- /dev/null
+++ b/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>
diff --git a/app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue b/app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue
new file mode 100644
index 00000000..81e69174
--- /dev/null
+++ b/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>
diff --git a/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js b/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
index 827c513d..06b03ff0 100644
--- a/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
+++ b/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,
 }
diff --git a/app/imports/ui/properties/viewers/AdjustmentViewer.vue b/app/imports/ui/properties/viewers/AdjustmentViewer.vue
new file mode 100644
index 00000000..cfa70ca0
--- /dev/null
+++ b/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>
diff --git a/app/imports/ui/properties/viewers/DamageViewer.vue b/app/imports/ui/properties/viewers/DamageViewer.vue
new file mode 100644
index 00000000..acea0d99
--- /dev/null
+++ b/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>
diff --git a/app/imports/ui/properties/viewers/shared/propertyViewerIndex.js b/app/imports/ui/properties/viewers/shared/propertyViewerIndex.js
index e318a639..5c3d562d 100644
--- a/app/imports/ui/properties/viewers/shared/propertyViewerIndex.js
+++ b/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,