Add nicer damage rendering

src/components/Combat.vue

@@ -158,12 +158,14 @@ div.enemy-move {
 
 div.player-move {
   text-align: start;
-  margin-left: 48pt;
+  margin-right: 25%;
+  margin-left: 5%;
 }
 
 div.enemy-move {
   text-align: end;
-  margin-right: 48pt;
+  margin-left: 25%;
+  margin-right: 5%;
 }
 
 #log > div.enemy-move:nth-last-child(7) {

src/game/combat.ts

@@ -1,7 +1,7 @@
 import { Creature, POV, Entity } from './entity'
 import { POVPair, POVPairArgs } from './language'
 import { Container } from './vore'
-import { LogEntry, LogLines, CompositeLog, FormatText, FormatOpt, LogLine } from './interface'
+import { LogEntry, LogLines, CompositeLog, FAElem, LogLine } from './interface'
 
 export interface CombatTest {
   test: (user: Creature, target: Creature) => boolean;
@@ -80,6 +80,34 @@ export interface DamageInstance {
   target: Vigor;
 }
 
+export enum Vigor {
+  Health = "Health",
+  Stamina = "Stamina",
+  Willpower = "Willpower"
+}
+
+export const VigorIcons: {[key in Vigor]: string} = {
+  [Vigor.Health]: "fas fa-heart",
+  [Vigor.Stamina]: "fas fa-bolt",
+  [Vigor.Willpower]: "fas fa-brain"
+}
+
+export type Vigors = {[key in Vigor]: number}
+
+export enum Stat {
+    STR = 'Strength',
+    DEX = 'Dexterity',
+    CON = 'Constitution'
+}
+
+export type Stats = {[key in Stat]: number}
+
+export const StatIcons: {[key in Stat]: string} = {
+  [Stat.STR]: 'fas fa-fist-raised',
+  [Stat.DEX]: 'fas fa-feather',
+  [Stat.CON]: 'fas fa-heartbeat'
+}
+
 export class Damage {
   readonly damages: DamageInstance[]
 
@@ -104,26 +132,22 @@ export class Damage {
   toString (): string {
     return this.damages.map(damage => damage.amount + " " + damage.type).join("/")
   }
-}
 
-export enum Vigor {
-  Health,
-  Stamina,
-  Willpower
-}
+  render (): LogEntry {
+    return new LogLine(...this.damages.flatMap(instance => {
+      return [instance.amount.toString(), new FAElem(VigorIcons[instance.target]), " " + instance.type]
+    }))
+  }
 
-export enum Stat {
-    STR = 'Strength',
-    DEX = 'Dexterity',
-    CON = 'Constitution'
-}
+  renderShort (): LogEntry {
+    const totals: Vigors = Object.keys(Vigor).reduce((total: any, key) => { total[key] = 0; return total }, {})
 
-export type Stats = {[key in Stat]: number}
+    this.damages.forEach(instance => {
+      totals[instance.target] += instance.amount
+    })
 
-export const StatIcons: {[key in Stat]: string} = {
-  [Stat.STR]: 'fas fa-fist-raised',
-  [Stat.DEX]: 'fas fa-feather',
-  [Stat.CON]: 'fas fa-heartbeat'
+    return new LogLine(...Object.keys(Vigor).flatMap(key => totals[key as Vigor] === 0 ? [] : [totals[key as Vigor].toString(), new FAElem(VigorIcons[key as Vigor])]))
+  }
 }
 
 export interface Combatant {
@@ -175,18 +199,15 @@ export class AttackAction extends TogetherAction {
   protected successLines: POVPairArgs<Entity, Entity, { damage: Damage }> = new POVPairArgs([
     [[POV.First, POV.Third], (user, target, args) => new LogLine(
       `You smack ${target.name} for `,
-      new FormatText(`${args.damage}`, FormatOpt.Damage),
-      ` damage`
+      args.damage.renderShort()
     )],
     [[POV.Third, POV.First], (user, target, args) => new LogLine(
       `${user.name.capital} smacks you for `,
-      new FormatText(`${args.damage}`, FormatOpt.Damage),
-      ` damage`
+      args.damage.renderShort()
     )],
     [[POV.Third, POV.Third], (user, target, args) => new LogLine(
       `${user.name.capital} smacks ${target.name} for `,
-      new FormatText(`${args.damage}`, FormatOpt.Damage),
-      ` damage`
+      args.damage.renderShort()
     )]
   ])
 

src/game/creatures/player.ts

@@ -7,7 +7,7 @@ export class Player extends Creature {
   constructor () {
     super(new ProperNoun('The Dude'), TheyPronouns, { [Stat.STR]: 20, [Stat.DEX]: 20, [Stat.CON]: 20 }, new Set([VoreType.Oral]), new Set([VoreType.Oral, VoreType.Anal]), 50)
 
-    this.actions.push(new AttackAction(new Damage({ type: DamageType.Pierce, amount: 20, target: Vigor.Health })))
+    this.actions.push(new AttackAction(new Damage({ type: DamageType.Pierce, amount: 20, target: Vigor.Health }, { type: DamageType.Pierce, amount: 20, target: Vigor.Stamina })))
 
     const stomach = new Stomach(this, 100, new Damage({ amount: 100000000000, type: DamageType.Acid, target: Vigor.Health }, { amount: 10, type: DamageType.Crush, target: Vigor.Health }))
 

src/game/interface.ts

@@ -61,6 +61,18 @@ export class LogLine implements LogEntry {
   }
 }
 
+export class FAElem implements LogEntry {
+  constructor (private name: string) {
+
+  }
+
+  render (): HTMLElement[] {
+    const i = document.createElement("i")
+    this.name.split(" ").map(cls => i.classList.add(cls))
+    return [i]
+  }
+}
+
 export class CompositeLog implements LogEntry {
   entries: LogEntry[]