[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

package.json

@@ -31,7 +31,7 @@
     "bluebird": "^3.3.5",
     "body-parser": "^1.15.0",
     "bootstrap": "^4.0.0-alpha.6",
-    "bootstrap-vue": "^0.15.8",
+    "bootstrap-vue": "^0.16.1",
     "bower": "~1.3.12",
     "browserify": "~12.0.1",
     "compression": "^1.6.1",

website/client/assets/scss/button.scss

@@ -14,18 +14,18 @@
   box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
   color: $white;
 
-  &:focus {
+  &:focus:not(.btn-flat) {
     outline: none;
     border-color: $purple-400;
     @include btn-focus-hover-shadow();
   }
 
-  &:hover {
+  &:hover:not(.btn-flat) {
     @include btn-focus-hover-shadow();
     border-color: transparent;
   }
 
-  &:active, &.active {
+  &:active:not(.btn-flat), &.active:not(.btn-flat) {
     box-shadow: none;
     border: 1px solid transparent;
   }
@@ -124,3 +124,8 @@
     color: inherit !important;
   }
 }
+
+.btn-flat {
+  border: 0;
+  box-shadow: none;
+}

website/client/assets/scss/icon.scss

@@ -12,4 +12,18 @@
   * {
     transition: none !important;
   }
-}
+}
+
+.icon-16 {
+  width: 16px;
+  height: 16px;
+}
+
+.icon-10 {
+  width: 10px;
+  height: 10px;
+}
+
+.inline {
+  display: inline-block;
+}

website/client/assets/scss/item.scss

@@ -34,10 +34,18 @@
     cursor: auto;
   }
 
+  &-active {
+    background: $purple-500;
+  }
+
   &:hover {
     box-shadow: 0 4px 4px 0 rgba($black, 0.16), 0 1px 8px 0 rgba($black, 0.12);
     border-color: $purple-500;
   }
+
+  &.highlight {
+    box-shadow: 0 0 8px 8px rgba($black, 0.16), 0 5px 10px 0 rgba($black, 0.12) !important;
+  }
 }
 
 .drawer-content .item:hover {

website/client/assets/scss/page.scss

@@ -12,10 +12,12 @@ html, body {
   padding: 24px;
   font-size: 14px;
   line-height: 1.43;
+  width: 236px;
 }
 
 .standard-page {
   padding: 24px;
+  flex: 1;
 }
 
 .page-header {

website/client/assets/svg/close.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <g fill="none" fill-rule="evenodd" stroke="#A5A1AC" stroke-width="2">
+        <path d="M1 11L11 1M11 11L1 1"/>
+    </g>
+</svg>

website/client/components/guilds/discovery.vue

@@ -2,7 +2,7 @@
 .row
   sidebar(@search="updateSearch", @filter="updateFilters")
 
-  .col-10.standard-page
+  .standard-page
     .clearfix
         h1.page-header.float-left(v-once) {{ $t('publicGuilds') }}
         .float-right

website/client/components/guilds/myGuilds.vue

@@ -2,7 +2,7 @@
 .row
   sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
 
-  .col-10.no-guilds.standard-page(v-if='filteredGuilds.length === 0')
+  .no-guilds.standard-page(v-if='filteredGuilds.length === 0')
     .no-guilds-wrapper
       .svg-icon(v-html='icons.greyBadge')
       h2 {{$t('noGuildsTitle')}}
@@ -10,7 +10,7 @@
       p {{$t('noGuildsParagraph2')}}
       span(v-if='loading') {{ $t('loading') }}
 
-  .col-10.standard-page(v-if='filteredGuilds.length > 0')
+  .standard-page(v-if='filteredGuilds.length > 0')
     .row
       .col-md-12
         h1.page-header.float-left(v-once) {{ $t('myGuilds') }}

website/client/components/guilds/sidebar.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.col-2.standard-sidebar
+.standard-sidebar
   .form-group
     input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
 

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

@@ -1,6 +1,6 @@
 <template lang="pug">
 .row
-  .col-2.standard-sidebar
+  .standard-sidebar
     .form-group
       input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
 
@@ -17,7 +17,7 @@
             span.custom-control-indicator
             span.custom-control-description(v-once) {{ group.label }}
 
-  .col-10.standard-page
+  .standard-page
     .clearfix
       h1.float-left.mb-0.page-header(v-once) {{ $t('equipment') }}
       .float-right

website/client/components/inventory/item.vue

@@ -8,18 +8,15 @@ b-popover(
   v-else,
   :triggers="['hover']",
   :placement="popoverPosition",
-  @click="click",
 )
   span(slot="content")
     slot(name="popoverContent", :item="item")
 
-  .item-wrapper
+  .item-wrapper(@click="click")
     .item
       slot(name="itemBadge", :item="item")
       span.item-content(
-        :class="itemContentClass",
+        :class="itemContentClass"
-        :draggable="draggable",
-        @dragstart="onDrag"
       )
     span.item-label(v-if="label") {{ label }}
 </template>
@@ -49,22 +46,11 @@ export default {
       type: String,
       default: 'bottom',
     },
-    draggable: {
-      type: Boolean,
-      default: false,
-    },
   },
   methods: {
     click () {
       this.$emit('click', this.item);
     },
-    onDrag (ev) {
-      if (this.draggable) {
-        this.$emit('onDrag', ev);
-      } else {
-        ev.preventDefault();
-      }
-    },
   },
 };
 </script>

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

