From 1ac4466c24250f3f1904fb06622909527ade4d80 Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Thu, 2 Mar 2023 14:33:27 -0500
Subject: [PATCH] trying to make more components for the buy/sell modals

---
 habitica-images                               |  2 +-
 .../assets/css/sprites/spritesmith-main.css   | 55 +++++++++++
 .../client/src/components/shared/itemCost.vue | 93 +++++++++++++++++++
 .../src/components/shared/purchaseTotal.vue   |  0
 .../client/src/components/shops/buyModal.vue  |  1 +
 5 files changed, 150 insertions(+), 1 deletion(-)
 create mode 100644 website/client/src/components/shared/itemCost.vue
 create mode 100644 website/client/src/components/shared/purchaseTotal.vue

diff --git a/habitica-images b/habitica-images
index 0393ffa0b9..fae9d4f130 160000
--- a/habitica-images
+++ b/habitica-images
@@ -1 +1 @@
-Subproject commit 0393ffa0b95ce9ed4fa04646db56bf1882e29bb1
+Subproject commit fae9d4f1301959a14a07d74d86b828175209290a
diff --git a/website/client/src/assets/css/sprites/spritesmith-main.css b/website/client/src/assets/css/sprites/spritesmith-main.css
index b65af5b396..cc08b248ed 100644
--- a/website/client/src/assets/css/sprites/spritesmith-main.css
+++ b/website/client/src/assets/css/sprites/spritesmith-main.css
@@ -1369,6 +1369,11 @@
   width: 141px;
   height: 147px;
 }
+.background_jungle_watering_hole {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_jungle_watering_hole.png');
+  width: 141px;
+  height: 147px;
+}
 .background_kelp_forest {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_kelp_forest.png');
   width: 141px;
@@ -1404,6 +1409,11 @@
   width: 141px;
   height: 147px;
 }
+.background_mangrove_forest {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_mangrove_forest.png');
+  width: 141px;
+  height: 147px;
+}
 .background_marble_temple {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_marble_temple.png');
   width: 141px;
@@ -1514,6 +1524,11 @@
   width: 141px;
   height: 147px;
 }
+.background_old_timey_basketball_court {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_old_timey_basketball_court.png');
+  width: 141px;
+  height: 147px;
+}
 .background_on_a_castle_wall {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_on_a_castle_wall.png');
   width: 141px;
@@ -3025,6 +3040,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_jungle_watering_hole {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_jungle_watering_hole.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_kelp_forest {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_kelp_forest.png');
   width: 68px;
@@ -3060,6 +3080,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_mangrove_forest {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_mangrove_forest.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_marble_temple {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_marble_temple.png');
   width: 68px;
@@ -3170,6 +3195,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_old_timey_basketball_court {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_old_timey_basketball_court.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_on_a_castle_wall {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_on_a_castle_wall.png');
   width: 68px;
@@ -18320,6 +18350,11 @@
   width: 90px;
   height: 90px;
 }
+.broad_armor_armoire_basketballUniform {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_basketballUniform.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_armoire_bathtub {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_bathtub.png');
   width: 114px;
@@ -19205,6 +19240,11 @@
   width: 114px;
   height: 90px;
 }
+.shield_armoire_basketball {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_basketball.png');
+  width: 114px;
+  height: 90px;
+}
 .shield_armoire_birthdayBanner {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_birthdayBanner.png');
   width: 114px;
@@ -19575,6 +19615,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_armor_armoire_basketballUniform {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_basketballUniform.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_armor_armoire_bathtub {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_bathtub.png');
   width: 68px;
@@ -20475,6 +20520,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_shield_armoire_basketball {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_shield_armoire_basketball.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_shield_armoire_birthdayBanner {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_shield_armoire_birthdayBanner.png');
   width: 68px;
@@ -21305,6 +21355,11 @@
   width: 90px;
   height: 90px;
 }
+.slim_armor_armoire_basketballUniform {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_basketballUniform.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_armoire_bathtub {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_bathtub.png');
   width: 114px;
diff --git a/website/client/src/components/shared/itemCost.vue b/website/client/src/components/shared/itemCost.vue
new file mode 100644
index 0000000000..c85c19ee82
--- /dev/null
+++ b/website/client/src/components/shared/itemCost.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="item-cost">
+    <span
+      class="cost"
+      :class="getPriceClass()"
+    >
+      <span
+        class="svg-icon inline icon-24"
+        aria-hidden="true"
+        v-html="icons[getPriceClass()]"
+      >
+      </span>
+      <span
+        :class="getPriceClass()"
+      >{{ item.value }}</span>
+    </span>
+  </div>
+</template>
+
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+  @import '~@/assets/scss/mixins.scss';
+
+.item-cost {
+ padding-bottom: 16px;
+}
+
+  .cost {
+    height: 40px;
+    font-size: 1.25rem;
+    font-weight: bold;
+    line-height: 1.4;
+    vertical-align: middle;
+
+    &.gems {
+      color: $gems-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(36, 204, 143, 0.15);
+    }
+
+    &.gold {
+      color: $gold-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(255, 190, 93, 0.15);
+    }
+
+    &.hourglasses {
+      color: $hourglass-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(41, 149, 205, 0.15);
+    }
+  }
+</style>
+
+<script>
+import svgClose from '@/assets/svg/close.svg';
+import svgGold from '@/assets/svg/gold.svg';
+import svgGem from '@/assets/svg/gem.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close: svgClose,
+        gold: svgGold,
+        gems: svgGem,
+      }),
+      selectedAmountToBuy: 1,
+      selectedAmount: 1,
+    };
+  },
+  methods: {
+    getPriceClass () {
+      if (this.priceType && this.icons[this.priceType]) {
+        return this.priceType;
+      } if (this.item.currency && this.icons[this.item.currency]) {
+        return this.item.currency;
+      }
+      return 'gold';
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/shared/purchaseTotal.vue b/website/client/src/components/shared/purchaseTotal.vue
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 08384510ed..3ae7e6f61a 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -106,6 +106,7 @@
               >{{ item.value }}</span>
             </span>
           </div>
+
           <div
             v-if="showAmountToBuy(item)"
             class="how-many-to-buy"