From e9a273244ab983f7bc3d1f60b5674333e2115879 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 22 Apr 2021 15:12:49 +0200
Subject: [PATCH] Improved Effect and Proficiency UI in attribute and skill
 viewers

---
 .../creatureProperties/Breadcrumbs.vue        |  31 +++-
 .../components/attributes/AttributeEffect.vue | 138 +++++++++++++++++
 .../components/skills/SkillProficiency.vue    | 107 +++++++++++++
 .../ui/properties/viewers/AttributeViewer.vue |  64 ++++++--
 .../properties/viewers/ProficiencyViewer.vue  |  26 ++--
 .../ui/properties/viewers/SkillViewer.vue     | 142 ++++++++++++++++--
 6 files changed, 467 insertions(+), 41 deletions(-)
 create mode 100644 app/imports/ui/properties/components/attributes/AttributeEffect.vue
 create mode 100644 app/imports/ui/properties/components/skills/SkillProficiency.vue

diff --git a/app/imports/ui/creature/creatureProperties/Breadcrumbs.vue b/app/imports/ui/creature/creatureProperties/Breadcrumbs.vue
index 8eef5676..c7f85f46 100644
--- a/app/imports/ui/creature/creatureProperties/Breadcrumbs.vue
+++ b/app/imports/ui/creature/creatureProperties/Breadcrumbs.vue
@@ -1,5 +1,8 @@
 <template lang="html">
-  <div class="breadcrumbs layout align-center wrap">
+  <div
+    class="breadcrumbs layout align-center wrap"
+    :class="{'no-icons': noIcons}"
+  >
     <template v-for="(prop, index) in props">
       <v-icon
         v-if="index !== 0"
@@ -7,12 +10,25 @@
       >
         chevron_right
       </v-icon>
+      <span
+        v-if="noLinks"
+        :key="prop._id"
+      >
+        <tree-node-view
+          :model="prop"
+          class="breadcrumb-tree-node-view"
+        />
+      </span>
       <a
+        v-else
         :key="prop._id"
         :data-id="`breadcrumb-${prop._id}`"
         @click="click(prop._id)"
       >
-        <tree-node-view :model="prop" />
+        <tree-node-view
+          :model="prop"
+          class="breadcrumb-tree-node-view"
+        />
       </a>
     </template>
   </div>
@@ -31,6 +47,8 @@
         type: Object,
         required: true,
       },
