[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/stable/index.vue

@@ -54,7 +54,7 @@
             @change="updateHideMissing"
           )
 
-    .standard-page(v-resize="500", @resized="availableContentWidth = $event.width - 48")
+    .standard-page
       .clearfix
         h1.float-left.mb-0.page-header(v-once) {{ $t('stable') }}
 
@@ -80,41 +80,39 @@
       )
         h4(v-if="viewOptions[petGroup.key].animalCount != 0") {{ petGroup.label }}
 
-        div.items
-          div(
-            v-for="pet in pets(petGroup, viewOptions[petGroup.key].open, hideMissing, selectedSortBy, searchTextThrottled, availableContentWidth)",
-            :key="pet.key",
-            v-drag.drop.food="pet.key",
-            @itemDragOver="onDragOver($event, pet)",
-            @itemDropped="onDrop($event, pet)",
-            @itemDragLeave="onDragLeave()",
-            :class="{'last': pet.isLastInRow}"
-          )
-            petItem(
-              :item="pet",
-              :itemContentClass="getPetItemClass(pet)",
-              :popoverPosition="'top'",
-              :progress="pet.progress",
-              :emptyItem="!pet.isOwned()",
-              :showPopover="pet.isOwned()",
-              :highlightBorder="highlightPet == pet.key",
-              @click="petClicked(pet)"
+        itemRows(
+          :items="pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
+          :itemWidth=94,
+          :itemMargin=24,
+        )
+          template(slot="item", scope="context")
+            div(
+              v-drag.drop.food="context.item.key",
+              @itemDragOver="onDragOver($event, context.item)",
+              @itemDropped="onDrop($event, context.item)",
+              @itemDragLeave="onDragLeave()",
+              :class="{'last': context.item.isLastInRow}"
             )
-              span(slot="popoverContent")
-                div(v-if="pet.isOwned()")
-                  h4.popover-content-title {{ pet.name }}
+              petItem(
+                :item="context.item",
+                :itemContentClass="getPetItemClass(context.item)",
+                :popoverPosition="'top'",
+                :progress="context.item.progress",
+                :emptyItem="!context.item.isOwned()",
+                :showPopover="context.item.isOwned()",
+                :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 }}
 
-              template(slot="itemBadge", scope="ctx")
-                starBadge(
-                  :selected="ctx.item.key === currentPet",
-                  :show="ctx.item.isOwned()",
-                  @click="selectPet(ctx.item)",
-                )
-
-        .btn.btn-show-more(
-          @click="viewOptions[petGroup.key].open = !viewOptions[petGroup.key].open",
-          v-if="viewOptions[petGroup.key].animalCount != 0"
-        ) {{ $t(viewOptions[petGroup.key].open ? 'showLessAnimals' : 'showAllAnimals', { color: petGroup.label, type: $t('pets')}) }}
+                template(slot="itemBadge", scope="context")
+                  starBadge(
+                    :selected="context.item.key === currentPet",
+                    :show="context.item.isOwned()",
+                    @click="selectPet(context.item)",
+                  )
 
       h2
         | {{ $t('mounts') }}
@@ -128,29 +126,28 @@
       )
         h4(v-if="viewOptions[mountGroup.key].animalCount != 0") {{ mountGroup.label }}
 
-        div.items
-          mountItem(
-            v-for="mount in mounts(mountGroup, viewOptions[mountGroup.key].open, hideMissing, selectedSortBy, searchTextThrottled, availableContentWidth)",
-            :item="mount",
-            :itemContentClass="mount.isOwned() ? ('Mount_Icon_' + mount.key) : 'PixelPaw GreyedOut'",
-            :key="mount.key",
-            :popoverPosition="'top'",
-            :emptyItem="!mount.isOwned()",
-            :showPopover="mount.isOwned()",
-          )
-            span(slot="popoverContent")
-              h4.popover-content-title {{ mount.name }}
-            template(slot="itemBadge", scope="ctx")
-              starBadge(
-                :selected="ctx.item.key === currentMount",
-                :show="mount.isOwned()",
-                @click="selectMount(ctx.item)",
-              )
-
-        .btn.btn-show-more(
-          @click="viewOptions[mountGroup.key].open = !viewOptions[mountGroup.key].open",
-          v-if="viewOptions[mountGroup.key].animalCount != 0"
-        ) {{ $t(viewOptions[mountGroup.key].open ? 'showLessAnimals' : 'showAllAnimals', { color: mountGroup.label, type: $t('mounts')}) }}
+        itemRows(
+          :items="mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)",
+          :itemWidth=94,
+          :itemMargin=24,
+        )
+          template(slot="item", scope="context")
+            mountItem(
+              :item="context.item",
+              :itemContentClass="context.item.isOwned() ? ('Mount_Icon_' + context.item.key) : 'PixelPaw GreyedOut'",
+              :key="context.item.key",
+              :popoverPosition="'top'",
+              :emptyItem="!context.item.isOwned()",
+              :showPopover="context.item.isOwned()",
+            )
+              span(slot="popoverContent")
+                h4.popover-content-title {{ context.item.name }}
+              template(slot="itemBadge", scope="context")
+                starBadge(
+                  :selected="context.item.key === currentMount",
+                  :show="context.item.isOwned()",
+                  @click="selectMount(context.item)",
+                )
 
       drawer(
         :title="$t('quickInventory')",
@@ -189,14 +186,14 @@
           :itemWidth=94,
           :itemMargin=24,
         )
