[WIP] multiple fixes (#8916)

* change quest banner backgrond

* itemRows in inventory

* use itemRows in inventory/items - showLess/showMore as default labels - extend white space if theres no button available

* hide popover if dragging is active - show dragging info on first click (without to move)

* use itemRows in inventory/stable

* fix some strings

* highlight currently dragging item in inventory/items - auto attach info on click - z-index

* fix shopItem label color

* fix floating npcs in banner

* hatched-pet-dialog in items / stable

* change all ctx to context

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

@@ -34,65 +34,85 @@
        |
        span.badge.badge-pill.badge-default {{group.quantity}}
 
-      .items(v-if="group.key === 'eggs'")
-        item(
-          v-for="({data: item, quantity}, index) in items[group.key]",
-          v-if="group.open || index < itemsPerLine",
-          :item="item",
-          :key="item.key",
-          :itemContentClass="`${group.classPrefix}${item.key}`",
-          v-drag.drop.hatch="item.key",
 
-          @itemDragOver="onDragOver($event, item)",
-          @itemDropped="onDrop($event, item)",
-          @itemDragLeave="onDragLeave()",
+      itemRows(
+        v-if="group.key === 'eggs'",
+        :items="items[group.key]",
+        :itemWidth=94,
+        :itemMargin=24,
+        :noItemsLabel="$t('noGearItemsOfType', { type: $t(group.key) })"
+      )
+        template(slot="item", scope="context")
+          item(
+            :item="context.item",
+            :key="context.item.key",
+            :itemContentClass="`${group.classPrefix}${context.item.key}`",
+            :showPopover="currentDraggingPotion == null",
+            v-drag.drop.hatch="context.item.key",
 
-          @click="onEggClicked($event, item)"
-        )
-          template(slot="popoverContent", scope="ctx")
-            h4.popover-content-title {{ ctx.item.text() }}
-            .popover-content-text {{ ctx.item.notes() }}
-          template(slot="itemBadge", scope="ctx")
-            span.badge.badge-pill.badge-item.badge-quantity {{ quantity }}
+            @itemDragOver="onDragOver($event, context.item)",
+            @itemDropped="onDrop($event, context.item)",
+            @itemDragLeave="onDragLeave()",
 
-      .items(v-else-if="group.key === 'hatchingPotions'")
-        item(
-          v-for="({data: item, quantity}, index) in items[group.key]",
-          v-if="group.open || index < itemsPerLine",
-          :item="item",
-          :key="item.key",
-          :itemContentClass="`${group.classPrefix}${item.key}`",
-          v-drag.hatch="item.key",
+            @click="onEggClicked($event, context.item)"
+          )
+            template(slot="popoverContent", scope="context")
+              h4.popover-content-title {{ context.item.text() }}
+              .popover-content-text {{ context.item.notes() }}
+            template(slot="itemBadge", scope="context")
+              span.badge.badge-pill.badge-item.badge-quantity {{ context.item.quantity }}
 
-          @itemDragEnd="onDragEnd($event, item)",
-          @itemDragStart="onDragStart($event, item)",
+      itemRows(
+        v-else-if="group.key === 'hatchingPotions'",
+        :items="items[group.key]",
+        :itemWidth=94,
+        :itemMargin=24,
+        :noItemsLabel="$t('noGearItemsOfType', { type: $t(group.key) })"
+      )
+        template(slot="item", scope="context")
+          item(
+            :item="context.item",
+            :key="context.item.key",
+            :itemContentClass="`${group.classPrefix}${context.item.key}`",
+            :showPopover="currentDraggingPotion == null",
+            :active="currentDraggingPotion == context.item",
+            v-drag.hatch="context.item.key",
 
-          @click="onPotionClicked($event, item)"
-        )
-          template(slot="popoverContent", scope="ctx")
-            h4.popover-content-title {{ ctx.item.text() }}
-            .popover-content-text {{ ctx.item.notes() }}
-          template(slot="itemBadge", scope="ctx")
-            span.badge.badge-pill.badge-item.badge-quantity {{ quantity }}
-      .items(v-else)
-        item(
-          v-for="({data: item, quantity}, index) in items[group.key]",
-          v-if="group.open || index < itemsPerLine",
-          :item="item",
-          :key="item.key",
-          :itemContentClass="`${group.classPrefix}${item.key}`",
-        )
-          template(slot="popoverContent", scope="ctx")
-            h4.popover-content-title {{ ctx.item.text() }}
-            .popover-content-text {{ ctx.item.notes() }}
-          template(slot="itemBadge", scope="ctx")
-            span.badge.badge-pill.badge-item.badge-quantity {{ quantity }}
-      div(v-if="items[group.key].length === 0")
-        p(v-once) {{ $t('noGearItemsOfType', { type: $t(group.key) }) }}
-      a.btn.btn-show-more(
-        v-if="items[group.key].length > itemsPerLine",
-        @click="group.open = !group.open"
-      ) {{ group.open ? $t('showLessItems', { type: $t(group.key) }) : $t('showAllItems', { type: $t(group.key), items: items[group.key].length }) }}
+            @itemDragEnd="onDragEnd($event, context.item)",
+            @itemDragStart="onDragStart($event, context.item)",
+
+            @click="onPotionClicked($event, context.item)"
+          )
+            template(slot="popoverContent", scope="context")
+              h4.popover-content-title {{ context.item.text() }}
+              .popover-content-text {{ context.item.notes() }}
+            template(slot="itemBadge", scope="context")
+              span.badge.badge-pill.badge-item.badge-quantity {{ context.item.quantity }}
+
+      itemRows(
+        v-else,
+        :items="items[group.key]",
+        :itemWidth=94,
+        :itemMargin=24,
+        :noItemsLabel="$t('noGearItemsOfType', { type: $t(group.key) })"
+      )
+        template(slot="item", scope="context")
+          item(
+            :item="context.item",
+            :key="context.item.key",
+            :itemContentClass="`${group.classPrefix}${context.item.key}`",
+            :showPopover="currentDraggingPotion == null"
+          )
+            template(slot="popoverContent", scope="context")
+              h4.popover-content-title {{ context.item.text() }}
+              .popover-content-text {{ context.item.notes() }}
+            template(slot="itemBadge", scope="context")
+              span.badge.badge-pill.badge-item.badge-quantity {{ context.item.quantity }}
+
+  hatchedPetDialog(
+    :pet="hatchedPet",
+    @closed="closeHatchedPetDialog()"
+  )
 
   div.hatchingPotionInfo(ref="draggingPotionInfo")
     div(v-if="currentDraggingPotion != null")
@@ -112,6 +132,8 @@
     position: absolute;
     left: -500px;
 
+    z-index: 1080;
+
     &.mouse {
       position: fixed;
       pointer-events: none
@@ -136,6 +158,12 @@ import throttle from 'lodash/throttle';
 import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import Item from 'client/components/inventory/item';
+import ItemRows from 'client/components/ui/itemRows';
+
+import HatchedPetDialog from '../stable/hatchedPetDialog';
+
+import createAnimal from 'client/libs/createAnimal';
+
 
 const allowedSpecialItems = ['snowball', 'spookySparkles', 'shinySeed', 'seafoam'];
 
@@ -152,18 +180,21 @@ const groups = [
     key: group,
     quantity: 0,
     selected: true,
-    open: false,
     classPrefix,
     allowedItems,
   };
 });
 