+      noLinks: Boolean,
+      noIcons: Boolean,
     },
     computed:{
       props(){
@@ -74,5 +92,14 @@
 .breadcrumbs {
   margin-bottom: 16px;
   opacity: 0.8;
+}
+.no-icons {
+
 }
 </style>
+
+<style lang="css">
+  .no-icons .breadcrumb-tree-node-view .v-icon {
+    display: none;
+  }
+</style>
diff --git a/app/imports/ui/properties/components/attributes/AttributeEffect.vue b/app/imports/ui/properties/components/attributes/AttributeEffect.vue
new file mode 100644
index 00000000..823d0948
--- /dev/null
+++ b/app/imports/ui/properties/components/attributes/AttributeEffect.vue
@@ -0,0 +1,138 @@
+<template lang="html">
+  <v-list-item
+    class="effect-viewer layout align-center"
+    v-on="!hideBreadcrumbs ? {click} : {}"
+  >
+    <div class="effect-icon">
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-icon
+            class="mx-2"
+            style="cursor: default;"
+            large
+            v-on="on"
+          >
+            {{ effectIcon }}
+          </v-icon>
+        </template>
+        <span>{{ operation }}</span>
+      </v-tooltip>
+    </div>
+    <div
+      class="text-h4 effect-value mr-2"
+    >
+      {{ displayedValue }}
+    </div>
+    <div class="layout column my-2">
+      <div class="text-body-1 mb-1">
+        {{ model.name || operation }}
+      </div>
+      <div v-if="!hideBreadcrumbs">
+        <breadcrumbs
+          :model="model"
+          class="text-caption"
+          no-links
+          no-icons
+          style="margin-bottom: 0"
+        />
+      </div>
+    </div>
+  </v-list-item>
+</template>
+
+<script lang="js">
+	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
+	import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
+  import Breadcrumbs from '/imports/ui/creature/creatureProperties/Breadcrumbs.vue';
+  import { isFinite } from 'lodash';
+
+	export default {
+    components: {
+      Breadcrumbs,
+    },
+		mixins: [propertyViewerMixin],
+    props: {
+      hideBreadcrumbs: Boolean
+    },
+		computed: {
+      hasClickListener(){
+        return this.$listeners && this.$listeners.click
+      },
+			resolvedValue(){
+				return this.model.result !== undefined ? this.model.result : this.model.calculation;
+			},
+			effectIcon(){
+				let value = this.resolvedValue;
+				return getEffectIcon(this.model.operation, value);
+			},
+			operation(){
+				switch(this.model.operation) {
+					case 'base': return 'Base value';
+					case 'add': return 'Add';
+					case 'mul': return 'Multiply';
+					case 'min': return 'Minimum';
+					case 'max': return 'Maximum';
+					case 'advantage': return 'Advantage';
+					case 'disadvantage': return 'Disadvantage';
+					case 'passiveAdd': return 'Passive bonus';
+					case 'fail': return 'Always fail';
+					case 'conditional': return 'Conditional benefit' ;
+          default: return '';
+				}
+			},
+			showValue(){
+				switch(this.model.operation) {
+					case 'base': return true;
+					case 'add': return true;
+					case 'mul': return true;
+					case 'min': return true;
+					case 'max': return true;
+					case 'advantage': return false;
+					case 'disadvantage': return false;
+					case 'passiveAdd': return true;
+					case 'fail': return false;
+					case 'conditional': return false;
+          default: return false;
+				}
+			},
+			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;
+				}
+			}
+		},
+    methods: {
+      click(e){
+        this.$emit('click', e);
+      },
+    },
+	};
+</script>
+
+<style lang="css" scoped>
+	.icon, .effect-icon {
+		min-width: 30px;
+	}
+	.icon {
+		color: inherit !important;
+	}
+	.net-effect {
+		flex-grow: 0;
+		flex-shrink: 0;
+	}
+	.effect-value {
+		min-width: 60px;
+    text-align: center;
+	}
+</style>
diff --git a/app/imports/ui/properties/components/skills/SkillProficiency.vue b/app/imports/ui/properties/components/skills/SkillProficiency.vue
new file mode 100644
index 00000000..f7b69911
--- /dev/null
+++ b/app/imports/ui/properties/components/skills/SkillProficiency.vue
@@ -0,0 +1,107 @@
+<template lang="html">
+  <v-list-item
+    class="proficiency-viewer layout align-center"
+    v-on="!hideBreadcrumbs ? {click} : {}"
+  >
+    <div class="effect-icon">
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-icon
+            class="mx-2"
+            style="cursor: default;"
+            large
+            v-on="on"
+          >
+            {{ icon }}
+          </v-icon>
+        </template>
+        <span>{{ proficiencyText }}</span>
+      </v-tooltip>
+    </div>
+    <div
+      class="text-h4 effect-value mr-2"
+    >
+      {{ proficiencyValue }}
+    </div>
+    <div class="layout column my-2">
+      <div class="text-body-1 mb-1">
+        {{ model.name || proficiencyText }}
+      </div>
+      <div v-if="!hideBreadcrumbs">
+        <breadcrumbs
+          :model="model"
+          class="text-caption"
+          no-links
+          no-icons
+          style="margin-bottom: 0"
+        />
+      </div>
+    </div>
+  </v-list-item>
+</template>
+
+<script lang="js">
+  import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
+  import Breadcrumbs from '/imports/ui/creature/creatureProperties/Breadcrumbs.vue';
+
+  export default {
+    components: {
+      Breadcrumbs,
+    },
+    mixins: [propertyViewerMixin],
+    props: {
+      hideBreadcrumbs: Boolean,
+      proficiencyBonus: {
+        type: Number,
+        default: null,
+      },
+    },
+    computed: {
+      icon(){
+        if (this.model.value == 0.5){
+          return 'brightness_2';
+        } else if (this.model.value == 1) {
+          return 'brightness_1'
+        } else if (this.model.value == 2){
+          return 'album'
+        } else {
+          return 'radio_button_unchecked';
+        }
+      },
+      proficiencyText(){
+        switch (this.model.value){
+          case 0.5: return 'Half proficiency bonus';
+          case 1: return 'Proficient';
+          case 2: return 'Double proficiency bonus';
+          default: return '';
+        }
+      },
+      proficiencyValue(){
+        if (!this.proficiencyBonus) return;
+        return Math.ceil(this.model.value * this.proficiencyBonus);
+      },
+    },
+    methods: {
+      click(e){
+        this.$emit('click', e);
+      },
+    },
+  };
+</script>
+
+<style lang="css" scoped>
+  .icon, .effect-icon {
+    min-width: 30px;
+  }
+  .icon {
+    color: inherit !important;
+  }
+  .net-effect {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+  .effect-value {
+    min-width: 60px;
+    text-align: center;
+  }
+</style>
diff --git a/app/imports/ui/properties/viewers/AttributeViewer.vue b/app/imports/ui/properties/viewers/AttributeViewer.vue
index 3cad020c..c0d35062 100644
--- a/app/imports/ui/properties/viewers/AttributeViewer.vue
+++ b/app/imports/ui/properties/viewers/AttributeViewer.vue
@@ -43,27 +43,30 @@
       :calculations="model.descriptionCalculations"
       :inactive="model.inactive"
     />
-
-    <effect-viewer
-      v-if="context.creatureId && model.baseValueCalculation"
-      :model="{
-        name: 'Base value',
-        result: model.baseValue,
-        operation: 'base'
-      }"
-    />
-    <effect-viewer
-      v-for="effect in effects"
-      :key="effect._id"
-      :model="effect"
-    />
+    <v-list>
+      <attribute-effect
+        v-for="effect in baseEffects"
+        :key="effect._id"
+        :model="effect"
+        :hide-breadcrumbs="effect._id === model._id"
+        :data-id="effect._id"
+        @click="effect._id !== model._id && clickEffect(effect._id)"
+      />
+      <attribute-effect
+        v-for="effect in effects"
+        :key="effect._id"
+        :model="effect"
+        :data-id="effect._id"
+        @click="clickEffect(effect._id)"
+      />
+    </v-list>
   </div>
 </template>
 
 <script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
