[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
2025-12-16 14:17:22 +01:00 · 2017-08-08 03:04:46 +02:00
parent 0b076311df
commit a380090013
16 changed files with 415 additions and 251 deletions
--- a/website/client/components/achievements/levelUp.vue
+++ b/website/client/components/achievements/levelUp.vue
@@ -47,30 +47,33 @@
              a.tumblr-share-button(:data-href='socialLevelLink', data-notes='none')
 </template>

-<style scope>
-  .modal-content {
-    min-width: 28em;
-  }
+<style lang="scss">
+  #level-up {

-  .modal-body {
-    padding-bottom: 0;
-  }
+    .modal-content {
+      min-width: 28em;
+    }

-  .modal-footer {
-    margin-top: 0;
-  }
+    .modal-body {
+      padding-bottom: 0;
+    }

-  .herobox {
-    margin:auto 8.3em;
-    width: 6em;
-    height: 9em;
-    padding-top: 0;
-    cursor:default;
-  }
+    .modal-footer {
+      margin-top: 0;
+    }

-  .character-sprites {
-    margin: 0;
-    width: 0;
+    .herobox {
+      margin: auto 8.3em;
+      width: 6em;
+      height: 9em;
+      padding-top: 0;
+      cursor: default;
+    }
+
+    .character-sprites {
+      margin: 0;
+      width: 0;
+    }
  }
 </style>

--- a/website/client/components/inventory/equipment/index.vue
+++ b/website/client/components/inventory/equipment/index.vue
@@ -72,13 +72,13 @@
          :label="label",
          :popoverPosition="'top'",
        )