@@ -1,6 +1,6 @@
 <template lang="pug">
-.row
+.row(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
-  .col-2.standard-sidebar
+  .standard-sidebar
     .form-group
       input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
 
@@ -16,7 +16,7 @@
             input.custom-control-input(type="checkbox", v-model="group.selected")
             span.custom-control-indicator
             span.custom-control-description(v-once) {{ $t(group.key) }}
-  .col-10.standard-page
+  .standard-page
     .clearfix
       h1.float-left.mb-0.page-header(v-once) {{ $t('items') }}
       .float-right
@@ -34,16 +34,55 @@
        |
        span.badge.badge-pill.badge-default {{group.quantity}}
 
-      .items
+      .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}`"
+          :itemContentClass="`${group.classPrefix}${item.key}`",
-          :selected="true",
+          v-drag.drop.hatch="item.key",
+
+          @itemDragOver="onDragOver($event, item)",
+          @itemDropped="onDrop($event, item)",
+          @itemDragLeave="onDragLeave()",
+
+          @click="onEggClicked($event, item)"
         )
-          template(slot="popoverContent", scope="ctx") 
+          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-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",
+
+          @itemDragEnd="onDragEnd($event, item)",
+          @itemDragStart="onDragStart($event, item)",
+
+          @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")
@@ -55,9 +94,40 @@
         @click="group.open = !group.open"
       ) {{ group.open ? $t('showLessItems', { type: $t(group.key) }) : $t('showAllItems', { type: $t(group.key), items: items[group.key].length }) }}
 
+  div.hatchingPotionInfo(ref="draggingPotionInfo")
+    div(v-if="currentDraggingPotion != null")
+      div.potion-icon(:class="'Pet_HatchingPotion_'+currentDraggingPotion.key")
+      div.popover
+        div.popover-content {{ $t('dragThisPotion', {potionName: currentDraggingPotion.text() }) }}
+
+  div.hatchingPotionInfo.mouse(ref="clickPotionInfo", v-if="potionClickMode")
+    div(v-if="currentDraggingPotion != null")
+      div.potion-icon(:class="'Pet_HatchingPotion_'+currentDraggingPotion.key")
+      div.popover
+        div.popover-content {{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text() }) }}
+
 </template>
 
 <style lang="scss" scoped>
+
+  .hatchingPotionInfo {
+    position: absolute;
+    left: -500px;
+
+    &.mouse {
+      position: fixed;
+      pointer-events: none
+    }
+
+    .potion-icon {
+      margin: 0 auto;
+    }
+
+    .popover {
+      position: inherit;
+      width: 100px;
+    }
+  }
 </style>
 
 <script>
@@ -71,6 +141,9 @@ import Item from 'client/components/inventory/item';
 
 const allowedSpecialItems = ['snowball', 'spookySparkles', 'shinySeed', 'seafoam'];
 
+import DragDropDirective from 'client/directives/dragdrop.directive';
+import MouseMoveDirective from 'client/directives/mouseposition.directive';
+
 const groups = [
   ['eggs', 'Pet_Egg_'],
   ['hatchingPotions', 'Pet_HatchingPotion_'],
@@ -94,6 +167,10 @@ export default {
     bDropdown,
     bDropdownItem,
   },
+  directives: {
+    drag: DragDropDirective,
+    mousePosition: MouseMoveDirective,
+  },
   data () {
     return {
       itemsPerLine: 9,
@@ -101,6 +178,10 @@ export default {
       searchTextThrottled: null,
       groups,
       sortBy: 'quantity', // or 'AZ'
+
+
+      currentDraggingPotion: null,
+      potionClickMode: false,
     };
   },
   watch: {
@@ -150,5 +231,71 @@ export default {
       return itemsByType;
     },
   },
+  methods: {
+    petExists (potionKey, eggKey) {
+      let animalKey = `${eggKey}-${potionKey}`;
+
+      let result =  this.user.items.pets[animalKey] > 0;
+
+      return result;
+    },
+
+    hatchPet (potionKey, eggKey) {
+      this.$store.dispatch('common:hatch', {egg: eggKey, hatchingPotion: potionKey});
+    },
+
+    onDragEnd () {
+      this.currentDraggingPotion = null;
+    },
+    onDragStart ($event, potion) {
+      this.currentDraggingPotion = potion;
+
+      let itemRef = this.$refs.draggingPotionInfo;
+
+      let dragEvent = $event.event;
+
+      dragEvent.dataTransfer.setDragImage(itemRef, -20, -20);
+    },
+
+    onDragOver ($event, egg) {
+      let potionKey = this.currentDraggingPotion.key;
+
+      if (this.petExists(potionKey, egg.key)) {
+        $event.dropable = false;
+      }
+    },
+    onDrop ($event, egg) {
+      this.hatchPet(this.currentDraggingPotion.key, egg.key);
+    },
+    onDragLeave () {
+
+    },
+
+    onEggClicked ($event, egg) {
+      if (!this.petExists(this.currentDraggingPotion.key, egg.key)) {
+        this.hatchPet(this.currentDraggingPotion.key, egg.key);
+      }
+
+      this.currentDraggingPotion = null;
+      this.potionClickMode = false;
+    },
+
+    onPotionClicked ($event, potion) {
+      if (this.currentDraggingPotion === null || this.currentDraggingPotion !== potion) {
+        this.currentDraggingPotion = potion;
+        this.potionClickMode = true;
+      } else {
+        this.currentDraggingPotion = null;
+        this.potionClickMode = false;
+      }
+    },
+
+    mouseMoved ($event) {
+      if (this.potionClickMode) {
+        this.$refs.clickPotionInfo.style.left = `${$event.x + 20}px`;
+        this.$refs.clickPotionInfo.style.top = `${$event.y + 20}px`;
+      }
+    },
+  },
 };
 </script>

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

@@ -7,15 +7,17 @@ b-popover(
     h4.popover-content-title {{ item.text() }}
     div.popover-content-text(v-html="item.notes()")
 
-  .item-wrapper
+  .item-wrapper(@click="click($event)")
-    .item
+    .item(:class="{'item-active': active }")
       countBadge(
         :show="true",
         :count="itemCount"
       )
       span.item-content(
         :class="'Pet_Food_'+item.key",
-        v-drag.food="item.key"
+        v-drag.food="item.key",
+        @itemDragEnd="dragend($event)",
+        @itemDragStart="dragstart($event)"
       )
 </template>
 
@@ -43,6 +45,20 @@ export default {
     itemContentClass: {
       type: String,
     },
+    active: {
+      type: Boolean,
+    },
+  },
+  methods: {
+    dragend ($event) {
+      this.$emit('itemDragEnd', $event);
+    },
+    dragstart ($event) {
+      this.$emit('itemDragStart', $event);
+    },
+    click ($event) {
+      this.$emit('itemClick', $event);
+    },
   },
 };
 </script>

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)",
+            @itemDragOver="onDragOver($event, pet)",
-            @dropped="onDrop($event, pet)",
+            @itemDropped="onDrop($event, pet)",
-            :class="pet.isLastInRow ? 'last' : ''"
+            @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()",
+              :showPopover="pet.isOwned()",
-              @hatchPet="hatchPet",
+              :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;
+    width: 112px;
-    height: 64px;
+    height: 112px;
-    border-radius: 2px;
+    border-radius: 4px;
-    background-color: #4e4a57;
+    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;
   }
 
-
+  @mixin habitModal() {
-  div#welcome-modal {
     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 {
+  #hatching-modal {
-      justify-content: center;
+    @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`;
+        }
       },
     },
   };

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

