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

[WIP] Client/multiple fixes shops (#8956)

Browse Source 
* reposition FlyingPigs and Hydra

* hide count-badge if 0

* fix sortBy hatchable (ignore already hatched pets)

* always show animal name

* featuredItems, use shopItem objects

* fix egg / potion names in market

* buyModals: check for price, mark it if not enough available / change buy-button opacity / show purchaseGems button

* save itemRows open/collapsed state during session, refactor itemRows for some more performance

* pin featured items

* show bordered items in market buyModal

* fix popover margins / paddings

* position pinned items popovers to the left
This commit is contained in:
negue
2017-08-17 00:34:25 +02:00
committed by Keith Holliday
parent 88e6cf7d8a
commit f5cf27a79e
18 changed files with 302 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
website/client/assets/scss/item.scss
View File

@@ -54,6 +54,12 @@
.flat .item {
box-shadow: none;
border: none;
}
.bordered-item .item {
background: $gray-700 !important;
margin: 0 auto;
}
.drawer-content .item:hover {

9
website/client/assets/scss/popover.scss
View File

@@ -21,10 +21,17 @@
line-height: 1.14;
}
.popover-content-text {
.popover-content-text:not(:last-child) {
margin-bottom: 16px;
}
.popover-content-title:last-child {
margin-bottom: 0px;
}
.popover-content-text:last-child {
margin-bottom: 0px;
}
.popover-content-attr {
width: 50%;
display: inline-block;

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

@@ -99,6 +99,7 @@
:items="sortItems(items[group.key], selectedSortGearBy)",
:itemWidth=94,
:itemMargin=24,
:type="group.key",
:noItemsLabel="$t('noGearItemsOfType', { type: group.label })"
)
template(slot="item", scope="context")

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

@@ -40,6 +40,7 @@
:items="items[group.key]",
:itemWidth=94,
:itemMargin=24,
:type="group.key",
:noItemsLabel="$t('noGearItemsOfType', { type: $t(group.key) })"
)
template(slot="item", scope="context")
@@ -67,6 +68,7 @@
:items="items[group.key]",
:itemWidth=94,
:itemMargin=24,
:type="group.key",
:noItemsLabel="$t('noGearItemsOfType', { type: $t(group.key) })"
)
template(slot="item", scope="context")
@@ -94,6 +96,7 @@
:items="items[group.key]",
:itemWidth=94,
:itemMargin=24,
:type="group.key",
:noItemsLabel="$t('noGearItemsOfType', { type: $t(group.key) })"
)
template(slot="item", scope="context")

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

