refactor petItem - pet image states

website/client/components/inventory/stable/index.vue

@@ -86,7 +86,6 @@
         )
           petItem(
             :item="item",
-            :itemContentClass="getPetItemClass(item)",
             :popoverPosition="'top'",
             :progress="item.progress",
             :emptyItem="!item.isOwned()",
@@ -94,17 +93,6 @@
             :highlightBorder="highlightPet == item.key",
             @click="petClicked(item)"
           )
-            span(slot="popoverContent")
-              div.hatchablePopover(v-if="item.isHatchable()")
-                h4.popover-content-title {{ item.name }}
-                div.popover-content-text(v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })")
-                div.potionEggGroup
-                  div.potionEggBackground
-                    div(:class="'Pet_HatchingPotion_'+item.potionKey")
-                  div.potionEggBackground
-                    div(:class="'Pet_Egg_'+item.eggKey")
-              div(v-else)
-                h4.popover-content-title {{ item.name }}
             template(slot="itemBadge", slot-scope="context")
               starBadge(:selected="item.key === currentPet", :show="item.isOwned()", @click="selectPet(item)")
 
@@ -710,21 +698,6 @@
 
         return groupBy(mounts, groupKey);
       },
-      getPetItemClass (pet) {
-        if (pet.isOwned()) {
-          return `Pet Pet-${pet.key} ${pet.eggKey}`;
-        }
-
-        if (pet.isHatchable()) {
-          return 'PixelPaw';
-        }
-
-        if (pet.mountOwned()) {
-          return `GreyedOut Pet Pet-${pet.key} ${pet.eggKey}`;
-        }
-
-        return 'GreyedOut PixelPaw';
-      },
       hasDrawerTabItems (index) {
         return this.drawerTabs && this.drawerTabs[index].items.length !== 0;
       },

website/client/components/inventory/stable/petItem.vue

@@ -5,7 +5,10 @@ div
       :class="{'item-empty': emptyItem, 'highlight': highlightBorder}",
     )
       slot(name="itemBadge", :item="item")
-      span.item-content(:class="itemContentClass")
+      span.item-content.hatchAgain(v-if="mountOwned && isHatchable")
+        span.egg(:class="eggClass")
+        span.potion(:class="potionClass")
+      span.item-content(v-else, :class="getPetItemClass(item)")
       span.pet-progress-background(v-if="item.isAllowedToFeed() && progress > 0")
         div.pet-progress-bar(v-bind:style="{width: 100 * progress/50 + '%' }")
     span.item-label(v-if="label") {{ label }}
@@ -15,7 +18,17 @@ div
     :triggers="showPopover ? 'hover' : ''",
     :placement="popoverPosition",
   )
-    slot(name="popoverContent", :item="item")
+    div.hatchablePopover(v-if="item.isHatchable()")
+      h4.popover-content-title {{ item.name }}
+      div.popover-content-text(v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })")
+      div.potionEggGroup
+        div.potionEggBackground
+          div(:class="potionClass")
+        div.potionEggBackground
+          div(:class="eggClass")
+    div(v-else)
+      h4.popover-content-title {{ item.name }}
+
 </template>
 
 <style lang="scss">
@@ -32,6 +45,29 @@ div
     height: 4px;
     background-color: #24cc8f;
   }
+
+  .hatchAgain {
+    display: inline-flex;
+    align-items: center;
+
+    width: 94px;
+    height: 94px;
+
+    .egg {
+      position: absolute;
+      left: 4px;
+      top: 14px;
+      z-index: 1;
+      transform: scale(1.2);
+    }
+
+    .potion {
+      position: absolute;
+      right: 4px;
+      top: 14px;
+      transform: scale(1.2);
+    }
+  }
 </style>
 
 <script>
@@ -42,9 +78,6 @@ div
       item: {
         type: Object,
       },
-      itemContentClass: {
-        type: String,
-      },
       label: {
         type: String,
       },
@@ -78,6 +111,43 @@ div
       click () {
         this.$emit('click', {});
       },
+      getPetItemClass (pet) {
+        if (this.mountOwned && !this.isHatchable) {
+          return `GreyedOut Pet Pet-${pet.key} ${pet.eggKey}`;
+        }
+
+        if (this.isOwned) {
+          return `Pet Pet-${pet.key} ${pet.eggKey}`;
+        }
+
+        if (this.isHatchable) {
+          return 'PixelPaw';
+        }
+
+        if (this.mountOwned) {
+          return `GreyedOut Pet Pet-${pet.key} ${pet.eggKey}`;
+        }
+
+        // Can't hatch
+        return 'GreyedOut PixelPaw';
+      },
+    },
+    computed: {
+      potionClass () {
+        return `Pet_HatchingPotion_${this.item.potionKey}`;
+      },
+      eggClass () {
+        return `Pet_Egg_${this.item.eggKey}`;
+      },
+      isOwned () {
+        return this.item.isOwned();
+      },
+      isHatchable () {
+        return this.item.isHatchable();
+      },
+      mountOwned () {
+        return this.item.mountOwned();
+      },
     },
   };
 </script>