[WIP] Client/multiple fixes shops (#8956)

* reposition FlyingPigs and Hydra

* hide count-badge if 0

* fix sortBy hatchable (ignore already hatched pets)

* always show animal name

* featuredItems, use shopItem objects

* fix egg / potion names in market

* buyModals: check for price, mark it if not enough available / change buy-button opacity / show purchaseGems button

* save itemRows open/collapsed state during session, refactor itemRows for some more performance

* pin featured items

* show bordered items in market buyModal

* fix popover margins / paddings

* position pinned items popovers to the left

website/client/components/ui/itemRows.vue

@@ -1,18 +1,18 @@
 <template lang="pug">
   .item-rows
-    div.items(v-resize="500", @resized="currentWidth = $event.width")
+    div.items(v-resize="500", @resized="setCurrentWidth($event)")
       template(v-for="item in itemsToShow(showAll)")
         slot(
           name="item",
-          :item="item",
+          :item="item"
         )
 
     div(v-if="items.length === 0")
       p(v-once) {{ noItemsLabel }}
 
     .btn-flat.btn-show-more(
-      @click="showAll = !showAll",
-      v-if="items.length > itemsPerRow()"
+      @click="toggleItemsToShow()",
+      v-if="items.length > itemsPerRow"
     ) {{ showAll ? $t('showLess') : $t('showMore') }}
 
     div.fill-height(v-else)
@@ -27,14 +27,22 @@
 
 <script>
   import ResizeDirective from 'client/directives/resize.directive';
+  import { mapState } from 'client/libs/store';
 
   import _take from 'lodash/take';
-  import _drop from 'lodash/drop';
 
   export default {
     directives: {
       resize: ResizeDirective,
     },
+    computed: {
+      ...mapState({
+        openedItemRows: 'openedItemRows',
+      }),
+      itemsPerRow () {
+        return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin));
+      },
+    },
     data () {
       return {
         currentWidth: 0,
@@ -44,27 +52,47 @@
       };
     },
     methods: {
-      itemsToShow (showAll) {
-        let itemsPerRow = this.itemsPerRow();
-        let rowsToShow = showAll ? Math.ceil(this.items.length / itemsPerRow) : 1;
-        let result = [];
+      toggleItemsToShow () {
+        this.showAll = !this.showAll;
 
-        for (let i = 0; i < rowsToShow; i++) {
-          let skipped = _drop(this.items, i * itemsPerRow);
-          let row = _take(skipped, itemsPerRow);
-          result = result.concat(row);
+        let array = this.$store.state.openedItemRows;
+        if (this.showAll) {
+          array.push(this.type);
+        } else {
+          let index = array.indexOf(this.type);
+
+          if (index > -1) {
+            array.splice(index, 1);
+          }
+        }
+      },
+      itemsToShow (showAll) {
+        let itemsLength = this.items.length;
+
+        if (itemsLength === 0)
+          return [];
+
+        let itemsPerRow = this.itemsPerRow;
+
+        if (showAll || itemsLength <= itemsPerRow) {
+          return this.items;
         }
 
-        return result;
+        return _take(this.items, itemsPerRow);
       },
-      itemsPerRow () {
-        return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin));
+      setCurrentWidth ($event) {
+        if (this.currentWidth !== $event.width) {
+          this.currentWidth = $event.width;
+        }
       },
     },
     props: {
       items: {
         type: Array,
       },
+      type: {
+        type: String,
+      },
       itemWidth: {
         type: Number,
       },
@@ -75,5 +103,8 @@
         type: String,
       },
     },
+    created () {
+      this.showAll = this.openedItemRows.includes(this.type);
+    },
   };
 </script>