Added supression support for pet/mount modals and added mount modal (#9882)

* Added supression support for pet/mount modals and added mount modal

* Moved create animal

* Fixed raise pet logic

* Added suppresion for stable hatch modal

* Fixed click paw and added growl

* Fixed confirm. Fixed mount name

* Suppresed confirmation

website/client/components/inventory/items/index.vue

@@ -351,7 +351,10 @@ export default {
     },
     hatchPet (potion, egg) {
       this.$store.dispatch('common:hatch', {egg: egg.key, hatchingPotion: potion.key});
-      this.$root.$emit('hatchedPet::open', createAnimal(egg, potion, 'pet', this.content, this.user.items));
+      this.text(this.$t('hatchedPet', {egg: egg.key, potion: potion.key}));
+      if (this.user.preferences.suppressModals.hatchPet) return;
+      const newPet = createAnimal(egg, potion, 'pet', this.content, this.user.items);
+      this.$root.$emit('hatchedPet::open', newPet);
     },
     onDragEnd () {
       this.currentDraggingPotion = null;

website/client/components/inventory/stable/hatchedPetDialog.vue

@@ -1,22 +1,14 @@
 <template lang="pug">
-
-  b-modal#hatchedPet-modal(
-    :hide-header="true"
-  )
-    div.content(v-if="pet != null")
-      div.dialog-header.title(v-once) {{ $t('hatchedPetGeneric') }}
-
-
-      div.inner-content
-        div.pet-background
-          div(:class="pet.class")
-
-        h4.title {{ pet.name }}
-        div.text(v-if="!hideText", v-markdown="$t('hatchedPetHowToUse')")
-
-        button.btn.btn-primary(@click="close()") {{ $t('onward') }}
-
-    div.clearfix(slot="modal-footer")
+b-modal#hatchedPet-modal(:hide-header="true")
+  div.content(v-if="pet != null")
+    div.dialog-header.title(v-once) {{ $t('hatchedPetGeneric') }}
+    div.inner-content
+      div.pet-background
+        div(:class="pet.class")
+      h4.title {{ pet.name }}
+      div.text(v-if="!hideText", v-markdown="$t('hatchedPetHowToUse')")
+      button.btn.btn-primary(@click="close()") {{ $t('onward') }}
+  div.clearfix(slot="modal-footer")
 </template>
 
 <style lang="scss">
@@ -56,7 +48,6 @@
       color: $purple-200;
     }
   }
-
 </style>
 
 <script>
@@ -82,7 +73,6 @@
         this.pet = item;
         this.$root.$emit('bv::show::modal', 'hatchedPet-modal');
       },
-
       close () {
         this.$emit('closed', this.item);
         this.$root.$emit('bv::hide::modal', 'hatchedPet-modal');

website/client/components/inventory/stable/index.vue

@@ -52,7 +52,6 @@
             :checked="hideMissing",
             @change="updateHideMissing"
           )
-
     .standard-page
       .clearfix
         h1.float-left.mb-4.page-header(v-once) {{ $t('stable') }}
@@ -196,7 +195,6 @@
               @itemDragStart="onDragStart($event, context.item)",
               @itemClick="onFoodClicked($event, context.item)"
             )
-
     b-modal#welcome-modal(
       :ok-only="true",
       :ok-title="$t('gotIt')",
@@ -208,7 +206,6 @@
         div.npc_matt
         h1.page-header(v-once) {{ $t('welcomeStable') }}
         div.content-text(v-once) {{ $t('welcomeStableText') }}
-
     b-modal#hatching-modal(
       @change="resetHatchablePet($event)"
     )
@@ -218,7 +215,6 @@
             div(:class="'Pet_HatchingPotion_'+hatchablePet.potionKey")
           div.potionEggBackground
             div(:class="'Pet_Egg_'+hatchablePet.eggKey")
-
         h4.title {{ hatchablePet.name }}
         div.text(v-html="$t('hatchDialogText', { potionName: hatchablePet.potionName, eggName: hatchablePet.eggName, petName: hatchablePet.name })")
 
