Add stripes for eaten/dead states; add skull for digested creatures

src/components/Combat.vue

@@ -2,10 +2,10 @@
   <div class="combat-layout">
     <div>{{ encounter.currentMove.name }}</div>
     <div @wheel="horizWheelLeft" class="stat-column" id="left-stats">
-      <Statblock @selectPredator="right = combatant.containedIn.owner" @selectAlly="right = combatant" @select="doSelectLeft(combatant)" class="left-stats" :data-disabled="encounter.currentMove.side === combatant.side && encounter.currentMove !== combatant" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === left" :data-active-ally="combatant === right" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Heroes && !c.destroyed).slice().reverse()" v-bind:key="'left-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
+      <Statblock @selectPredator="right = combatant.containedIn.owner" @selectAlly="right = combatant" @select="doSelectLeft(combatant)" class="left-stats" :data-destroyed="combatant.destroyed" :data-disabled="encounter.currentMove.side === combatant.side && encounter.currentMove !== combatant" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === left" :data-active-ally="combatant === right" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Heroes).slice().reverse()" v-bind:key="'left-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
     </div>
     <div @wheel="horizWheelRight" class="stat-column" id="right-stats">
-      <Statblock @selectPredator="left = combatant.containedIn.owner" @selectAlly="left = combatant" @select="doSelectRight(combatant)" class="right-stats" :data-disabled="encounter.currentMove.side === combatant.side && encounter.currentMove !== combatant" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === right" :data-active-ally="combatant === left" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Monsters && !c.destroyed)" v-bind:key="'right-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
+      <Statblock @selectPredator="left = combatant.containedIn.owner" @selectAlly="left = combatant" @select="doSelectRight(combatant)" class="right-stats" :data-destroyed="combatant.destroyed" :data-disabled="encounter.currentMove.side === combatant.side && encounter.currentMove !== combatant" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === right" :data-active-ally="combatant === left" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Monsters)" v-bind:key="'right-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
     </div>
     <div id="log">
     </div>

src/components/Statblock.vue

@@ -4,7 +4,9 @@
     <div class="statblock-shader statblock-shader-selected"></div>
     <div class="statblock-shader statblock-shader-selected-ally"></div>
     <div class="statblock-shader statblock-shader-current-turn"></div>
-    <div class="statblock-shader statblock-shader-dead"></div>
+    <div class="statblock-shader statblock-shader-dead">
+      <i class="fas fa-skull" />
+    </div>
     <div class="statblock-shader statblock-shader-eaten"></div>
     <div class="statblock-content">
       <h2 class="name">
@@ -273,9 +275,25 @@ a {
   z-index: 0;
 }
 
+.statblock[data-destroyed] > .statblock-content {
+  animation: destroyed 1s;
+  animation-fill-mode: both;
+  overflow: hidden;
+}
+
+@keyframes destroyed {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 .statblock[data-eaten] .statblock-shader-eaten {
-  background: green;
-  opacity: 0.35;
+  background: repeating-linear-gradient(45deg, transparent,  transparent 20px, green 20px, green 40px, transparent 40px);
+  opacity: 0.5;
 }
 
 .statblock[data-active] .statblock-shader-selected {
@@ -289,16 +307,26 @@ a {
 }
 
 .statblock[data-current-turn] .statblock-shader-current-turn {
-  background: #0f0;
-  opacity: 0.3;
+  border: 4px dashed white;
+  border-radius: 8px;
+  width: calc(100% - 8px);
+  heighT: calc(100% - 8px);
+  opacity: 0.75;
 }
 
 .statblock[data-disabled] {
   color: #888;
 }
 
+.statblock-shader-dead i {
+  font-size: 100pt;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .statblock[data-dead] .statblock-shader-dead {
-  background: red;
+  background: repeating-linear-gradient(45deg, red,  red 20px, transparent 20px, transparent 40px, red 40px);
   opacity: 0.50;
 }