Added keys to the kennel (#9772)

* Added keys to the kennel

* Added titles and descriptions

website/client/components/shops/buyModal.vue

@@ -85,7 +85,6 @@
 </template>
 
 <style lang="scss">
-
   @import '~client/assets/scss/colors.scss';
   @import '~client/assets/scss/modal.scss';
 
@@ -289,7 +288,7 @@
 
   const hideAmountSelectionForPurchaseTypes = [
     'gear', 'backgrounds', 'mystery_set', 'card',
-    'rebirth_orb', 'fortify', 'armoire',
+    'rebirth_orb', 'fortify', 'armoire', 'keys',
   ];
 
   export default {
@@ -373,6 +372,14 @@
         this.$emit('change', $event);
       },
       buyItem () {
+        // @TODO: I  think we should buying to the items. Turn the items into classes, and use polymorphism
+        if (this.item.buy) {
+          this.item.buy();
+          this.$emit('buyPressed', this.item);
+          this.hideDialog();
+          return;
+        }
+
         if (this.item.currency === 'gems' &&
           !confirm(this.$t('purchaseFor', { cost: this.item.value * this.selectedAmountToBuy }))) {
           return;

website/client/components/shops/market/index.vue

@@ -148,7 +148,6 @@
             span(slot="popoverContent")
               strong(v-if='item.key === "gem" && gemsLeft === 0') {{ $t('maxBuyGems') }}
               h4.popover-content-title {{ item.text }}
-
             template(slot="itemBadge", slot-scope="ctx")
               countBadge(
                 v-if="item.showCount != false",
@@ -157,13 +156,13 @@
               )
               .badge.badge-pill.badge-purple.gems-left(v-if='item.key === "gem"')
                 | {{ gemsLeft }}
-
               span.badge.badge-pill.badge-item.badge-svg(
                 :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}",
                 @click.prevent.stop="togglePinned(ctx.item)"
               )
                 span.svg-icon.inline.icon-12.color(v-html="icons.pin")
 
+          keys-to-kennel(v-if='category.identifier === "special"')
 
         div.fill-height
 
@@ -349,6 +348,7 @@
   import {mapState} from 'client/libs/store';
 
   import ShopItem from '../shopItem';
+  import KeysToKennel from './KeysToKennel';
   import Item from 'client/components/inventory/item';
   import CountBadge from 'client/components/ui/countBadge';
   import Drawer from 'client/components/ui/drawer';
@@ -398,6 +398,7 @@ export default {
     mixins: [notifications, buyMixin, currencyMixin],
     components: {
       ShopItem,
+      KeysToKennel,
       Item,
       CountBadge,
       Drawer,

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

@@ -0,0 +1,155 @@
+<template lang="pug">
+.keys-wrap
+  shopItem(
+    :key="keysToPets.key",
+    :item="keysToPets",
+    :emptyItem="false",
+    popoverPosition="'top'",
+    @click="releasePets()",
+    v-if='this.user.achievements.beastMaster'
+  )
+  shopItem(
+    :key="keysToMounts.key",
+    :item="keysToMounts",
+    :emptyItem="false",
+    popoverPosition="'top'",
+    @click="releaseMounts()",
+    v-if='this.user.achievements.mountMaster'
+  )
+  shopItem(
+    :key="keysToBoth.key",
+    :item="keysToBoth",
+    :emptyItem="false",
+    popoverPosition="'top'",
+    @click="releaseBoth()",
+    v-if='this.user.achievements.mountMaster'
+  )
+</template>
+
+<style lang="scss" scoped>
+  .keys-wrap {
+    width: 400px;
+
+    div {
+      display: inline-block;
+      margin-right: 24px;
+    }
+  }
+</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 { mapState } from 'client/libs/store';
+import ShopItem from '../shopItem';
+
+import releasePets from 'common/script/ops/releasePets';
+import releaseMounts from 'common/script/ops/releaseMounts';
+import releaseBoth from 'common/script/ops/releaseBoth';
+
+import notifications from 'client/mixins/notifications';
+
+export default {
+  mixins: [notifications],
+  components: {
+    ShopItem,
+  },
+  data () {
+    // @TODO: should these be clases
+    return {
+      keysToPets: {
+        key: 'keyToPets',
+        text: this.$t('keyToPets'),
+        notes: this.$t('keyToPetsDesc'),
+        value: 4,
+        currency: 'gems',
+        class: 'key_to_pets',
+        locked: false,
+        purchaseType: 'keys',
+        pinType: 'keys',
+        buy: () => {
+          if (!confirm(this.$t('releasePetsConfirm'))) return;
+          try {
+            releasePets(this.user);
+          } catch (err) {
+            alert(err.message);
+          }
+          this.text(this.$t('releasePetsSuccess'));
+        },
+      },
+      keysToMounts: {
+        key: 'keysToMounts',
+        text: this.$t('keysToMounts'),
+        notes: this.$t('keysToMountsDesc'),
+        value: 4,
+        currency: 'gems',
+        class: 'key_to_mounts',
+        locked: false,
+        purchaseType: 'keys',
+        pinType: 'keys',
+        buy: () => {
+          if (!confirm(this.$t('releaseMountsConfirm'))) return;
+          try {
+            releaseMounts(this.user);
+          } catch (err) {
+            alert(err.message);
+          }
+          this.text(this.$t('releaseMountsSuccess'));
+        },
+      },
+      keysToBoth: {
+        key: 'keysToBoth',
+        text: this.$t('keysToBoth'),
+        notes: this.$t('keysToBothDesc'),
+        value: 6,
+        currency: 'gems',
+        class: 'key_to_both',
+        locked: false,
+        purchaseType: 'keys',
+        pinType: 'keys',
+        buy: () => {
+          if (!confirm(this.$t('releaseBothConfirm'))) return;
+          try {
+            releaseBoth(this.user);
+          } catch (err) {
+            alert(err.message);
+          }
+          this.text(this.$t('releaseBothSuccess'));
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
+  methods: {
+    releasePets () {
+      this.$root.$emit('buyModal::showItem', this.keysToPets);
+    },
+    releaseMounts () {
+      this.$root.$emit('buyModal::showItem', this.keysToMounts);
+    },
+    releaseBoth () {
+      this.$root.$emit('buyModal::showItem', this.keysToBoth);
+    },
+  },
+};
+</script>

website/common/locales/en/pets.json

@@ -124,5 +124,17 @@
   "dragThisPotion": "Drag this <%= potionName %> to an Egg and hatch a new pet!",
   "clickOnEggToHatch": "Click on an Egg to use your <%= potionName %> hatching potion and hatch a new pet!",
   "hatchDialogText": "Pour your <%= potionName %> hatching potion on your <%= eggName %> egg, and it will hatch into a <%= petName %>.",
-  "clickOnPotionToHatch": "Click on a hatching potion to use it on your <%= eggName %> and hatch a new pet!"
+  "clickOnPotionToHatch": "Click on a hatching potion to use it on your <%= eggName %> and hatch a new pet!",
+  "releasePetsConfirm": "Are you sure you want to purchase Keys to the Pets?",
+  "releasePetsSuccess": "Keys to the Pets purchased successfully!",
+  "releaseMountsConfirm": "Are you sure you want to purchase Keys to the Pets?",
+  "releaseMountsSuccess": "Keys to the Pets purchased successfully!",
+  "releaseBothConfirm": "Are you sure you want to purchase Keys to the Kennels?",
+  "releaseBothSuccess": "Keys to the Kennels purchased successfully!",
+  "keyToPets": "Keys to the Pets",
+  "keyToPetsDesc": "Release all standard pets so you can collect them again. (Quest pets and rare pets are not affected.)",
+  "keyToMounts": "Keys to the Mounts",
+  "keyToMountsDesc": "Release all standard mounts so you can collect them again. (Quest mounts and rare mounts are not affected.)",
+  "keyToBoth": "Keys to the Kennel",
+  "keyToBothDesc": "Release all standard pets and mounts so you can collect them again. (Quest pets/mounts and rare pets/mounts are not affected.)"
 }