[WIP] multiplefixes for items / equipment / stable (#8938)

* highlight egg on dragging a potion - hide popover while dragging - flat show more button

* Show EquipGearModal on Item-Click - misc fixes

* disable dragging

* hide egg notes while dragging

* rename headgear to helm

* sort equipment by name & attributes

* set welcome-dialog flag

* show feeding notification

* select animals on click

* add hatchable popover back

* fix stable sortby A-Z

* remove property brackets

website/client/assets/scss/item.scss

@@ -46,6 +46,10 @@
   &.highlight {
     box-shadow: 0 0 8px 8px rgba($black, 0.16), 0 5px 10px 0 rgba($black, 0.12) !important;
   }
+
+  &.highlight-border {
+    border-color: $purple-500;
+  }
 }
 
 .flat .item {

website/client/assets/scss/modal.scss

@@ -22,7 +22,6 @@
     line-height: 1.2;
     text-align: center;
     color: $gray-50;
-    display: inline-block;
   }
 
   .text {

website/client/components/inventory/equipment/equipGearModal.vue

@@ -0,0 +1,165 @@
+<template lang="pug">
+  b-modal#equipgear-modal(
+    :visible="true",
+    v-if="item != null",
+    :hide-header="true",
+    @change="onChange($event)"
+  )
+    div.close
+      span.svg-icon.inline.icon-10(aria-hidden="true", v-html="icons.close", @click="hideDialog()")
+
+    div.content(v-if="item != null")
+
+      div.inner-content
+        avatar(
+          :member="user",
+          :avatarOnly="true",
+          :withBackground="true",
+          :overrideAvatarGear="memberOverrideAvatarGear(item)"
+        )
+
+        h4.title {{ itemText }}
+        div.text(v-html="itemNotes")
+
+        equipmentAttributesGrid.bordered(
+          :item="item",
+          v-if="attributesGridVisible"
+        )
+
+        button.btn.btn-primary(@click="equipItem()") {{ $t(isEquipped ? 'unequip' : 'equip') }}
+
+    div.clearfix(slot="modal-footer")
+
+
+</template>
+<style lang="scss">
+
+  @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/modal.scss';
+
+  #equipgear-modal {
+    @include centeredModal();
+
+    .content {
+      text-align: center;
+    }
+
+    .item-wrapper {
+      margin-bottom: 0 !important;
+    }
+
+    .inner-content {
+      margin: 33px auto auto;
+      width: 282px;
+    }
+
+    .bordered {
+      border-radius: 2px;
+      background-color: #f9f9f9;
+      margin-bottom: 24px;
+      padding: 24px 24px 10px;
+    }
+
+    .avatar {
+      display: inline-block;
+      cursor: inherit;
+    }
+
+    .content-text {
+      font-family: 'Roboto', sans-serif;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 1.43;
+
+      width: 400px;
+    }
+
+    button.btn.btn-primary {
+      margin-top: 24px;
+      margin-bottom: 24px;
+    }
+  }
+</style>
+
+<script>
+  import { mapState } from 'client/libs/store';
+  import bModal from 'bootstrap-vue/lib/components/modal';
+
+  import svgClose from 'assets/svg/close.svg';
+
+  import Avatar from 'client/components/avatar';
+  import EquipmentAttributesGrid from 'client/components/shops/market/equipmentAttributesGrid.vue';
+
+  export default {
+    components: {
+      bModal,
+      Avatar,
+      EquipmentAttributesGrid,
+    },
+    data () {
+      return {
+        icons: Object.freeze({
+          close: svgClose,
+        }),
+      };
+    },
+    computed: {
+      ...mapState({
+        content: 'content',
+        user: 'user.data',
+      }),
+      itemText () {
+        if (this.item.text instanceof Function) {
+          return this.item.text();
+        } else {
+          return this.item.text;
+        }
+      },
+      itemNotes () {
+        if (this.item.notes instanceof Function) {
+          return this.item.notes();
+        } else {
+          return this.item.notes;
+        }
+      },
+      attributesGridVisible () {
+        if (this.costumeMode) {
+          return false;
+        }
+
+        return true;
+      },
+    },
+    methods: {
+      onChange ($event) {
+        this.$emit('change', $event);
+      },
+      equipItem () {
+        this.$emit('equipItem', this.item);
+        this.hideDialog();
+      },
+      hideDialog () {
+        this.$root.$emit('hide::modal', 'equipgear-modal');
+      },
+      memberOverrideAvatarGear (gear) {
+        return {
+          [gear.type]: gear.key,
+        };
+      },
+    },
+    props: {
+      item: {
+        type: Object,
+      },
+      priceType: {
+        type: String,
+      },
+      costumeMode: {
+        type: Boolean,
+      },
+      isEquipped: {
+        type: Boolean,
+      },
+    },
+  };
+</script>

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