@@ -243,6 +239,7 @@
         div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
         div.popover
           div.popover-content {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
+    mount-raised-modal
 </template>
 
 <style lang='scss' scoped>
@@ -494,6 +491,7 @@
   import MountItem from './mountItem.vue';
   import FoodItem from './foodItem';
   import HatchedPetDialog from './hatchedPetDialog';
+  import MountRaisedModal from './mountRaisedModal';
   import Drawer from 'client/components/ui/drawer';
   import toggleSwitch from 'client/components/ui/toggleSwitch';
   import StarBadge from 'client/components/ui/starBadge';
@@ -533,6 +531,7 @@
       CountBadge,
       DrawerSlider,
       HatchedPetDialog,
+      MountRaisedModal,
     },
     directives: {
       resize: ResizeDirective,
@@ -543,10 +542,8 @@
       return {
         viewOptions: {},
         hideMissing: false,
-
         searchText: null,
         searchTextThrottled: '',
-
         // sort has the translation-keys as values
         selectedSortBy: 'standard',
         sortByItems: [
@@ -555,7 +552,6 @@
           'sortByColor',
           'sortByHatchable',
         ],
-
         icons: Object.freeze({
           information: svgInformation,
           close: svgClose,
@@ -573,7 +569,6 @@
     watch: {
       searchText: _throttle(function throttleSearch () {
         let search = this.searchText.toLowerCase();
-
         this.searchTextThrottled = search;
       }, 250),
     },
@@ -584,8 +579,8 @@
         currentMount: 'user.data.items.currentMount',
         userItems: 'user.data.items',
         hideDialog: 'user.data.flags.tutorial.common.mounts',
+        user: 'user.data',
       }),
-
       petGroups () {
         let petGroups = [
           {
@@ -676,7 +671,6 @@
 
         return mountGroups;
       },
-
       drawerTabs () {
         return [
           {
@@ -751,7 +745,6 @@
 
         return animals;
       },
-
       listAnimals (animalGroup, type, hideMissing, sort, searchText) {
         let animals = this.getAnimalList(animalGroup, type);
         let isPetList = type === 'pet';
@@ -805,7 +798,6 @@
 
         return animalRows;
       },
-
       countOwnedAnimals (animalGroup, type) {
         let animals = this.getAnimalList(animalGroup, type);
 
@@ -817,7 +809,6 @@
 
         return `${countOwned.length}/${countAll}`;
       },
-
       pets (animalGroup, hideMissing, sortBy, searchText) {
         let pets = this.listAnimals(animalGroup, 'pet', hideMissing, sortBy, searchText);
 
@@ -835,7 +826,6 @@
 
         return groupBy(pets, groupKey);
       },
-
       mounts (animalGroup, hideMissing, sortBy, searchText) {
         let mounts = this.listAnimals(animalGroup, 'mount', hideMissing, sortBy, searchText);
 
@@ -853,7 +843,6 @@
 
         return groupBy(mounts, groupKey);
       },
-
       getPetItemClass (pet) {
         if (pet.isOwned()) {
           return `Pet Pet-${pet.key} ${pet.eggKey}`;
@@ -869,31 +858,25 @@
 
         return 'GreyedOut PixelPaw';
       },
-
       hasDrawerTabItems (index) {
         return this.drawerTabs && this.drawerTabs[index].items.length !== 0;
       },
-
       // Actions
       updateHideMissing (newVal) {
         this.hideMissing = newVal;
       },
-
       selectPet (item) {
         this.$store.dispatch('common:equip', {key: item.key, type: 'pet'});
       },
-
       selectMount (item) {
         this.$store.dispatch('common:equip', {key: item.key, type: 'mount'});
       },
-
       hatchPet (pet) {
-        this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
-
         this.closeHatchPetDialog();
-        // this.$root.$emit('hatchedPet::open', pet);
-      },
 
+        this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
+        this.text(this.$t('hatchedPet', {egg: pet.eggKey, potion: pet.potionKey}));
+      },
       onDragStart (ev, food) {
         this.currentDraggingFood = food;
 
@@ -903,7 +886,6 @@
 
         dragEvent.dataTransfer.setDragImage(itemRef, -20, -20);
       },
-
       onDragOver (ev, pet) {
         if (!pet.isAllowedToFeed()) {
           ev.dropable = false;
@@ -911,7 +893,6 @@
           this.highlightPet = pet.key;
         }
       },
-
       async onDrop (ev, pet) {
         this.highlightPet = '';
 
@@ -922,11 +903,9 @@
         this.currentDraggingFood = null;
         this.highlightPet = '';
       },
-
       onDragLeave () {
         this.highlightPet = '';
       },
-
       petClicked (pet) {
         if (this.currentDraggingFood !== null) {
           if (pet.isAllowedToFeed()) {
@@ -944,18 +923,22 @@
           if (!pet.isHatchable()) {
             return;
           }
-          // opens the hatch dialog
-          this.hatchablePet = pet;
 
+          if (this.user.preferences.suppressModals.raisePet) {
+            this.hatchPet(pet);
+            return;
+          }
+
+          // Confirm
+          this.hatchablePet = pet;
           this.$root.$emit('bv::show::modal', 'hatching-modal');
         }
       },
       async feedAction (petKey, foodKey) {
         const result = await this.$store.dispatch('common:feed', {pet: petKey, food: foodKey});
-
-        if (result.message) {
-          this.text(result.message);
-        }
+        if (result.message) this.text(result.message);
+        if (this.user.preferences.suppressModals.raisePet) return;
+        if (this.user.items.pets[petKey] === -1) this.$root.$emit('habitica::mount-raised', petKey);
       },
       closeHatchPetDialog () {
         this.$root.$emit('bv::hide::modal', 'hatching-modal');
@@ -986,7 +969,6 @@
           lastMouseMoveEvent = $event;
         }
       },
-
       hideFlag () {
         this.$store.dispatch('user:set', {
           'flags.tutorial.common.mounts': true,

website/client/components/inventory/stable/mountRaisedModal.vue

@@ -0,0 +1,97 @@
+<template lang="pug">
+b-modal#mount-raised-modal(:hide-header="true")
+  div.content(v-if="mount != null")
+    div.dialog-header.title(v-once) {{ $t('raisedPet', {pet: mount.text()}) }}
+    div.inner-content
+      div.pet-background
+        .mount(:class="`Mount_Icon_${mount.key}`")
+      h4.title {{ mount.text() }}
+      button.btn.btn-primary.onward(@click="close()") {{ $t('onward') }}
+  div.clearfix(slot="modal-footer")
+</template>
+
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/modal.scss';
+
+  #mount-raised-modal {
+    @include centeredModal();
+
+    .modal-dialog {
+      width: 330px;
+    }
+
+    .content {
+      text-align: center;
+    }
+
+    .inner-content {
+      margin: 24px auto auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .pet-background {
+      width: 112px;
+      height: 112px;
+      border-radius: 4px;
+      background-color: $gray-700;
+    }
+
+    .mount {
+      margin: 0 auto;
+    }
+
+    .dialog-header {
+      color: $purple-200;
+    }
+
+    .onward {
+      margin-top: 1em;
+      margin-bottom: 1em;
+    }
+  }
+</style>
+
+
+<script>
+  import markdownDirective from 'client/directives/markdown';
+  import {mountInfo} from 'common/script/content/stable';
+
+  export default {
+    data () {
+      return {
+        mount: null,
+      };
+    },
+    directives: {
+      markdown: markdownDirective,
+    },
+    created () {
+
+    },
+    mounted () {
+      this.$root.$on('habitica::mount-raised', this.openDialog);
+    },
+    destroyed () {
+      this.$root.$off('habitica::mount-raised', this.openDialog);
+    },
+    methods: {
+      openDialog (mountKey) {
+        this.mount = mountInfo[mountKey];
+        this.$root.$emit('bv::show::modal', 'mount-raised-modal');
+      },
+      close () {
+        this.$root.$emit('bv::hide::modal', 'mount-raised-modal');
+        this.mount = null;
+      },
+    },
+    props: {
+      hideText: {
+        type: Boolean,
+      },
+    },
+  };
+</script>

website/client/store/actions/common.js

@@ -26,7 +26,6 @@ export function hatch (store, params) {
 export async function feed (store, params) {
   const user = store.state.user.data;
   feedOp(user, {params});
-
   const response = await axios
     .post(`/api/v3/user/feed/${params.pet}/${params.food}`);
   return response.data;