Improved effect, skill, and attribute viewers

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

@@ -1,35 +1,49 @@
 <template lang="html">
   <div class="attribute-viewer">
-    <div v-if="model.value !== undefined">
+    <v-layout
+      column
+      align-center
+    >
       <div
-        v-if="model.damage !== undefined"
+        v-if="model.value !== undefined"
-        class="display-3"
+        class="display-1"
       >
-        {{ model.value - model.damage }} / {{ model.value }}
+        <div
+          v-if="model.damage !== undefined"
+        >
+          {{ model.value - model.damage }} / {{ model.value }}
+        </div>
+        <div v-else>
+          {{ model.value }}
+        </div>
       </div>
-      <div v-else>
+      <div
-        {{ model.value }}
+        v-if="model.modifier !== undefined"
+        class="title"
+      >
+        {{ numberToSignedString(model.modifier) }}
       </div>
+    </v-layout>
+    <div>
+      <property-name :value="model.name" />
+      <property-variable-name :value="model.variableName" />
     </div>
-    <div v-if="model.modifier !== undefined">
-      {{ numberToSignedString(model.modifier) }}
-    </div>
-    <property-name :value="model.name" />
-    <property-variable-name :value="model.variableName" />
     <property-field
       v-if="model.attributeType === 'hitDice' && model.hitDiceSize"
       name="Hit dice size"
       :value="model.hitDiceSize"
     />
-    <p v-if="reset && model.attributeType !== 'hitDice'">
+    <property-field
-      {{ reset }}
+      v-if="reset && model.attributeType !== 'hitDice'"
-    </p>
+      name="Reset"
+      :value="reset"
+    />
     <property-description :value="model.description" />
 
     <effect-viewer
-      v-if="computationContext.creature"
+      v-if="computationContext.creature && model.baseValueCalculation"
       :model="{
-        name: 'Attribute base value',
+        name: 'Base value',
         result: model.baseValue,
         operation: 'base'
       }"

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

@@ -1,18 +1,6 @@
 <template lang="html">
-  <div class="effect-viewer">
+  <v-list-tile class="effect-viewer">
-    <div class="layout row align-center wrap">
+    <v-list-tile-avatar>
-      <property-name
-        v-if="model.name"
-        :value="model.name"
-      />
-      <div class="headline">
-        <code
-          v-for="stat in model.stats"
-          :key="stat"
-          style="display: block;"
-          class="my-1"
-        >{{ stat }}</code>
-      </div>
       <v-tooltip bottom>
         <template #activator="{ on }">
           <v-icon
@@ -25,14 +13,26 @@
         </template>
         <span>{{ operation }}</span>
       </v-tooltip>
-      <div
+    </v-list-tile-avatar>
-        v-if="showValue"
+    <v-list-tile-action
-        class="headline"
+      v-if="showValue"
-      >
+      class="headline"
-        {{ displayedValue }}
+    >
-      </div>
+      {{ displayedValue }}
-    </div>
+    </v-list-tile-action>
-  </div>
+    <v-list-tile-content>
+      <v-list-tile-title>
+        {{ model.name }}
+      </v-list-tile-title>
+      <v-list-tile-sub-title>
+        <code
+          v-for="stat in model.stats"
+          :key="stat"
+          class="mr-1"
+        >{{ stat }}</code>
+      </v-list-tile-sub-title>
+    </v-list-tile-content>
+  </v-list-tile>
 </template>
 
 <script>

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

@@ -1,19 +1,111 @@
 <template lang="html">
   <div class="skill-viewer">
-  	<property-name :value="model.name"/>
+    <v-layout
-		<property-variable-name :value="model.variableName"/>
+      column
-		<property-field name="Ability" :value="model.ability"/>
+      align-center
-		<property-field name="Type" :value="model.skillType"/>
+    >
-		<property-field name="Base value" :value="model.baseValue"/>
+      <div
-		<property-field name="Base proficiency" :value="model.baseProficiency"/>
+        v-if="model.value !== undefined"
-		<property-description :value="model.description"/>
+        class="display-1 layout row align-center"
+      >
+        <v-icon class="mr-4">
+          {{ icon }}
+        </v-icon>
+        <div v-if="isFinite(model.value)">
+          {{ numberToSignedString(model.value) }}
+        </div>
+      </div>
+    </v-layout>
+    <property-name :value="model.name" />
+    <property-variable-name :value="model.variableName" />
+    <property-field
+      name="Ability"
+      :value="model.ability"
+    />
+    <property-field
+      name="Type"
+      :value="model.skillType"
+    />
+    <property-field
+      name="Base value"
+      :value="model.baseValue"
+    />
+    <property-field
+      name="Base proficiency"
+      :value="model.baseProficiency"
+    />
+    <property-description :value="model.description" />
+
+    <effect-viewer
+      v-if="computationContext.creature && model.baseValue"
+      :model="{
+        name: 'Base value',
+        result: model.baseValue,
+        operation: 'base'
+      }"
+    />
+    <effect-viewer
+      v-for="effect in effects"
+      :key="effect._id"
+      :model="effect"
+    />
   </div>
 </template>
 
 <script>
 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.js';
+import EffectViewer from '/imports/ui/properties/viewers/EffectViewer.vue';
+
 export default {
+  components: {
+    EffectViewer,
+  },
 	mixins: [propertyViewerMixin],
+  inject: {
+    computationContext: { default: {} }
+  },
+  computed: {
+    displayedModifier(){
+			let mod = this.model.value;
+			if (this.model.fail){
+				return 'fail';
+			} else {
+				return numberToSignedString(mod);
+			}
+		},
+    icon(){
+			if (this.model.proficiency == 0.5){
+				return 'brightness_2';
+			} else if (this.model.proficiency == 1) {
+				return 'brightness_1'
+			} else if (this.model.proficiency == 2){
+				return 'album'
+			} else {
+				return 'radio_button_unchecked';
+			}
+		},
+  },
+  methods: {
+    numberToSignedString,
+    isFinite: Number.isFinite,
+  },
+  meteor: {
+    effects(){
+      if (this.computationContext.creature){
+        let creatureId = this.computationContext.creature._id;
+        return CreatureProperties.find({
+          'ancestors.id': creatureId,
+          stats: this.model.variableName,
+          type: 'effect',
+          removed: {$ne: true},
+        });
+      } else {
+        return [];
+      }
+    },
+  },
 }
 </script>