@@ -22,10 +22,14 @@
       h1.float-left.mb-0.page-header(v-once) {{ $t('equipment') }}
       .float-right
         span.dropdown-label {{ $t('sortBy') }}
-        b-dropdown(:text="'Sort 1'", right=true)
+        b-dropdown(:text="$t(selectedSortGearBy)", right=true)
-          b-dropdown-item(href="#") Option 1
+          b-dropdown-item(
-          b-dropdown-item(href="#") Option 2
+            v-for="sort in sortGearBy",
-          b-dropdown-item(href="#") Option 3
+            @click="selectedSortGearBy = sort",
+            :active="selectedSortGearBy === sort",
+            :key="sort"
+          ) {{ $t(sort) }}
+
         span.dropdown-label {{ $t('groupBy2') }}
         b-dropdown(:text="$t(groupBy === 'type' ? 'equipmentType' : 'class')", right=true)
           b-dropdown-item(@click="groupBy = 'type'", :active="groupBy === 'type'") {{ $t('equipmentType') }}
@@ -88,10 +92,11 @@
     )
       h2
        | {{ group.label }}
+       |
        span.badge.badge-pill.badge-default {{items[group.key].length}}
 
       itemRows(
-        :items="items[group.key]",
+        :items="sortItems(items[group.key], selectedSortGearBy)",
         :itemWidth=94,
         :itemMargin=24,
         :noItemsLabel="$t('noGearItemsOfType', { type: group.label })"
@@ -102,28 +107,32 @@
             :itemContentClass="'shop_' + context.item.key",
             :emptyItem="!context.item || context.item.key.indexOf('_base_0') !== -1",
             :key="context.item.key",
+            @click="openEquipDialog(context.item)"
           )
             template(slot="itemBadge", scope="context")
               starBadge(
                 :selected="activeItems[context.item.type] === context.item.key",
                 :show="!costume || user.preferences.costume",
-                @click="equip(context.item)",
+                @click="openEquipDialog(context.item)",
               )
             template(slot="popoverContent", scope="context")
               equipmentAttributesPopover(:item="context.item")
-</template>
 
-<style lang="scss" scoped>
+  equipGearModal(
-h2 {
+    :item="gearToEquip",
-  margin-top: 24px;
+    @equipItem="equipItem($event)",
-}
+    @change="changeModalState($event)",
-</style>
+    :costumeMode="costume",
+    :isEquipped="gearToEquip == null ? false : activeItems[gearToEquip.type] === gearToEquip.key"
+  )
+</template>
 
 <script>
 import { mapState } from 'client/libs/store';
 import each from 'lodash/each';
 import map from 'lodash/map';
 import throttle from 'lodash/throttle';
+import _sortBy from 'lodash/sortBy';
 
 import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
@@ -138,6 +147,18 @@ import Drawer from 'client/components/ui/drawer';
 
 import i18n from 'common/script/i18n';
 
