Improve the container animations; add text when auto-moving prey on digest/absorb

src/components/ContainerView.vue

@@ -2,8 +2,9 @@
   <div class="vore-container">
     <div class="container-name">{{container.name.capital}}</div>
     <div class="container-contents">
-      <div class="container-prey container-prey-live" v-for="(prey, index) in container.contents" :key="'live-prey-' + index">{{prey.name}}</div>
-      <div class="container-prey container-prey-dead" v-for="(prey, index) in container.digested" :key="'dead-prey-' + index">{{prey.name}}</div>
+      <transition-group name="prey">
+        <div :class="{ 'container-prey': true, 'container-prey-live': prey.vigors.Health > 0, 'container-prey-dead': prey.vigors.Health <= 0 }" v-for="(prey, index) in container.contents.concat(container.digested)" :key="'live-prey-' + index">{{prey.name}}</div>
+      </transition-group>
     </div>
     <canvas class="container-waves"></canvas>
   </div>
@@ -24,10 +25,12 @@ function wiggle (contents: HTMLElement) {
     const prey = elem as HTMLElement
     const preyWidth = prey.clientWidth
     const preyHeight = prey.clientHeight
-    setTimeout(() => {
-      (prey as HTMLElement).style.left = (Math.floor(Math.random() * (width - preyWidth)) + "px");
-      (prey as HTMLElement).style.top = (Math.floor(Math.random() * (height - preyHeight)) + "px")
-    }, Math.random() * 3000)
+    if (!prey.classList.contains("prey-leave-active")) {
+      setTimeout(() => {
+        (prey as HTMLElement).style.left = (Math.floor(Math.random() * (width - preyWidth)) + "px");
+        (prey as HTMLElement).style.top = (Math.floor(Math.random() * (height - preyHeight)) + "px")
+      }, Math.random() * 3000)
+    }
   })
 }
 
@@ -120,28 +123,42 @@ export default class ContainerView extends Vue {
   }
 
   .container-prey {
-    animation: prey-devour-keyframes 1s;
     position: absolute;
-    transition: 3s all;
+    transition: 3s top, 3s left;
     top: 25px;
     left: 25px;
     overflow: hidden;
   }
 
-  @keyframes prey-devour-keyframes {
-    from {
-      opacity: 0;
-    } to {
-      opacity: 1;
-    }
-  }
-
   .container-prey-live {
     color: #eeeeee;
   }
 
   .container-prey-dead {
-    color: #ff8888;
+    color: #ff0000;
+  }
+
+  .prey-enter {
+    opacity: 0;
+  }
+
+  .prey-enter-active {
+    transition: 1s opacity;
+  }
+
+  .prey-leave {
+    opacity: 1;
+  }
+
+  .container-prey-live.prey-leave-active {
+    opacity: 0;
+    transition: 1s opacity, 3s top, 3s left;
+  }
+
+  .container-prey-dead.prey-leave-active {
+    opacity: 0;
+    transition: 4s filter, 4s opacity, 3s top, 3s left;
+    filter: blur(20px)
   }
 
 </style>

src/game/vore.ts

@@ -132,6 +132,9 @@ export interface Container extends Actionable {
   consumeVerb: Verb;
   releaseVerb: Verb;
   struggleVerb: Verb;
+
+  consumeLine: PairLineArgs<Vore, { container: Container }>;
+
 }
 
 export abstract class NormalContainer implements Container {
@@ -291,7 +294,7 @@ export abstract class NormalVoreContainer extends NormalContainer implements Vor
         prey.destroyed = true
         this.digested.push(prey)
         justDigested.push(prey)
-        this.onDigest(prey)
+        damageResults.push(this.onDigest(prey))
       }
     })
 
@@ -312,7 +315,7 @@ export abstract class NormalVoreContainer extends NormalContainer implements Vor
       if (prey.voreStats.Mass === 0) {
         this.absorbed.push(prey)
         justAbsorbed.push(prey)
-        this.onAbsorb(prey)
+        damageResults.push(this.onAbsorb(prey))
       }
     })
 
@@ -466,7 +469,8 @@ export class Womb extends InnerVoreContainer {
 export function biconnectContainers (outer: VoreContainer, inner: VoreContainer): void {
   outer.onDigest = (prey: Vore) => {
     outer.digested = outer.digested.filter(victim => victim !== prey)
-    return inner.consume(prey)
+    inner.digested.push(prey)
+    return inner.consumeLine(inner.owner, prey, { container: inner })
   }
 
   outer.actions.push(