-          template(slot="popoverContent", scope="ctx")
-            equipmentAttributesPopover(:item="ctx.item")
-          template(slot="itemBadge", scope="ctx")
+          template(slot="popoverContent", scope="context")
+            equipmentAttributesPopover(:item="context.item")
+          template(slot="itemBadge", scope="context")
            starBadge(
              :selected="true",
              :show="!costume || user.preferences.costume",
-              @click="equip(ctx.item)",
+              @click="equip(context.item)",
            )
    div(
      v-for="group in itemsGroups",
@@ -90,29 +90,27 @@
       | {{ group.label }}
       span.badge.badge-pill.badge-default {{items[group.key].length}}

-      .items
-        item(
-          v-for="(item, index) in items[group.key]",
-          v-if="viewOptions[group.key].open || index < itemsPerLine",
-          :item="item",
-          :itemContentClass="'shop_' + item.key",
-          :emptyItem="!item || item.key.indexOf('_base_0') !== -1",
-          :key="item.key",
-        )
-          template(slot="itemBadge", scope="ctx")
-            starBadge(
-              :selected="activeItems[ctx.item.type] === ctx.item.key",
-              :show="!costume || user.preferences.costume",
-              @click="equip(ctx.item)",
-            )
-          template(slot="popoverContent", scope="ctx")
-            equipmentAttributesPopover(:item="ctx.item")
-      div(v-if="items[group.key].length === 0")
-        p(v-once) {{ $t('noGearItemsOfType', { type: group.label }) }}
-      a.btn.btn-show-more(
-        v-if="items[group.key].length > itemsPerLine",
-        @click="viewOptions[group.key].open = !viewOptions[group.key].open"
-      ) {{ viewOptions[group.key].open ? $t('showLessItems', { type: group.label }) : $t('showAllItems', { type: group.label, items: items[group.key].length }) }}
+      itemRows(
+        :items="items[group.key]",
+        :itemWidth=94,
+        :itemMargin=24,
+        :noItemsLabel="$t('noGearItemsOfType', { type: group.label })"
+      )
+        template(slot="item", scope="context")
+          item(
+            :item="context.item",
+            :itemContentClass="'shop_' + context.item.key",
+            :emptyItem="!context.item || context.item.key.indexOf('_base_0') !== -1",
+            :key="context.item.key",
+          )
+            template(slot="itemBadge", scope="context")
+              starBadge(
+                :selected="activeItems[context.item.type] === context.item.key",
+                :show="!costume || user.preferences.costume",
+                @click="equip(context.item)",
+              )
+            template(slot="popoverContent", scope="context")
+              equipmentAttributesPopover(:item="context.item")
 </template>

 <style lang="scss" scoped>
@@ -133,6 +131,7 @@ import bPopover from 'bootstrap-vue/lib/components/popover';
 import toggleSwitch from 'client/components/ui/toggleSwitch';

 import Item from 'client/components/inventory/item';
+import ItemRows from 'client/components/ui/itemRows';
 import EquipmentAttributesPopover from 'client/components/inventory/equipment/attributesPopover';
 import StarBadge from 'client/components/ui/starBadge';
 import Drawer from 'client/components/ui/drawer';
@@ -143,6 +142,7 @@ export default {
  name: 'Equipment',
  components: {
    Item,
+    ItemRows,
    EquipmentAttributesPopover,
    StarBadge,
    Drawer,
--- a/website/client/components/inventory/item.vue
+++ b/website/client/components/inventory/item.vue
@@ -13,7 +13,7 @@ b-popover(
    slot(name="popoverContent", :item="item")

  .item-wrapper(@click="click")
-    .item
+    .item(:class="{'item-active': active }")
      slot(name="itemBadge", :item="item")
      span.item-content(
        :class="itemContentClass"
@@ -50,6 +50,9 @@ export default {
      type: Boolean,
      default: true,
    },
+    active: {
+      type: Boolean,
+    },
  },
  methods: {
    click () {
--- a/website/client/components/inventory/items/index.vue
+++ b/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;
      }
    },
  },
--- a/website/client/components/inventory/stable/hatchedPetDialog.vue
+++ b/website/client/components/inventory/stable/hatchedPetDialog.vue
@@ -0,0 +1,95 @@
+<template lang="pug">
+
+  b-modal#hatchedPet-modal(
+    :visible="true",
+    v-if="pet != null",
+    :hide-header="true"
+  )
+    div.content
+      div.dialog-header.title You hatched a new pet!
+
+
+      div.inner-content
+        div.pet-background
+          div(:class="pet.class")
+
+        h4.title {{ pet.name }}
+        div.text(v-if="!hideText")
+          | {{ $t('hatchedPetNotesPart1') }}
+          |
+          router-link(:to="{name: 'stable'}") {{ $t('stable') }}
+          |
+          | {{ $t('hatchedPetNotesPart2') }}
+
+
+        button.btn.btn-primary(@click="close()") {{ $t('onward') }}
+
+    div.clearfix(slot="modal-footer")
+</template>
+
+
+<style lang="scss">
+
+  @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/modal.scss';
+
+  #hatchedPet-modal {
+    @include centeredModal();
+
+    .modal-dialog {
+      width: 330px;
+    }
+
+    .content {
+      text-align: center;
+    }
+
+    .inner-content {
+      margin: 33px auto auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .pet-background {
+      width: 112px;
+      height: 112px;
+      border-radius: 4px;
+      background-color: $gray-700;
+    }
+
+    .Pet {
+      margin: auto;
+    }
+
+    .dialog-header {
+      color: $purple-200;
+    }
+  }
+
+</style>
+
+
+<script>
+  import bModal from 'bootstrap-vue/lib/components/modal';
+
+  export default {
+    components: {
+      bModal,
+    },
+    methods: {
+      close () {
+        this.$emit('closed', this.item);
+        this.$root.$emit('hide::modal', 'hatchedPet-modal');
+      },
+    },
+    props: {
+      pet: {
+        type: Object,
+      },
+      hideText: {
+        type: Boolean,
+      },
+    },
+  };
+</script>
--- a/website/client/components/inventory/stable/index.vue
+++ b/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;
        }
      },
    },