-	import EffectViewer from '/imports/ui/properties/viewers/EffectViewer.vue';
+	import AttributeEffect from '/imports/ui/properties/components/attributes/AttributeEffect.vue';
   import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 
 	export default {
@@ -71,7 +74,7 @@
       context: { default: {} }
     },
 		components: {
-			EffectViewer,
+			AttributeEffect,
 		},
 		mixins: [propertyViewerMixin],
 		computed: {
@@ -87,8 +90,37 @@
 		},
 		methods: {
 			numberToSignedString,
+      clickEffect(id){
+        this.$store.commit('pushDialogStack', {
+          component: 'creature-property-dialog',
+          elementId: `${id}`,
+          data: {_id: id},
+        });
+      },
 		},
     meteor: {
+      baseEffects(){
+        if (this.context.creatureId){
+          let creatureId = this.context.creatureId;
+          return CreatureProperties.find({
+            'ancestors.id': creatureId,
+            type: 'attribute',
+            variableName: this.model.variableName,
+            removed: {$ne: true},
+            inactive: {$ne: true},
+          }).map( prop => ({
+            _id: prop._id,
+            name: 'Attribute base value',
+            operation: 'base',
+            calculation: prop.baseValueCalculation,
+            result: prop.baseValue,
+            stats: [prop.variableName],
+            ancestors: prop.ancestors,
+          }) ).filter(effect => effect.result);
+        } else {
+          return [];
+        }
+      },
       effects(){
         if (this.context.creatureId){
           let creatureId = this.context.creatureId;
diff --git a/app/imports/ui/properties/viewers/ProficiencyViewer.vue b/app/imports/ui/properties/viewers/ProficiencyViewer.vue
index c91a5935..b5c31f00 100644
--- a/app/imports/ui/properties/viewers/ProficiencyViewer.vue
+++ b/app/imports/ui/properties/viewers/ProficiencyViewer.vue
@@ -17,19 +17,19 @@
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
 import ProficiencyIcon from '/imports/ui/properties/shared/ProficiencyIcon.vue';
 export default {
-	components: {
-		ProficiencyIcon,
-	},
-	mixins: [propertyViewerMixin],
-	computed: {
-		proficiencyText(){
-			switch (this.model.value){
-				case 0.5: return 'Half proficiency bonus';
-				case 1: return 'Proficient';
-				case 2: return 'Double proficiency bonus';
+  components: {
+    ProficiencyIcon,
+  },
+  mixins: [propertyViewerMixin],
+  computed: {
+    proficiencyText(){
+      switch (this.model.value){
+        case 0.5: return 'Half proficiency bonus';
+        case 1: return 'Proficient';
+        case 2: return 'Double proficiency bonus';
         default: return '';
-			}
-		}
-	}
+      }
+    }
+  }
 }
 </script>
diff --git a/app/imports/ui/properties/viewers/SkillViewer.vue b/app/imports/ui/properties/viewers/SkillViewer.vue
index fc9fc040..8eda4d46 100644
--- a/app/imports/ui/properties/viewers/SkillViewer.vue
+++ b/app/imports/ui/properties/viewers/SkillViewer.vue
@@ -40,18 +40,44 @@
       :inactive="model.inactive"
     />
 
-    <effect-viewer
-      v-if="context.creatureId && model.baseValue"
-      :model="{
-        name: 'Base value',
-        result: model.baseValue,
-        operation: 'base'
-      }"
+    <attribute-effect
+      v-for="effect in baseEffects"
+      :key="effect._id"
+      :model="effect"
+      :hide-breadcrumbs="effect._id === model._id"
+      :data-id="effect._id"
+      @click="effect._id !== model._id && clickEffect(effect._id)"
     />
-    <effect-viewer
+    <attribute-effect
+      v-if="ability"
+      :key="ability._id"
+      :model="ability"
+      :data-id="ability._id"
+      @click="clickEffect(ability._id)"
+    />
+    <attribute-effect
       v-for="effect in effects"
       :key="effect._id"
       :model="effect"
+      :data-id="effect._id"
+      @click="clickEffect(effect._id)"
+    />
+    <skill-proficiency
+      v-for="proficiency in baseProficiencies"
+      :key="proficiency._id"
+      :model="proficiency"
+      :proficiency-bonus="proficiencyBonus"
+      :hide-breadcrumbs="proficiency._id === model._id"
+      :data-id="proficiency._id"
+      @click="clickEffect(proficiency._id)"
+    />
+    <skill-proficiency
+      v-for="proficiency in proficiencies"
+      :key="proficiency._id"
+      :model="proficiency"
+      :proficiency-bonus="proficiencyBonus"
+      :data-id="proficiency._id"
+      @click="clickEffect(proficiency._id)"
     />
   </div>
 </template>
@@ -60,11 +86,14 @@
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
-import EffectViewer from '/imports/ui/properties/viewers/EffectViewer.vue';
+import AttributeEffect from '/imports/ui/properties/components/attributes/AttributeEffect.vue';
+import SkillProficiency from '/imports/ui/properties/components/skills/SkillProficiency.vue';
+import Creatures from '/imports/api/creature/Creatures.js';
 
 export default {
   components: {
-    EffectViewer,
+    AttributeEffect,
+    SkillProficiency,
   },
 	mixins: [propertyViewerMixin],
   inject: {
@@ -94,8 +123,37 @@ export default {
   methods: {
     numberToSignedString,
     isFinite: Number.isFinite,
+    clickEffect(id){
+      this.$store.commit('pushDialogStack', {
+        component: 'creature-property-dialog',
+        elementId: `${id}`,
+        data: {_id: id},
+      });
+    },
   },
   meteor: {
+    baseEffects(){
+      if (this.context.creatureId){
+        let creatureId = this.context.creatureId;
+        return CreatureProperties.find({
+          'ancestors.id': creatureId,
+          type: 'attribute',
+          variableName: this.model.variableName,
+          removed: {$ne: true},
+          inactive: {$ne: true},
+        }).map( prop => ({
+          _id: prop._id,
+          name: 'Skill base value',
+          operation: 'base',
+          calculation: prop.baseValueCalculation,
+          result: prop.baseValue,
+          stats: [prop.variableName],
+          ancestors: prop.ancestors,
+        }) ).filter(effect => effect.result);
+      } else {
+        return [];
+      }
+    },
     effects(){
       if (this.context.creatureId){
         let creatureId = this.context.creatureId;
@@ -109,6 +167,70 @@ export default {
         return [];
       }
     },
+    baseProficiencies(){
+      if (this.context.creatureId){
+        let creatureId = this.context.creatureId;
+        return CreatureProperties.find({
+          'ancestors.id': creatureId,
+          type: 'skill',
+          variableName: this.model.variableName,
+          removed: {$ne: true},
+          inactive: {$ne: true},
+        }).map( prop => ({
+          _id: prop._id,
+          name: 'Skill base proficiency',
+          value: prop.baseProficiency,
+          stats: [prop.variableName],
+          ancestors: prop.ancestors,
+        }) ).filter(prof => prof.value);
+      } else {
+        return [];
+      }
+    },
+    proficiencies(){
+      let creatureId = this.context.creatureId;
+      if (creatureId){
+        return CreatureProperties.find({
+          'ancestors.id': creatureId,
+          stats: this.model.variableName,
+          type: 'proficiency',
+          removed: {$ne: true},
+          inactive: {$ne: true},
+        });
+      } else {
+        return [];
+      }
+    },
+    ability(){
+      let creatureId = this.context.creatureId;
+      let ability = this.model.ability;
+      if (!creatureId || !ability) return;
+      let abilityProp = CreatureProperties.findOne({
+        'ancestors.id': creatureId,
+        variableName: ability,
+        type: 'attribute',
+        removed: {$ne: true},
+        inactive: {$ne: true},
+        overridden: {$ne: true},
+      });
+      if (!abilityProp) return;
+      return {
+        _id: abilityProp._id,
+        name: abilityProp.name,
+        operation: 'base',
+        result: abilityProp.modifier,
+        stats: [this.model.variableName],
+        ancestors: abilityProp.ancestors,
+      }
+    },
+    proficiencyBonus(){
+      let creatureId = this.context.creatureId;
+      if (!creatureId) return;
+      let creature = Creatures.findOne(creatureId)
+      return creature &&
+        creature.variables.proficiencyBonus &&
+        creature.variables.proficiencyBonus.currentValue;
+    },
   },
 }
 </script>