Make Cafat's belch damage stats; highlight drained stats

src/components/Statblock.vue

@@ -3,7 +3,7 @@
     <h2 v-if="subject.perspective === firstperson">You</h2>
     <h2 v-if="subject.perspective !== firstperson">{{subject.name.all.capital}}</h2>
     <div class="stat-line">
-      <div :class="statClass(subject.vigors[vigor], subject.maxVigors[vigor])" v-for="vigor in Object.keys(subject.vigors)" v-bind:key="vigor">
+      <div :class="vigorClass(subject.vigors[vigor], subject.maxVigors[vigor])" v-for="vigor in Object.keys(subject.vigors)" v-bind:key="vigor">
         <i :class="vigorIcons[vigor]" />
         <div>{{subject.vigors[vigor]}}</div>
         <div class="tooltip-template">
@@ -53,7 +53,7 @@ import 'tippy.js/dist/tippy.css'
     ContainerView
   },
   methods: {
-    statClass (value: number, max: number) {
+    vigorClass (value: number, max: number) {
       if (value * 5 <= max) {
         return 'stat-entry crit'
       } else if (value * 3 <= max) {
@@ -61,6 +61,15 @@ import 'tippy.js/dist/tippy.css'
       } else {
         return 'stat-entry'
       }
+    },
+    statClass (value: number, normal: number) {
+      if (value < normal) {
+        return 'stat-entry crit'
+      } else if (value > normal) {
+        return 'stat-entry buff'
+      } else {
+        return 'stat-entry'
+      }
     }
   }
 })
@@ -136,6 +145,10 @@ a {
 .stat-entry.crit {
   color: red;
 }
+
+.stat-entry.buff {
+  color: green;
+}
 </style>
 
 <style>

src/game/entity.ts

@@ -58,7 +58,7 @@ export class Creature extends Vore implements Combatant {
     constructor (public name: Noun, public pronouns: Pronoun, public stats: Stats, public preyPrefs: Set<VoreType>, public predPrefs: Set<VoreType>, mass: number) {
       super()
       const containers = this.containers
-      this.baseStats = stats
+      this.baseStats = Object.keys(Stat).reduce((base: any, key) => { base[key] = stats[key as Stat]; return base }, {})
 
       this.voreStats = {
         get [VoreStat.Bulk] () {