Work on text formatting

src/components/Combat.vue

@@ -141,6 +141,10 @@ a {
 
 <style>
 
+.log-damage {
+  font-weight: bold;
+}
+
 #log > div {
   color: #888;
   padding-top: 8pt;

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 } from './interface'
+import { LogEntry, LogLines, CompositeLog, FormatText, FormatOpt, LogLine } from './interface'
 
 export interface CombatTest {
   test: (user: Creature, target: Creature) => boolean;
@@ -159,7 +159,11 @@ export class AttackAction extends TogetherAction {
   private test: StatTest
 
   protected successLines: POVPairArgs<Entity, Entity, { damage: Damage }> = new POVPairArgs([
-    [[POV.First, POV.Third], (user, target, args) => new LogLines(`You smack ${target.name} for ${args.damage} damage`)],
+    [[POV.First, POV.Third], (user, target, args) => new LogLine(
+      `You smack ${target.name} for `,
+      new FormatText(`${args.damage}`, FormatOpt.Damage),
+      ` damage`
+    )],
     [[POV.Third, POV.First], (user, target, args) => new LogLines(`${user.name.capital} hits you for ${args.damage} damage`)],
     [[POV.Third, POV.Third], (user, target, args) => new LogLines(`${user.name.capital} hits ${target.name.capital} for ${args.damage} damage`)]
   ])

src/game/interface.ts

@@ -1,31 +1,74 @@
 export interface LogEntry {
-    render: () => HTMLElement[];
+  render: () => HTMLElement[];
 }
 
 export class LogLines implements LogEntry {
-    lines: string[]
-
-    constructor (...lines: string[]) {
-      this.lines = lines
-    }
-
-    render (): HTMLElement[] {
-      return this.lines.map(line => {
-        const div = document.createElement("div")
-        div.innerText = line
-        return div
-      })
-    }
+  lines: string[]
+
+  constructor (...lines: string[]) {
+    this.lines = lines
+  }
+
+  render (): HTMLElement[] {
+    return this.lines.map(line => {
+      const div = document.createElement("div")
+      div.innerText = line
+      return div
+    })
+  }
+}
+
+export enum FormatOpt {
+  Damage = "log-damage"
+}
+
+export class FormatText implements LogEntry {
+  constructor (private line: string, private opt: FormatOpt) {
+
+  }
+
+  render (): HTMLElement[] {
+    const span = document.createElement("span")
+    span.innerText = this.line
+    span.classList.add(this.opt)
+    return [span]
+  }
+}
+
+export class LogLine implements LogEntry {
+  private parts: Array<string|LogEntry>
+
+  constructor (...parts: Array<string|LogEntry>) {
+    this.parts = parts
+  }
+
+  render (): HTMLElement[] {
+    const span = document.createElement("span")
+
+    this.parts.forEach(part => {
+      if (typeof part === "string") {
+        const partSpan = document.createElement("span")
+        partSpan.innerText = part
+        span.appendChild(partSpan)
+      } else {
+        (part as LogEntry).render().forEach(logPart => {
+          span.appendChild(logPart)
+        })
+      }
+    })
+
+    return [span]
+  }
 }
 
 export class CompositeLog implements LogEntry {
-    entries: LogEntry[]
+  entries: LogEntry[]
 
-    constructor (...entries: LogEntry[]) {
-      this.entries = entries
-    }
+  constructor (...entries: LogEntry[]) {
+    this.entries = entries
+  }
 
-    render (): HTMLElement[] {
-      return this.entries.flatMap(e => e.render())
-    }
+  render (): HTMLElement[] {
+    return this.entries.flatMap(e => e.render())
+  }
 }