krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-16 14:17:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

[WIP] multiple fixes (#8916)

Browse Source 
* change quest banner backgrond

* itemRows in inventory

* use itemRows in inventory/items - showLess/showMore as default labels - extend white space if theres no button available

* hide popover if dragging is active - show dragging info on first click (without to move)

* use itemRows in inventory/stable

* fix some strings

* highlight currently dragging item in inventory/items - auto attach info on click - z-index

* fix shopItem label color

* fix floating npcs in banner

* hatched-pet-dialog in items / stable

* change all ctx to context
This commit is contained in:
negue
2017-08-08 03:04:46 +02:00
committed by Keith Holliday
parent 0b076311df
commit a380090013
16 changed files with 415 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
website/client/assets/images/shops/quest_shop__banner_background_web.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.2 KiB

BIN
website/client/assets/images/shops/quest_shop_banner_background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

43
website/client/components/achievements/levelUp.vue
View File

@@ -47,30 +47,33 @@
a.tumblr-share-button(:data-href='socialLevelLink', data-notes='none')
</template>
<style scope>
.modal-content {
min-width: 28em;
}
<style lang="scss">
#level-up {
.modal-body {
padding-bottom: 0;
}
.modal-content {
min-width: 28em;
}
.modal-footer {
margin-top: 0;
}
.modal-body {
padding-bottom: 0;
}
.herobox {
margin:auto 8.3em;
width: 6em;
height: 9em;
padding-top: 0;
cursor:default;
}
.modal-footer {
margin-top: 0;
}
.character-sprites {
margin: 0;
width: 0;
.herobox {
margin: auto 8.3em;
width: 6em;
height: 9em;
padding-top: 0;
cursor: default;
}
.character-sprites {
margin: 0;
width: 0;
}
}
</style>

54
website/client/components/inventory/equipment/index.vue
View File

@@ -72,13 +72,13 @@
:label="label",
:popoverPosition="'top'",
)
template(slot="popoverContent", scope="ctx")
equipmentAttributesPopover(:item="ctx.item")
template(slot="itemBadge", scope="ctx")
template(slot="popoverContent", scope="context")
equipmentAttributesPopover(:item="context.item")
template(slot="itemBadge", scope="context")
starBadge(
:selected="true",
:show="!costume || user.preferences.costume",
@click="equip(ctx.item)",
@click="equip(context.item)",
)
div(
v-for="group in itemsGroups",
@@ -90,29 +90,27 @@
| {{ group.label }}
span.badge.badge-pill.badge-default {{items[group.key].length}}
.items
item(
v-for="(item, index) in items[group.key]",
v-if="viewOptions[group.key].open || index < itemsPerLine",
:item="item",
:itemContentClass="'shop_' + item.key",
:emptyItem="!item || item.key.indexOf('_base_0') !== -1",
:key="item.key",
)
template(slot="itemBadge", scope="ctx")
starBadge(
:selected="activeItems[ctx.item.type] === ctx.item.key",
:show="!costume || user.preferences.costume",
@click="equip(ctx.item)",
)
template(slot="popoverContent", scope="ctx")
equipmentAttributesPopover(:item="ctx.item")
div(v-if="items[group.key].length === 0")
p(v-once) {{ $t('noGearItemsOfType', { type: group.label }) }}
a.btn.btn-show-more(
v-if="items[group.key].length > itemsPerLine",
@click="viewOptions[group.key].open = !viewOptions[group.key].open"
) {{ viewOptions[group.key].open ? $t('showLessItems', { type: group.label }) : $t('showAllItems', { type: group.label, items: items[group.key].length }) }}
itemRows(
:items="items[group.key]",
:itemWidth=94,
:itemMargin=24,
:noItemsLabel="$t('noGearItemsOfType', { type: group.label })"
)
template(slot="item", scope="context")
item(
:item="context.item",
:itemContentClass="'shop_' + context.item.key",
:emptyItem="!context.item || context.item.key.indexOf('_base_0') !== -1",
:key="context.item.key",
)
template(slot="itemBadge", scope="context")
starBadge(
:selected="activeItems[context.item.type] === context.item.key",
:show="!costume || user.preferences.costume",
@click="equip(context.item)",
)
template(slot="popoverContent", scope="context")
equipmentAttributesPopover(:item="context.item")
</template>
<style lang="scss" scoped>
@@ -133,6 +131,7 @@ import bPopover from 'bootstrap-vue/lib/components/popover';
import toggleSwitch from 'client/components/ui/toggleSwitch';
import Item from 'client/components/inventory/item';
import ItemRows from 'client/components/ui/itemRows';
import EquipmentAttributesPopover from 'client/components/inventory/equipment/attributesPopover';
import StarBadge from 'client/components/ui/starBadge';
import Drawer from 'client/components/ui/drawer';
@@ -143,6 +142,7 @@ export default {
name: 'Equipment',
components: {
Item,
ItemRows,
EquipmentAttributesPopover,
StarBadge,
Drawer,

5
website/client/components/inventory/item.vue
View File

@@ -13,7 +13,7 @@ b-popover(
slot(name="popoverContent", :item="item")
.item-wrapper(@click="click")
.item
.item(:class="{'item-active': active }")
slot(name="itemBadge", :item="item")
span.item-content(
:class="itemContentClass"
@@ -50,6 +50,9 @@ export default {
type: Boolean,
default: true,
},
active: {
type: Boolean,
},
},
methods: {
click () {

171
website/client/components/inventory/items/index.vue
View File

@@ -34,65 +34,85 @@
|
span.badge.badge-pill.badge-default {{group.quantity}}
.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}`",
v-drag.drop.hatch="item.key",
@itemDragOver="onDragOver($event, item)",
@itemDropped="onDrop($event, item)",
@itemDragLeave="onDragLeave()",
itemRows(
v-if="group.key === 'eggs'",
:items="items[group.key]",
:itemWidth=94,
:itemMargin=24,
:noItemsLabel="$t('noGearItemsOfType', { type: $t(group.key) })"
)
template(slot="item", scope="context")
item(
:item="context.item",
:key="context.item.key",
:itemContentClass="`${group.classPrefix}${context.item.key}`",
:showPopover="currentDraggingPotion == null",
v-drag.drop.hatch="context.item.key",
@click="onEggClicked($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 }}
@itemDragOver="onDragOver($event, context.item)",
@itemDropped="onDrop($event, context.item)",
@itemDragLeave="onDragLeave()",
.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",
@click="onEggClicked($event, context.item)"
)
template(slot="popoverContent", scope="context")
h4.popover-content-title {{ context.item.text() }}
.popover-content-text {{ context.item.notes() }}
template(slot="itemBadge", scope="context")
span.badge.badge-pill.badge-item.badge-quantity {{ context.item.quantity }}
@itemDragEnd="onDragEnd($event, item)",
@itemDragStart="onDragStart($event, item)",
itemRows(
v-else-if="group.key === 'hatchingPotions'",
:items="items[group.key]",
:itemWidth=94,
:itemMargin=24,
:noItemsLabel="$t('noGearItemsOfType', { type: $t(group.key) })"
)
template(slot="item", scope="context")
item(
:item="context.item",
:key="context.item.key",
:itemContentClass="`${group.classPrefix}${context.item.key}`",
:showPopover="currentDraggingPotion == null",
:active="currentDraggingPotion == context.item",
v-drag.hatch="context.item.key",
@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")
span.badge.badge-pill.badge-item.badge-quantity {{ quantity }}
div(v-if="items[group.key].length === 0")
p(v-once) {{ $t('noGearItemsOfType', { type: $t(group.key) }) }}
a.btn.btn-show-more(
v-if="items[group.key].length > itemsPerLine",
@click="group.open = !group.open"
) {{ group.open ? $t('showLessItems', { type: $t(group.key) }) : $t('showAllItems', { type: $t(group.key), items: items[group.key].length }) }}
@itemDragEnd="onDragEnd($event, context.item)",
@itemDragStart="onDragStart($event, context.item)",
@click="onPotionClicked($event, context.item)"
)
template(slot="popoverContent", scope="context")
h4.popover-content-title {{ context.item.text() }}
.popover-content-text {{ context.item.notes() }}
template(slot="itemBadge", scope="context")
span.badge.badge-pill.badge-item.badge-quantity {{ context.item.quantity }}
itemRows(
v-else,
:items="items[group.key]",
:itemWidth=94,
:itemMargin=24,
:noItemsLabel="$t('noGearItemsOfType', { type: $t(group.key) })"
)
template(slot="item", scope="context")
item(
:item="context.item",
:key="context.item.key",
:itemContentClass="`${group.classPrefix}${context.item.key}`",
:showPopover="currentDraggingPotion == null"
)
template(slot="popoverContent", scope="context")
h4.popover-content-title {{ context.item.text() }}
.popover-content-text {{ context.item.notes() }}
template(slot="itemBadge", scope="context")
span.badge.badge-pill.badge-item.badge-quantity {{ context.item.quantity }}
hatchedPetDialog(
:pet="hatchedPet",
@closed="closeHatchedPetDialog()"
)
div.hatchingPotionInfo(ref="draggingPotionInfo")
div(v-if="currentDraggingPotion != null")
@@ -112,6 +132,8 @@
position: absolute;
left: -500px;
z-index: 1080;
&.mouse {
position: fixed;
pointer-events: none
@@ -136,6 +158,12 @@ import throttle from 'lodash/throttle';
import bDropdown from 'bootstrap-vue/lib/components/dropdown';
import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
import Item from 'client/components/inventory/item';
import ItemRows from 'client/components/ui/itemRows';
import HatchedPetDialog from '../stable/hatchedPetDialog';
import createAnimal from 'client/libs/createAnimal';
const allowedSpecialItems = ['snowball', 'spookySparkles', 'shinySeed', 'seafoam'];
@@ -152,18 +180,21 @@ const groups = [
key: group,
quantity: 0,
selected: true,
open: false,
classPrefix,
allowedItems,
};
});
let lastMouseMoveEvent = {};
export default {
name: 'Items',
components: {
Item,
ItemRows,
bDropdown,
bDropdownItem,
HatchedPetDialog,
},
directives: {
drag: DragDropDirective,
@@ -171,15 +202,14 @@ export default {
},
data () {
return {
itemsPerLine: 9,
searchText: null,
searchTextThrottled: null,
groups,
sortBy: 'quantity', // or 'AZ'
currentDraggingPotion: null,
potionClickMode: false,
hatchedPet: null,
};
},
watch: {
@@ -198,6 +228,7 @@ export default {
this.groups.forEach(group => {
const groupKey = group.key;
group.quantity = 0; // reset the count
let itemsArray = itemsByType[groupKey] = [];
const contentItems = this.content[groupKey];
@@ -208,7 +239,7 @@ export default {
const isSearched = !searchText || item.text().toLowerCase().indexOf(searchText) !== -1;
if (isSearched) {
itemsArray.push({
data: item,
...item,
quantity: itemQuantity,
});
@@ -238,8 +269,9 @@ export default {
return result;
},
hatchPet (potionKey, eggKey) {
this.$store.dispatch('common:hatch', {egg: eggKey, hatchingPotion: potionKey});
hatchPet (potion, egg) {
this.$store.dispatch('common:hatch', {egg: egg.key, hatchingPotion: potion.key});
this.hatchedPet = createAnimal(egg, potion, 'pet', this.content, this.user.items);
},
onDragEnd () {
@@ -263,15 +295,19 @@ export default {
}
},
onDrop ($event, egg) {
this.hatchPet(this.currentDraggingPotion.key, egg.key);
this.hatchPet(this.currentDraggingPotion, egg);
},
onDragLeave () {
},
onEggClicked ($event, egg) {
if (this.currentDraggingPotion === null) {
return;
}
if (!this.petExists(this.currentDraggingPotion.key, egg.key)) {
this.hatchPet(this.currentDraggingPotion.key, egg.key);
this.hatchPet(this.currentDraggingPotion, egg);
}
this.currentDraggingPotion = null;
@@ -282,16 +318,27 @@ export default {
if (this.currentDraggingPotion === null || this.currentDraggingPotion !== potion) {
this.currentDraggingPotion = potion;
this.potionClickMode = true;
this.$nextTick(() => {
this.mouseMoved(lastMouseMoveEvent);
});
} else {
this.currentDraggingPotion = null;
this.potionClickMode = false;
}
},
closeHatchedPetDialog () {
this.hatchedPet = null;
},
mouseMoved ($event) {
if (this.potionClickMode) {
this.$refs.clickPotionInfo.style.left = `${$event.x + 20}px`;
this.$refs.clickPotionInfo.style.top = `${$event.y + 20}px`;
} else {
lastMouseMoveEvent = $event;
}
},
},

95
website/client/components/inventory/stable/hatchedPetDialog.vue Normal file
View File

@@ -0,0 +1,95 @@
<template lang="pug">
b-modal#hatchedPet-modal(
:visible="true",
v-if="pet != null",
:hide-header="true"
)
div.content
div.dialog-header.title You hatched a new pet!
div.inner-content
div.pet-background
div(:class="pet.class")
h4.title {{ pet.name }}
div.text(v-if="!hideText")
| {{ $t('hatchedPetNotesPart1') }}
|
router-link(:to="{name: 'stable'}") {{ $t('stable') }}
|
| {{ $t('hatchedPetNotesPart2') }}
button.btn.btn-primary(@click="close()") {{ $t('onward') }}
div.clearfix(slot="modal-footer")
</template>
<style lang="scss">
@import '~client/assets/scss/colors.scss';
@import '~client/assets/scss/modal.scss';
#hatchedPet-modal {
@include centeredModal();
.modal-dialog {
width: 330px;
}
.content {
text-align: center;
}
.inner-content {
margin: 33px auto auto;
display: flex;
flex-direction: column;
align-items: center;
}
.pet-background {
width: 112px;
height: 112px;
border-radius: 4px;
background-color: $gray-700;
}
.Pet {
margin: auto;
}
.dialog-header {
color: $purple-200;
}
}
</style>
<script>
import bModal from 'bootstrap-vue/lib/components/modal';
export default {
components: {
bModal,
},
methods: {
close () {
this.$emit('closed', this.item);
this.$root.$emit('hide::modal', 'hatchedPet-modal');
},
},
props: {
pet: {
type: Object,
},
hideText: {
type: Boolean,
},
},
};
</script>

221
website/client/components/inventory/stable/index.vue
View File

@@ -54,7 +54,7 @@
@change="updateHideMissing"
)
.standard-page(v-resize="500", @resized="availableContentWidth = $event.width - 48")
.standard-page
.clearfix
h1.float-left.mb-0.page-header(v-once) {{ $t('stable') }}
@@ -80,41 +80,39 @@
)
h4(v-if="viewOptions[petGroup.key].animalCount != 0") {{ petGroup.label }}
div.items
div(
v-for="pet in pets(petGroup, viewOptions[petGroup.key].open, hideMissing, selectedSortBy, searchTextThrottled, availableContentWidth)",
:key="pet.key",
v-drag.drop.food="pet.key",
@itemDragOver="onDragOver($event, pet)",
@itemDropped="onDrop($event, pet)",
@itemDragLeave="onDragLeave()",
:class="{'last': pet.isLastInRow}"
)
petItem(
:item="pet",
:itemContentClass="getPetItemClass(pet)",
:popoverPosition="'top'",
:progress="pet.progress",
:emptyItem="!pet.isOwned()",
:showPopover="pet.isOwned()",
:highlightBorder="highlightPet == pet.key",
@click="petClicked(pet)"
itemRows(
:items="pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
:itemWidth=94,
:itemMargin=24,
)
template(slot="item", scope="context")
div(
v-drag.drop.food="context.item.key",
@itemDragOver="onDragOver($event, context.item)",
@itemDropped="onDrop($event, context.item)",
@itemDragLeave="onDragLeave()",
:class="{'last': context.item.isLastInRow}"
)
span(slot="popoverContent")
div(v-if="pet.isOwned()")
h4.popover-content-title {{ pet.name }}
petItem(
:item="context.item",
:itemContentClass="getPetItemClass(context.item)",
:popoverPosition="'top'",
:progress="context.item.progress",
:emptyItem="!context.item.isOwned()",
:showPopover="context.item.isOwned()",
:highlightBorder="highlightPet == context.item.key",
@click="petClicked(context.item)"
)
span(slot="popoverContent")
div(v-if="context.item.isOwned()")
h4.popover-content-title {{ context.item.name }}
template(slot="itemBadge", scope="ctx")
starBadge(
:selected="ctx.item.key === currentPet",
:show="ctx.item.isOwned()",
@click="selectPet(ctx.item)",
)
.btn.btn-show-more(
@click="viewOptions[petGroup.key].open = !viewOptions[petGroup.key].open",
v-if="viewOptions[petGroup.key].animalCount != 0"
) {{ $t(viewOptions[petGroup.key].open ? 'showLessAnimals' : 'showAllAnimals', { color: petGroup.label, type: $t('pets')}) }}
template(slot="itemBadge", scope="context")
starBadge(
:selected="context.item.key === currentPet",
:show="context.item.isOwned()",
@click="selectPet(context.item)",
)
h2
| {{ $t('mounts') }}
@@ -128,29 +126,28 @@
)
h4(v-if="viewOptions[mountGroup.key].animalCount != 0") {{ mountGroup.label }}
div.items
mountItem(
v-for="mount in mounts(mountGroup, viewOptions[mountGroup.key].open, hideMissing, selectedSortBy, searchTextThrottled, availableContentWidth)",
:item="mount",
:itemContentClass="mount.isOwned() ? ('Mount_Icon_' + mount.key) : 'PixelPaw GreyedOut'",
:key="mount.key",
:popoverPosition="'top'",
:emptyItem="!mount.isOwned()",
:showPopover="mount.isOwned()",
)
span(slot="popoverContent")
h4.popover-content-title {{ mount.name }}
template(slot="itemBadge", scope="ctx")
starBadge(
:selected="ctx.item.key === currentMount",
:show="mount.isOwned()",
@click="selectMount(ctx.item)",
)
.btn.btn-show-more(
@click="viewOptions[mountGroup.key].open = !viewOptions[mountGroup.key].open",
v-if="viewOptions[mountGroup.key].animalCount != 0"
) {{ $t(viewOptions[mountGroup.key].open ? 'showLessAnimals' : 'showAllAnimals', { color: mountGroup.label, type: $t('mounts')}) }}
itemRows(
:items="mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)",
:itemWidth=94,
:itemMargin=24,
)
template(slot="item", scope="context")
mountItem(
:item="context.item",
:itemContentClass="context.item.isOwned() ? ('Mount_Icon_' + context.item.key) : 'PixelPaw GreyedOut'",
:key="context.item.key",
:popoverPosition="'top'",
:emptyItem="!context.item.isOwned()",
:showPopover="context.item.isOwned()",
)
span(slot="popoverContent")
h4.popover-content-title {{ context.item.name }}
template(slot="itemBadge", scope="context")
starBadge(
:selected="context.item.key === currentMount",
:show="context.item.isOwned()",
@click="selectMount(context.item)",
)
drawer(
:title="$t('quickInventory')",
@@ -189,14 +186,14 @@
:itemWidth=94,
:itemMargin=24,
)
template(slot="item", scope="ctx")
template(slot="item", scope="context")
foodItem(
:item="ctx.item",
:itemCount="userItems.food[ctx.item.key]",
:active="currentDraggingFood == ctx.item",
:item="context.item",
:itemCount="userItems.food[context.item.key]",
:active="currentDraggingFood == context.item",
@itemDragEnd="onDragEnd()",
@itemDragStart="onDragStart($event, ctx.item)",
@itemClick="onFoodClicked($event, ctx.item)"
@itemDragStart="onDragStart($event, context.item)",
@itemClick="onFoodClicked($event, context.item)"
)
b-modal#welcome-modal(
@@ -231,6 +228,12 @@
button.btn.btn-primary(@click="hatchPet(hatchablePet)") {{ $t('hatch') }}
button.btn.btn-secondary.btn-flat(@click="closeHatchPetDialog()") {{ $t('cancel') }}
hatchedPetDialog(
:pet="hatchedPet",
:hideText="true",
@closed="closeHatchedPetDialog()"
)
div.foodInfo(ref="dragginFoodInfo")
div(v-if="currentDraggingFood != null")
div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
@@ -420,6 +423,8 @@
position: absolute;
left: -500px;
z-index: 1080;
&.mouse {
position: fixed;
pointer-events: none
@@ -446,17 +451,16 @@
import _each from 'lodash/each';
import _sortBy from 'lodash/sortBy';
import _take from 'lodash/take';
import _filter from 'lodash/filter';
import _drop from 'lodash/drop';
import _flatMap from 'lodash/flatMap';
import _throttle from 'lodash/throttle';
import _last from 'lodash/last';
import Item from '../item';
import ItemRows from 'client/components/ui/itemRows';
import PetItem from './petItem';
import MountItem from './mountItem.vue';
import FoodItem from './foodItem';
import HatchedPetDialog from './hatchedPetDialog';
import Drawer from 'client/components/ui/drawer';
import toggleSwitch from 'client/components/ui/toggleSwitch';
import StarBadge from 'client/components/ui/starBadge';
@@ -467,6 +471,8 @@
import DragDropDirective from 'client/directives/dragdrop.directive';
import MouseMoveDirective from 'client/directives/mouseposition.directive';
import createAnimal from 'client/libs/createAnimal';
import svgInformation from 'assets/svg/information.svg';
import svgClose from 'assets/svg/close.svg';
@@ -475,10 +481,13 @@
// import deepFreeze from 'client/libs/deepFreeze';
// const specialMounts =
let lastMouseMoveEvent = {};
export default {
components: {
PetItem,
Item,
ItemRows,
FoodItem,
MountItem,
Drawer,
@@ -490,6 +499,7 @@
StarBadge,
CountBadge,
DrawerSlider,
HatchedPetDialog,
},
directives: {
resize: ResizeDirective,
@@ -521,11 +531,11 @@
highlightPet: '',
hatchablePet: null,
hatchedPet: null,
foodClickMode: false,
currentDraggingFood: null,
selectedDrawerTab: 0,
availableContentWidth: 0,
};
},
watch: {
@@ -581,7 +591,6 @@
petGroups.map((petGroup) => {
this.$set(this.viewOptions, petGroup.key, {
selected: true,
open: false,
animalCount: 0,
});
});
@@ -627,7 +636,6 @@
mountGroups.map((mountGroup) => {
this.$set(this.viewOptions, mountGroup.key, {
selected: true,
open: false,
animalCount: 0,
});
});
@@ -698,28 +706,7 @@
default: {
_each(animalGroup.petSource.eggs, (egg) => {
_each(animalGroup.petSource.potions, (potion) => {
let animalKey = `${egg.key}-${potion.key}`;
animals.push({
key: animalKey,
eggKey: egg.key,
eggName: egg.text(),
potionKey: potion.key,
potionName: potion.text(),
name: this.content[`${type}Info`][animalKey].text(),
isOwned () {
return userItems[`${type}s`][animalKey] > 0;
},
mountOwned () {
return userItems.mounts[this.key] > 0;
},
isAllowedToFeed () {
return type === 'pet' && this.isOwned() && !this.mountOwned();
},
isHatchable () {
return userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
},
});
animals.push(createAnimal(egg, potion, type, this.content, userItems));
});
});
}
@@ -730,7 +717,7 @@
return animals;
},
listAnimals (animalGroup, type, isOpen, hideMissing, sort, searchText, availableSpace) {
listAnimals (animalGroup, type, hideMissing, sort, searchText) {
let animals = this.getAnimalList(animalGroup, type);
let isPetList = type === 'pet';
let withProgress = isPetList && animalGroup.key !== 'specialPets';
@@ -770,32 +757,14 @@
}
}
let animalRows = [];
let animalRows = withProgress ? _flatMap(animals, (a) => {
let progress = this.userItems[`${type}s`][a.key];
let itemsPerRow = Math.floor(availableSpace / (94 + 20));
let rowsToShow = isOpen ? Math.ceil(animals.length / itemsPerRow) : 1;
for (let i = 0; i < rowsToShow; i++) {
let skipped = _drop(animals, i * itemsPerRow);
let row = _take(skipped, itemsPerRow);
let rowWithProgressData = withProgress ? _flatMap(row, (a) => {
let progress = this.userItems[`${type}s`][a.key];
return {
...a,
progress,
};
}) : row;
let lastRowItem = _last(rowWithProgressData);
if (lastRowItem) {
lastRowItem.isLastInRow = true;
}
animalRows.push(...rowWithProgressData);
}
return {
...a,
progress,
};
}) : animals;
this.viewOptions[animalGroup.key].animalCount = animals.length;
@@ -813,12 +782,12 @@
return `${countOwned.length}/${countAll}`;
},
pets (animalGroup, showAll, hideMissing, sortBy, searchText, availableSpace) {
return this.listAnimals(animalGroup, 'pet', showAll, hideMissing, sortBy, searchText, availableSpace);
pets (animalGroup, hideMissing, sortBy, searchText) {
return this.listAnimals(animalGroup, 'pet', hideMissing, sortBy, searchText);
},
mounts (animalGroup, showAll, hideMissing, sortBy, searchText, availableSpace) {
return this.listAnimals(animalGroup, 'mount', showAll, hideMissing, sortBy, searchText, availableSpace);
mounts (animalGroup, hideMissing, sortBy, searchText) {
return this.listAnimals(animalGroup, 'mount', hideMissing, sortBy, searchText);
},
getPetItemClass (pet) {
@@ -856,6 +825,7 @@
hatchPet (pet) {
this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
this.hatchedPet = pet;
this.closeHatchPetDialog();
},
@@ -910,6 +880,9 @@
closeHatchPetDialog () {
this.$root.$emit('hide::modal', 'hatching-modal');
},
closeHatchedPetDialog () {
this.hatchedPet = null;
},
resetHatchablePet ($event) {
if (!$event) {
@@ -921,6 +894,10 @@
if (this.currentDraggingFood === null || this.currentDraggingFood !== food) {
this.currentDraggingFood = food;
this.foodClickMode = true;
this.$nextTick(() => {
this.mouseMoved(lastMouseMoveEvent);
});
} else {
this.currentDraggingFood = null;
this.foodClickMode = false;
@@ -931,6 +908,8 @@
if (this.foodClickMode) {
this.$refs.clickFoodInfo.style.left = `${$event.x + 20}px`;
this.$refs.clickFoodInfo.style.top = `${$event.y + 20}px`;
} else {
lastMouseMoveEvent = $event;
}
},
},

1
website/client/components/shops/market/index.vue
View File

@@ -348,6 +348,7 @@
.npc {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 216px;
background: url('~assets/images/shops/market_banner_web_alexnpc.png');

10
website/client/components/shops/quests/index.vue
View File

@@ -87,8 +87,6 @@
:items="questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned)",
:itemWidth=94,
:itemMargin=24,
:showAllLabel="$t('showAllGeneric', { type: category.text })",
:showLessLabel="$t('showLessGeneric', { type: category.text })"
)
template(slot="item", scope="ctx")
shopItem(
@@ -275,7 +273,7 @@
height: 216px;
.background {
background: url('~assets/images/shops/quest_shop__banner_background_web.png');
background: url('~assets/images/shops/quest_shop_banner_background.png');
background-repeat: repeat-x;
@@ -298,13 +296,15 @@
}
.npc {
width: 100%;
position: absolute;
left: 0;
width: 100%;
height: 216px;
top: 0;
height: 100%;
background: url('~assets/images/shops/quest_shop__banner_web_iannpc.png');
background-repeat: no-repeat;
.featured-label {
position: absolute;
bottom: -14px;

1
website/client/components/shops/seasonal/index.vue
View File

@@ -281,6 +281,7 @@
.npc {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 216px;
background: url('~assets/images/shops/seasonal_shop_closed_banner_web_leslienpc.png');

6
website/client/components/shops/shopItem.vue
View File

@@ -21,7 +21,7 @@ b-popover(
div.price
span.svg-icon.inline.icon-16(v-html="icons[getSvgClass()]")
span.price-label(:class="priceType") {{ price }}
span.price-label(:class="getSvgClass()") {{ price }}
</template>
@@ -76,6 +76,10 @@ b-popover(
&.gold {
color: $yellow-10
}
&.hourglasses {
color: $blue-10;
}
}
span.svg-icon.inline.lock {

3
website/client/components/shops/timeTravelers/index.vue
View File

@@ -78,8 +78,6 @@
:items="travelersItems(category, selectedSortItemsBy, searchTextThrottled, hidePinned)",
:itemWidth=94,
:itemMargin=24,
:showAllLabel="$t('showAllGeneric', { type: category.text })",
:showLessLabel="$t('showLessGeneric', { type: category.text })"
)
template(slot="item", scope="ctx")
shopItem(
@@ -236,6 +234,7 @@
.npc {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 216px;
background: url('~assets/images/shops/time_travelers_open_banner_web_tylerandvickynpcs.png');

18
website/client/components/ui/itemRows.vue
View File

@@ -7,13 +7,24 @@
:item="item",
)
div(v-if="items.length === 0")
p(v-once) {{ noItemsLabel }}
.btn.btn-show-more(
@click="showAll = !showAll",
v-if="items.length > itemsPerRow()"
) {{ showAll ? showLessLabel : showAllLabel }}
) {{ showAll ? $t('showLess') : $t('showMore') }}
div.fill-height(v-else)
</template>
<style lang="scss" scoped>
.fill-height {
height: 38px; // button + margin + padding
}
</style>
<script>
import ResizeDirective from 'client/directives/resize.directive';
@@ -60,10 +71,7 @@
itemMargin: {
type: Number,
},
showAllLabel: {
type: String,
},
showLessLabel: {
noItemsLabel: {
type: String,
},
},

25
website/client/libs/createAnimal.js Normal file
View File

@@ -0,0 +1,25 @@
export default function createAnimal (egg, potion, type, content, userItems) {
let animalKey = `${egg.key}-${potion.key}`;
return {
key: animalKey,
class: type === 'pet' ? `Pet Pet-${animalKey}` : `Mount_Icon_${animalKey}`,
eggKey: egg.key,
eggName: egg.text(),
potionKey: potion.key,
potionName: potion.text(),
name: content[`${type}Info`][animalKey].text(),
isOwned () {
return userItems[`${type}s`][animalKey] > 0;
},
mountOwned () {
return userItems.mounts[this.key] > 0;
},
isAllowedToFeed () {
return type === 'pet' && this.isOwned() && !this.mountOwned();
},
isHatchable () {
return userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
},
};
}

13
website/common/locales/en/newClient.json
View File

@@ -54,9 +54,7 @@
"memberCount": "Member Count",
"recentActivity": "Recent Activity",
"gearNotOwned": "You do not own this item.",
"showAllItems": "Show All <%= items %> <%= type %> Items",
"showLessItems": "Show Less <%= type %> Items",
"noGearItemsOfType": "You don't own any pieces of <%= type %>.",
"noGearItemsOfType": "You don't own any of these.",
"myGuilds": "My Guilds",
"guildsDiscovery": "Discover Guilds",
"habiticaOfficial": "Habitica Official",
@@ -127,8 +125,6 @@
"confirmPasswordPlaceholder": "Make sure it’s the same password!",
"termsAndAgreement": "By clicking the button below, you are indicating that you have read and agree to the <a href='/static/terms'>Terms of Service</a> and <a href='/static/privacy'>Privacy Policy</a>.",
"joinHabitica": "Join Habitica",
"showAllAnimals": "Show All <%= color %> <%= type %>",
"showLessAnimals": "Show Less <%= color %> <%= type %>",
"quickInventory": "Quick Inventory",
"noFoodAvailable": "You don't have any food.",
"gotIt": "Got it!",
@@ -230,8 +226,6 @@
"sortByStr": "Str",
"sortByInt": "Int",
"classEquipment": "Class Equipment",
"showAllGeneric": "Show All <%= type %>",
"showLessGeneric": "Show Less <%= type %>",
"howManyToSell": "How many would you like to sell?",
"yourBalance": "Your balance",
"sell": "Sell",
@@ -257,6 +251,11 @@
"featuredset": "Featured Set <%= name %>",
"mysterySets": "Mystery Sets",
"fetchRecentMessages": "Fetch Recent Messages",
"showMore": "Show More",
"showLess": "Show Less",
"hatchedPetNotesPart1": "Visit the ",
"hatchedPetNotesPart2": "to feed and equip your newest pet!",
"onward": "Onward!",
"tavernChat": "Tavern Chat",
"partyChatPlaceholder": "Type message to Party members here",
"done": "Done"