Allow status effects to display numbers

src/components/Statblock.vue

@@ -15,6 +15,8 @@
       </h2>
       <div class="statblock-status-icons">
         <i :class="status.icon" v-for="(status, index) in subject.status" :key="'status' + index">
+          <div class="statblock-status-icon-topleft">{{ status.topLeft }}</div>
+          <div class="statblock-status-icon-bottomright">{{ status.bottomRight }}</div>
           <div class="tooltip-template">
             <div class="tooltip-title">{{ status.name }}</div>
             <div class="tooltip-body">{{ status.desc }}</div>
@@ -301,6 +303,24 @@ a {
 
 .statblock-status-icons > i {
   font-size: 16pt;
+  position: relative;
+}
+
+.statblock-status-icon-topleft,
+.statblock-status-icon-bottomright {
+  position: absolute;
+  font-family: sans-serif;
+  font-weight: 300;
+  color: #999;
+}
+
+.statblock-status-icon-topleft {
+  top: -12pt;
+}
+
+.statblock-status-icon-bottomright {
+  top: 4pt;
+  right: -12pt;
 }
 </style>
 

src/game/combat.ts

@@ -1,5 +1,5 @@
 import { Creature } from './entity'
-import { TextLike, DynText, ToBe } from './language'
+import { TextLike, DynText, ToBe, LiveText } from './language'
 import { LogEntry, LogLines, FAElem, LogLine, FormatEntry, FormatOpt, PropElem, nilLog } from './interface'
 
 export enum DamageType {
@@ -333,6 +333,8 @@ export interface VisibleStatus {
   name: TextLike;
   desc: TextLike;
   icon: TextLike;
+  topLeft: string;
+  bottomRight: string;
 }
 
 /**
@@ -343,6 +345,9 @@ export class ImplicitStatus implements VisibleStatus {
   constructor (public name: TextLike, public desc: TextLike, public icon: string) {
 
   }
+
+  topLeft = ''
+  bottomRight = ''
 }
 
 /**
@@ -357,6 +362,9 @@ export abstract class StatusEffect implements VisibleStatus {
 
   }
 
+  get topLeft () { return '' }
+  get bottomRight () { return '' }
+
   onApply (creature: Creature): LogEntry { return nilLog }
   onRemove (creature: Creature): LogEntry { return nilLog }
   preAction (creature: Creature): { prevented: boolean; log: LogEntry } {
@@ -368,8 +376,13 @@ export abstract class StatusEffect implements VisibleStatus {
 }
 
 export class StunEffect extends StatusEffect {
-  constructor () {
-    super('Stun', 'Stunned!', 'fas fa-sun')
+  constructor (private duration: number) {
+    super('Stun', 'Cannot act!', 'fas fa-sun')
+    this.desc = new DynText('Stunned for your next ', new LiveText(this, x => x.duration), ' actions!')
+  }
+
+  get topLeft () {
+    return this.duration.toString()
   }
 
   onApply (creature: Creature) {
@@ -381,7 +394,7 @@ export class StunEffect extends StatusEffect {
   }
 
   preAction (creature: Creature): { prevented: boolean; log: LogEntry } {
-    if (Math.random() < 0.3) {
+    if (--this.duration <= 0) {
       return {
         prevented: true,
         log: new LogLines(

src/game/creatures/kenzie.ts

@@ -12,7 +12,7 @@ class StompAttack extends AttackAction {
       const damage = this.damage.calc(user, target)
       const targetResult = target.takeDamage(damage)
       const ownResult = this.successLine(user, target, { damage: damage })
-      const effResult = target.applyEffect(new StunEffect())
+      const effResult = target.applyEffect(new StunEffect(3))
       console.log(target.effects)
       return new LogLines(ownResult, targetResult, effResult)
     } else {