Squashed commit of the following:

commit 8ed95731cb
Author: Phillip Thelen <phillip@habitica.com>
Date:   Tue Jul 23 17:59:56 2024 +0200

    fix hatched dialog

commit 53242ad96c
Author: Phillip Thelen <phillip@habitica.com>
Date:   Tue Jul 23 17:38:13 2024 +0200

    fix popover not showing

commit ce4bfd25bd
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Jul 3 17:28:30 2024 +0200

    move item popover to own component

commit 2e6a300c46
Author: Phillip Thelen <phillip@habitica.com>
Date:   Mon Jul 1 18:48:24 2024 +0200

    make scaled sprites look nice

commit a3cbadb8c2
Author: Phillip Thelen <phillip@habitica.com>
Date:   Mon Jul 1 18:48:17 2024 +0200

    fix hatching dialog

commit 0e5126df5e
Author: Phillip Thelen <phillip@habitica.com>
Date:   Mon Jul 1 18:48:12 2024 +0200

    fix popover alignment

commit 7362af9236
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Jun 28 17:07:03 2024 +0200

    fix item display

commit cf353efdb7
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Jun 28 16:59:13 2024 +0200

    fix pet display

commit caf0cba9f2
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Jun 28 15:24:39 2024 +0200

    fix background icon display

commit 3b06febc01
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Jun 26 12:30:04 2024 +0200

    fix sprites for notifications

commit 160b2debdc
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Jun 26 10:35:13 2024 +0200

    fix gear display in profile

commit b200a2f17d
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Jun 26 10:28:11 2024 +0200

    fix sprites for keys to the kennel

commit 3614e7a8fb
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Jun 26 10:28:00 2024 +0200

    fix sprites on avatar customization

commit 35f993d055
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Jun 26 09:18:41 2024 +0200

    fix hover icons

commit 28fc80115e
Author: Phillip Thelen <phillip@habitica.com>
Date:   Tue Jun 11 16:50:37 2024 +0200

    remove console

commit b041c67679
Author: Phillip Thelen <phillip@habitica.com>
Date:   Tue Jun 11 15:18:44 2024 +0200

    more lint fixes

commit f4261d0440
Author: Phillip Thelen <phillip@habitica.com>
Date:   Tue Jun 11 15:18:16 2024 +0200

    fix lint

commit 878ee8f77b
Author: Phillip Thelen <phillip@habitica.com>
Date:   Tue Jun 11 13:23:08 2024 +0200

    support gifs

commit aac24715aa
Author: Phillip Thelen <phillip@habitica.com>
Date:   Tue Jun 11 13:15:52 2024 +0200

    move avatar customization to sprites

commit f4d3663130
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Jun 7 17:25:19 2024 +0200

    Move more sprites out of css

commit 6e6b4c981a
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Jun 7 16:59:30 2024 +0200

    add new sprite to item and shopItem component

commit 8712413f5d
Author: Phillip Thelen <phillip@habitica.com>
Date:   Fri Jun 7 16:37:24 2024 +0200

    use new sprites for pets list

commit 1172893826
Author: Phillip Thelen <phillip@habitica.com>
Date:   Wed Jun 5 09:43:51 2024 +0200

    Begin building new system for loading sprites

website/client/src/components/shops/itemWithLabel.vue

@@ -17,10 +17,10 @@
           :emptyItem="emptyItem"
         ></slot>
         <div class="image">
-          <div
+          <Sprite
             v-once
-            :class="item.class"
-          ></div>
+            :image-name="item.class"
+          />
           <slot
             name="itemImage"
             :item="item"
@@ -157,9 +157,11 @@
 
 <script>
 import { v4 as uuid } from 'uuid';
