[WIP] drag/drop fixes (#8851)

* Stable: Highlight pet on dragging food / add drag* events

* Stable: hatch dialog instead of popover / .btn-flat / update bootstrap-vie

* Layout: change sidebar width to fixed 236px - removed .col-2/.col-10

* Stable: Drag&Drop Food Image + Text - refactor directive to use custom event names

* Stable: fixes

* Stable: click to select food + attached food info box

* fix lint issues

* Drag&Drop&Click: Potions on Eggs - fix click on item + attached infobox-position in click mode

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .row.stable
+  .row.stable(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
     .standard-sidebar
       div
         b-popover(
@@ -85,9 +85,10 @@
             v-for="pet in pets(petGroup, viewOptions[petGroup.key].open, hideMissing, selectedSortBy, searchTextThrottled, availableContentWidth)",
             :key="pet.key",
             v-drag.drop.food="pet.key",
-            @dragover="onDragOver($event, pet)",
-            @dropped="onDrop($event, pet)",
-            :class="pet.isLastInRow ? 'last' : ''"
+            @itemDragOver="onDragOver($event, pet)",
+            @itemDropped="onDrop($event, pet)",
+            @itemDragLeave="onDragLeave()",
+            :class="{'last': pet.isLastInRow}"
           )
             petItem(
               :item="pet",
@@ -95,20 +96,13 @@
               :popoverPosition="'top'",
               :progress="pet.progress",
               :emptyItem="!pet.isOwned()",
-              :showPopover="pet.isOwned() || pet.isHatchable()",
-              @hatchPet="hatchPet",
+              :showPopover="pet.isOwned()",
+              :highlightBorder="highlightPet == pet.key",
+              @click="petClicked(pet)"
             )
               span(slot="popoverContent")
                 div(v-if="pet.isOwned()")
                   h4.popover-content-title {{ pet.name }}
-                div.hatchablePopover(v-else-if="pet.isHatchable()")
-                  h4.popover-content-title {{ pet.name }}
-                  div.popover-content-text(v-html="$t('haveHatchablePet', { potion: pet.potionName, egg: pet.eggName })")
-                  div.potionEggGroup
-                    div.potionEggBackground
-                      div(:class="'Pet_HatchingPotion_'+pet.potionKey")
-                    div.potionEggBackground
-                      div(:class="'Pet_Egg_'+pet.eggKey")
 
               template(slot="itemBadge", scope="ctx")
                 starBadge(
@@ -185,7 +179,7 @@
 
                 div.float-right(v-once)
                   | {{ $t('petLikeToEat') + ' ' }}
-                  .svg-icon(v-html="icons.information")
+                  span.svg-icon.inline.icon-16(v-html="icons.information")
 
 
         drawer-slider(
@@ -199,6 +193,10 @@
             foodItem(
               :item="ctx.item",
               :itemCount="userItems.food[ctx.item.key]",
+              :active="currentDraggingFood == ctx.item",
+              @itemDragEnd="onDragEnd()",
+              @itemDragStart="onDragStart($event, ctx.item)",
+              @itemClick="onFoodClicked($event, ctx.item)"
             )
 
     b-modal#welcome-modal(
@@ -212,6 +210,39 @@
         h1.page-header(v-once) {{ $t('welcomeStable') }}
         div.content-text(v-once) {{ $t('welcomeStableText') }}
 
+    b-modal#hatching-modal(
+      :visible="hatchablePet != null",
+      @change="resetHatchablePet($event)"
+    )
+
+      div.content(v-if="hatchablePet")
+        div.potionEggGroup
+          div.potionEggBackground
+            div(:class="'Pet_HatchingPotion_'+hatchablePet.potionKey")
+          div.potionEggBackground
+            div(:class="'Pet_Egg_'+hatchablePet.eggKey")
+
+        h4.title {{ hatchablePet.name }}
+        div.text(v-html="$t('haveHatchablePet', { potion: hatchablePet.potionName, egg: hatchablePet.eggName })")
+
+      span.svg-icon.icon-10(v-html="icons.close", slot="modal-header", @click="closeHatchPetDialog()")
+
+      div(slot="modal-footer")
+        button.btn.btn-primary(@click="hatchPet(hatchablePet)") {{ $t('hatch') }}
+        button.btn.btn-secondary.btn-flat(@click="closeHatchPetDialog()") {{ $t('cancel') }}
+
+    div.foodInfo(ref="dragginFoodInfo")
+      div(v-if="currentDraggingFood != null")
+        div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
+        div.popover
+          div.popover-content {{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
+
+    div.foodInfo.mouse(ref="clickFoodInfo", v-if="foodClickMode")
+      div(v-if="currentDraggingFood != null")
+        div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
+        div.popover
+          div.popover-content {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
+
 </template>
 
 <style lang="scss">
@@ -249,10 +280,10 @@
     display: inline-flex;
     align-items: center;
 
-    width: 64px;
-    height: 64px;
-    border-radius: 2px;
-    background-color: #4e4a57;
+    width: 112px;
+    height: 112px;
+    border-radius: 4px;
+    background-color: #f9f9f9;
 
     &:first-child {
       margin-right: 24px;
@@ -281,7 +312,6 @@
   .stable {
 
     .standard-page {
-      flex: 1;
       padding-right:0;
     }
 
@@ -289,14 +319,17 @@
       // 3% padding + 252px sidebar width
       left: calc(3% + 252px) !important;
     }
+
+    .svg-icon.inline.icon-16 {
+      vertical-align: bottom;
+    }
   }
 
   .drawer-slider .items {
     height: 114px;
   }
 
-
-  div#welcome-modal {
+  @mixin habitModal() {
     display: flex;
     justify-content: center;
     flex-direction: column;
@@ -305,6 +338,14 @@
       border: 0;
     }
 
+    .modal-footer {
+      justify-content: center;
+    }
+  }
+
+  #welcome-modal {
+    @include habitModal();
+
     .npc_matt {
       margin: 0 auto 21px auto;
     }
@@ -326,9 +367,43 @@
 
       width: 400px;
     }
+  }
 
-    .modal-footer {
-      justify-content: center;
+  #hatching-modal {
+    @include habitModal();
+
+    .content {
+      text-align: center;
+
+      margin: 9px;
+      width: 300px;
+    }
+
+    .title {
+      height: 24px;
+      margin-top: 24px;
+      font-family: Roboto;
+      font-size: 20px;
+      font-weight: bold;
+      font-stretch: condensed;
+      line-height: 1.2;
+      text-align: center;
+      color: #4e4a57;
+    }
+
+    .text {
+      height: 60px;
+      font-family: Roboto;
+      font-size: 14px;
+      line-height: 1.43;
+      text-align: center;
+      color: #686274;
+    }
+
+    span.svg-icon.icon-10 {
+      position: absolute;
+      right: 10px;
+      top: 10px;
     }
   }
 
@@ -349,6 +424,25 @@
   .popover-content-text {
     margin-bottom: 0;
   }
+
+  .foodInfo {
+    position: absolute;
+    left: -500px;
+
+    &.mouse {
+      position: fixed;
+      pointer-events: none
+    }
+
+    .food-icon {
+      margin: 0 auto;
+    }
+
+    .popover {
+      position: inherit;
+      width: 100px;
+    }
+  }
 </style>
 
 <script>
@@ -380,8 +474,10 @@
 
   import ResizeDirective from 'client/directives/resize.directive';
   import DragDropDirective from 'client/directives/dragdrop.directive';
+  import MouseMoveDirective from 'client/directives/mouseposition.directive';
 
-  import information from 'assets/svg/information.svg';
+  import svgInformation from 'assets/svg/information.svg';
+  import svgClose from 'assets/svg/close.svg';
 
   // TODO Normalize special pets and mounts
   // import Store from 'client/store';
@@ -407,6 +503,7 @@
     directives: {
       resize: ResizeDirective,
       drag: DragDropDirective,
+      mousePosition: MouseMoveDirective,
     },
     data () {
       return {
@@ -426,9 +523,16 @@
         ],
 
         icons: Object.freeze({
-          information,
+          information: svgInformation,
+          close: svgClose,
         }),
 
+        highlightPet: '',
+
+        hatchablePet: null,
+        foodClickMode: false,
+        currentDraggingFood: null,
+
         selectedDrawerTab: 0,
         availableContentWidth: 0,
       };
@@ -591,7 +695,7 @@
                   return userItems.mounts[this.key] > 0;
                 },
                 isAllowedToFeed () {
-                  return type === 'pet' && !this.mountOwned();
+                  return type === 'pet' && this.isOwned() && !this.mountOwned();
                 },
                 isHatchable () {
                   return false;
@@ -620,7 +724,7 @@
                     return userItems.mounts[this.key] > 0;
                   },
                   isAllowedToFeed () {
-                    return type === 'pet' && !this.mountOwned();
+                    return type === 'pet' && this.isOwned() && !this.mountOwned();
                   },
                   isHatchable () {
                     return userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
@@ -764,14 +868,80 @@
         this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
       },
 
+      onDragStart (ev, food) {
+        this.currentDraggingFood = food;
+
+        let itemRef = this.$refs.dragginFoodInfo;
+
+        let dragEvent = ev.event;
+
+        dragEvent.dataTransfer.setDragImage(itemRef, -20, -20);
+      },
+
       onDragOver (ev, pet) {
         if (!pet.isAllowedToFeed()) {
           ev.dropable = false;
+        } else {
+          this.highlightPet = pet.key;
         }
       },
 
       onDrop (ev, pet) {
         this.$store.dispatch('common:feed', {pet: pet.key, food: ev.draggingKey});
+
+        this.highlightPet = '';
+      },
+
+      onDragEnd () {
+        this.currentDraggingFood = null;
+        this.highlightPet = '';
+      },
+
+      onDragLeave () {
+        this.highlightPet = '';
+      },
+
+      petClicked (pet) {
+        if (this.currentDraggingFood !== null && pet.isAllowedToFeed()) {
+          // food process
+          this.$store.dispatch('common:feed', {pet: pet.key, food: this.currentDraggingFood.key});
+          this.currentDraggingFood = null;
+          this.foodClickMode = false;
+        } else {
+          if (pet.isOwned() || !pet.isHatchable()) {
+            return;
+          }
+
+          // opens the hatch dialog
+          this.hatchablePet = pet;
+        }
+      },
+
+      closeHatchPetDialog () {
+        this.$root.$emit('hide::modal', 'hatching-modal');
+      },
+
+      resetHatchablePet ($event) {
+        if (!$event) {
+          this.hatchablePet = null;
+        }
+      },
+
+      onFoodClicked ($event, food) {
+        if (this.currentDraggingFood === null || this.currentDraggingFood !== food) {
+          this.currentDraggingFood = food;
+          this.foodClickMode = true;
+        } else {
+          this.currentDraggingFood = null;
+          this.foodClickMode = false;
+        }
+      },
+
+      mouseMoved ($event) {
+        if (this.foodClickMode) {
+          this.$refs.clickFoodInfo.style.left = `${$event.x + 20}px`;
+          this.$refs.clickFoodInfo.style.top = `${$event.y + 20}px`;
+        }
       },
     },
   };