-          template(slot="item", scope="ctx")
+          template(slot="item", scope="context")
             foodItem(
-              :item="ctx.item",
-              :itemCount="userItems.food[ctx.item.key]",
-              :active="currentDraggingFood == ctx.item",
+              :item="context.item",
+              :itemCount="userItems.food[context.item.key]",
+              :active="currentDraggingFood == context.item",
               @itemDragEnd="onDragEnd()",
-              @itemDragStart="onDragStart($event, ctx.item)",
-              @itemClick="onFoodClicked($event, ctx.item)"
+              @itemDragStart="onDragStart($event, context.item)",
+              @itemClick="onFoodClicked($event, context.item)"
             )
 
     b-modal#welcome-modal(
@@ -231,6 +228,12 @@
         button.btn.btn-primary(@click="hatchPet(hatchablePet)") {{ $t('hatch') }}
         button.btn.btn-secondary.btn-flat(@click="closeHatchPetDialog()") {{ $t('cancel') }}
 
+    hatchedPetDialog(
+      :pet="hatchedPet",
+      :hideText="true",
+      @closed="closeHatchedPetDialog()"
+    )
+
     div.foodInfo(ref="dragginFoodInfo")
       div(v-if="currentDraggingFood != null")
         div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
@@ -420,6 +423,8 @@
     position: absolute;
     left: -500px;
 