+import Sprite from '@/components/ui/sprite';
 
 export default {
   components: {
+    Sprite,
   },
   props: {
     item: {

website/client/src/components/shops/market/keysToKennel.vue

@@ -38,26 +38,6 @@
   }
 </style>
 
-<style>
-  .key_to_pets {
-    background-image: url('~@/assets/images/keys/key-to-the-pet-kennels.png');
-    width: 68px;
-    height: 68px;
-  }
-
-  .key_to_mounts {
-    background-image: url('~@/assets/images/keys/key-to-the-mount-kennels.png');
-    width: 68px;
-    height: 68px;
-  }
-
-  .key_to_both {
-    background-image: url('~@/assets/images/keys/keys-to-the-kennels.png');
-    width: 68px;
-    height: 68px;
-  }
-</style>
-
 <script>
 import { beastCount, mountMasterProgress } from '@/../../common/script/count';
 import { mapState } from '@/libs/store';

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -498,38 +498,6 @@ export default {
     hideDialog () {
       this.$root.$emit('bv::hide::modal', 'buy-quest-modal');
     },
-    getDropIcon (drop) {
-      switch (drop.type) {
-        case 'gear':
-          return `shop_${drop.key}`;
-        case 'hatchingPotions':
-          return `Pet_HatchingPotion_${drop.key}`;
-        case 'food':
-          return `Pet_Food_${drop.key}`;
-        case 'eggs':
-          return `Pet_Egg_${drop.key}`;
-        case 'quests':
-          return `inventory_quest_scroll_${drop.key}`;
-        default:
-          return '';
-      }
-    },
-    getDropName (drop) {
-      switch (drop.type) {
-        case 'gear':
-          return this.content.gear.flat[drop.key].text();
-        case 'quests':
-          return this.content.quests[drop.key].text();
-        case 'hatchingPotions':
-          return this.$t('namedHatchingPotion', { type: this.content.hatchingPotions[drop.key].text() });
-        case 'food':
-          return this.content.food[drop.key].text();
-        case 'eggs':
-          return this.content.eggs[drop.key].text();
-        default:
-          return `Unknown type: ${drop.type}`;
-      }
-    },
     purchaseGems () {
       this.$root.$emit('bv::show::modal', 'buy-gems');
     },

website/client/src/components/shops/quests/quest-helper.mixin.js

@@ -19,9 +19,9 @@ export const QuestHelperMixin = {
         case 'quests':
           return `inventory_quest_scroll_${drop.key}`;
         case 'mounts':
-          return `rewards_mount Mount_Icon_${drop.key}`;
+          return `Mount_Icon_${drop.key}`;
         case 'pets':
-          return `rewards_pet Pet-${drop.key}`;
+          return `stable_Pet-${drop.key}`;
         default:
           return `shop_${drop.key}`;
       }

website/client/src/components/shops/quests/questRewards.vue

@@ -39,7 +39,7 @@
         label-class="purple"
       >
         <div slot="itemImage">
-          <div :class="getDropIcon(drop)"></div>
+          <Sprite :image-name="getDropIcon(drop)" />
         </div>
         <div slot="popoverContent">
           <quest-popover :item="drop" />
@@ -92,7 +92,7 @@
           :count="drop.amount"
         />
         <div slot="itemImage">
-          <div :class="getDropIcon(drop)"></div>
+          <Sprite :image-name="getDropIcon(drop)" />
         </div>
         <div slot="popoverContent">
           <equipmentAttributesPopover
@@ -133,6 +133,7 @@ import { QuestHelperMixin } from './quest-helper.mixin';
 import EquipmentAttributesPopover from '@/components/inventory/equipment/attributesPopover';
 import QuestPopover from './questPopover';
 import CountBadge from '../../ui/countBadge';
+import Sprite from '../../ui/sprite';
 
 export default {
   components: {
@@ -141,6 +142,7 @@ export default {
     ItemWithLabel,
     SectionButton,
     EquipmentAttributesPopover,
+    Sprite,
   },
   mixins: [QuestHelperMixin],
   props: ['quest'],

website/client/src/components/shops/shopItem.vue

@@ -41,10 +41,10 @@
           class="suggestedDot"
         ></span>
         <div class="image">
-          <div
+          <Sprite
             v-once
-            :class="item.class"
-          ></div>
+            :image-name="item.class"
+          />
           <slot
             name="itemImage"
             :item="item"
@@ -281,11 +281,13 @@ import svgClock from '@/assets/svg/clock.svg';
 import EquipmentAttributesPopover from '@/components/inventory/equipment/attributesPopover';
 
 import QuestInfo from './quests/questInfo.vue';
+import Sprite from '@/components/ui/sprite';
 
 export default {
   components: {
     EquipmentAttributesPopover,
     QuestInfo,
+    Sprite,
   },
   props: {
     item: {