From 6e6b4c981a405e5e7233cb016f42e3436a14e72b Mon Sep 17 00:00:00 2001
From: Phillip Thelen <phillip@habitica.com>
Date: Fri, 7 Jun 2024 16:59:30 +0200
Subject: [PATCH] add new sprite to item and shopItem component

---
 website/client/src/components/inventory/item.vue       | 10 +++++++---
 website/client/src/components/modifyInventory.vue      |  6 +++---
 .../client/src/components/settings/subscription.vue    |  8 +++++---
 website/client/src/components/shops/itemWithLabel.vue  |  8 +++++---
 website/client/src/components/shops/shopItem.vue       |  8 +++++---
 website/client/src/components/ui/sprite.vue            |  9 ++++++++-
 6 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/website/client/src/components/inventory/item.vue b/website/client/src/components/inventory/item.vue
index a02bb16cec..9dabd96be1 100644
--- a/website/client/src/components/inventory/item.vue
+++ b/website/client/src/components/inventory/item.vue
@@ -21,10 +21,10 @@
         <slot
           name="itemBadge"
           :item="item"
-        ></slot><span
+        ></slot><Sprite
           class="item-content"
-          :class="itemContentClass"
-        ></span>
+          :imageName="itemContentClass"
+         />
       </div><span
         v-if="label"
         class="item-label"
@@ -46,8 +46,12 @@
 
 <script>
 import { v4 as uuid } from 'uuid';
+import Sprite from '@/components/ui/sprite';
 
 export default {
+  components: {
+    Sprite,
+  },
   props: {
     item: {
       type: Object,
diff --git a/website/client/src/components/modifyInventory.vue b/website/client/src/components/modifyInventory.vue
index 5fef794b3c..1522f771dc 100644
--- a/website/client/src/components/modifyInventory.vue
+++ b/website/client/src/components/modifyInventory.vue
@@ -56,11 +56,11 @@
                   class="list-group-item"
                   ng-init="inv.gear[item.key] = user.items.gear.owned[item.key]"
                 >
-                  <div
+                  <Sprite
                     class="pull-left"
-                    :class="'shop_' + item.key"
+                    :imageName="'shop_' + item.key"
                     style="margin-right: 10px"
-                  ></div>
+                  />
                   {{ item.text() }}
                   <div class="clearfix">
                     <label class="radio-inline">
diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index 77cdf29264..8eaaa2be14 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -46,10 +46,10 @@
           </div>
           <div class="row">
             <div class="col-2">
-              <div
-                :class="currentMysterySet"
+              <Sprite
+                :imageName="currentMysterySet"
                 class="mt-n1"
-              ></div>
+              />
             </div>
             <div class="col-10">
               <h3> {{ $t('monthlyMysteryItems') }} </h3>
@@ -628,6 +628,7 @@ import paymentsMixin from '../../mixins/payments';
 import notificationsMixin from '../../mixins/notifications';
 
 import subscriptionOptions from './subscriptionOptions.vue';
+import Sprite from '@/components/ui/sprite';
 
 import amazonPayLogo from '@/assets/svg/amazonpay.svg';
 import applePayLogo from '@/assets/svg/apple-pay-logo.svg';
@@ -648,6 +649,7 @@ import subscriberHourglasses from '@/assets/svg/subscriber-hourglasses.svg';
 export default {
   components: {
     subscriptionOptions,
+    Sprite,
   },
   mixins: [paymentsMixin, notificationsMixin],
   data () {
diff --git a/website/client/src/components/shops/itemWithLabel.vue b/website/client/src/components/shops/itemWithLabel.vue
index 00519d949a..0a90910886 100644
--- a/website/client/src/components/shops/itemWithLabel.vue
+++ b/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>
+            :imageName="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: {
diff --git a/website/client/src/components/shops/shopItem.vue b/website/client/src/components/shops/shopItem.vue
index 5f18283e62..4f4c5745e5 100644
--- a/website/client/src/components/shops/shopItem.vue
+++ b/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>
+            :imageName="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: {
diff --git a/website/client/src/components/ui/sprite.vue b/website/client/src/components/ui/sprite.vue
index 17e6c16e8a..556d64c950 100644
--- a/website/client/src/components/ui/sprite.vue
+++ b/website/client/src/components/ui/sprite.vue
@@ -13,7 +13,14 @@ export default {
   },
   methods: {
     imageUrl () {
-      return `https://habitica-assets.s3.amazonaws.com/mobileApp/images/${this.imageName}.png`;
+      if (!this.imageName) {
+        return '';
+      }
+      let name = this.imageName;
+      if (name.indexOf(' ') !== -1) {
+        name = name.split(' ')[1];
+      }
+      return `https://habitica-assets.s3.amazonaws.com/mobileApp/images/${name}.png`;
     },
   },
 };