@@ -6,19 +6,14 @@ b-popover(
   span(slot="content")
     slot(name="popoverContent", :item="item")
 
-  .item-wrapper
+  .item-wrapper(@click="click()")
     .item(
-      :class="{'item-empty': emptyItem}",
+      :class="{'item-empty': emptyItem, 'highlight': highlightBorder}",
-      @mouseup="holdStop",
-      @mouseleave="holdStop",
-      @mousedown.left="holdStart"
     )
       slot(name="itemBadge", :item="item")
       span.item-content(:class="itemContentClass")
       span.pet-progress-background(v-if="item.isAllowedToFeed() && progress > 0")
         div.pet-progress-bar(v-bind:style="{width: 100 * progress/50 + '%' }")
-      span.pet-progress-background(v-if="holdProgress > 0")
-        div.pet-progress-bar.hold(v-bind:style="{width: 100 * holdProgress/5 + '%' }")
     span.item-label(v-if="label") {{ label }}
 </template>
 
@@ -36,10 +31,6 @@ b-popover(
     height: 4px;
     background-color: #24cc8f;
   }
-
-  .pet-progress-bar.hold {
-    background-color: #54c3cc;
-  }
 </style>
 
 <script>
@@ -67,6 +58,10 @@ b-popover(
         type: Boolean,
         default: false,
       },
+      highlightBorder: {
+        type: Boolean,
+        default: false,
+      },
       popoverPosition: {
         type: String,
         default: 'bottom',
@@ -76,35 +71,9 @@ b-popover(
         default: true,
       },
     },
-    data () {
-      return {
-        holdProgress: -1,
-      };
-    },
     methods: {
-      holdStart () {
+      click () {
-        let pet = this.item;
+        this.$emit('click', {});
-        if (pet.isOwned() || !pet.isHatchable()) {
-          return;
-        }
-
-        this.holdProgress = 1;
-
-        this.currentHoldingTimer = setInterval(() => {
-          if (this.holdProgress === 5) {
-            this.holdStop();
-            this.$emit('hatchPet', pet);
-          }
-
-          this.holdProgress += 1;
-        }, 1000);
-      },
-
-      holdStop () {
-        if (this.currentHoldingTimer) {
-          clearInterval(this.currentHoldingTimer);
-          this.holdProgress = -1;
-        }
       },
     },
   };

website/client/directives/dragdrop.directive.js

@@ -7,12 +7,15 @@ import _without from 'lodash/without';
  * DRAG_GROUP is a static custom value
  * KEY_OF_ITEM
  *
- * v-drag.DRAG_GROUP="KEY_OF_ITEM"
+ * v-drag.DRAG_GROUP="KEY_OF_ITEM" @itemDragEnd="optional" @itemDragStart="optional"
- * v-drag.drop.DRAG_GROUP="KEY_OF_ITEM" @dropped="callback" @dragover="optional"
+ * v-drag.drop.DRAG_GROUP="KEY_OF_ITEM" @itemDropped="callback" @itemDragOver="optional"
  */
 
-const DROPPED_EVENT_NAME = 'dropped';
+const DROPPED_EVENT_NAME = 'itemDropped';
-const DRAGOVER_EVENT_NAME = 'dragover';
+const DRAGSTART_EVENT_NAME = 'itemDragStart';
+const DRAGEND_EVENT_NAME = 'itemDragEnd';
+const DRAGOVER_EVENT_NAME = 'itemDragOver';
+const DRAGLEAVE_EVENT_NAME = 'itemDragLeave';
 
 export default {
   bind (el, binding, vnode) {
@@ -24,13 +27,28 @@ export default {
       el.draggable = true;
       el.handleDrag = (ev) => {
         ev.dataTransfer.setData('KEY', binding.value);
+        let dragStartEventData = {
+          event: ev,
+        };
+
+        emit(vnode, DRAGSTART_EVENT_NAME, dragStartEventData);
       };
       el.addEventListener('dragstart', el.handleDrag);
+
+      el.handleDragEnd = () => {
+        let dragEndEventData = {};
+
+        emit(vnode, DRAGEND_EVENT_NAME, dragEndEventData);
+      };
+
+
+      el.addEventListener('dragend', el.handleDrag);
     } else {
       el.handleDragOver = (ev) => {
         let dragOverEventData = {
           dropable: true,
           draggingKey: ev.dataTransfer.getData('KEY'),
+          event: ev,
         };
 
         emit(vnode, DRAGOVER_EVENT_NAME, dragOverEventData);
@@ -47,16 +65,23 @@ export default {
         emit(vnode, DROPPED_EVENT_NAME, dropEventData);
       };
 
+      el.handleDragLeave = () => {
+        emit(vnode, DRAGLEAVE_EVENT_NAME, {});
+      };
+
       el.addEventListener('dragover', el.handleDragOver);
+      el.addEventListener('dragleave', el.handleDragLeave);
       el.addEventListener('drop', el.handleDrop);
     }
   },
 
   unbind (el) {
     if (!el.isDropHandler) {
-      el.removeEventListener('drag', el.handleDrag);
+      el.removeEventListener('dragstart', el.handleDrag);
+      el.removeEventListener('dragend', el.handleDragEnd);
     } else {
       el.removeEventListener('dragover', el.handleDragOver);
+      el.removeEventListener('dragleave', el.handleDragLeave);
       el.removeEventListener('drop', el.handleDrop);
     }
   },

website/client/directives/mouseposition.directive.js

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+
+import _throttle from 'lodash/throttle';
+
+import { emit } from './directive.common';
+
+/**
+ * v-mousePosition="throttleTimeout", @mouseMoved="callback()"
+ */
+
+const EVENT_NAME = 'mouseMoved';
+
+export default {
+  bind (el, binding, vnode) {
+    el.handleMouseMove = _throttle((ev) => {
+      emit(vnode, EVENT_NAME, {
+        x: ev.clientX,
+        y: ev.clientY,
+      });
+    }, binding.value);
+
+    window.addEventListener('mousemove', el.handleMouseMove);
+
+    // send the first width
+    Vue.nextTick(el.handleWindowResize);
+  },
+
+  unbind (el) {
+    window.removeEventListener('mousemove', el.handleMouseMove);
+  },
+};

website/common/locales/en/newClient.json

@@ -41,7 +41,11 @@
   "standard": "Standard",
   "sortByColor": "Color",
   "sortByHatchable": "Hatchable",
-  "haveHatchablePet": "You have a <%= potion %> and <%= egg %> to hatch this pet! <b>Click and hold</b> the paw print to hatch.",
+  "hatch": "Hatch!",
+  "dragThisFood": "Drag this <%= foodName %> to a Pet and watch it grow!",
+  "clickOnPetToFeed": "Click on a Pet to feed <%= foodName %> and watch it grow!",
+  "dragThisPotion": "Drag this <%= potionName %> to an Egg and hatch a new pet!",
+  "clickOnEggToHatch": "Click on an Egg to use your <%= potionName %> and hatch a new pet!",
   "editAvatar": "Edit Avatar",
   "sort": "Sort",
   "memberCount": "Member Count",