Add healthbars; adjust action desc font size

src/components/Combat.vue

@@ -141,7 +141,7 @@ export default class Combat extends Vue {
 <style scoped>
 .combat-layout {
   display: grid;
-  grid-template-rows: minmax(160pt, 20%) 10% [main-row-start] 1fr 20% [main-row-end] ;
+  grid-template-rows: fit-content(40%) 10% [main-row-start] 1fr 20% [main-row-end] ;
   grid-template-columns: 20% [main-col-start] 1fr 1fr [main-col-end] 20%;
   width: 100%;
   height: 100%;
@@ -221,7 +221,7 @@ export default class Combat extends Vue {
   grid-area: 2 / main-col-start / main-row-start / main-col-end;
   padding: 8pt;
   text-align: center;
-  font-size: 16pt;
+  font-size: 16px;
 }
 
 h3 {

src/components/Statblock.vue

@@ -14,16 +14,16 @@
         <div class="tooltip-body">{{ subject.desc }}</div>
       </div>
     </h2>
-    <div class="stat-line vigors">
-      <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].toFixed(0)}}</div>
+      <div class="stat-entry" v-for="vigor in Object.keys(subject.vigors)" v-bind:key="vigor">
+        <div class="healthbar" v-bind:style="{'--fullness': (subject.vigors[vigor]/subject.maxVigors[vigor]*100) + '%', '--color': vigorColor(subject.vigors[vigor], subject.maxVigors[vigor]) }">
+          <i :class="vigorIcons[vigor]" />
+          <div class="healthbar-value"> {{ subject.vigors[vigor].toFixed(0) + '/' + subject.maxVigors[vigor].toFixed(0) }}</div>
+        </div>
         <div class="tooltip-template">
           <div class="tooltip-title">{{ vigor }}</div>
           <div class="tooltip-body">{{ vigorDescs[vigor] }}</div>
         </div>
       </div>
-    </div>
     <div class="stat-line stats">
       <div :class="statClass(subject.stats[stat], subject.baseStats[stat])" v-for="stat in Object.keys(subject.stats)" v-bind:key="stat">
         <i :class="statIcons[stat]" />
@@ -62,13 +62,13 @@ import 'tippy.js/dist/tippy.css'
     ContainerView
   },
   methods: {
-    vigorClass (value: number, max: number) {
+    vigorColor (value: number, max: number) {
       if (value * 5 <= max) {
-        return 'stat-entry crit'
+        return 'red'
       } else if (value * 3 <= max) {
-        return 'stat-entry low'
+        return 'yellow'
       } else {
-        return 'stat-entry'
+        return 'green'
       }
     },
     statClass (value: number, normal: number) {
@@ -154,6 +154,34 @@ a {
   user-select: none;
 }
 
+.healthbar {
+  --color: green;
+  --fullness: 100%;
+  position: relative;
+  width: 90%;
+  margin: 0% 5% 0%;
+  height: 10pt;
+  border-radius: 2pt;
+  border-width: 2pt;
+  border-color: gray;
+  border-style: outset;
+  background: linear-gradient(90deg, var(--color) var(--fullness), black var(--fullness), black);
+}
+
+.stat-entry .healthbar i {
+  position: relative;
+  font-size: 8pt;
+  transform: translate(0%, 15%);
+  float: left;
+}
+
+.healthbar .healthbar-value {
+  position: relative;
+  margin-right: 40%;
+  color: #bbb;
+  float: right;
+}
+
 .stat-entry i {
   transform: translate(0, -40%) scale(1.6);
 }