Add titles and descriptions (and some familiar D&D names)

src/App.vue

@@ -25,7 +25,7 @@ export default class App extends Vue {
   constructor () {
     super()
 
-    const fighter = new Creatures.Human(new ImproperNoun('fighter'), TheyPronouns, {
+    const fighter = new Creatures.Human(new ProperNoun("Redgar"), MalePronouns, {
       stats: {
         Toughness: 40,
         Power: 50,
@@ -34,7 +34,8 @@ export default class App extends Vue {
         Charm: 20
       }
     })
-    const rogue = new Creatures.Human(new ImproperNoun('wizard'), MalePronouns, {
+    fighter.title = "Lv. 6 Fighter"
+    const rogue = new Creatures.Human(new ProperNoun('Lidda'), FemalePronouns, {
       stats: {
         Toughness: 25,
         Power: 40,
@@ -43,7 +44,8 @@ export default class App extends Vue {
         Charm: 80
       }
     })
-    const wizard = new Creatures.Human(new ImproperNoun('rogue'), FemalePronouns, {
+    rogue.title = "Lv. 5 Rogue"
+    const wizard = new Creatures.Human(new ProperNoun('Mialee'), FemalePronouns, {
       stats: {
         Toughness: 30,
         Power: 20,
@@ -52,7 +54,8 @@ export default class App extends Vue {
         Charm: 60
       }
     })
-    const cleric = new Creatures.Human(new ImproperNoun('cleric'), FemalePronouns, {
+    wizard.title = "Lv. 6 Wizard"
+    const cleric = new Creatures.Human(new ProperNoun('Jozan'), MalePronouns, {
       stats: {
         Toughness: 35,
         Power: 40,
@@ -61,6 +64,7 @@ export default class App extends Vue {
         Charm: 50
       }
     })
+    cleric.title = "Lv. 5 Wizard"
 
     this.left = fighter
     this.right = new Creatures.Withers()

src/components/Statblock.vue

@@ -1,7 +1,19 @@
 <template>
   <div class="statblock">
-    <h2 v-if="subject.perspective === firstperson">You</h2>
-    <h2 v-if="subject.perspective !== firstperson">{{subject.name.all.capital}}</h2>
+    <h2 class="name" v-if="subject.perspective === firstperson">
+      You
+      <div class="tooltip-template">
+        <div class="tooltip-title">{{ subject.title }}</div>
+        <div class="tooltip-body">{{ subject.desc }}</div>
+      </div>
+    </h2>
+    <h2 class="name" v-if="subject.perspective !== firstperson">
+      {{subject.name.all.capital}}
+      <div class="tooltip-template">
+        <div class="tooltip-title">{{ subject.title }}</div>
+        <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]" />
@@ -85,7 +97,9 @@ export default class Statblock extends Vue {
   firstperson: POV = POV.First
 
   mounted () {
-    const tippyInstances = Array.from(this.$el.querySelectorAll(".stat-entry")).map(elem => {
+    const statEntries = Array.from(this.$el.querySelectorAll(".stat-entry"))
+    const name = Array.from(this.$el.querySelectorAll(".name"))
+    const tippyInstances = statEntries.concat(name).map(elem => {
       const tooltip = elem.querySelector(".tooltip-template") as HTMLElement
 
       return tippy(elem, {

src/game/creatures/human.ts

@@ -20,6 +20,9 @@ export class Human extends Creature {
       stats = options.stats
     }
     super(name, new ImproperNoun('human', 'humans'), pronouns, stats, new Set([VoreType.Oral, VoreType.Anal]), new Set([VoreType.Oral, VoreType.Anal]), 25)
+
+    this.title = "Snack"
+    this.desc = "Definitely going on an adventure"
     this.actions.push(new AttackAction(new ConstantDamageFormula(
       new Damage(
         { amount: 20, target: Vigor.Health, type: DamageType.Slash }

src/game/creatures/withers.ts

@@ -165,6 +165,9 @@ class DevourAllAction extends GroupAction {
 }
 
 export class Withers extends Creature {
+  title = "Huge Hellhound"
+  desc = "Will eat your party"
+
   constructor () {
     super(
       new ProperNoun('Withers'),

src/game/entity.ts

@@ -1,5 +1,5 @@
 import { DamageType, Damage, Combatant, Stats, Action, Vigor, VoreStats, VoreStat, Stat, Side, GroupAction } from './combat'
-import { Noun, Pronoun, Adjective, ImproperNoun } from './language'
+import { Noun, Pronoun, Adjective, ImproperNoun, TextLike } from './language'
 import { LogEntry, LogLine } from './interface'
 import { Vore, VoreContainer, VoreType, Container } from './vore'
 
@@ -7,6 +7,8 @@ export enum POV {First, Third}
 
 export interface Entity {
     name: Noun;
+    title: TextLike;
+    desc: TextLike;
     pronouns: Pronoun;
     perspective: POV;
 }
@@ -25,6 +27,8 @@ export interface Mortal extends Entity {
 }
 
 export class Creature extends Vore implements Combatant {
+  title = "Lv. 1 Creature"
+  desc = "Some creature"
     vigors = {
       [Vigor.Health]: 100,
       [Vigor.Stamina]: 100,

src/game/vore.ts

@@ -13,6 +13,8 @@ export enum VoreType {
 
 export abstract class Vore implements Mortal {
   abstract name: Noun;
+  abstract title: TextLike;
+  abstract desc: TextLike;
   abstract kind: Noun;
   abstract pronouns: Pronoun;
   abstract perspective: POV;