+import EquipGearModal from './equipGearModal';
+
+
+const sortGearTypes = ['sortByName', 'sortByCon', 'sortByPer', 'sortByStr', 'sortByInt'];
+
+const sortGearTypeMap = {
+  sortByName: (i) => i.text(),
+  sortByCon: 'con',
+  sortByStr: 'str',
+  sortByInt: 'int',
+};
+
 export default {
   name: 'Equipment',
   components: {
@@ -150,6 +171,7 @@ export default {
     bDropdownItem,
     bPopover,
     toggleSwitch,
+    EquipGearModal,
   },
   data () {
     return {
@@ -178,6 +200,9 @@ export default {
         armoire: i18n.t('armoireText'),
       }),
       viewOptions: {},
+      gearToEquip: null,
+      sortGearBy: sortGearTypes,
+      selectedSortGearBy: 'sortByName',
     };
   },
   watch: {
@@ -186,14 +211,26 @@ export default {
     }, 250),
   },
   methods: {
-    equip (item) {
+    openEquipDialog (item) {
+      this.gearToEquip = item;
+    },
+    changeModalState (visible) {
+      if (!visible) {
+        this.gearToEquip = null;
+      }
+    },
+    equipItem (item) {
       this.$store.dispatch('common:equip', {key: item.key, type: this.costume ? 'costume' : 'equipped'});
+      this.gearToEquip = null;
     },
     changeDrawerPreference (newVal) {
       this.$store.dispatch('user:set', {
         [`preferences.${this.drawerPreference}`]: newVal,
       });
     },
+    sortItems (items, sortBy) {
+      return _sortBy(items, sortGearTypeMap[sortBy]);
+    },
   },
   computed: {
     ...mapState({

website/client/components/inventory/item.vue

@@ -5,20 +5,27 @@ div(v-if="emptyItem")
       .item-content
     span.item-label(v-if="label") {{ label }}
 b-popover(
-  v-else,
+  v-else-if="showPopover",
-  :triggers="[showPopover?'hover':'']",
+  :triggers="['hover']",
   :placement="popoverPosition",
 )
   span(slot="content")
     slot(name="popoverContent", :item="item")
 
   .item-wrapper(@click="click")
-    .item(:class="{'item-active': active }")
+    .item(:class="{'item-active': active, 'highlight-border':highlightBorder }")
       slot(name="itemBadge", :item="item")
       span.item-content(
         :class="itemContentClass"
       )
     span.item-label(v-if="label") {{ label }}
+.item-wrapper(@click="click", v-else)
+  .item(:class="{'item-active': active, 'highlight-border':highlightBorder }")
+    slot(name="itemBadge", :item="item")
+    span.item-content(
+      :class="itemContentClass"
+    )
+  span.item-label(v-if="label") {{ label }}
 </template>
 
 <script>
@@ -53,6 +60,9 @@ export default {
     active: {
       type: Boolean,
     },
+    highlightBorder: {
+      type: Boolean,
+    },
   },
   methods: {
     click () {

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

@@ -47,18 +47,18 @@
             :item="context.item",
             :key="context.item.key",
             :itemContentClass="`${group.classPrefix}${context.item.key}`",
-            :showPopover="currentDraggingPotion == null",
+            :highlightBorder="currentDraggingPotion != null",
             v-drag.drop.hatch="context.item.key",
 
             @itemDragOver="onDragOver($event, context.item)",
             @itemDropped="onDrop($event, context.item)",
             @itemDragLeave="onDragLeave()",
 
-            @click="onEggClicked($event, context.item)"
+            @click="onEggClicked($event, context.item)",
           )
             template(slot="popoverContent", scope="context")
               h4.popover-content-title {{ context.item.text() }}
-              .popover-content-text {{ context.item.notes() }}
+              .popover-content-text(v-if="currentDraggingPotion == null") {{ context.item.notes() }}
             template(slot="itemBadge", scope="context")
               span.badge.badge-pill.badge-item.badge-quantity {{ context.item.quantity }}
 

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

@@ -99,13 +99,21 @@
                 :popoverPosition="'top'",
                 :progress="context.item.progress",
                 :emptyItem="!context.item.isOwned()",
-                :showPopover="context.item.isOwned()",
+                :showPopover="context.item.isOwned() || context.item.isHatchable()",
                 :highlightBorder="highlightPet == context.item.key",
                 @click="petClicked(context.item)"
               )
                 span(slot="popoverContent")
                   div(v-if="context.item.isOwned()")
                     h4.popover-content-title {{ context.item.name }}
+                  div.hatchablePopover(v-else-if="context.item.isHatchable()")
+                    h4.popover-content-title {{ context.item.name }}
+                    div.popover-content-text(v-html="$t('haveHatchablePet', { potion: context.item.potionName, egg: context.item.eggName })")
+                    div.potionEggGroup
+                      div.potionEggBackground
+                        div(:class="'Pet_HatchingPotion_'+context.item.potionKey")
+                      div.potionEggBackground
+                        div(:class="'Pet_Egg_'+context.item.eggKey")
 
                 template(slot="itemBadge", scope="context")
                   starBadge(
@@ -139,6 +147,7 @@
               :popoverPosition="'top'",
               :emptyItem="!context.item.isOwned()",
               :showPopover="context.item.isOwned()",
+              @click="selectMount(context.item)"
             )
               span(slot="popoverContent")
                 h4.popover-content-title {{ context.item.name }}
@@ -200,7 +209,8 @@
       :ok-only="true",
       :ok-title="$t('gotIt')",
       :visible="!hideDialog",
-      :hide-header="true"
+      :hide-header="true",
+      @hide="hideFlag()"
     )
       div.content
         div.npc_matt
@@ -439,6 +449,33 @@
       width: 100px;
     }
   }
+
+  .hatchablePopover {
+    width: 180px;
+
+    .potionEggGroup {
+      margin: 0 auto;
+      margin-top: 10px;
+    }
+
+    .potionEggBackground {
+      display: inline-flex;
+      align-items: center;
+
+      width: 64px;
+      height: 64px;
+      border-radius: 2px;
+      background-color: #4e4a57;
+
+      &:first-child {
+        margin-right: 24px;
+      }
+
+      & div {
+        margin: 0 auto;
+      }
+    }
+  }
 </style>
 
 <script>
@@ -476,6 +513,8 @@
   import svgInformation from 'assets/svg/information.svg';
   import svgClose from 'assets/svg/close.svg';
 
+  import notifications from 'client/mixins/notifications';
+
   // TODO Normalize special pets and mounts
   // import Store from 'client/store';
   // import deepFreeze from 'client/libs/deepFreeze';
@@ -484,6 +523,7 @@
   let lastMouseMoveEvent = {};
 
   export default {
+    mixins: [notifications],
     components: {
       PetItem,
       Item,
@@ -739,7 +779,7 @@
         // 2. Sort
         switch (sort) {
           case 'AZ':
-            animals = _sortBy(animals, ['pet']);
+            animals = _sortBy(animals, ['name']);
             break;
 
           case 'sortByColor':
@@ -848,10 +888,10 @@
         }
       },
 
-      onDrop (ev, pet) {
+      async onDrop (ev, pet) {
-        this.$store.dispatch('common:feed', {pet: pet.key, food: ev.draggingKey});
-
         this.highlightPet = '';
+
+        this.feedAction(pet.key, ev.draggingKey);
       },
 
       onDragEnd () {
@@ -866,11 +906,16 @@
       petClicked (pet) {
         if (this.currentDraggingFood !== null && pet.isAllowedToFeed()) {
           // food process
-          this.$store.dispatch('common:feed', {pet: pet.key, food: this.currentDraggingFood.key});
+          this.feedAction(pet.key, this.currentDraggingFood.key);
           this.currentDraggingFood = null;
           this.foodClickMode = false;
         } else {
-          if (pet.isOwned() || !pet.isHatchable()) {
+          if (pet.isOwned()) {
+            this.selectPet(pet);
+            return;
+          }
+
+          if (!pet.isHatchable()) {
             return;
           }
           // opens the hatch dialog
@@ -878,6 +923,14 @@
         }
       },
 
+      async feedAction (petKey, foodKey) {
+        let result = await this.$store.dispatch('common:feed', {pet: petKey, food: foodKey});
+
+        if (result.message) {
+          this.text(result.message);
+        }
+      },
+
       closeHatchPetDialog () {
         this.$root.$emit('hide::modal', 'hatching-modal');
       },
@@ -913,6 +966,12 @@
           lastMouseMoveEvent = $event;
         }
       },
+
+      hideFlag () {
+        this.$store.dispatch('user:set', {
+          'flags.tutorial.common.mounts': true,
+        });
+      },
     },
   };
 </script>

website/client/components/ui/drawer.vue

@@ -92,7 +92,7 @@
 }
 
 .drawer-slider {
-  padding: 12px 0 0 0;
+  padding: 12px 0 0 8px;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;

website/client/components/ui/itemRows.vue

@@ -10,7 +10,7 @@
     div(v-if="items.length === 0")
       p(v-once) {{ noItemsLabel }}
 
-    .btn.btn-show-more(
+    .btn-flat.btn-show-more(
       @click="showAll = !showAll",
       v-if="items.length > itemsPerRow()"
     ) {{ showAll ? $t('showLess') : $t('showMore') }}

website/client/directives/dragdrop.directive.js

@@ -1,8 +1,10 @@
+/*
 import {emit} from './directive.common';
 
+
 import _keys from 'lodash/keys';
 import _without from 'lodash/without';
-
+*/
 /**
  * DRAG_GROUP is a static custom value
  * KEY_OF_ITEM
@@ -11,14 +13,15 @@ import _without from 'lodash/without';
  * v-drag.drop.DRAG_GROUP="KEY_OF_ITEM" @itemDropped="callback" @itemDragOver="optional"
  */
 
+/*
 const DROPPED_EVENT_NAME = 'itemDropped';
 const DRAGSTART_EVENT_NAME = 'itemDragStart';
 const DRAGEND_EVENT_NAME = 'itemDragEnd';
 const DRAGOVER_EVENT_NAME = 'itemDragOver';
 const DRAGLEAVE_EVENT_NAME = 'itemDragLeave';
-
+*/
 export default {
-  bind (el, binding, vnode) {
+  /* bind (el, binding, vnode) {
     el.isDropHandler = binding.modifiers.drop === true;
     el.dragGroup = _without(_keys(binding.modifiers), 'drop')[0];
     el.key = binding.value;
@@ -32,17 +35,20 @@ export default {
         };
 
         emit(vnode, DRAGSTART_EVENT_NAME, dragStartEventData);
+
+        if(!el.handleDragEnd) {
+          el.handleDragEnd = () => {
+            let dragEndEventData = {};
+            emit(vnode, DRAGEND_EVENT_NAME, dragEndEventData);
+          };
+
+          // need to add the listener after the drag begin, cause its fired right after start :/
+          setTimeout(function () {
+            el.addEventListener('dragend', el.handleDragEnd);
+          }, 50);
+        }
       };
       el.addEventListener('dragstart', el.handleDrag);
-
-      el.handleDragEnd = () => {
-        let dragEndEventData = {};
-
-        emit(vnode, DRAGEND_EVENT_NAME, dragEndEventData);
-      };
-
-
-      el.addEventListener('dragend', el.handleDrag);
     } else {
       el.handleDragOver = (ev) => {
         let dragOverEventData = {
@@ -51,6 +57,7 @@ export default {
           event: ev,
         };
 
+        console.info('dragover');
         emit(vnode, DRAGOVER_EVENT_NAME, dragOverEventData);
 
         if (dragOverEventData.dropable) {
@@ -62,10 +69,13 @@ export default {
           draggingKey: ev.dataTransfer.getData('KEY'),
         };
 
+        console.info('dragdrop');
         emit(vnode, DROPPED_EVENT_NAME, dropEventData);
       };
 
       el.handleDragLeave = () => {
+
+        console.info('dragleave');
         emit(vnode, DRAGLEAVE_EVENT_NAME, {});
       };
 
@@ -73,7 +83,7 @@ export default {
       el.addEventListener('dragleave', el.handleDragLeave);
       el.addEventListener('drop', el.handleDrop);
     }
-  },
+  }, */
 
   unbind (el) {
     if (!el.isDropHandler) {

website/client/store/actions/common.js

@@ -23,12 +23,11 @@ export function hatch (store, params) {
     // .catch((err) => console.error('equip', err));
 }
 
-export function feed (store, params) {
+export async function feed (store, params) {
   const user = store.state.user.data;
   feedOp(user, {params});
-  axios
+  let response = await axios
     .post(`/api/v3/user/feed/${params.pet}/${params.food}`);
-  // TODO
+
-  // .then((res) => console.log('equip', res))
+  return response.data;
-  // .catch((err) => console.error('equip', err));
 }

website/common/locales/en/gear.json

@@ -662,8 +662,8 @@
   "armorArmoireYellowPartyDressText": "Yellow Party Dress",
   "armorArmoireYellowPartyDressNotes": "Yellow Party Dress: You're perceptive, strong, smart, and so fashionable! Increases Perception, Strength, and Intelligence by <%= attrs %> each. Enchanted Armoire: Yellow Hairbow Set (Item 2 of 2).",
 
-  "headgear": "headgear",
+  "headgear": "helm",
-  "headgearCapitalized": "Headgear",
+  "headgearCapitalized": "Helm",
 
   "headBase0Text": "No Helm",
   "headBase0Notes": "No headgear.",

website/common/locales/en/newClient.json

@@ -274,5 +274,9 @@
   "self_improvement": "Self-Improvement",
   "spirituality": "Spirituality",
   "time_management": "Time-Management + Accountability",
-  "recovery_support_groups": "Recovery + Support Groups"
+  "recovery_support_groups": "Recovery + Support Groups",
+  "equip": "Equip",
+  "unequip": "Unequip",
+  "sortByName": "Name",
+  "haveHatchablePet": "You have a <%= potion %> hatching potion and <%= egg %> egg to hatch this pet! <b>Click</b> the paw print to hatch."
 }