.row.quests
.standard-sidebar.d-none.d-sm-block
.form-group
input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
.form
h2(v-once) {{ $t('filter') }}
.form-group
.form-check(
v-for="category in categories",
:key="category.identifier",
)
.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected", :id="`category-${category.identifier}`")
label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.text }}
div.form-group.clearfix
h3.float-left(v-once) {{ $t('hideLocked') }}
toggle-switch.float-right.no-margin(
:label="''",
v-model="hideLocked",
)
div.form-group.clearfix
h3.float-left(v-once) {{ $t('hidePinned') }}
toggle-switch.float-right.no-margin(
:label="''",
v-model="hidePinned",
)
.standard-page
div.featuredItems
.background(:class="{broken: broken}")
.background(:class="{cracked: broken, broken: broken}")
div.npc
div.featured-label
span.rectangle
span.text Ian
span.rectangle
div.content
div.featured-label.with-border
span.rectangle
span.text {{ shop.featured.text }}
span.rectangle
div.items.margin-center
shopItem(
v-for="item in shop.featured.items",
:key="item.key",
:item="item",
:price="item.goldValue ? item.goldValue : item.value",
:priceType="item.goldValue ? 'gold' : 'gem'",
:itemContentClass="'inventory_quest_scroll_'+item.key",
:emptyItem="false",
:popoverPosition="'top'",
@click="selectItem(item)"
)
template(slot="popoverContent", slot-scope="ctx")
div.questPopover
h4.popover-content-title {{ item.text }}
questInfo(:quest="item")
template(slot="itemBadge", slot-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-4.page-header(v-once) {{ $t('quests') }}
.clearfix
div.float-right
span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="$t(selectedSortItemsBy)", right=true)
b-dropdown-item(
v-for="sort in sortItemsBy",
@click="selectedSortItemsBy = sort",
:active="selectedSortItemsBy === sort",
:key="sort"
) {{ $t(sort) }}
div(
v-for="category in categories",
v-if="viewOptions[category.identifier].selected"
)
h2.mb-3 {{ category.text }}
itemRows(
v-if="category.identifier === 'pet'",
:items="questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned)",
:itemWidth=94,
:itemMargin=24,
:type="'pet_quests'",
)
template(slot="item", slot-scope="ctx")
shopItem(
:key="ctx.item.key",
:item="ctx.item",
:price="ctx.item.value",
:priceType="ctx.item.currency",
:itemContentClass="ctx.item.class",
:emptyItem="false",
@click="selectItem(ctx.item)"
)
span(slot="popoverContent", slot-scope="ctx")
div.questPopover
h4.popover-content-title {{ ctx.item.text }}
questInfo(:quest="ctx.item")
template(slot="itemBadge", slot-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")
countBadge(
:show="userItems.quests[ctx.item.key] > 0",
:count="userItems.quests[ctx.item.key] || 0"
)
div.grouped-parent(v-else-if="category.identifier === 'unlockable' || category.identifier === 'gold'")
div.group(v-for="(items, key) in getGrouped(questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned))", v-if="key !== 'questGroupEarnable'")
h3 {{ $t(key) }}
div.items
shopItem(
v-for="item in items",
:key="item.key",
:item="item",
:price="item.value",
:emptyItem="false",
:popoverPosition="'top'",
@click="selectItem(item)"
)
span(slot="popoverContent")
div.questPopover
div
h4.popover-content-title(v-if='item.locked') {{ `${$t('lockedItem')}` }}
h4.popover-content-title(v-else) {{ item.text }}
.popover-content-text(v-if='item.locked && item.key === "lostMasterclasser1"') {{ `${$t('questUnlockLostMasterclasser')}` }}
.popover-content-text(v-if='item.locked && item.unlockCondition && item.unlockCondition.incentiveThreshold') {{ `${$t('loginIncentiveQuest', {count: item.unlockCondition.incentiveThreshold})}` }}
.popover-content-text(v-if='item.locked && item.previous') {{ `${$t('unlockByQuesting', {title: item.previous})}` }}
.popover-content-text(v-if='item.lvl > user.stats.lvl') {{ `${$t('mustLvlQuest', {level: item.lvl})}` }}
questInfo(v-if='!item.locked', :quest="item")
template(slot="itemBadge", slot-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")
countBadge(
:show="userItems.quests[ctx.item.key] > 0",
:count="userItems.quests[ctx.item.key] || 0"
)
div.items(v-else)
shopItem(
v-for="item in questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned)",
:key="item.key",
:item="item",
:price="item.value",
:emptyItem="false",
:popoverPosition="'top'",
@click="selectItem(item)"
)
span(slot="popoverContent")
div.questPopover
h4.popover-content-title {{ item.text }}
questInfo(:quest="item")
template(slot="itemBadge", slot-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")
countBadge(
:show="userItems.quests[ctx.item.key] > 0",
:count="userItems.quests[ctx.item.key] || 0"
)
buyModal(
:item="selectedItemToBuy || {}",
:priceType="selectedItemToBuy ? selectedItemToBuy.currency : ''",
:withPin="true",
@change="resetItemToBuy($event)",
)
template(slot="item", slot-scope="ctx")
item.flat(
:item="ctx.item",
:itemContentClass="ctx.item.class",
:showPopover="false"
)