+let lastMouseMoveEvent = {};
+
 export default {
   name: 'Items',
   components: {
     Item,
+    ItemRows,
     bDropdown,
     bDropdownItem,
+    HatchedPetDialog,
   },
   directives: {
     drag: DragDropDirective,
@@ -171,15 +202,14 @@ export default {
   },
   data () {
     return {
-      itemsPerLine: 9,
       searchText: null,
       searchTextThrottled: null,
       groups,
       sortBy: 'quantity', // or 'AZ'
 
-
       currentDraggingPotion: null,
       potionClickMode: false,
+      hatchedPet: null,
     };
   },
   watch: {
@@ -198,6 +228,7 @@ export default {
 
       this.groups.forEach(group => {
         const groupKey = group.key;
+        group.quantity = 0; // reset the count
         let itemsArray = itemsByType[groupKey] = [];
         const contentItems = this.content[groupKey];
 
@@ -208,7 +239,7 @@ export default {
             const isSearched = !searchText || item.text().toLowerCase().indexOf(searchText) !== -1;
             if (isSearched) {
               itemsArray.push({
-                data: item,
+                ...item,
                 quantity: itemQuantity,
               });
 
@@ -238,8 +269,9 @@ export default {
       return result;
     },
 
-    hatchPet (potionKey, eggKey) {
-      this.$store.dispatch('common:hatch', {egg: eggKey, hatchingPotion: potionKey});
+    hatchPet (potion, egg) {
+      this.$store.dispatch('common:hatch', {egg: egg.key, hatchingPotion: potion.key});
+      this.hatchedPet = createAnimal(egg, potion, 'pet', this.content, this.user.items);
     },
 
     onDragEnd () {
@@ -263,15 +295,19 @@ export default {
       }
     },
     onDrop ($event, egg) {
-      this.hatchPet(this.currentDraggingPotion.key, egg.key);
+      this.hatchPet(this.currentDraggingPotion, egg);
     },
     onDragLeave () {
 
     },
 
     onEggClicked ($event, egg) {
+      if (this.currentDraggingPotion === null) {
+        return;
+      }
+
       if (!this.petExists(this.currentDraggingPotion.key, egg.key)) {
-        this.hatchPet(this.currentDraggingPotion.key, egg.key);
+        this.hatchPet(this.currentDraggingPotion, egg);
       }
 
       this.currentDraggingPotion = null;
@@ -282,16 +318,27 @@ export default {
       if (this.currentDraggingPotion === null || this.currentDraggingPotion !== potion) {
         this.currentDraggingPotion = potion;
         this.potionClickMode = true;
+
+        this.$nextTick(() => {
+          this.mouseMoved(lastMouseMoveEvent);
+        });
       } else {
         this.currentDraggingPotion = null;
         this.potionClickMode = false;
       }
     },
 
+    closeHatchedPetDialog () {
+      this.hatchedPet = null;
+    },
+
+
     mouseMoved ($event) {
       if (this.potionClickMode) {
         this.$refs.clickPotionInfo.style.left = `${$event.x + 20}px`;
         this.$refs.clickPotionInfo.style.top = `${$event.y + 20}px`;
+      } else {
+        lastMouseMoveEvent = $event;
       }
     },
   },