--- a/website/client/components/shops/market/index.vue
+++ b/website/client/components/shops/market/index.vue
@@ -348,6 +348,7 @@
      .npc {
        position: absolute;
        left: 0;
+        top: 0;
        width: 100%;
        height: 216px;
        background: url('~assets/images/shops/market_banner_web_alexnpc.png');
--- a/website/client/components/shops/quests/index.vue
+++ b/website/client/components/shops/quests/index.vue
@@ -87,8 +87,6 @@
          :items="questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned)",
          :itemWidth=94,
          :itemMargin=24,
-          :showAllLabel="$t('showAllGeneric', { type: category.text })",
-          :showLessLabel="$t('showLessGeneric', { type: category.text })"
        )
          template(slot="item", scope="ctx")
            shopItem(
@@ -275,7 +273,7 @@
      height: 216px;

      .background {
-        background: url('~assets/images/shops/quest_shop__banner_background_web.png');
+        background: url('~assets/images/shops/quest_shop_banner_background.png');

        background-repeat: repeat-x;

@@ -298,13 +296,15 @@
      }

      .npc {
+        width: 100%;
        position: absolute;
        left: 0;
-        width: 100%;
-        height: 216px;
+        top: 0;
+        height: 100%;
        background: url('~assets/images/shops/quest_shop__banner_web_iannpc.png');
        background-repeat: no-repeat;

+
        .featured-label {
          position: absolute;
          bottom: -14px;
--- a/website/client/components/shops/seasonal/index.vue
+++ b/website/client/components/shops/seasonal/index.vue
@@ -281,6 +281,7 @@
      .npc {
        position: absolute;
        left: 0;
+        top: 0;
        width: 100%;
        height: 216px;
        background: url('~assets/images/shops/seasonal_shop_closed_banner_web_leslienpc.png');
--- a/website/client/components/shops/shopItem.vue
+++ b/website/client/components/shops/shopItem.vue
@@ -21,7 +21,7 @@ b-popover(
        div.price
          span.svg-icon.inline.icon-16(v-html="icons[getSvgClass()]")

-          span.price-label(:class="priceType") {{ price }}
+          span.price-label(:class="getSvgClass()") {{ price }}

 </template>

@@ -76,6 +76,10 @@ b-popover(
    &.gold {
      color: $yellow-10
    }
+
+    &.hourglasses {
+      color: $blue-10;
+    }
  }

  span.svg-icon.inline.lock {
--- a/website/client/components/shops/timeTravelers/index.vue
+++ b/website/client/components/shops/timeTravelers/index.vue
@@ -78,8 +78,6 @@
          :items="travelersItems(category, selectedSortItemsBy, searchTextThrottled, hidePinned)",
          :itemWidth=94,
          :itemMargin=24,
-          :showAllLabel="$t('showAllGeneric', { type: category.text })",
-          :showLessLabel="$t('showLessGeneric', { type: category.text })"
        )
          template(slot="item", scope="ctx")
            shopItem(
@@ -236,6 +234,7 @@
      .npc {
        position: absolute;
        left: 0;
+        top: 0;
        width: 100%;
        height: 216px;
        background: url('~assets/images/shops/time_travelers_open_banner_web_tylerandvickynpcs.png');
--- a/website/client/components/ui/itemRows.vue
+++ b/website/client/components/ui/itemRows.vue
@@ -7,13 +7,24 @@
          :item="item",
        )

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

 </template>

+<style lang="scss" scoped>
+  .fill-height {
+    height: 38px; // button + margin + padding
+  }
+</style>
+
 <script>
  import ResizeDirective from 'client/directives/resize.directive';

@@ -60,10 +71,7 @@
      itemMargin: {
        type: Number,
      },
-      showAllLabel: {
-        type: String,
-      },
-      showLessLabel: {
+      noItemsLabel: {
        type: String,
      },
    },