@@ -84,6 +84,7 @@
:items="pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
:itemWidth=94,
:itemMargin=24,
:type="petGroup.key",
)
template(slot="item", scope="context")
div(
@@ -99,14 +100,12 @@
:popoverPosition="'top'",
:progress="context.item.progress",
:emptyItem="!context.item.isOwned()",
:showPopover="context.item.isOwned() || context.item.isHatchable()",
:showPopover="true",
: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 }}
div.hatchablePopover(v-else-if="context.item.isHatchable()")
div.hatchablePopover(v-if="context.item.isHatchable()")
h4.popover-content-title {{ context.item.name }}
div.popover-content-text(v-html="$t('haveHatchablePet', { potion: context.item.potionName, egg: context.item.eggName })")
div.potionEggGroup
@@ -115,6 +114,9 @@
div.potionEggBackground
div(:class="'Pet_Egg_'+context.item.eggKey")
div(v-else)
h4.popover-content-title {{ context.item.name }}
template(slot="itemBadge", scope="context")
starBadge(
:selected="context.item.key === currentPet",
@@ -138,6 +140,7 @@
:items="mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)",
:itemWidth=94,
:itemMargin=24,
:type="mountGroup.key",
)
template(slot="item", scope="context")
mountItem(
@@ -146,7 +149,7 @@
:key="context.item.key",
:popoverPosition="'top'",
:emptyItem="!context.item.isOwned()",
:showPopover="context.item.isOwned()",
:showPopover="true",
@click="selectMount(context.item)"
)
span(slot="popoverContent")
@@ -273,11 +276,18 @@
display: inline-block;
}
.stable .item .item-content.Pet {
position: absolute;
.stable .item .item-content.Pet:not(.FlyingPig) {
top: -28px;
}
.stable .item .item-content.FlyingPig {
top: 7px;
}
.stable .item .item-content.Pet-Dragon-Hydra {
top: -16px !important;
}
.hatchablePopover {
width: 180px
}
@@ -833,7 +843,7 @@
getPetItemClass (pet) {
if (pet.isOwned()) {
return `Pet Pet-${pet.key}`;
return `Pet Pet-${pet.key} ${pet.eggKey}`;
}
if (pet.mountOwned()) {

25
website/client/components/shops/_currencyMixin.js Normal file
View File

@@ -0,0 +1,25 @@
import { mapState, mapGetters } from 'client/libs/store';
export default {
computed: {
...mapGetters({
userGems: 'user:gems',
}),
...mapState({
userHourglasses: 'user.data.purchased.plan.consecutive.trinkets',
userGold: 'user.data.stats.gp',
}),
},
methods: {
enoughCurrency (currency, amount) {
switch (currency) {
case 'gold':
return this.userGold >= amount;
case 'gems':
return this.userGems >= amount;
case 'hourglasses':
return this.userHourglasses >= amount;
}
},
},
};

65
website/client/components/shops/balanceInfo.vue
View File

@@ -1,12 +1,11 @@
<template lang="pug">
div
.svg-icon(v-if="withHourglass",v-html="icons.hourglasses")
span(v-if="withHourglass") {{userHourglasses | roundBigNumber}}
.svg-icon(v-html="icons.gem")
span {{userGems | roundBigNumber}}
.svg-icon(v-html="icons.gold")
span {{userGold | roundBigNumber}}
span(
v-for="currency of currencies",
:key="currency.key"
)
.svg-icon(v-html="currency.icon")
span(:class="{'notEnough': currency.notEnough}") {{ currency.value | roundBigNumber}}
</template>
<style lang="scss" scoped>
@@ -31,15 +30,21 @@ span {
display: inline-block;
}
.notEnough {
color: #f23035 !important;
}
</style>
<script>
import { mapState, mapGetters } from 'client/libs/store';
import svgGem from 'assets/svg/gem.svg';
import svgGold from 'assets/svg/gold.svg';
import svgHourglasses from 'assets/svg/hourglass.svg';
import currencyMixin from './_currencyMixin';
export default {
mixins: [currencyMixin],
data () {
return {
icons: Object.freeze({
@@ -50,18 +55,48 @@ span {
};
},
computed: {
...mapGetters({
userGems: 'user:gems',
}),
...mapState({
userHourglasses: 'user.data.purchased.plan.consecutive.trinkets',
userGold: 'user.data.stats.gp',
}),
currencies () {
let currencies = [];
if (this.withHourglass) {
currencies.push({
type: 'hourglasses',
icon: this.icons.hourglasses,
value: this.userHourglasses,
});
}
currencies.push({
type: 'gems',
icon: this.icons.gem,
value: this.userGems,
});
currencies.push({
type: 'gold',
icon: this.icons.gold,
value: this.userGold,
});
for (let currency of currencies) {
if (currency.type === this.currencyNeeded && !this.enoughCurrency(this.currencyNeeded, this.amountNeeded)) {
currency.notEnough = true;
}
}
return currencies;
},
},
props: {
withHourglass: {
type: Boolean,
},
currencyNeeded: {
type: String,
},
amountNeeded: {
type: Number,
},
},
};
</script>

35
website/client/components/shops/buyModal.vue
View File

@@ -25,15 +25,28 @@
slot(name="additionalInfo", :item="item")
div
span.svg-icon.inline.icon-32(aria-hidden="true", v-html="icons[getSvgClass()]")
span.value(:class="getSvgClass()") {{ item.value }}
div(:class="{'notEnough': !this.enoughCurrency(getPriceClass(), item.value)}")
span.svg-icon.inline.icon-32(aria-hidden="true", v-html="icons[getPriceClass()]")
span.value(:class="getPriceClass()") {{ item.value }}
button.btn.btn-primary(@click="buyItem()") {{ $t('buyNow') }}
button.btn.btn-primary(
@click="purchaseGems()",
v-if="getPriceClass() === 'gems' && !this.enoughCurrency(getPriceClass(), item.value)"
) {{ $t('purchaseGems') }}
button.btn.btn-primary(
@click="buyItem()",
v-else,
:class="{'notEnough': !this.enoughCurrency(getPriceClass(), item.value)}"
) {{ $t('buyNow') }}
div.clearfix(slot="modal-footer")
span.balance.float-left {{ $t('yourBalance') }}
balanceInfo(:withHourglass="getSvgClass() === 'hourglasses'").float-right
balanceInfo(
:withHourglass="getPriceClass() === 'hourglasses'",
:currencyNeeded="getPriceClass()",
:amountNeeded="item.value"
).float-right
</template>
@@ -136,7 +149,10 @@
}
}
.notEnough {
pointer-events: none;
opacity: 0.55;
}
}
</style>
@@ -150,8 +166,10 @@
import svgPin from 'assets/svg/pin.svg';
import BalanceInfo from './balanceInfo.vue';
import currencyMixin from './_currencyMixin';
export default {
mixins: [currencyMixin],
components: {
bModal,
BalanceInfo,
@@ -191,13 +209,16 @@
this.$emit('buyPressed', this.item);
this.hideDialog();
},
purchaseGems () {
this.$root.$emit('show::modal', 'buy-gems');
},
togglePinned () {
this.$emit('togglePinned', this.item);
},
hideDialog () {
this.$root.$emit('hide::modal', 'buy-modal');
},
getSvgClass () {
getPriceClass () {
if (this.priceType && this.icons[this.priceType]) {
return this.priceType;
} else {

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

@@ -53,6 +53,12 @@
:popoverPosition="'top'",
@click="selectedGearToBuy = item"
)
template(slot="itemBadge", scope="ctx")
span.badge.badge-pill.badge-item.badge-svg(
:class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}",
@click.prevent.stop="togglePinned(ctx.item)"
)
span.svg-icon.inline.icon-12.color(v-html="icons.pin")
h1.mb-0.page-header(v-once) {{ $t('market') }}
@@ -92,8 +98,7 @@
:items="filteredGear(selectedGroupGearByClass, searchTextThrottled, selectedSortGearBy, hideLocked, hidePinned)",
:itemWidth=94,
:itemMargin=24,
:showAllLabel="$t('showAllGeneric', { type: getClassName(selectedGroupGearByClass) + ' '+$t('equipment') })",
:showLessLabel="$t('showLessGeneric', { type: getClassName(selectedGroupGearByClass) + ' '+$t('equipment') })"
:type="'gear'",
)
template(slot="item", scope="ctx")
shopItem(
@@ -146,7 +151,7 @@
template(slot="itemBadge", scope="ctx")
countBadge(
:show="true",
:show="userItems[item.purchaseType][item.key] != 0",
:count="userItems[item.purchaseType][item.key] || 0"
)
@@ -196,12 +201,13 @@
:count="userItems[drawerTabs[selectedDrawerTab].contentType][ctx.item.key] || 0"
)
span(slot="popoverContent")
h4.popover-content-title {{ ctx.item.text() }}
h4.popover-content-title {{ getItemName(selectedDrawerItemType, ctx.item) }}
sellModal(
:item="selectedItemToSell",
:itemType="selectedDrawerItemType",
:itemCount="selectedItemToSell != null ? userItems[drawerTabs[selectedDrawerTab].contentType][selectedItemToSell.key] : 0",
:text="selectedItemToSell != null ? getItemName(selectedDrawerItemType, selectedItemToSell) : ''",
@change="resetItemToSell($event)"
)
template(slot="item", scope="ctx")
@@ -244,7 +250,7 @@
@togglePinned="togglePinned($event)"
)
template(slot="item", scope="ctx")
item.flat(
item.flat.bordered-item(
:item="ctx.item",
:itemContentClass="ctx.item.class",
:showPopover="false"
@@ -302,6 +308,11 @@
padding: 24px 24px 10px;
}
.item-wrapper.bordered-item .item {
width: 112px;
height: 112px;
}
.market {
.avatar {
cursor: default;
@@ -398,6 +409,7 @@
import _filter from 'lodash/filter';
import _sortBy from 'lodash/sortBy';
import _map from 'lodash/map';
import _get from 'lodash/get';
import _throttle from 'lodash/throttle';
import _isPinned from '../_isPinned';
@@ -520,7 +532,10 @@ export default {
featuredItems () {
return featuredItems.market.map(i => {
return getItemInfo(this.user, 'marketGear', this.content.gear.flat[i]);
let newItem = getItemInfo(this.user, i.type, _get(this.content, i.path));
newItem.pinned = _isPinned(this.user, newItem);
return newItem;
});
},
},
@@ -571,6 +586,16 @@ export default {
return '';
}
},
getItemName (type, item) {
switch (type) {
case 'eggs':
return this.$t('egg', {eggType: item.text()});
case 'hatchingPotions':
return this.$t('potion', {potionType: item.text()});
default:
return item.text();
}
},
filteredGear (groupByClass, searchBy, sortBy, hideLocked, hidePinned) {
let result = _filter(this.content.gear.flat, ['klass', groupByClass]);
result = _map(result, (e) => {

5
website/client/components/shops/market/sellModal.vue
View File

@@ -12,7 +12,7 @@
div.inner-content
slot(name="item", :item="item")
h4.title {{ item.text() }}
h4.title {{ text ? text : item.text() }}
div.text {{ item.notes() }}
div
@@ -176,6 +176,9 @@
itemType: {
type: String,
},
text: {
type: String,
},
itemCount: {
type: Number,
},

29
website/client/components/shops/quests/buyQuestModal.vue
View File

@@ -29,7 +29,17 @@
span.svg-icon.inline.icon-32(aria-hidden="true", v-html="(priceType === 'gems') ? icons.gem : icons.gold")
span.value(:class="priceType") {{ item.value }}
button.btn.btn-primary(@click="buyItem()") {{ $t('buyNow') }}
button.btn.btn-primary(
@click="purchaseGems()",
v-if="priceType === 'gems' && !this.enoughCurrency(priceType, item.value)"
) {{ $t('purchaseGems') }}
button.btn.btn-primary(
@click="buyItem()",
v-else,
:class="{'notEnough': !this.enoughCurrency(priceType, item.value)}"
) {{ $t('buyNow') }}
div.right-sidebar(v-if="item.drop")
h3(v-once) {{ $t('rewards') }}
@@ -46,7 +56,10 @@
div.clearfix(slot="modal-footer")
span.balance.float-left {{ $t('yourBalance') }}
balanceInfo.float-right
balanceInfo(
:currencyNeeded="priceType",
:amountNeeded="item.value"
).float-right
</template>
@@ -186,6 +199,12 @@
color: $white;
}
}
.notEnough {
pointer-events: none;
opacity: 0.55;
}
}
</style>
@@ -202,8 +221,10 @@
import svgExperience from 'assets/svg/experience.svg';
import BalanceInfo from '../balanceInfo.vue';
import currencyMixin from '../_currencyMixin';
export default {
mixins: [currencyMixin],
components: {
bModal,
BalanceInfo,
@@ -284,6 +305,10 @@
return `Unknown type: ${drop.type}`;
}
},
purchaseGems () {
this.$root.$emit('show::modal', 'buy-gems');
},
},
props: {
item: {

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

@@ -59,6 +59,14 @@
h4.popover-content-title {{ item.text }}
.popover-content-text(v-html="item.notes")
template(slot="itemBadge", scope="ctx")
span.badge.badge-pill.badge-item.badge-svg(
:class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}",
@click.prevent.stop="togglePinned(ctx.item)"
)
span.svg-icon.inline.icon-12.color(v-html="icons.pin")
h1.mb-0.page-header(v-once) {{ $t('quests') }}
.clearfix
@@ -84,6 +92,7 @@
:items="questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned)",
:itemWidth=94,
:itemMargin=24,
:type="'pet_quests'",
)
template(slot="item", scope="ctx")
shopItem(
@@ -338,6 +347,7 @@
import _throttle from 'lodash/throttle';
import _groupBy from 'lodash/groupBy';
import _map from 'lodash/map';
import _get from 'lodash/get';
export default {
components: {
@@ -403,7 +413,10 @@ export default {
featuredItems () {
return featuredItems.quests.map(i => {
return getItemInfo(this.user, 'quest', this.content.quests[i]);
let newItem = getItemInfo(this.user, i.type, _get(this.content, i.path));
newItem.pinned = _isPinned(this.user, newItem);
return newItem;
});
},
},

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

@@ -78,6 +78,7 @@
:items="travelersItems(category, selectedSortItemsBy, searchTextThrottled, hidePinned)",
:itemWidth=94,
:itemMargin=24,
:type="category.identifier",
)
template(slot="item", scope="ctx")
shopItem(

3
website/client/components/tasks/column.vue
View File

@@ -25,7 +25,8 @@
:item="reward",
:key="reward.key",
:highlightBorder="reward.isSuggested",
@click="openBuyDialog(reward)"
@click="openBuyDialog(reward)",
:popoverPosition="'left'"
)
.column-background(

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

@@ -1,18 +1,18 @@
<template lang="pug">
.item-rows
div.items(v-resize="500", @resized="currentWidth = $event.width")
div.items(v-resize="500", @resized="setCurrentWidth($event)")
template(v-for="item in itemsToShow(showAll)")
slot(
name="item",
:item="item",
:item="item"
)
div(v-if="items.length === 0")
p(v-once) {{ noItemsLabel }}
.btn-flat.btn-show-more(
@click="showAll = !showAll",
v-if="items.length > itemsPerRow()"
@click="toggleItemsToShow()",
v-if="items.length > itemsPerRow"
) {{ showAll ? $t('showLess') : $t('showMore') }}
div.fill-height(v-else)
@@ -27,14 +27,22 @@
<script>
import ResizeDirective from 'client/directives/resize.directive';
import { mapState } from 'client/libs/store';
import _take from 'lodash/take';
import _drop from 'lodash/drop';
export default {
directives: {
resize: ResizeDirective,
},
computed: {
...mapState({
openedItemRows: 'openedItemRows',
}),
itemsPerRow () {
return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin));
},
},
data () {
return {
currentWidth: 0,
@@ -44,27 +52,47 @@
};
},
methods: {
itemsToShow (showAll) {
let itemsPerRow = this.itemsPerRow();
let rowsToShow = showAll ? Math.ceil(this.items.length / itemsPerRow) : 1;
let result = [];
toggleItemsToShow () {
this.showAll = !this.showAll;
for (let i = 0; i < rowsToShow; i++) {
let skipped = _drop(this.items, i * itemsPerRow);
let row = _take(skipped, itemsPerRow);
result = result.concat(row);
let array = this.$store.state.openedItemRows;
if (this.showAll) {
array.push(this.type);
} else {
let index = array.indexOf(this.type);
if (index > -1) {
array.splice(index, 1);
}
}
},
itemsToShow (showAll) {
let itemsLength = this.items.length;
if (itemsLength === 0)
return [];
let itemsPerRow = this.itemsPerRow;
if (showAll || itemsLength <= itemsPerRow) {
return this.items;
}
return result;
return _take(this.items, itemsPerRow);
},
itemsPerRow () {
return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin));
setCurrentWidth ($event) {
if (this.currentWidth !== $event.width) {
this.currentWidth = $event.width;
}
},
},
props: {
items: {
type: Array,
},
type: {
type: String,
},
itemWidth: {
type: Number,
},
@@ -75,5 +103,8 @@
type: String,
},
},
created () {
this.showAll = this.openedItemRows.includes(this.type);
},
};
</script>

2
website/client/libs/createAnimal.js
View File

@@ -19,7 +19,7 @@ export default function createAnimal (egg, potion, type, content, userItems) {
return type === 'pet' && this.isOwned() && !this.mountOwned();
},
isHatchable () {
return userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
return !this.isOwned() & userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
},
};
}

1
website/client/store/index.js
View File

@@ -75,6 +75,7 @@ export default function () {
constants: deepFreeze({...commonConstants, DAY_MAPPING}),
hideHeader: false,
viewingMembers: [],
openedItemRows: [],
castingSpell: false,
},
});

49
website/common/script/content/shop-featuredItems.js
View File

@@ -1,19 +1,40 @@
const featuredItems = {
market: [
'head_armoire_vikingHelm',
'weapon_special_1',
'shield_special_0',
'armor_warrior_5',
],
quests: [
'dilatoryDistress1',
'dilatoryDistress2',
'dilatoryDistress3',
],
seasonal: 'summerMage',
timeTravelers: [
market: [
{
type: 'armoire',
path: 'armoire',
},
{
type: 'hatchingPotion',
path: 'hatchingPotions.Golden',
},
{
type: 'food',
path: 'food.Saddle',
},
],
quests: [
{
type: 'quest',
path: 'quests.gryphon',
},
{
type: 'quest',
path: 'quests.dilatoryDistress1',
},
{
type: 'quest',
path: 'quests.nudibranch',
},
{
type: 'quest',
path: 'quests.taskwoodsTerror1',
},
],
seasonal: 'summerMage',
timeTravelers: [
// TODO
],
],
};
export default featuredItems;