Improved attribute dialogs

app/imports/api/creature/DEFAULT_CHARACTER_DOCS.js

@@ -39,7 +39,7 @@ export default () => ({
 		{"name": "Level 9 Spell Slots", "variableName": "level9SpellSlots", "type": "spellSlot"},
 
     {"name": "Proficiency Bonus", "variableName": "proficiencyBonus", "type": "modifier"},
-    {"name": "initiative",        "variableName": "initiative",       "type": "modifier"},
+    {"name": "Initiative",        "variableName": "initiative",       "type": "modifier"},
 
   	{"name": "Carry Capacity Multiplier", "variableName": "carryMultiplier", "type": "utility", "baseValue": 1},
   	{"name": "Rage Damage",               "variableName": "rageDamage",      "type": "utility"},

app/imports/ui/components/AbilityListTile.Story.vue

@@ -27,43 +27,43 @@
 						{
 							name: "Ghost Touch",
 							operation: "add",
-							value: -2,
+							result: -2,
 							enabled: true,
 							_id: Random.id(),
 						},{
 							name: "Some Base",
 							operation: "base",
-							value: 15,
+							result: 15,
 							enabled: true,
 							_id: Random.id(),
 						},{
 							name: "Some Multiply",
 							operation: "mul",
-							value: 1.5,
+							result: 1.5,
 							enabled: true,
 							_id: Random.id(),
 						},{
 							name: "Some Min",
 							operation: "min",
-							value: 8,
+							result: 8,
 							enabled: true,
 							_id: Random.id(),
 						},{
 							name: "Some Advantage",
 							operation: "advantage",
-							value: 1,
+							result: 1,
 							enabled: true,
 							_id: Random.id(),
 						},{
 							name: "Some Disadvantage",
 							operation: "disadvantage",
-							value: 1,
+							result: 1,
 							enabled: true,
 							_id: Random.id(),
 						},{
 							name: "Some Passive",
 							operation: "passiveAdd",
-							value: -2,
+							result: -2,
 							calculation: "3-5",
 							_id: Random.id(),
 						},{

app/imports/ui/components/AttributeDialog.vue

@@ -20,6 +20,7 @@
 		<div class="display-3 attribute-value" v-else>
 			{{value}}
 		</div>
+		<attribute-effect-list v-if="attribueBaseEffect" :effects="[attribueBaseEffect]"/>
 		<div v-if="effects && effects.length">
 			<h6 class="title">Effects</h6>
 			<attribute-effect-list :effects="effects" @click="clickedEffect"/>
@@ -39,6 +40,7 @@
 			type: String,
 			value: Number,
 			mod: Number,
+			baseValue: Number,
 			adjustment: {type: Number, default: 0},
 			effects: {type: Array, default: () => []},
 		},
@@ -48,6 +50,19 @@
 				this.$emit('clickedEffect', e);
 			},
 		},
+		computed: {
+			attribueBaseEffect(){
+				if (!this.baseValue) return;
+				return {
+					_id: 'attributeBaseValue',
+					name: `${this.name}`,
+					operation: 'base',
+					result: this.baseValue,
+					stat: this.variableName,
+					enabled: true,
+				};
+			},
+		},
 		components: {
 			DialogBase,
 			AttributeEffectList,

app/imports/ui/components/AttributeDialogContainer.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <attribute-dialog
 		v-bind="attribute"
+		:effects="effects"
 		v-on="{clickedEffect}"
 	/>
 </template>
@@ -19,6 +20,18 @@
 			attribute(){
 				return Attributes.findOne(this._id);
 			},
+			effects(){
+				if (!this.attribute) return;
+				let charId = this.attribute.charId;
+				let stat = this.attribute.variableName;
+				return Effects.find({
+					charId,
+					stat,
+					enabled: true,
+				}, {
+					sort: {order: 1},
+				}).fetch();
+			},
 		},
 		methods: {
 			clickedEffect(e){

app/imports/ui/components/AttributeEffectList.vue

@@ -5,14 +5,16 @@
 			:class="{effect: true, disabled: !effect.enabled}"
 			:id="`${_uid}-${effect._id}`"
 			:key="effect._id"
-			@click="(e) => click({effect, elementId: `${_uid}-${effect._id}`})"
+			v-on="$listeners.click ? { click(e){
+					$emit('click', {effect, elementId: `${_uid}-${effect._id}`})
+				} } : {}"
 		>
 			<v-layout row align-center class="net-effect">
 				<v-icon class="black--text icon">
-					{{getEffectIcon(effect.operation, effect.value)}}
+					{{getEffectIcon(effect.operation, effect.result)}}
 				</v-icon>
 				<div class="value display-1  pr-2" v-if="showValue(effect.operation)">
-					{{getValue(effect.operation, effect.value)}}
+					{{getValue(effect.operation, effect.result)}}
 				</div>
 				<div class="calculation body-2 pr-2" v-else>
 					{{effect.calculation}}
@@ -64,9 +66,6 @@
 			}
 		},
 		methods: {
-			click(event){
-				this.$emit('click', event);
-			},
 			getEffectIcon,
 			getOperation(op, value){
 				switch(op) {