From 72dee9c69de074a8d534394bbe395dd92dc511b4 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Thu, 6 Aug 2020 20:46:25 -0400
Subject: [PATCH] Add transitions for the explore view containers

---
 src/components/Explore.vue | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/Explore.vue b/src/components/Explore.vue
index af6d099..a28e41b 100644
--- a/src/components/Explore.vue
+++ b/src/components/Explore.vue
@@ -10,7 +10,9 @@
     </div>
     <Statblock :subject="world.player" :initiative="0" />
     <div class="explore-containers">
-      <ContainerView :container="container" v-for="(container, index) in world.player.containers" :key="'explore-container-' + index" />
+      <transition-group name="container">
+        <ContainerView v-show="container.contents.concat(container.digested).length > 0" :container="container" v-for="(container, index) in world.player.containers" :key="'explore-container-' + index" />
+      </transition-group>
     </div>
     <div class="explore-info">
       <h2 class="location-name">{{ location.name.capital }}</h2>
@@ -112,14 +114,14 @@ export default class Explore extends Vue {
 .explore-containers {
   grid-area: containers;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: wrap;
   overflow-x: hidden;
-  justify-content: flex-end;
 }
 
 .explore-containers > .vore-container {
   flex-basis: 25%;
+  max-height: 125px;
 }
 
 .explore-log {
@@ -191,6 +193,24 @@ export default class Explore extends Vue {
   flex-direction: column;
   overflow-y: scroll;
 }
+
+.container-enter {
+  opacity: 0;
+}
+
+.container-enter-active {
+  transition: opacity 2s;
+}
+
+.container-move {
+  transition: transform 1s;
+}
+
+.container-leave-active {
+  transition: opacity 5s;
+  opacity: 0;
+}
+
 </style>
 
 <style>