fix: update currency display in setting for change class (#15391)

* fix: add neededCurrencyOnly prop

* fix: worked on logic for displaying only gems

* fix: removed gold & hourglasses if neededCurrencyOnly is true

* fix: aligned gem count properly

* fix: updates based on some comments (all comments answered)

* fix: working on displaying only required currency in a new array

* chore: trying to figure out currency logic

* trying to use .find() now

* remove unneeded line of code

* still working on finding/filtering the currency

* trying to move requiredCurrency into a new function (?!)

* fix: added logic to filter for a single currency and fixed CSS

* fix: clean up code

* fix: really clean up code, sheesh

* fix: updated per comments on PR

* fix(style): vertically align elements in your-balance

---------

Co-authored-by: Kalista Payne <[email protected]>

Author: CuriousMagpie

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

@@ -3,6 +3,7 @@
     <div
       v-for="currency of currencies"
       :key="currency.key"
+      :needed-currency-only="neededCurrencyOnly"
       class="d-flex align-items-center"
     >
       <div
@@ -54,6 +55,9 @@ export default {
     amountNeeded: {
       type: Number,
     },
+    neededCurrencyOnly: {
+      type: Boolean,
+    },
   },
   data () {
     return {
@@ -66,34 +70,34 @@ export default {
   },
   computed: {
     currencies () {
-      const currencies = [];
-      currencies.push({
+      const currencies = [{
         type: 'hourglasses',
         icon: this.icons.hourglasses,
         value: this.userHourglasses,
-      });
+      },
 
-      currencies.push({
+      {
         type: 'gems',
         icon: this.icons.gem,
         value: this.userGems,
-      });
+      },
 
-      currencies.push({
+      {
         type: 'gold',
         icon: this.icons.gold,
         value: this.userGold,
-      });
+      }];
 
       for (const currency of currencies) {
-        if (
-          currency.type === this.currencyNeeded
-          && !this.enoughCurrency(this.currencyNeeded, this.amountNeeded)
+        if (currency.type === this.currencyNeeded
+        && !this.enoughCurrency(this.currencyNeeded, this.amountNeeded)
         ) {
           currency.notEnough = true;
         }
       }
-
+      if (this.neededCurrencyOnly) {
+        return currencies.filter(curr => curr.type === this.currencyNeeded);
+      }
       return currencies;
     },
   },

website/client/src/pages/settings/components/yourBalance.vue

@@ -11,6 +11,7 @@
       class="balance-info"
       :currency-needed="currencyNeeded"
       :amount-needed="amountNeeded"
+      :neededCurrencyOnly="true"
     />
   </div>
 </template>

website/client/src/pages/settings/settingRows/classSetting.vue

@@ -66,6 +66,7 @@
           <your-balance
             :amount-needed="amountNeeded"
             currency-needed="gems"
+            class="d-flex align-items-center"
           />
         </div>
       </td>