Added Resistance, Vulnerability, and Immunity to the health bar card

app/imports/ui/properties/components/attributes/HealthBarCard.vue

@@ -10,6 +10,25 @@
       @change="e => $emit('change', {_id: attribute._id, change: e})"
       @click="e => $emit('click', {_id: attribute._id})"
     />
+    <div class="ma-3">
+      <span
+        v-if="multipliers.vulnerabilities.length"
+        :class="{'mr-2': multipliers.resistances.length || multipliers.immunities.length}"
+      >
+        <b>Vulnerability:</b> {{ multipliers.vulnerabilities.join(', ') }}
+      </span>
+      <span
+        v-if="multipliers.resistances.length"
+        :class="{'mr-2': multipliers.immunities.length}"
+      >
+        <b>Resistance:</b> {{ multipliers.resistances.join(', ') }}
+      </span>
+      <span
+        v-if="multipliers.immunities.length"
+      >
+        <b>Immunity:</b> {{ multipliers.immunities.join(', ') }}
+      </span>
+    </div>
   </v-card>
 </template>
 
@@ -17,11 +36,33 @@
 	import HealthBar from '/imports/ui/properties/components/attributes/HealthBar.vue';
 
 	export default {
+    inject: {
+      context: { default: {} }
+    },
 		components: {
 			HealthBar,
 		},
 		props: {
-			attributes: Array,
+			attributes: {
+        type: Array,
+        required: true
+       },
 		},
+    computed: {
+      multipliers() {
+        let damageMultipliers = this.context.creature.damageMultipliers;
+        let vulnerabilities = [];
+        let resistances = [];
+        let immunities = [];
+        for (let key in damageMultipliers){
+          switch(damageMultipliers[key]){
+            case 2: vulnerabilities.push(key); break;
+            case 0.5: resistances.push(key); break;
+            case 0: immunities.push(key); break;
+          }
+        }
+        return {vulnerabilities, resistances, immunities};
+      }
+    },
 	}
 </script>