use new sprites for pets list

website/client/src/components/inventory/stable/mountItem.vue

@@ -78,7 +78,7 @@ export default {
       return this.isOwned() ? '' : 'GreyedOut';
     },
     imageName () {
-      return this.isOwned() ? `Mount_Icon_${this.item.key}` : 'PixelPaw';
+      return this.isOwned() ? `stable_Mount_Icon_${this.item.key}` : 'PixelPaw';
     },
   },
 };

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

@@ -21,11 +21,12 @@
         ></span><span
           class="potion"
           :class="potionClass"
-        ></span></span><span
-          v-else
+        ></span></span>
+        <Sprite
           class="item-content"
-          :class="getPetItemClass()"
-        ></span><span
+          :class="itemClass()"
+          :imageName="imageName()" />
+        <span
           v-if="isAllowedToFeed() && progress() > 0"
           class="pet-progress-background"
         ><div
@@ -118,8 +119,12 @@ import foolPet from '@/mixins/foolPet';
 import {
   isAllowedToFeed, isHatchable, isOwned, isSpecial,
 } from '../../../libs/createAnimal';
+import Sprite from '@/components/ui/sprite';
 
 export default {
+  components: {
+    Sprite,
+  },
   mixins: [foolPet],
   props: {
     item: {
@@ -168,22 +173,28 @@ export default {
     isAllowedToFeed () {
       return isAllowedToFeed(this.item, this.userItems);
     },
-    getPetItemClass () {
+    itemClass () {
+      if (this.isOwned() || (this.mountOwned() && this.isHatchable()) || this.isSpecial()) {
+        return '';
+      }
+      return 'GreyedOut';
+    },
+    imageName () {
       if (this.isOwned() && some(
         this.currentEventList,
         event => moment().isBetween(event.start, event.end) && event.aprilFools && event.aprilFools === 'Fungi',
       )) {
-        if (this.isSpecial()) return `Pet ${this.foolPet(this.item.key)}`;
+        if (this.isSpecial()) return `stable_${this.foolPet(this.item.key)}`;
         const petString = `${this.item.eggKey}-${this.item.key}`;
-        return `Pet ${this.foolPet(petString)}`;
+        return `stable_${this.foolPet(petString)}`;
       }
 
       if (this.isOwned() || (this.mountOwned() && this.isHatchable())) {
-        return `Pet Pet-${this.item.key} ${this.item.eggKey}`;
+        return `stable_Pet-${this.item.key}`;
       }
 
       if (!this.isOwned() && this.isSpecial()) {
-        return 'GreyedOut PixelPaw';
+        return 'PixelPaw';
       }
 
       if (this.isHatchable()) {
@@ -191,11 +202,11 @@ export default {
       }
 
       if (this.mountOwned()) {
-        return `GreyedOut Pet Pet-${this.item.key} ${this.item.eggKey}`;
+        return `stable_Pet-${this.item.key}`;
       }
 
       // Can't hatch
-      return 'GreyedOut PixelPaw';
+      return 'PixelPaw';
     },
     progress () {
       return this.userItems.pets[this.item.key];

website/client/src/components/modifyInventory.vue

@@ -330,9 +330,9 @@
                   class="list-group-item"
                   ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                 >
-                  <div
+                  <Sprite
                     class="pull-left"
-                    :class="'Mount_Icon_' + mount"
+                    :imageName="mount.key"
                     style="margin-right: 10px"
                   ></div>
                   {{ mount }}
@@ -363,9 +363,9 @@
                   class="list-group-item"
                   ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                 >
-                  <div
+                  <Sprite
                     class="pull-left"
-                    :class="'Mount_Icon_' + mount"
+                    :imageName="mount.key"
                     style="margin-right: 10px"
                   ></div>
                   {{ mount }}
@@ -396,9 +396,9 @@
                   class="list-group-item"
                   ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                 >
-                  <div
+                  <Sprite
                     class="pull-left"
-                    :class="'Mount_Icon_' + mount"
+                    :imageName="mount.key"
                     style="margin-right: 10px"
                   ></div>
                   {{ mount }}
@@ -429,9 +429,9 @@
                   class="list-group-item"
                   ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                 >
-                  <div
+                  <Sprite
                     class="pull-left"
-                    :class="'Mount_Icon_' + mount"
+                    :imageName="mount.key"
                     style="margin-right: 10px"
                   ></div>
                   {{ mount }}
@@ -730,9 +730,13 @@
 import axios from 'axios';
 
 import Content from '@/../../common/script/content';
+import Sprite from '@/components/ui/sprite.vue';
 import { mapState } from '@/libs/store';
 
 export default {
+  components: {
+    Sprite,
+  },
   data () {
     const showInv = {};
     const inv = {

website/client/src/components/ui/sprite.vue

@@ -1,6 +1,7 @@
 <template>
   <img
-  :src="imageUrl()" />
+  v-if="imageName && imageName !== ''"
+  :src="imageUrl()">
 </template>
 
 <script>
@@ -12,7 +13,7 @@ export default {
   },
   methods: {
     imageUrl () {
-      return 'https://habitica-assets.s3.amazonaws.com/mobileApp/images/' + this.imageName + '.png';
+      return `https://habitica-assets.s3.amazonaws.com/mobileApp/images/${this.imageName}.png`;
     },
   },
 };

website/client/src/components/userMenu/profileStats.vue

@@ -124,10 +124,9 @@
               class="box"
               :class="{white: user.items.currentPet}"
             >
-              <div
-                class="Pet"
-                :class="`Pet-${user.items.currentPet}`"
-              ></div>
+              <Sprite
+                :imageName="user.items.currentPet ?
+                  `stable_Pet-${user.items.currentPet}` : ''" />
             </div>
           </div>
           <div class="pet-mount-well-text">
@@ -154,12 +153,10 @@
           <div class="pet-mount-well-image">
             <div
               class="box"
-              :class="{white: user.items.currentMount}"
-            >
+              :class="{white: user.items.currentMount}">
               <Sprite
-                class="mount"
-                :imageName="`Mount_Icon_${user.items.currentMount}`"
-              >
+                :imageName="user.items.currentMount ?
+                  `stable_Mount_Icon_${user.items.currentMount}` : ''" />
             </div>
           </div>
           <div class="pet-mount-well-text">