Improve statblock layout; adjust boss stats

src/components/Statblock.vue

@@ -27,7 +27,7 @@
     <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]" />
-        <div>{{subject.stats[stat].toFixed(0)}}</div>
+        <div class="stat-value">{{subject.stats[stat].toFixed(0)}}</div>
         <div class="tooltip-template">
           <div class="tooltip-title">{{ stat }}</div>
           <div class="tooltip-body">{{ statDescs[stat] }}</div>
@@ -37,7 +37,7 @@
     <div class="stat-line vore-stats">
       <div class="stat-entry" v-for="stat in Object.keys(subject.voreStats)" v-bind:key="stat">
         <i :class="voreStatIcons[stat]" />
-        <div>{{subject.voreStats[stat].toFixed(0)}}</div>
+        <div class="stat-value">{{subject.voreStats[stat].toFixed(0)}}</div>
         <div class="tooltip-template">
           <div class="tooltip-title">{{ stat }}</div>
           <div class="tooltip-body">{{ voreStatDescs[stat] }}</div>
@@ -47,7 +47,7 @@
     <div>Status: {{subject.status}}</div>
     <button v-if="subject.perspective !== firstperson" @click="subject.perspective = firstperson">First-person</button>
     <button v-if="subject.perspective !== thirdperson" @click="subject.perspective = thirdperson">Third-person</button>
-    <button @click.stop="$emit('selectAlly')">Select ally as target</button>
+    <button class="if-not-selected" @click.stop="$emit('selectAlly')">Select ally as target</button>
   </div>
 </template>
 
@@ -142,28 +142,36 @@ a {
 .stat-line {
   width: 100%;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-evenly;
   flex-wrap: wrap;
 }
 
 .stat-entry {
   position: relative;
   font-size: 10pt;
-  padding-top: 4pt;
-  padding-bottom: 4pt;
+  padding-top: 2pt;
+  padding-bottom: 2pt;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   user-select: none;
 }
 
+.stat-value {
+  padding-top: 4pt;
+  padding-bottom: 4pt;
+}
+
 .healthbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   --color: green;
   --fullness: 100%;
   position: relative;
   width: 90%;
   margin: 0% 5% 0%;
-  height: 10pt;
+  height: 14pt;
   border-radius: 2pt;
   border-width: 2pt;
   border-color: gray;
@@ -172,21 +180,19 @@ a {
 }
 
 .stat-entry .healthbar i {
-  position: relative;
-  font-size: 8pt;
-  transform: translate(0%, 15%);
-  float: left;
+  flex: 0 1;
+  flex-basis: 14pt;
+  font-size: 14pt;
 }
 
 .healthbar .healthbar-value {
-  position: relative;
-  margin-right: 40%;
+  flex: 1 0;
+  font-size: 12pt;
   color: #bbb;
-  float: right;
 }
 
 .stat-entry i {
-  transform: translate(0, -40%) scale(1.6);
+  font-size: 150%;
 }
 .stat-entry.low {
   color: yellow;
@@ -214,6 +220,10 @@ a {
 .statblock[data-active] .vore-stats {
   display: flex;
 }
+
+.statblock[data-active] .if-not-selected {
+  display: none;
+}
 </style>
 
 <style>

src/game/creatures/kenzie.ts

@@ -15,7 +15,7 @@ export class Kenzie extends Creature {
       new ProperNoun('Kenzie'),
       new ImproperNoun('lycanroc', 'lycanrocs'),
       FemalePronouns,
-      { Toughness: 60, Power: 70, Speed: 40, Willpower: 60, Charm: 120 },
+      { Toughness: 25, Power: 35, Speed: 20, Willpower: 20, Charm: 30 },
       new Set([VoreType.Oral]),
       new Set([VoreType.Oral]),
       1000
@@ -37,7 +37,7 @@ export class Kenzie extends Creature {
           { fraction: 0.5, stat: Stat.Toughness, target: Vigor.Health, type: DamageType.Crush },
           { fraction: 0.05, stat: VoreStat.Bulk, target: Vigor.Health, type: DamageType.Crush }
         ]),
-        new Verb('crush', 'crushes', 'crushing', 'crushed')
+        new Verb('stomp')
       )
     )
   }

src/game/creatures/withers.ts

@@ -1,5 +1,5 @@
 import { Creature, POV } from '../entity'
-import { Damage, DamageType, ConstantDamageFormula, Vigor, Side, GroupAction, CombatTest, Stat, DamageFormula, UniformRandomDamageFormula, Action, DamageInstance } from '../combat'
+import { Damage, DamageType, ConstantDamageFormula, Vigor, Side, GroupAction, CombatTest, Stat, DamageFormula, UniformRandomDamageFormula, Action, DamageInstance, StatDamageFormula, VoreStat } from '../combat'
 import { ImproperNoun, POVPair, ProperNoun, FemalePronouns, RandomWord, Adjective, POVPairArgs, POVSoloArgs, Verb } from '../language'
 import { LogLine, LogLines, LogEntry, Newline } from '../interface'
 import { VoreType, Stomach, VoreContainer, Vore, NormalContainer, Container } from '../vore'
@@ -200,7 +200,7 @@ class StompAllyAction extends Action {
   execute (user: Creature, target: Creature): LogEntry {
     const damages: Array<DamageInstance> = Object.keys(Stat).map(stat => ({
       target: stat as Stat,
-      amount: target.stats[stat as Stat] / 5,
+      amount: target.stats[stat as Stat] / 3,
       type: DamageType.Heal
     }))
 
@@ -282,7 +282,7 @@ export class Withers extends Creature {
       new ProperNoun('Withers'),
       new ImproperNoun('hellhound', 'hellhounds'),
       FemalePronouns,
-      { Toughness: 60, Power: 70, Speed: 40, Willpower: 60, Charm: 120 },
+      { Toughness: 40, Power: 50, Speed: 30, Willpower: 40, Charm: 70 },
       new Set(),
       new Set([VoreType.Oral]),
       5000
@@ -331,5 +331,15 @@ export class Withers extends Creature {
     const boot = new BootContainer(this)
     this.otherContainers.push(boot)
     this.actions.push(new StompAllyAction())
+
+    this.actions.push(
+      new AttackAction(
+        new StatDamageFormula([
+          { fraction: 0.5, stat: Stat.Toughness, target: Vigor.Health, type: DamageType.Crush },
+          { fraction: 0.05, stat: VoreStat.Bulk, target: Vigor.Health, type: DamageType.Crush }
+        ]),
+        new Verb('stomp')
+      )
+    )
   }
 }