mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-04-14 19:56:23 +00:00
[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
This commit is contained in:
negue
Matteo Pagliazzi
parent
78fd79931e
commit
dd29c60d87
18 changed files with 492 additions and 110 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,4 +12,18 @@
|
|||
* {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-16 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.icon-10 {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
5
website/client/assets/svg/close.svg
Normal file
5
website/client/assets/svg/close.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 215 B |
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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') }}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
:draggable="draggable",
|
||||
@dragstart="onDrag"
|
||||
:class="itemContentClass"
|
||||
)
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="pug">
|
||||
.row
|
||||
.col-2.standard-sidebar
|
||||
.row(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
|
||||
.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}`"
|
||||
:selected="true",
|
||||
:itemContentClass="`${group.classPrefix}${item.key}`",
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -7,15 +7,17 @@ b-popover(
|
|||
h4.popover-content-title {{ item.text() }}
|
||||
div.popover-content-text(v-html="item.notes()")
|
||||
|
||||
.item-wrapper
|
||||
.item
|
||||
.item-wrapper(@click="click($event)")
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -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`;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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}",
|
||||
@mouseup="holdStop",
|
||||
@mouseleave="holdStop",
|
||||
@mousedown.left="holdStart"
|
||||
:class="{'item-empty': emptyItem, 'highlight': highlightBorder}",
|
||||
)
|
||||
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 () {
|
||||
let pet = this.item;
|
||||
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;
|
||||
}
|
||||
click () {
|
||||
this.$emit('click', {});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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.drop.DRAG_GROUP="KEY_OF_ITEM" @dropped="callback" @dragover="optional"
|
||||
* v-drag.DRAG_GROUP="KEY_OF_ITEM" @itemDragEnd="optional" @itemDragStart="optional"
|
||||
* v-drag.drop.DRAG_GROUP="KEY_OF_ITEM" @itemDropped="callback" @itemDragOver="optional"
|
||||
*/
|
||||
|
||||
const DROPPED_EVENT_NAME = 'dropped';
|
||||
const DRAGOVER_EVENT_NAME = 'dragover';
|
||||
const DROPPED_EVENT_NAME = 'itemDropped';
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
|
|
|||
31
website/client/directives/mouseposition.directive.js
Normal file
31
website/client/directives/mouseposition.directive.js
Normal file
|
|
@ -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);
|
||||
},
|
||||
};
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue