.row.stable
.standard-sidebar
div
b-popover(
:triggers="['hover']",
:placement="'right'"
)
span(slot="content")
h4.popover-content-title(v-once) {{ $t('mattBoch') }}
.popover-content-text(v-once) {{ $t('mattBochText1') }}
div.npc_matt
.form-group
input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
.form
h2(v-once) {{ $t('filter') }}
h3(v-once) {{ $t('pets') }}
.form-group
.form-check(
v-for="petGroup in petGroups",
:key="petGroup.key"
)
label.custom-control.custom-checkbox
input.custom-control-input(
type="checkbox",
v-model="viewOptions[petGroup.key].selected",
:disabled="viewOptions[petGroup.key].animalCount == 0"
)
span.custom-control-indicator
span.custom-control-description(v-once) {{ petGroup.label }}
h3(v-once) {{ $t('mounts') }}
.form-group
.form-check(
v-for="mountGroup in mountGroups",
:key="mountGroup.key"
)
label.custom-control.custom-checkbox
input.custom-control-input(
type="checkbox",
v-model="viewOptions[mountGroup.key].selected",
:disabled="viewOptions[mountGroup.key].animalCount == 0"
)
span.custom-control-indicator
span.custom-control-description(v-once) {{ mountGroup.label }}
div.form-group.clearfix
h3.float-left Hide Missing
toggle-switch.float-right.hideMissing(
:label="''",
:checked="hideMissing",
@change="updateHideMissing"
)
.standard-page(v-resize="500", @resized="availableContentWidth = $event.width - 48")
.clearfix
h1.float-left.mb-0.page-header(v-once) {{ $t('stable') }}
div.float-right
span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="$t(selectedSortBy)", right=true)
b-dropdown-item(
v-for="sort in sortByItems",
@click="selectedSortBy = sort",
:active="selectedSortBy === sort",
:key="sort"
) {{ $t(sort) }}
h2
| {{ $t('pets') }}
|
span.badge.badge-pill.badge-default {{countOwnedAnimals(petGroups[0], 'pet')}}
div(
v-for="petGroup in petGroups",
v-if="viewOptions[petGroup.key].selected",
:key="petGroup.key"
)
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",
@dragover="onDragOver($event, pet)",
@dropped="onDrop($event, pet)",
:class="pet.isLastInRow ? 'last' : ''"
)
petItem(
:item="pet",
:itemContentClass="getPetItemClass(pet)",
:popoverPosition="'top'",
:progress="pet.progress",
:emptyItem="!pet.isOwned()",
:showPopover="pet.isOwned() || pet.isHatchable()",
@hatchPet="hatchPet",
)
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(
: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')}) }}
h2
| {{ $t('mounts') }}
|
span.badge.badge-pill.badge-default {{countOwnedAnimals(mountGroups[0], 'mount')}}
div(
v-for="mountGroup in mountGroups",
v-if="viewOptions[mountGroup.key].selected",
:key="mountGroup.key"
)
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')}) }}
drawer(
:title="$t('quickInventory')",
:errorMessage="(!hasDrawerTabItems(selectedDrawerTab)) ? $t('noFoodAvailable') : null"
)
div(slot="drawer-header")
.drawer-tab-container
.drawer-tab.text-right
a.drawer-tab-text(
@click="selectedDrawerTab = 0",
:class="{'drawer-tab-text-active': selectedDrawerTab === 0}",
) {{ drawerTabs[0].label }}
.clearfix
.drawer-tab.float-left
a.drawer-tab-text(
@click="selectedDrawerTab = 1",
:class="{ 'drawer-tab-text-active': selectedDrawerTab === 1 }",
) {{ drawerTabs[1].label }}
b-popover(
:triggers="['click']",
:placement="'top'"
)
span(slot="content")
.popover-content-text(v-html="$t('petLikeToEatText')", v-once)
div.float-right(v-once)
| {{ $t('petLikeToEat') + ' ' }}
.svg-icon(v-html="icons.information")
drawer-slider(
:items="drawerTabs[selectedDrawerTab].items",
:scrollButtonsVisible="hasDrawerTabItems(selectedDrawerTab)",
slot="drawer-slider",
:itemWidth=94,
:itemMargin=24,
)
template(slot="item", scope="ctx")
foodItem(
:item="ctx.item",
:itemCount="userItems.food[ctx.item.key]",
)
b-modal#welcome-modal(
:ok-only="true",
:ok-title="$t('gotIt')",
:visible="!hideDialog",
:hide-header="true"
)
div.content
div.npc_matt
h1.page-header(v-once) {{ $t('welcomeStable') }}
div.content-text(v-once) {{ $t('welcomeStableText') }}