+    z-index: 1080;
+
     &.mouse {
       position: fixed;
       pointer-events: none
@@ -446,17 +451,16 @@
 
   import _each from 'lodash/each';
   import _sortBy from 'lodash/sortBy';
-  import _take from 'lodash/take';
   import _filter from 'lodash/filter';
-  import _drop from 'lodash/drop';
   import _flatMap from 'lodash/flatMap';
   import _throttle from 'lodash/throttle';
-  import _last from 'lodash/last';
 
   import Item from '../item';
+  import ItemRows from 'client/components/ui/itemRows';
   import PetItem from './petItem';
   import MountItem from './mountItem.vue';
   import FoodItem from './foodItem';
+  import HatchedPetDialog from './hatchedPetDialog';
   import Drawer from 'client/components/ui/drawer';
   import toggleSwitch from 'client/components/ui/toggleSwitch';
   import StarBadge from 'client/components/ui/starBadge';
@@ -467,6 +471,8 @@
   import DragDropDirective from 'client/directives/dragdrop.directive';
   import MouseMoveDirective from 'client/directives/mouseposition.directive';
 
+  import createAnimal from 'client/libs/createAnimal';
+
   import svgInformation from 'assets/svg/information.svg';
   import svgClose from 'assets/svg/close.svg';
 
@@ -475,10 +481,13 @@
   // import deepFreeze from 'client/libs/deepFreeze';
   // const specialMounts =
 
+  let lastMouseMoveEvent = {};
+
   export default {
     components: {
       PetItem,
       Item,
+      ItemRows,
       FoodItem,
       MountItem,
       Drawer,
@@ -490,6 +499,7 @@
       StarBadge,
       CountBadge,
       DrawerSlider,
+      HatchedPetDialog,
     },
     directives: {
       resize: ResizeDirective,
@@ -521,11 +531,11 @@
         highlightPet: '',
 
         hatchablePet: null,
+        hatchedPet: null,
         foodClickMode: false,
         currentDraggingFood: null,
 
         selectedDrawerTab: 0,
-        availableContentWidth: 0,
       };
     },
     watch: {
@@ -581,7 +591,6 @@
         petGroups.map((petGroup) => {
           this.$set(this.viewOptions, petGroup.key, {
             selected: true,
-            open: false,
             animalCount: 0,
           });
         });
@@ -627,7 +636,6 @@
         mountGroups.map((mountGroup) => {
           this.$set(this.viewOptions, mountGroup.key, {
             selected: true,
-            open: false,
             animalCount: 0,
           });
         });
@@ -698,28 +706,7 @@
           default: {
             _each(animalGroup.petSource.eggs, (egg) => {
               _each(animalGroup.petSource.potions, (potion) => {
-                let animalKey = `${egg.key}-${potion.key}`;
-
-                animals.push({
-                  key: animalKey,
-                  eggKey: egg.key,
-                  eggName: egg.text(),
-                  potionKey: potion.key,
-                  potionName: potion.text(),
-                  name: this.content[`${type}Info`][animalKey].text(),
-                  isOwned ()  {
-                    return userItems[`${type}s`][animalKey] > 0;
-                  },
-                  mountOwned () {
-                    return userItems.mounts[this.key] > 0;
-                  },
-                  isAllowedToFeed () {
-                    return type === 'pet' && this.isOwned() && !this.mountOwned();
-                  },
-                  isHatchable () {
-                    return userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
-                  },
-                });
+                animals.push(createAnimal(egg, potion, type, this.content, userItems));
               });
             });
           }
@@ -730,7 +717,7 @@
         return animals;
       },
 
-      listAnimals (animalGroup, type, isOpen, hideMissing, sort, searchText, availableSpace) {
+      listAnimals (animalGroup, type, hideMissing, sort, searchText) {
         let animals = this.getAnimalList(animalGroup, type);
         let isPetList = type === 'pet';
         let withProgress = isPetList && animalGroup.key !== 'specialPets';
@@ -770,32 +757,14 @@
           }
         }
 
-        let animalRows = [];
+        let animalRows = withProgress ? _flatMap(animals, (a) => {
+          let progress = this.userItems[`${type}s`][a.key];
 
-        let itemsPerRow = Math.floor(availableSpace / (94 + 20));
-
-        let rowsToShow = isOpen ? Math.ceil(animals.length / itemsPerRow) : 1;
-
-        for (let i = 0; i < rowsToShow; i++) {
-          let skipped = _drop(animals, i * itemsPerRow);
-          let row = _take(skipped, itemsPerRow);
-
-          let rowWithProgressData = withProgress ? _flatMap(row, (a) => {
-            let progress = this.userItems[`${type}s`][a.key];
-
-            return {
-              ...a,
-              progress,
-            };
-          }) : row;
-
-          let lastRowItem = _last(rowWithProgressData);
-          if (lastRowItem) {
-            lastRowItem.isLastInRow = true;
-          }
-
-          animalRows.push(...rowWithProgressData);
-        }
+          return {
+            ...a,
+            progress,
+          };
+        }) : animals;
 
         this.viewOptions[animalGroup.key].animalCount = animals.length;
 
@@ -813,12 +782,12 @@
         return `${countOwned.length}/${countAll}`;
       },
 
-      pets (animalGroup, showAll, hideMissing, sortBy, searchText, availableSpace) {
-        return this.listAnimals(animalGroup, 'pet', showAll, hideMissing, sortBy, searchText, availableSpace);
+      pets (animalGroup, hideMissing, sortBy, searchText) {
+        return this.listAnimals(animalGroup, 'pet', hideMissing, sortBy, searchText);
       },
 
-      mounts (animalGroup, showAll, hideMissing, sortBy, searchText, availableSpace) {
-        return this.listAnimals(animalGroup, 'mount', showAll, hideMissing, sortBy, searchText, availableSpace);
+      mounts (animalGroup, hideMissing, sortBy, searchText) {
+        return this.listAnimals(animalGroup, 'mount', hideMissing, sortBy, searchText);
       },
 
       getPetItemClass (pet) {
@@ -856,6 +825,7 @@
 
       hatchPet (pet) {
         this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
+        this.hatchedPet = pet;
         this.closeHatchPetDialog();
       },
 
@@ -910,6 +880,9 @@
       closeHatchPetDialog () {
         this.$root.$emit('hide::modal', 'hatching-modal');
       },
+      closeHatchedPetDialog () {
+        this.hatchedPet = null;
+      },
 
       resetHatchablePet ($event) {
         if (!$event) {
@@ -921,6 +894,10 @@
         if (this.currentDraggingFood === null || this.currentDraggingFood !== food) {
           this.currentDraggingFood = food;
           this.foodClickMode = true;
+
+          this.$nextTick(() => {
+            this.mouseMoved(lastMouseMoveEvent);
+          });
         } else {
           this.currentDraggingFood = null;
           this.foodClickMode = false;
@@ -931,6 +908,8 @@
         if (this.foodClickMode) {
           this.$refs.clickFoodInfo.style.left = `${$event.x + 20}px`;
           this.$refs.clickFoodInfo.style.top = `${$event.y + 20}px`;
+        } else {
+          lastMouseMoveEvent = $event;
         }
       },
     },