sudoxreboot/habitica-self-host
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica-self-host.git synced 2026-08-01 03:30:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Both eggs and potions should hatch pets from Items (#9645)

Browse source 
* Show click on hatching potion when egg is clicked

* Fix translation parameter name

* Show egg as active when clicked

* Remove itemDragStart event handler from egg items

* Change isHatchable to take in potion and egg objects

* Add margin to item popover content
This commit is contained in:
Matti Petrelius 2018-01-05 21:31:34 +02:00 committed by Sabe Jones
parent 229e39facf
commit f6ac7b890a
2 changed files with 58 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
website/client/components/inventory/items/index.vue
View file

@ -48,7 +48,9 @@
:item="context.item",
:key="context.item.key",
:itemContentClass="context.item.class",
:highlightBorder="isHatchable(currentDraggingPotion, context.item.key)",
:showPopover="currentDraggingEgg == null",
:active="currentDraggingEgg == context.item",
:highlightBorder="isHatchable(currentDraggingPotion, context.item)",
v-drag.drop.hatch="context.item.key",
@itemDragOver="onDragOver($event, context.item)",
@ -81,6 +83,7 @@
:itemContentClass="context.item.class",
:showPopover="currentDraggingPotion == null",
:active="currentDraggingPotion == context.item",
:highlightBorder="isHatchable(context.item, currentDraggingEgg)",
v-drag.hatch="context.item.key",
@itemDragEnd="onDragEnd($event, context.item)",
@ -129,6 +132,18 @@
hatchedPetDialog()
div.eggInfo(ref="draggingEggInfo")
div(v-if="currentDraggingEgg != null")
div.potion-icon(:class="'Pet_Egg_'+currentDraggingEgg.key")
div.popover
div.popover-content {{ $t('dragThisEgg', {eggName: currentDraggingEgg.text }) }}
div.eggInfo.mouse(ref="clickEggInfo", v-if="eggClickMode")
div(v-if="currentDraggingEgg != null")
div.potion-icon(:class="'Pet_Egg_'+currentDraggingEgg.key")
div.popover
div.popover-content {{ $t('clickOnPotionToHatch', {eggName: currentDraggingEgg.text }) }}
div.hatchingPotionInfo(ref="draggingPotionInfo")
div(v-if="currentDraggingPotion != null")
div.potion-icon(:class="'Pet_HatchingPotion_'+currentDraggingPotion.key")
@ -149,7 +164,7 @@
</template>
<style lang="scss" scoped>
.hatchingPotionInfo {
.eggInfo, .hatchingPotionInfo {
position: absolute;
left: -500px;
@ -171,6 +186,7 @@
.popover-content {
color: white;
margin: 15px;
}
}
</style>
@ -242,6 +258,8 @@ export default {
groups,
sortBy: 'quantity', // or 'AZ'
currentDraggingEgg: null,
eggClickMode: false,
currentDraggingPotion: null,
potionClickMode: false,
cardOptions: {
@ -343,6 +361,7 @@ export default {
this.currentDraggingPotion = null;
},
onDragStart ($event, potion) {
// Dragging needs to be added for egg items
this.currentDraggingPotion = potion;
let itemRef = this.$refs.draggingPotionInfo;
@ -351,19 +370,19 @@ export default {
dragEvent.dataTransfer.setDragImage(itemRef, -20, -20);
},
isHatchable (potion, eggKey) {
if (potion === null)
isHatchable (potion, egg) {
if (potion === null || egg === null)
return false;
let petKey = `${eggKey}-${potion.key}`;
let petKey = `${egg.key}-${potion.key}`;
if (!this.content.petInfo[petKey])
return false;
return !this.userHasPet(potion.key, eggKey);
return !this.userHasPet(potion.key, egg.key);
},
onDragOver ($event, egg) {
if (this.isHatchable(this.currentDraggingPotion, egg.key)) {
if (this.isHatchable(this.currentDraggingPotion, egg)) {
$event.dropable = false;
}
},
@ -373,18 +392,38 @@ export default {
onDragLeave () {
},
onEggClicked ($event, egg) {
if (this.currentDraggingPotion === null) {
if (this.currentDraggingPotion !== null) {
if (this.isHatchable(this.currentDraggingPotion, egg)) {
this.hatchPet(this.currentDraggingPotion, egg);
}
this.currentDraggingPotion = null;
this.potionClickMode = false;
return;
}
if (this.isHatchable(this.currentDraggingPotion, egg.key)) {
this.hatchPet(this.currentDraggingPotion, egg);
}
if (this.currentDraggingEgg === null || this.currentDraggingEgg !== egg) {
this.currentDraggingEgg = egg;
this.eggClickMode = true;
this.currentDraggingPotion = null;
this.potionClickMode = false;
this.$nextTick(() => {
this.mouseMoved(lastMouseMoveEvent);
});
} else {
this.currentDraggingEgg = null;
this.eggClickMode = false;
}
},
onPotionClicked ($event, potion) {
if (this.currentDraggingEgg !== null) {
if (this.isHatchable(potion, this.currentDraggingEgg)) {
this.hatchPet(potion, this.currentDraggingEgg);
}
this.currentDraggingEgg = null;
this.eggClickMode = false;
return;
}
if (this.currentDraggingPotion === null || this.currentDraggingPotion !== potion) {
this.currentDraggingPotion = potion;
this.potionClickMode = true;
@ -437,6 +476,10 @@ export default {
// dragging potioninfo is 180px wide (90 would be centered)
this.$refs.clickPotionInfo.style.left = `${$event.x - 70}px`;
this.$refs.clickPotionInfo.style.top = `${$event.y}px`;
} else if (this.eggClickMode) {
// dragging eggInfo is 180px wide (90 would be centered)
this.$refs.clickEggInfo.style.left = `${$event.x - 70}px`;
this.$refs.clickEggInfo.style.top = `${$event.y}px`;
} else {
lastMouseMoveEvent = $event;
}

3
website/common/locales/en/pets.json
View file

@ -123,5 +123,6 @@
"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 %> hatching potion and hatch a new pet!",
"hatchDialogText": "Pour your <%= potionName %> hatching potion on your <%= eggName %> egg, and it will hatch into a <%= petName %>."
"hatchDialogText": "Pour your <%= potionName %> hatching potion on your <%= eggName %> egg, and it will hatch into a <%= petName %>.",
"clickOnPotionToHatch": "Click on a hatching potion to use it on your <%= eggName %> and hatch a new pet!"
}