From 8c71ca12b8d96813d37465c55ae8d87b227c20cf Mon Sep 17 00:00:00 2001
From: Phillip Thelen <phillip@habitica.com>
Date: Tue, 11 Feb 2025 19:04:28 +0100
Subject: [PATCH] Support sprite version of armoire icon (#15354)

* Use sprite component for armoire sprite

* use gif version of armoire sprite

* fix(import): sprite component path

---------

Co-authored-by: Kalista Payne <sabrecat@gmail.com>
---
 .../client/src/components/achievements/armoireEmpty.vue    | 7 ++++++-
 .../client/src/components/achievements/ultimateGear.vue    | 4 +++-
 website/common/script/content/constants/gifSprites.js      | 1 +
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/website/client/src/components/achievements/armoireEmpty.vue b/website/client/src/components/achievements/armoireEmpty.vue
index f4aa5a008d..1be5bce29e 100644
--- a/website/client/src/components/achievements/armoireEmpty.vue
+++ b/website/client/src/components/achievements/armoireEmpty.vue
@@ -8,7 +8,7 @@
     <div class="modal-body">
       <div class="row">
         <div class="col-6 offset-3">
-          <div class="shop_armoire"></div>
+          <Sprite image-name="shop_armoire" />
           <p>{{ $t('armoireLastItem') }}</p>
           <p>{{ $t('armoireNotesEmpty') }}</p>
         </div>
@@ -34,7 +34,12 @@
 </style>
 
 <script>
+import Sprite from '@/components/ui/sprite';
+
 export default {
+  components: {
+    Sprite,
+  },
   methods: {
     close () {
       this.$root.$emit('bv::hide::modal', 'armoire-empty');
diff --git a/website/client/src/components/achievements/ultimateGear.vue b/website/client/src/components/achievements/ultimateGear.vue
index 9572db7560..4d75db537e 100644
--- a/website/client/src/components/achievements/ultimateGear.vue
+++ b/website/client/src/components/achievements/ultimateGear.vue
@@ -55,7 +55,7 @@
           <p v-html="$t('moreGearAchievements')"></p>
           <br>
         </div>
-        <div class="shop_armoire"></div>
+        <Sprite image-name="shop_armoire" />
         <p v-html="$t('armoireUnlocked')"></p>
         <br>
         <button
@@ -87,11 +87,13 @@
 import achievementFooter from './achievementFooter';
 import achievementAvatar from './achievementAvatar';
 import { mapState } from '@/libs/store';
+import Sprite from '@/components/ui/sprite.vue';
 
 export default {
   components: {
     achievementFooter,
     achievementAvatar,
+    Sprite,
   },
   computed: {
     ...mapState({ user: 'user.data' }),
diff --git a/website/common/script/content/constants/gifSprites.js b/website/common/script/content/constants/gifSprites.js
index aaaef8e6e3..445095ad04 100644
--- a/website/common/script/content/constants/gifSprites.js
+++ b/website/common/script/content/constants/gifSprites.js
@@ -37,4 +37,5 @@ export default [
   'stable_Pet-Gryphatrice-Jubilant',
   'back_special_heroicAureole',
   'Pet-HatchingPotion-Funghi',
+  'shop_armoire',
 ];