Rearrange the Explore view; make prey names float around in container views

src/components/ContainerView.vue

@@ -1,13 +1,10 @@
 <template>
-  <div v-show="container.fullness > 0" class="vore-container">
+  <div class="vore-container">
     <div class="container-name">{{container.name.capital}}</div>
-    <div class="container-fullness">{{container.fullness}} / {{container.capacity}}</div>
-    <p v-if="container.contents.length > 0">Live prey:</p>
-    <div class="container-prey" v-for="(prey, index) in container.contents" :key="'live-prey-' + index">{{prey.name}}</div>
-    <p v-if="container.digested.length > 0">Digested:</p>
-    <div class="container-prey" v-for="(prey, index) in container.digested" :key="'dead-prey-' + index">{{prey.name}}</div>
-    <p v-if="container.absorbed.length > 0">Absorbed:</p>
-    <div class="container-prey" v-for="(prey, index) in container.absorbed" :key="'absorbed-prey-' + index">{{prey.name}}</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>
+    </div>
     <canvas class="container-waves"></canvas>
   </div>
 </template>
@@ -19,9 +16,24 @@ import { POV } from '@/game/language'
 import { Stats, Stat } from '@/game/combat'
 import { Container, VoreContainer, Vore } from '@/game/vore'
 
+function wiggle (contents: HTMLElement) {
+  setTimeout(() => wiggle(contents), 3000)
+  const width = contents.clientWidth
+  const height = contents.clientHeight
+  contents.querySelectorAll(".container-prey").forEach(elem => {
+    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)
+  })
+}
+
 // yoinked from https://jsfiddle.net/yckart/0adfw47y/
 
-function draw (delta: number, dt: number, total: number, parent: HTMLElement, canvas: HTMLCanvasElement, container: VoreContainer) {
+function draw (delta: number, dt: number, total: number, parent: HTMLElement, canvas: HTMLCanvasElement, container: VoreContainer, smoothedFraction: number, smoothedLiveliness: number) {
   const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
 
   canvas.width = parent.clientWidth
@@ -32,14 +44,17 @@ function draw (delta: number, dt: number, total: number, parent: HTMLElement, ca
   const deadFraction = container.digested.reduce((total: number, prey: Vore) => total + prey.voreStats.Bulk, 0) / container.capacity
   const liveliness = livingFraction + deadFraction * 0.5
 
-  total += dt * liveliness
+  smoothedFraction = smoothedFraction * 0.995 + fraction * 0.005
+  smoothedLiveliness = smoothedLiveliness * 0.995 + liveliness * 0.005
+
+  total += dt * smoothedLiveliness
 
-  requestAnimationFrame((newDelta: number) => draw(newDelta, newDelta - delta, total, parent, canvas, container))
+  requestAnimationFrame((newDelta: number) => draw(newDelta, newDelta - delta, total, parent, canvas, container, smoothedFraction, smoothedLiveliness))
 
-  const randomLeft = Math.abs(Math.pow(Math.sin(total / 1000), 2)) * fraction * 100 + (1 - fraction) * canvas.height
-  const randomRight = Math.abs(Math.pow(Math.sin((total / 1000) + 10), 2)) * fraction * 100 + (1 - fraction) * canvas.height
-  const randomLeftConstraint = Math.abs(Math.pow(Math.sin((total / 1000) + 2), 2)) * fraction * 100 + (1 - fraction) * canvas.height
-  const randomRightConstraint = Math.abs(Math.pow(Math.sin((total / 1000) + 1), 2)) * fraction * 100 + (1 - fraction) * canvas.height
+  const randomLeft = Math.abs(Math.pow(Math.sin(total / 1000), 2)) * smoothedFraction * 100 + (1 - smoothedFraction) * canvas.height
+  const randomRight = Math.abs(Math.pow(Math.sin((total / 1000) + 10), 2)) * smoothedFraction * 100 + (1 - smoothedFraction) * canvas.height
+  const randomLeftConstraint = Math.abs(Math.pow(Math.sin((total / 1000) + 2), 2)) * smoothedFraction * 100 + (1 - smoothedFraction) * canvas.height
+  const randomRightConstraint = Math.abs(Math.pow(Math.sin((total / 1000) + 1), 2)) * smoothedFraction * 100 + (1 - smoothedFraction) * canvas.height
 
   ctx.beginPath()
   ctx.moveTo(0, randomLeft)
@@ -65,8 +80,10 @@ export default class ContainerView extends Vue {
       canvas.width = (this.$el as HTMLElement).clientWidth
       canvas.height = (this.$el as HTMLElement).clientHeight
       canvas.width = canvas.width + 0
-      requestAnimationFrame((delta: number) => draw(delta, delta, Math.random() * 1000, this.$el as HTMLElement, canvas, (this.container as VoreContainer)))
+      requestAnimationFrame((delta: number) => draw(delta, delta, Math.random() * 1000, this.$el as HTMLElement, canvas, (this.container as VoreContainer), 0, 0))
     }
+
+    wiggle(this.$el.querySelector(".container-contents") as HTMLElement)
   }
 }
 
@@ -75,8 +92,11 @@ export default class ContainerView extends Vue {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
   .vore-container {
+    flex: 1 1;
     position: relative;
-    min-width: 100pt;
+    min-height: 100pt;
+    display: flex;
+    flex-direction: column;
   }
   .container-name {
     margin: 8pt;
@@ -94,4 +114,34 @@ export default class ContainerView extends Vue {
     left: 0;
   }
 
+  .container-contents {
+    position: relative;
+    flex: 1;
+  }
+
+  .container-prey {
+    animation: prey-devour-keyframes 1s;
+    position: absolute;
+    transition: 3s all;
+    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;
+  }
+
 </style>

src/components/Explore.vue

@@ -96,15 +96,17 @@ export default class Explore extends Vue {
   flex: 10;
   position: relative;
   display: grid;
-  grid-template-areas: "containers containers statblock"
-                       "log log worldinfo"
-                       "log log info     "
-                       "log log choices  "
-                       "nav nav choices  ";
-  grid-template-rows: fit-content(30%) fit-content(250pt) 2fr 1fr 1fr;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-areas: "worldinfo log log statblock"
+                       "worldinfolog log log containers"
+                       "info log log choices     "
+                       "info log log choices  "
+                       "info nav nav choices  ";
+  grid-template-rows: fit-content(50%) fit-content(30%) 2fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
   width: 100%;
   height: 100%;
+  max-width: 1500px;
+  margin: auto;
   overflow: hidden;
 }
 
@@ -112,11 +114,15 @@ export default class Explore extends Vue {
   grid-area: containers;
   display: flex;
   flex-direction: row;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
+  flex-wrap: wrap;
+  overflow-x: hidden;
   justify-content: flex-end;
 }
 
+.explore-containers > .vore-container {
+  flex-basis: 25%;
+}
+
 .explore-log {
   grid-area: log;
   background: #222;
@@ -171,7 +177,6 @@ export default class Explore extends Vue {
   grid-template-columns: 1fr 1fr 1fr;
   width: calc(100% - 16px);
   height: calc(100% - 16px);
-  max-width: 1000px;
   justify-self: end;
 }