pug to html
This commit is contained in:
Matteo Pagliazzi
@@ -1,28 +1,57 @@
|
||||
<template lang="pug">
|
||||
.standard-page.container
|
||||
.row(v-for='(category, key) in achievements')
|
||||
h2.col-12 {{ $t(key+'Achievs') }}
|
||||
.col-3.text-center(v-for='achievment in category.achievements')
|
||||
div.achievement-container(:data-popover-html='achievment.title + achievment.text',
|
||||
popover-placement='achievPopoverPlacement',
|
||||
popover-append-to-body='achievAppendToBody')
|
||||
div(popover-trigger='mouseenter',
|
||||
:data-popover-html='achievment.title + achievment.text',
|
||||
popover-placement='achievPopoverPlacement',
|
||||
popover-append-to-body='achievAppendToBody')
|
||||
.achievement(:class='achievment.icon + "2x"', v-if='achievment.earned')
|
||||
.counter.badge.badge-info.stack-count(v-if='achievment.optionalCount') {{achievment.optionalCount}}
|
||||
.achievement(class='achievement-unearned2x', v-if='!achievment.earned')
|
||||
.row
|
||||
.col-6
|
||||
h2 Challeges Won
|
||||
div(v-for='chal in user.achievements.challenges')
|
||||
span {{chal}}
|
||||
.col-6
|
||||
h2 Quests Completed
|
||||
div(v-for='(value, key) in user.achievements.quests')
|
||||
span {{ content.quests[k].text() }}
|
||||
span {{ value }}
|
||||
<template>
|
||||
<div class="standard-page container">
|
||||
<div
|
||||
v-for="(category, key) in achievements"
|
||||
class="row"
|
||||
>
|
||||
<h2 class="col-12">
|
||||
{{ $t(key+'Achievs') }}
|
||||
</h2><div
|
||||
v-for="achievment in category.achievements"
|
||||
class="col-3 text-center"
|
||||
>
|
||||
<div
|
||||
class="achievement-container"
|
||||
:data-popover-html="achievment.title + achievment.text"
|
||||
popover-placement="achievPopoverPlacement"
|
||||
popover-append-to-body="achievAppendToBody"
|
||||
>
|
||||
<div
|
||||
popover-trigger="mouseenter"
|
||||
:data-popover-html="achievment.title + achievment.text"
|
||||
popover-placement="achievPopoverPlacement"
|
||||
popover-append-to-body="achievAppendToBody"
|
||||
>
|
||||
<div
|
||||
v-if="achievment.earned"
|
||||
class="achievement"
|
||||
:class="achievment.icon + '2x'"
|
||||
>
|
||||
<div
|
||||
v-if="achievment.optionalCount"
|
||||
class="counter badge badge-info stack-count"
|
||||
>
|
||||
{{ achievment.optionalCount }}
|
||||
</div>
|
||||
</div><div
|
||||
v-if="!achievment.earned"
|
||||
class="achievement achievement-unearned2x"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
<div class="col-6">
|
||||
<h2>Challeges Won</h2><div v-for="chal in user.achievements.challenges">
|
||||
<span>{{ chal }}</span>
|
||||
</div>
|
||||
</div><div class="col-6">
|
||||
<h2>Quests Completed</h2><div v-for="(value, key) in user.achievements.quests">
|
||||
<span>{{ content.quests[k].text() }}</span><span>{{ value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,71 +1,147 @@
|
||||
<template lang="pug">
|
||||
b-modal#inbox-modal(title="", :hide-footer="true", size='lg', @shown="onModalShown", @hide="onModalHide")
|
||||
.header-wrap.container.align-items-center(slot="modal-header")
|
||||
.row.align-items-center
|
||||
.col-4
|
||||
.row.align-items-center
|
||||
.col-2
|
||||
.svg-icon.envelope(v-html="icons.messageIcon")
|
||||
.col-6
|
||||
h2.text-center(v-once) {{ $t('messages') }}
|
||||
.col-4.offset-3
|
||||
toggle-switch.float-right(
|
||||
:label="optTextSet.switchDescription",
|
||||
<template>
|
||||
<b-modal
|
||||
id="inbox-modal"
|
||||
title=""
|
||||
:hide-footer="true"
|
||||
size="lg"
|
||||
@shown="onModalShown"
|
||||
@hide="onModalHide"
|
||||
>
|
||||
<div
|
||||
slot="modal-header"
|
||||
class="header-wrap container align-items-center"
|
||||
>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-2">
|
||||
<div
|
||||
class="svg-icon envelope"
|
||||
v-html="icons.messageIcon"
|
||||
></div>
|
||||
</div><div class="col-6">
|
||||
<h2
|
||||
v-once
|
||||
class="text-center"
|
||||
>
|
||||
{{ $t('messages') }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="col-4 offset-3">
|
||||
<toggle-switch
|
||||
class="float-right"
|
||||
:label="optTextSet.switchDescription"
|
||||
:checked="!this.user.inbox.optOut"
|
||||
:hoverText="optTextSet.popoverText",
|
||||
:hover-text="optTextSet.popoverText"
|
||||
@change="toggleOpt()"
|
||||
)
|
||||
.col-1
|
||||
.close
|
||||
span.svg-icon.inline.icon-10(aria-hidden="true", v-html="icons.svgClose", @click="close()")
|
||||
.row
|
||||
.col-4.sidebar
|
||||
.search-section
|
||||
b-form-input(:placeholder="$t('search')", v-model='search')
|
||||
.empty-messages.text-center(v-if='filtersConversations.length === 0')
|
||||
.svg-icon.envelope(v-html="icons.messageIcon")
|
||||
h4(v-once) {{$t('emptyMessagesLine1')}}
|
||||
p(v-if="!user.flags.chatRevoked") {{$t('emptyMessagesLine2')}}
|
||||
.conversations(v-if='filtersConversations.length > 0')
|
||||
.conversation(v-for='conversation in filtersConversations', @click='selectConversation(conversation.key)',
|
||||
:class="{active: selectedConversation.key === conversation.key}")
|
||||
div
|
||||
h3(:class="userLevelStyle(conversation)") {{ conversation.name }}
|
||||
.svg-icon(v-html="tierIcon(conversation)")
|
||||
.time
|
||||
span.mr-1(v-if='conversation.username') @{{ conversation.username }} •
|
||||
span(v-if="conversation.date") {{ conversation.date | timeAgo }}
|
||||
div.messagePreview {{ conversation.lastMessageText ? removeTags(parseMarkdown(conversation.lastMessageText)) : '' }}
|
||||
.col-8.messages.d-flex.flex-column.justify-content-between
|
||||
.empty-messages.text-center(v-if='!selectedConversation.key')
|
||||
.svg-icon.envelope(v-html="icons.messageIcon")
|
||||
h4 {{placeholderTexts.title}}
|
||||
p(v-html="placeholderTexts.description")
|
||||
.empty-messages.text-center(v-if='selectedConversation && selectedConversationMessages.length === 0')
|
||||
p {{ $t('beginningOfConversation', {userName: selectedConversation.name})}}
|
||||
chat-messages.message-scroll(
|
||||
v-if="selectedConversation && selectedConversationMessages.length > 0",
|
||||
:chat='selectedConversationMessages',
|
||||
:inbox='true',
|
||||
@message-removed='messageRemoved',
|
||||
ref="chatscroll",
|
||||
|
||||
:canLoadMore="canLoadMore",
|
||||
:isLoading="messagesLoading",
|
||||
@triggerLoad="infiniteScrollTrigger"
|
||||
)
|
||||
.pm-disabled-caption.text-center(v-if="user.inbox.optOut && selectedConversation.key")
|
||||
h4 {{$t('PMDisabledCaptionTitle')}}
|
||||
p {{$t('PMDisabledCaptionText')}}
|
||||
.new-message-row(v-if='selectedConversation.key && !user.flags.chatRevoked')
|
||||
textarea(
|
||||
v-model='newMessage',
|
||||
@keyup.ctrl.enter='sendPrivateMessage()',
|
||||
maxlength='3000'
|
||||
)
|
||||
button.btn.btn-secondary(@click='sendPrivateMessage()') {{$t('send')}}
|
||||
.row
|
||||
span.ml-3 {{ currentLength }} / 3000
|
||||
/>
|
||||
</div><div class="col-1">
|
||||
<div class="close">
|
||||
<span
|
||||
class="svg-icon inline icon-10"
|
||||
aria-hidden="true"
|
||||
@click="close()"
|
||||
v-html="icons.svgClose"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
<div class="col-4 sidebar">
|
||||
<div class="search-section">
|
||||
<b-form-input
|
||||
v-model="search"
|
||||
:placeholder="$t('search')"
|
||||
/>
|
||||
</div><div
|
||||
v-if="filtersConversations.length === 0"
|
||||
class="empty-messages text-center"
|
||||
>
|
||||
<div
|
||||
class="svg-icon envelope"
|
||||
v-html="icons.messageIcon"
|
||||
></div><h4 v-once>
|
||||
{{ $t('emptyMessagesLine1') }}
|
||||
</h4><p v-if="!user.flags.chatRevoked">
|
||||
{{ $t('emptyMessagesLine2') }}
|
||||
</p>
|
||||
</div><div
|
||||
v-if="filtersConversations.length > 0"
|
||||
class="conversations"
|
||||
>
|
||||
<div
|
||||
v-for="conversation in filtersConversations"
|
||||
class="conversation"
|
||||
:class="{active: selectedConversation.key === conversation.key}"
|
||||
@click="selectConversation(conversation.key)"
|
||||
>
|
||||
<div>
|
||||
<h3 :class="userLevelStyle(conversation)">
|
||||
{{ conversation.name }}<div
|
||||
class="svg-icon"
|
||||
v-html="tierIcon(conversation)"
|
||||
></div>
|
||||
</h3>
|
||||
</div><div class="time">
|
||||
<span
|
||||
v-if="conversation.username"
|
||||
class="mr-1"
|
||||
>@{{ conversation.username }} •</span><span v-if="conversation.date">{{ conversation.date | timeAgo }}</span>
|
||||
</div><div class="messagePreview">
|
||||
{{ conversation.lastMessageText ? removeTags(parseMarkdown(conversation.lastMessageText)) : '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="col-8 messages d-flex flex-column justify-content-between">
|
||||
<div
|
||||
v-if="!selectedConversation.key"
|
||||
class="empty-messages text-center"
|
||||
>
|
||||
<div
|
||||
class="svg-icon envelope"
|
||||
v-html="icons.messageIcon"
|
||||
></div><h4>{{ placeholderTexts.title }}</h4><p v-html="placeholderTexts.description"></p>
|
||||
</div><div
|
||||
v-if="selectedConversation && selectedConversationMessages.length === 0"
|
||||
class="empty-messages text-center"
|
||||
>
|
||||
<p>{{ $t('beginningOfConversation', {userName: selectedConversation.name}) }}</p>
|
||||
</div><chat-messages
|
||||
v-if="selectedConversation && selectedConversationMessages.length > 0"
|
||||
ref="chatscroll"
|
||||
class="message-scroll"
|
||||
:chat="selectedConversationMessages"
|
||||
:inbox="true"
|
||||
:can-load-more="canLoadMore"
|
||||
:is-loading="messagesLoading"
|
||||
@message-removed="messageRemoved"
|
||||
@triggerLoad="infiniteScrollTrigger"
|
||||
/><div
|
||||
v-if="user.inbox.optOut && selectedConversation.key"
|
||||
class="pm-disabled-caption text-center"
|
||||
>
|
||||
<h4>{{ $t('PMDisabledCaptionTitle') }}</h4><p>{{ $t('PMDisabledCaptionText') }}</p>
|
||||
</div><div
|
||||
v-if="selectedConversation.key && !user.flags.chatRevoked"
|
||||
class="new-message-row"
|
||||
>
|
||||
<textarea
|
||||
v-model="newMessage"
|
||||
maxlength="3000"
|
||||
@keyup.ctrl.enter="sendPrivateMessage()"
|
||||
></textarea><button
|
||||
class="btn btn-secondary"
|
||||
@click="sendPrivateMessage()"
|
||||
>
|
||||
{{ $t('send') }}
|
||||
</button><div class="row">
|
||||
<span class="ml-3">{{ currentLength }} / 3000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -508,8 +584,8 @@ export default {
|
||||
|
||||
// Remove the placeholder message
|
||||
if (
|
||||
this.initiatedConversation &&
|
||||
this.initiatedConversation.uuid === this.selectedConversation.key
|
||||
this.initiatedConversation
|
||||
&& this.initiatedConversation.uuid === this.selectedConversation.key
|
||||
) {
|
||||
this.loadedConversations.unshift(this.initiatedConversation);
|
||||
this.initiatedConversation = null;
|
||||
|
||||
@@ -1,148 +1,327 @@
|
||||
<template lang="pug">
|
||||
.profile(v-if='user')
|
||||
.header
|
||||
.profile-actions
|
||||
button.btn.btn-secondary.message-icon(@click='sendMessage()', v-b-tooltip.hover.left="$t('sendMessage')")
|
||||
.svg-icon.message-icon(v-html="icons.message")
|
||||
button.btn.btn-secondary.gift-icon(@click='openSendGemsModal()', v-b-tooltip.hover.bottom="$t('sendGems')")
|
||||
.svg-icon.gift-icon(v-html="icons.gift")
|
||||
button.btn.btn-secondary.remove-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1',
|
||||
@click="blockUser()", v-b-tooltip.hover.right="$t('blockWarning')")
|
||||
.svg-icon.remove-icon(v-html="icons.remove")
|
||||
button.btn.btn-secondary.positive-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1',
|
||||
@click="unblockUser()", v-b-tooltip.hover.right="$t('unblock')")
|
||||
.svg-icon.positive-icon(v-html="icons.positive")
|
||||
button.btn.btn-secondary.positive-icon(v-if='this.userLoggedIn.contributor.admin',
|
||||
@click="toggleAdminTools()", v-b-tooltip.hover.right="'Admin - Toggle Tools'")
|
||||
.svg-icon.positive-icon(v-html="icons.staff")
|
||||
.row.admin-profile-actions(v-if='this.userLoggedIn.contributor.admin && adminToolsLoaded')
|
||||
.col-12.text-right
|
||||
span.admin-action(v-if='!hero.flags || (hero.flags && !hero.flags.chatShadowMuted)',
|
||||
@click="adminTurnOnShadowMuting()", v-b-tooltip.hover.bottom="'Turn on Shadow Muting'")
|
||||
| shadow-mute
|
||||
span.admin-action(v-if='hero.flags && hero.flags.chatShadowMuted',
|
||||
@click="adminTurnOffShadowMuting()", v-b-tooltip.hover.bottom="'Turn off Shadow Muting'")
|
||||
| un-shadow-mute
|
||||
span.admin-action(v-if='!hero.flags || (hero.flags && !hero.flags.chatRevoked)',
|
||||
@click="adminRevokeChat()", v-b-tooltip.hover.bottom="'Revoke Chat Privileges'")
|
||||
| mute
|
||||
span.admin-action(v-if='hero.flags && hero.flags.chatRevoked',
|
||||
@click="adminReinstateChat()", v-b-tooltip.hover.bottom="'Reinstate Chat Privileges'")
|
||||
| un-mute
|
||||
span.admin-action(v-if='!hero.auth.blocked',
|
||||
@click="adminBlockUser()", v-b-tooltip.hover.bottom="'Ban User'")
|
||||
| ban
|
||||
span.admin-action(v-if='hero.auth.blocked',
|
||||
@click="adminUnblockUser()", v-b-tooltip.hover.bottom="'Un-Ban User'")
|
||||
| un-ban
|
||||
.row
|
||||
.col-12
|
||||
member-details(:member="user")
|
||||
.row
|
||||
.col-12.col-md-6.offset-md-3.text-center.nav
|
||||
.nav-item(@click='selectPage("profile")', :class="{active: selectedPage === 'profile'}") {{ $t('profile') }}
|
||||
.nav-item(@click='selectPage("stats")', :class="{active: selectedPage === 'stats'}") {{ $t('stats') }}
|
||||
.nav-item(@click='selectPage("achievements")', :class="{active: selectedPage === 'achievements'}") {{ $t('achievements') }}
|
||||
#userProfile.standard-page(v-show='selectedPage === "profile"', v-if='user.profile')
|
||||
.row
|
||||
.col-12.col-md-8
|
||||
.header.mb-3
|
||||
h1 {{user.profile.name}}
|
||||
.name(v-if='user.auth && user.auth.local && user.auth.local.username') @{{ user.auth.local.username }}
|
||||
.col-12.col-md-4
|
||||
button.btn.btn-secondary(v-if='user._id === userLoggedIn._id', @click='editing = !editing', style='float:right;') {{ $t('edit') }}
|
||||
.row(v-if='!editing')
|
||||
.col-12.col-md-8
|
||||
.about.profile-section
|
||||
h2 {{ $t('about') }}
|
||||
p(v-if='user.profile.blurb', v-markdown='user.profile.blurb')
|
||||
p(v-else) {{ $t('noDescription') }}
|
||||
.photo.profile-section
|
||||
h2 {{ $t('photo') }}
|
||||
img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
|
||||
p(v-else) {{ $t('noPhoto') }}
|
||||
|
||||
.col-12.col-md-4
|
||||
.info.profile-section
|
||||
h2 {{ $t('info') }}
|
||||
.info-item
|
||||
.info-item-label {{ $t('joined') }}:
|
||||
.info-item-value {{userJoinedDate}}
|
||||
.info-item
|
||||
.info-item-label {{ $t('totalLogins') }}:
|
||||
.info-item-value {{ user.loginIncentives }}
|
||||
.info-item
|
||||
.info-item-label {{ $t('latestCheckin') }}:
|
||||
.info-item-value {{userLastLoggedIn}}
|
||||
.info-item
|
||||
| {{getProgressDisplay()}}
|
||||
.progress
|
||||
.progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
|
||||
span.sr-only {{ incentivesProgress }}% {{$t('complete')}}
|
||||
// @TODO: Implement in V2 .social
|
||||
|
||||
.row(v-if='editing')
|
||||
h1 {{$t('editProfile')}}
|
||||
.col-12
|
||||
.alert.alert-info.alert-sm(v-html='$t("communityGuidelinesWarning", managerEmail)')
|
||||
|
||||
// TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
|
||||
.form-group
|
||||
label {{ $t('displayName') }}
|
||||
input.form-control(type='text', :placeholder="$t('fullName')", v-model='editingProfile.name')
|
||||
.form-group
|
||||
label {{ $t('photoUrl') }}
|
||||
input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
|
||||
.form-group
|
||||
label {{ $t('about') }}
|
||||
textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
|
||||
// include ../../shared/formatting-help
|
||||
//- .form-group
|
||||
//- label Facebook
|
||||
//- input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
|
||||
//- .form-group
|
||||
//- label Instagram
|
||||
//- input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
|
||||
//- .form-group
|
||||
//- label Twitter
|
||||
//- input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
|
||||
|
||||
.col-12.text-center
|
||||
button.btn.btn-primary(@click='save()') {{ $t("save") }}
|
||||
button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
|
||||
#achievements.standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
|
||||
.row(v-for='(category, key) in achievements')
|
||||
h2.col-12.text-center {{ $t(key+'Achievs') }}
|
||||
.col-12.col-md-3.text-center(v-for='(achievement, key) in category.achievements')
|
||||
.box.achievement-container(:id='key + "-achievement"', :class='{"achievement-unearned": !achievement.earned}')
|
||||
b-popover(
|
||||
:target="'#' + key + '-achievement'",
|
||||
triggers="hover",
|
||||
placement="top",
|
||||
)
|
||||
h4.popover-content-title {{ achievement.title }}
|
||||
div.popover-content-text(v-html="achievement.text")
|
||||
.achievement(:class='achievement.icon + "2x"', v-if='achievement.earned')
|
||||
.counter.badge.badge-info.stack-count(v-if='achievement.optionalCount') {{achievement.optionalCount}}
|
||||
.achievement.achievement-unearned(class='achievement-unearned2x', v-if='!achievement.earned')
|
||||
hr.col-12
|
||||
.row
|
||||
.col-12.col-md-6(v-if='user.achievements.challenges')
|
||||
.achievement-icon.achievement-karaoke
|
||||
h2.text-center {{$t('challengesWon')}}
|
||||
div(v-for='chal in user.achievements.challenges')
|
||||
span(v-markdown='chal')
|
||||
hr
|
||||
.col-12.col-md-6(v-if='user.achievements.quests')
|
||||
.achievement-icon.achievement-alien
|
||||
h2.text-center {{$t('questsCompleted')}}
|
||||
div(v-for='(value, key) in user.achievements.quests')
|
||||
span {{ content.quests[key].text() }} ({{ value }})
|
||||
profileStats(
|
||||
:user='user',
|
||||
v-show='selectedPage === "stats"',
|
||||
:showAllocation='showAllocation()',
|
||||
v-if='user.preferences')
|
||||
<template>
|
||||
<div
|
||||
v-if="user"
|
||||
class="profile"
|
||||
>
|
||||
<div class="header">
|
||||
<div class="profile-actions">
|
||||
<button
|
||||
v-b-tooltip.hover.left="$t('sendMessage')"
|
||||
class="btn btn-secondary message-icon"
|
||||
@click="sendMessage()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon message-icon"
|
||||
v-html="icons.message"
|
||||
></div>
|
||||
</button><button
|
||||
v-b-tooltip.hover.bottom="$t('sendGems')"
|
||||
class="btn btn-secondary gift-icon"
|
||||
@click="openSendGemsModal()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon gift-icon"
|
||||
v-html="icons.gift"
|
||||
></div>
|
||||
</button><button
|
||||
v-if="user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1"
|
||||
v-b-tooltip.hover.right="$t('blockWarning')"
|
||||
class="btn btn-secondary remove-icon"
|
||||
@click="blockUser()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon remove-icon"
|
||||
v-html="icons.remove"
|
||||
></div>
|
||||
</button><button
|
||||
v-if="user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1"
|
||||
v-b-tooltip.hover.right="$t('unblock')"
|
||||
class="btn btn-secondary positive-icon"
|
||||
@click="unblockUser()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon positive-icon"
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
</button><button
|
||||
v-if="this.userLoggedIn.contributor.admin"
|
||||
v-b-tooltip.hover.right="'Admin - Toggle Tools'"
|
||||
class="btn btn-secondary positive-icon"
|
||||
@click="toggleAdminTools()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon positive-icon"
|
||||
v-html="icons.staff"
|
||||
></div>
|
||||
</button>
|
||||
</div><div
|
||||
v-if="this.userLoggedIn.contributor.admin && adminToolsLoaded"
|
||||
class="row admin-profile-actions"
|
||||
>
|
||||
<div class="col-12 text-right">
|
||||
<span
|
||||
v-if="!hero.flags || (hero.flags && !hero.flags.chatShadowMuted)"
|
||||
v-b-tooltip.hover.bottom="'Turn on Shadow Muting'"
|
||||
class="admin-action"
|
||||
@click="adminTurnOnShadowMuting()"
|
||||
>shadow-mute</span><span
|
||||
v-if="hero.flags && hero.flags.chatShadowMuted"
|
||||
v-b-tooltip.hover.bottom="'Turn off Shadow Muting'"
|
||||
class="admin-action"
|
||||
@click="adminTurnOffShadowMuting()"
|
||||
>un-shadow-mute</span><span
|
||||
v-if="!hero.flags || (hero.flags && !hero.flags.chatRevoked)"
|
||||
v-b-tooltip.hover.bottom="'Revoke Chat Privileges'"
|
||||
class="admin-action"
|
||||
@click="adminRevokeChat()"
|
||||
>mute</span><span
|
||||
v-if="hero.flags && hero.flags.chatRevoked"
|
||||
v-b-tooltip.hover.bottom="'Reinstate Chat Privileges'"
|
||||
class="admin-action"
|
||||
@click="adminReinstateChat()"
|
||||
>un-mute</span><span
|
||||
v-if="!hero.auth.blocked"
|
||||
v-b-tooltip.hover.bottom="'Ban User'"
|
||||
class="admin-action"
|
||||
@click="adminBlockUser()"
|
||||
>ban</span><span
|
||||
v-if="hero.auth.blocked"
|
||||
v-b-tooltip.hover.bottom="'Un-Ban User'"
|
||||
class="admin-action"
|
||||
@click="adminUnblockUser()"
|
||||
>un-ban</span>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
<div class="col-12">
|
||||
<member-details :member="user" />
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
<div class="col-12 col-md-6 offset-md-3 text-center nav">
|
||||
<div
|
||||
class="nav-item"
|
||||
:class="{active: selectedPage === 'profile'}"
|
||||
@click="selectPage('profile')"
|
||||
>
|
||||
{{ $t('profile') }}
|
||||
</div><div
|
||||
class="nav-item"
|
||||
:class="{active: selectedPage === 'stats'}"
|
||||
@click="selectPage('stats')"
|
||||
>
|
||||
{{ $t('stats') }}
|
||||
</div><div
|
||||
class="nav-item"
|
||||
:class="{active: selectedPage === 'achievements'}"
|
||||
@click="selectPage('achievements')"
|
||||
>
|
||||
{{ $t('achievements') }}
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
v-show="selectedPage === 'profile'"
|
||||
v-if="user.profile"
|
||||
id="userProfile"
|
||||
class="standard-page"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="header mb-3">
|
||||
<h1>{{ user.profile.name }}</h1><div
|
||||
v-if="user.auth && user.auth.local && user.auth.local.username"
|
||||
class="name"
|
||||
>
|
||||
@{{ user.auth.local.username }}
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="col-12 col-md-4">
|
||||
<button
|
||||
v-if="user._id === userLoggedIn._id"
|
||||
class="btn btn-secondary"
|
||||
style="float:right;"
|
||||
@click="editing = !editing"
|
||||
>
|
||||
{{ $t('edit') }}
|
||||
</button>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="!editing"
|
||||
class="row"
|
||||
>
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="about profile-section">
|
||||
<h2>{{ $t('about') }}</h2><p
|
||||
v-if="user.profile.blurb"
|
||||
v-markdown="user.profile.blurb"
|
||||
></p><p v-else>
|
||||
{{ $t('noDescription') }}
|
||||
</p>
|
||||
</div><div class="photo profile-section">
|
||||
<h2>{{ $t('photo') }}</h2><img
|
||||
v-if="user.profile.imageUrl"
|
||||
class="img-rendering-auto"
|
||||
:src="user.profile.imageUrl"
|
||||
><p v-else>
|
||||
{{ $t('noPhoto') }}
|
||||
</p>
|
||||
</div>
|
||||
</div><div class="col-12 col-md-4">
|
||||
<div class="info profile-section">
|
||||
<h2>{{ $t('info') }}</h2><div class="info-item">
|
||||
<div class="info-item-label">
|
||||
{{ $t('joined') }}:
|
||||
</div><div class="info-item-value">
|
||||
{{ userJoinedDate }}
|
||||
</div>
|
||||
</div><div class="info-item">
|
||||
<div class="info-item-label">
|
||||
{{ $t('totalLogins') }}:
|
||||
</div><div class="info-item-value">
|
||||
{{ user.loginIncentives }}
|
||||
</div>
|
||||
</div><div class="info-item">
|
||||
<div class="info-item-label">
|
||||
{{ $t('latestCheckin') }}:
|
||||
</div><div class="info-item-value">
|
||||
{{ userLastLoggedIn }}
|
||||
</div>
|
||||
</div><div class="info-item">
|
||||
{{ getProgressDisplay() }}<div class="progress">
|
||||
<div
|
||||
class="progress-bar"
|
||||
role="progressbar"
|
||||
:aria-valuenow="incentivesProgress"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
:style="{width: incentivesProgress + '%'}"
|
||||
>
|
||||
<span class="sr-only">{{ incentivesProgress }}% {{ $t('complete') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- @TODO: Implement in V2 .social-->
|
||||
</div>
|
||||
</div><div
|
||||
v-if="editing"
|
||||
class="row"
|
||||
>
|
||||
<h1>{{ $t('editProfile') }}</h1><div class="col-12">
|
||||
<div
|
||||
class="alert alert-info alert-sm"
|
||||
v-html="$t('communityGuidelinesWarning', managerEmail)"
|
||||
></div><!-- TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak--><div class="form-group">
|
||||
<label>{{ $t('displayName') }}</label><input
|
||||
v-model="editingProfile.name"
|
||||
class="form-control"
|
||||
type="text"
|
||||
:placeholder="$t('fullName')"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
<label>{{ $t('photoUrl') }}</label><input
|
||||
v-model="editingProfile.imageUrl"
|
||||
class="form-control"
|
||||
type="url"
|
||||
:placeholder="$t('imageUrl')"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
<label>{{ $t('about') }}</label><textarea
|
||||
v-model="editingProfile.blurb"
|
||||
class="form-control"
|
||||
rows="5"
|
||||
:placeholder="$t('displayBlurbPlaceholder')"
|
||||
></textarea><!-- include ../../shared/formatting-help-->
|
||||
</div>
|
||||
</div><div class="col-12 text-center">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="save()"
|
||||
>
|
||||
{{ $t("save") }}
|
||||
</button><button
|
||||
class="btn btn-warning"
|
||||
@click="editing = false"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
v-show="selectedPage === 'achievements'"
|
||||
v-if="user.achievements"
|
||||
id="achievements"
|
||||
class="standard-page container"
|
||||
>
|
||||
<div
|
||||
v-for="(category, key) in achievements"
|
||||
class="row"
|
||||
>
|
||||
<h2 class="col-12 text-center">
|
||||
{{ $t(key+'Achievs') }}
|
||||
</h2><div
|
||||
v-for="(achievement, key) in category.achievements"
|
||||
class="col-12 col-md-3 text-center"
|
||||
>
|
||||
<div
|
||||
:id="key + '-achievement'"
|
||||
class="box achievement-container"
|
||||
:class="{'achievement-unearned': !achievement.earned}"
|
||||
>
|
||||
<b-popover
|
||||
:target="'#' + key + '-achievement'"
|
||||
triggers="hover"
|
||||
placement="top"
|
||||
>
|
||||
<h4 class="popover-content-title">
|
||||
{{ achievement.title }}
|
||||
</h4><div
|
||||
class="popover-content-text"
|
||||
v-html="achievement.text"
|
||||
></div>
|
||||
</b-popover><div
|
||||
v-if="achievement.earned"
|
||||
class="achievement"
|
||||
:class="achievement.icon + '2x'"
|
||||
>
|
||||
<div
|
||||
v-if="achievement.optionalCount"
|
||||
class="counter badge badge-info stack-count"
|
||||
>
|
||||
{{ achievement.optionalCount }}
|
||||
</div>
|
||||
</div><div
|
||||
v-if="!achievement.earned"
|
||||
class="achievement achievement-unearned achievement-unearned2x"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><hr class="col-12"><div class="row">
|
||||
<div
|
||||
v-if="user.achievements.challenges"
|
||||
class="col-12 col-md-6"
|
||||
>
|
||||
<div class="achievement-icon achievement-karaoke"></div><h2 class="text-center">
|
||||
{{ $t('challengesWon') }}
|
||||
</h2><div v-for="chal in user.achievements.challenges">
|
||||
<span v-markdown="chal"></span><hr>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="user.achievements.quests"
|
||||
class="col-12 col-md-6"
|
||||
>
|
||||
<div class="achievement-icon achievement-alien"></div><h2 class="text-center">
|
||||
{{ $t('questsCompleted') }}
|
||||
</h2><div v-for="(value, key) in user.achievements.quests">
|
||||
<span>{{ content.quests[key].text() }} ({{ value }})</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><profileStats
|
||||
v-show="selectedPage === 'stats'"
|
||||
v-if="user.preferences"
|
||||
:user="user"
|
||||
:show-allocation="showAllocation()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" >
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
<template lang="pug">
|
||||
b-modal#profile(size='lg', :hide-footer="true", :hide-header="true", @hidden="onHidden", @shown="onShown()")
|
||||
profile(:userId='userId', :startingPage='startingPage', style="margin-top:24px;")
|
||||
<template>
|
||||
<b-modal
|
||||
id="profile"
|
||||
size="lg"
|
||||
:hide-footer="true"
|
||||
:hide-header="true"
|
||||
@hidden="onHidden"
|
||||
@shown="onShown()"
|
||||
>
|
||||
<profile
|
||||
:user-id="userId"
|
||||
:starting-page="startingPage"
|
||||
style="margin-top:24px;"
|
||||
/>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
<template lang="pug">
|
||||
.container
|
||||
.standard-page
|
||||
profile(:userId='userId', :startingPage='startingPage')
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="standard-page">
|
||||
<profile
|
||||
:user-id="userId"
|
||||
:starting-page="startingPage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,152 +1,240 @@
|
||||
<template lang="pug">
|
||||
#stats.standard-page
|
||||
.row
|
||||
.col-12.col-md-6
|
||||
h2.text-center {{$t('equipment')}}
|
||||
.well
|
||||
.col-12.col-md-4.item-wrapper(v-for="(label, key) in equipTypes")
|
||||
.box(
|
||||
:id="key",
|
||||
v-if="label !== 'skip'",
|
||||
:class='{white: equippedItems[key] && equippedItems[key].indexOf("base_0") === -1}'
|
||||
)
|
||||
div(:class="`shop_${equippedItems[key]}`")
|
||||
b-popover(
|
||||
v-if="label !== 'skip' && equippedItems[key] && equippedItems[key].indexOf('base_0') === -1",
|
||||
:target="key",
|
||||
triggers="hover",
|
||||
:placement="'bottom'",
|
||||
:preventOverflow="false",
|
||||
)
|
||||
h4.popover-title-only {{ getGearTitle(equippedItems[key]) }}
|
||||
attributesGrid.attributesGrid(
|
||||
:item="content.gear.flat[equippedItems[key]]",
|
||||
<template>
|
||||
<div
|
||||
id="stats"
|
||||
class="standard-page"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<h2 class="text-center">
|
||||
{{ $t('equipment') }}
|
||||
</h2><div class="well">
|
||||
<div
|
||||
v-for="(label, key) in equipTypes"
|
||||
class="col-12 col-md-4 item-wrapper"
|
||||
>
|
||||
<div
|
||||
v-if="label !== 'skip'"
|
||||
:id="key"
|
||||
class="box"
|
||||
:class="{white: equippedItems[key] && equippedItems[key].indexOf('base_0') === -1}"
|
||||
>
|
||||
<div :class="`shop_${equippedItems[key]}`"></div>
|
||||
</div><b-popover
|
||||
v-if="label !== 'skip' && equippedItems[key] && equippedItems[key].indexOf('base_0') === -1"
|
||||
:target="key"
|
||||
triggers="hover"
|
||||
:placement="'bottom'"
|
||||
:prevent-overflow="false"
|
||||
>
|
||||
<h4 class="popover-title-only">
|
||||
{{ getGearTitle(equippedItems[key]) }}
|
||||
</h4><attributesGrid
|
||||
class="attributesGrid"
|
||||
:item="content.gear.flat[equippedItems[key]]"
|
||||
:user="user"
|
||||
)
|
||||
|
||||
h3(v-if="label !== 'skip'") {{ label }}
|
||||
.col-12.col-md-6
|
||||
h2.text-center {{$t('costume')}}
|
||||
.well
|
||||
// Use similar for loop for costume items, except show background if label is 'skip'.
|
||||
.col-12.col-md-4.item-wrapper(v-for="(label, key) in equipTypes")
|
||||
// Append a "C" to the key name since HTML IDs have to be unique.
|
||||
.box(
|
||||
:id="key + 'C'",
|
||||
v-if="label !== 'skip'",
|
||||
:class='{white: costumeItems[key] && costumeItems[key].indexOf("base_0") === -1}'
|
||||
)
|
||||
div(:class="`shop_${costumeItems[key]}`")
|
||||
// Show background on 8th tile rather than a piece of equipment.
|
||||
.box(v-if="label === 'skip'",
|
||||
:class='{white: user.preferences.background}', style="overflow:hidden"
|
||||
)
|
||||
div(:class="'icon_background_' + user.preferences.background")
|
||||
b-popover(
|
||||
v-if="label !== 'skip' && costumeItems[key] && costumeItems[key].indexOf('base_0') === -1",
|
||||
:target="key + 'C'",
|
||||
triggers="hover",
|
||||
:placement="'bottom'",
|
||||
:preventOverflow="false",
|
||||
)
|
||||
h4.popover-title-only {{ getGearTitle(costumeItems[key]) }}
|
||||
attributesGrid.attributesGrid(
|
||||
:item="content.gear.flat[costumeItems[key]]",
|
||||
:user="user"
|
||||
)
|
||||
|
||||
h3(v-if="label !== 'skip'") {{ label }}
|
||||
h3(v-else) {{ $t('background') }}
|
||||
.row.pet-mount-row
|
||||
.col-12.col-md-6
|
||||
h2.text-center(v-once) {{ $t('pets') }}
|
||||
.well.pet-mount-well
|
||||
.row.col-12
|
||||
.col-12.col-md-4
|
||||
.box(:class='{white: user.items.currentPet}')
|
||||
.Pet(:class="`Pet-${user.items.currentPet}`")
|
||||
.col-12.col-md-8
|
||||
div
|
||||
| {{ formatAnimal(user.items.currentPet, 'pet') }}
|
||||
div
|
||||
strong {{ $t('petsFound') }}:
|
||||
| {{ totalCount(user.items.pets) }}
|
||||
div
|
||||
strong {{ $t('beastMasterProgress') }}:
|
||||
| {{ beastMasterProgress(user.items.pets) }}
|
||||
.col-12.col-md-6
|
||||
h2.text-center(v-once) {{ $t('mounts') }}
|
||||
.well.pet-mount-well
|
||||
.row.col-12
|
||||
.col-12.col-md-4
|
||||
.box(:class='{white: user.items.currentMount}')
|
||||
.mount(:class="`Mount_Icon_${user.items.currentMount}`")
|
||||
.col-12.col-md-8
|
||||
div
|
||||
| {{ formatAnimal(user.items.currentMount, 'mount') }}
|
||||
div
|
||||
strong {{ $t('mountsTamed') }}:
|
||||
span {{ totalCount(user.items.mounts) }}
|
||||
div
|
||||
strong {{ $t('mountMasterProgress') }}:
|
||||
span {{ mountMasterProgress(user.items.mounts) }}
|
||||
#attributes.row
|
||||
hr.col-12
|
||||
h2.col-12 {{$t('attributes')}}
|
||||
.col-12.col-md-6(v-for="(statInfo, stat) in stats")
|
||||
.row.col-12.stats-column
|
||||
.col-12.col-md-4.attribute-label
|
||||
span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
|
||||
:popover='$t(statInfo.popover)', popover-trigger='mouseenter')
|
||||
.stat-title(:class='stat') {{ $t(statInfo.title) }}
|
||||
strong.number {{totalStatPoints(stat) | floorWholeNumber}}
|
||||
.col-12.col-md-6
|
||||
ul.bonus-stats
|
||||
li
|
||||
strong {{$t('level')}}:
|
||||
| {{statsComputed.levelBonus[stat]}}
|
||||
li
|
||||
strong {{$t('equipment')}}:
|
||||
| {{statsComputed.gearBonus[stat]}}
|
||||
li
|
||||
strong {{$t('class')}}:
|
||||
| {{statsComputed.classBonus[stat]}}
|
||||
li
|
||||
strong {{$t('allocated')}}:
|
||||
| {{totalAllocatedStats(stat)}}
|
||||
li
|
||||
strong {{$t('buffs')}}:
|
||||
| {{user.stats.buffs[stat]}}
|
||||
#allocation(v-if='showAllocation')
|
||||
.row.title-row
|
||||
.col-12.col-md-6
|
||||
h3(v-if='userLevel100Plus', v-once, v-html="$t('noMoreAllocate')")
|
||||
h3
|
||||
| {{$t('statPoints')}}
|
||||
.counter.badge.badge-pill(v-if='user.stats.points || userLevel100Plus')
|
||||
| {{pointsRemaining}}
|
||||
.col-12.col-md-6
|
||||
.float-right
|
||||
toggle-switch(
|
||||
:label="$t('autoAllocation')",
|
||||
v-model='user.preferences.automaticAllocation',
|
||||
@change='setAutoAllocate()'
|
||||
)
|
||||
.row
|
||||
.col-12.col-md-3(v-for='(statInfo, stat) in allocateStatsList')
|
||||
.box.white.row.col-12
|
||||
.col-9
|
||||
div(:class='stat') {{ $t(stats[stat].title) }}
|
||||
.number {{totalAllocatedStats(stat)}}
|
||||
.points {{$t('pts')}}
|
||||
.col-3
|
||||
div
|
||||
.up(v-if='showStatsSave', @click='allocate(stat)')
|
||||
div
|
||||
.down(v-if='showStatsSave', @click='deallocate(stat)')
|
||||
.row.save-row(v-if='showStatsSave')
|
||||
.col-12.col-md-6.offset-md-3.text-center
|
||||
button.btn.btn-primary(@click='saveAttributes()', :disabled='loading') {{ this.loading ? $t('loading') : $t('save') }}
|
||||
/>
|
||||
</b-popover><h3 v-if="label !== 'skip'">
|
||||
{{ label }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="col-12 col-md-6">
|
||||
<h2 class="text-center">
|
||||
{{ $t('costume') }}
|
||||
</h2><div class="well">
|
||||
<!-- Use similar for loop for costume items, except show background if label is 'skip'.--><div
|
||||
v-for="(label, key) in equipTypes"
|
||||
class="col-12 col-md-4 item-wrapper"
|
||||
>
|
||||
<!-- Append a "C" to the key name since HTML IDs have to be unique.--><div
|
||||
v-if="label !== 'skip'"
|
||||
:id="key + 'C'"
|
||||
class="box"
|
||||
:class="{white: costumeItems[key] && costumeItems[key].indexOf('base_0') === -1}"
|
||||
>
|
||||
<div :class="`shop_${costumeItems[key]}`"></div>
|
||||
</div><!-- Show background on 8th tile rather than a piece of equipment.--><div
|
||||
v-if="label === 'skip'"
|
||||
class="box"
|
||||
:class="{white: user.preferences.background}"
|
||||
style="overflow:hidden"
|
||||
>
|
||||
<div :class="'icon_background_' + user.preferences.background"></div>
|
||||
</div><b-popover
|
||||
v-if="label !== 'skip' && costumeItems[key] && costumeItems[key].indexOf('base_0') === -1"
|
||||
:target="key + 'C'"
|
||||
triggers="hover"
|
||||
:placement="'bottom'"
|
||||
:prevent-overflow="false"
|
||||
>
|
||||
<h4 class="popover-title-only">
|
||||
{{ getGearTitle(costumeItems[key]) }}
|
||||
</h4><attributesGrid
|
||||
class="attributesGrid"
|
||||
:item="content.gear.flat[costumeItems[key]]"
|
||||
:user="user"
|
||||
/>
|
||||
</b-popover><h3 v-if="label !== 'skip'">
|
||||
{{ label }}
|
||||
</h3><h3 v-else>
|
||||
{{ $t('background') }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="row pet-mount-row">
|
||||
<div class="col-12 col-md-6">
|
||||
<h2
|
||||
v-once
|
||||
class="text-center"
|
||||
>
|
||||
{{ $t('pets') }}
|
||||
</h2><div class="well pet-mount-well">
|
||||
<div class="row col-12">
|
||||
<div class="col-12 col-md-4">
|
||||
<div
|
||||
class="box"
|
||||
:class="{white: user.items.currentPet}"
|
||||
>
|
||||
<div
|
||||
class="Pet"
|
||||
:class="`Pet-${user.items.currentPet}`"
|
||||
></div>
|
||||
</div>
|
||||
</div><div class="col-12 col-md-8">
|
||||
<div>{{ formatAnimal(user.items.currentPet, 'pet') }}</div><div><strong>{{ $t('petsFound') }}:</strong>{{ totalCount(user.items.pets) }}</div><div><strong>{{ $t('beastMasterProgress') }}:</strong>{{ beastMasterProgress(user.items.pets) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="col-12 col-md-6">
|
||||
<h2
|
||||
v-once
|
||||
class="text-center"
|
||||
>
|
||||
{{ $t('mounts') }}
|
||||
</h2><div class="well pet-mount-well">
|
||||
<div class="row col-12">
|
||||
<div class="col-12 col-md-4">
|
||||
<div
|
||||
class="box"
|
||||
:class="{white: user.items.currentMount}"
|
||||
>
|
||||
<div
|
||||
class="mount"
|
||||
:class="`Mount_Icon_${user.items.currentMount}`"
|
||||
></div>
|
||||
</div>
|
||||
</div><div class="col-12 col-md-8">
|
||||
<div>{{ formatAnimal(user.items.currentMount, 'mount') }}</div><div><strong>{{ $t('mountsTamed') }}:</strong><span>{{ totalCount(user.items.mounts) }}</span></div><div><strong>{{ $t('mountMasterProgress') }}:</strong><span>{{ mountMasterProgress(user.items.mounts) }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
id="attributes"
|
||||
class="row"
|
||||
>
|
||||
<hr class="col-12"><h2 class="col-12">
|
||||
{{ $t('attributes') }}
|
||||
</h2><div
|
||||
v-for="(statInfo, stat) in stats"
|
||||
class="col-12 col-md-6"
|
||||
>
|
||||
<div class="row col-12 stats-column">
|
||||
<div class="col-12 col-md-4 attribute-label">
|
||||
<span
|
||||
class="hint"
|
||||
:popover-title="$t(statInfo.title)"
|
||||
popover-placement="right"
|
||||
:popover="$t(statInfo.popover)"
|
||||
popover-trigger="mouseenter"
|
||||
></span><div
|
||||
class="stat-title"
|
||||
:class="stat"
|
||||
>
|
||||
{{ $t(statInfo.title) }}
|
||||
</div><strong class="number">{{ totalStatPoints(stat) | floorWholeNumber }}</strong>
|
||||
</div><div class="col-12 col-md-6">
|
||||
<ul class="bonus-stats">
|
||||
<li><strong>{{ $t('level') }}:</strong>{{ statsComputed.levelBonus[stat] }}</li><li><strong>{{ $t('equipment') }}:</strong>{{ statsComputed.gearBonus[stat] }}</li><li><strong>{{ $t('class') }}:</strong>{{ statsComputed.classBonus[stat] }}</li><li><strong>{{ $t('allocated') }}:</strong>{{ totalAllocatedStats(stat) }}</li><li><strong>{{ $t('buffs') }}:</strong>{{ user.stats.buffs[stat] }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="showAllocation"
|
||||
id="allocation"
|
||||
>
|
||||
<div class="row title-row">
|
||||
<div class="col-12 col-md-6">
|
||||
<h3
|
||||
v-if="userLevel100Plus"
|
||||
v-once
|
||||
v-html="$t('noMoreAllocate')"
|
||||
></h3><h3>
|
||||
{{ $t('statPoints') }}<div
|
||||
v-if="user.stats.points || userLevel100Plus"
|
||||
class="counter badge badge-pill"
|
||||
>
|
||||
{{ pointsRemaining }}
|
||||
</div>
|
||||
</h3>
|
||||
</div><div class="col-12 col-md-6">
|
||||
<div class="float-right">
|
||||
<toggle-switch
|
||||
v-model="user.preferences.automaticAllocation"
|
||||
:label="$t('autoAllocation')"
|
||||
@change="setAutoAllocate()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
<div
|
||||
v-for="(statInfo, stat) in allocateStatsList"
|
||||
class="col-12 col-md-3"
|
||||
>
|
||||
<div class="box white row col-12">
|
||||
<div class="col-9">
|
||||
<div :class="stat">
|
||||
{{ $t(stats[stat].title) }}
|
||||
</div><div class="number">
|
||||
{{ totalAllocatedStats(stat) }}
|
||||
</div><div class="points">
|
||||
{{ $t('pts') }}
|
||||
</div>
|
||||
</div><div class="col-3">
|
||||
<div>
|
||||
<div
|
||||
v-if="showStatsSave"
|
||||
class="up"
|
||||
@click="allocate(stat)"
|
||||
></div>
|
||||
</div><div>
|
||||
<div
|
||||
v-if="showStatsSave"
|
||||
class="down"
|
||||
@click="deallocate(stat)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="showStatsSave"
|
||||
class="row save-row"
|
||||
>
|
||||
<div class="col-12 col-md-6 offset-md-3 text-center">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
:disabled="loading"
|
||||
@click="saveAttributes()"
|
||||
>
|
||||
{{ this.loading ? $t('loading') : $t('save') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,206 +1,276 @@
|
||||
<template lang="pug">
|
||||
.standard-page
|
||||
h1 Stats
|
||||
.row
|
||||
.col-6
|
||||
h2.text-center Equipment
|
||||
.well.row
|
||||
.col-4
|
||||
.col-6
|
||||
h2.text-center Costume
|
||||
.row
|
||||
.col-6
|
||||
h2.text-center Pet
|
||||
.col-6
|
||||
h2.text-center Mount
|
||||
.row
|
||||
hr.col-12
|
||||
h2.col-12 Attributes
|
||||
.col-6
|
||||
.col-6
|
||||
.row
|
||||
.col-6
|
||||
.col-6
|
||||
|
||||
.row
|
||||
.col-4
|
||||
div
|
||||
h3 Basics
|
||||
ul
|
||||
li Health: {{user.stats.hp}}/{{user.stats.maxHealth}}
|
||||
li Mana: {{user.stats.mp}}/{{user.stats.maxMP}}
|
||||
li Gold: {{user.stats.gp}}
|
||||
li Level: {{user.stats.lvl}}
|
||||
li Experience: {{user.stats.exp}}
|
||||
|
||||
div(v-if='user.flags.itemsEnabled')
|
||||
h3 Battle Gear
|
||||
ul
|
||||
li(v-for='(key, itemType) in user.items.gear.equipped', v-if='flatGear[key]')
|
||||
strong {{ flatGear[key].text() }}
|
||||
strong(
|
||||
v-if='flatGear[key].str || flatGear[key].con || flatGear[key].per || flatGear[key].int'
|
||||
) :
|
||||
span(
|
||||
v-for='stat in ["str","con","per","int"]',
|
||||
v-if='flatGear[key][stat]'
|
||||
) {{flatGear[key][stat]}} {{ $t(stat) }}
|
||||
|
||||
div(v-if='user.preferences.costume')
|
||||
h4(v-once) {{ $t('costume') }}
|
||||
div
|
||||
div(ng-repeat='(key, itemType) in user.items.gear.costume')
|
||||
strong {{flatGear[key].text()}}
|
||||
|
||||
div
|
||||
h3 Background
|
||||
ul
|
||||
li(v-if='!user.preferences.background') None
|
||||
li(v-if='user.preferences.background') {{ user.preferences.background }}
|
||||
|
||||
div(ng-if='user.flags.dropsEnabled')
|
||||
h3(v-once) {{ $t('pets') }}
|
||||
ul
|
||||
li(ng-if='user.items.currentPet')
|
||||
| {{ $t('activePet') }}:
|
||||
| {{ formatAnimal(user.items.currentPet, 'pet') }}
|
||||
li
|
||||
| {{ $t('petsFound') }}:
|
||||
| {{ totalCount(user.items.pets) }}
|
||||
li
|
||||
| {{ $t('beastMasterProgress') }}:
|
||||
| {{ beastMasterProgress(user.items.pets) }}
|
||||
|
||||
h3(v-once) {{ $t('mounts') }}
|
||||
ul
|
||||
li(v-if='user.items.currentMount')
|
||||
| {{ $t('activeMount') }}:
|
||||
| {{ formatAnimal(user.items.currentMount, 'mount') }}
|
||||
li
|
||||
| {{ $t('mountsTamed') }}:
|
||||
| {{ totalCount(user.items.mounts) }}
|
||||
li
|
||||
| {{ $t('mountMasterProgress') }}:
|
||||
| {{ mountMasterProgress(user.items.mounts) }}
|
||||
|
||||
.col-4
|
||||
h3(v-once) {{ $t('attributes') }}
|
||||
.row(v-for="(statInfo, stat) in stats")
|
||||
.col-4
|
||||
span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
|
||||
:popover='$t(statInfo.popover)', popover-trigger='mouseenter')
|
||||
strong {{ $t(statInfo.title) }}
|
||||
strong : {{ statsComputed[stat] }}
|
||||
.col-6
|
||||
ul.bonus-stats
|
||||
li
|
||||
| {{ $t('levelBonus') }}
|
||||
| {{statsComputed.levelBonus[stat]}}
|
||||
li
|
||||
| {{ $t('gearBonus') }}
|
||||
| {{statsComputed.gearBonus[stat]}}
|
||||
li
|
||||
| {{ $t('classBonus') }}
|
||||
| {{statsComputed.classBonus[stat]}}
|
||||
li
|
||||
| {{ $t('allocatedPoints') }}
|
||||
| {{user.stats[stat]}}
|
||||
li
|
||||
| {{ $t('buffs') }}
|
||||
| {{user.stats.buffs[stat]}}
|
||||
|
||||
div(v-if='user.stats.buffs.stealth')
|
||||
strong.hint(:popover-title="$t('stealth')", popover-trigger='mouseenter',
|
||||
popover-placement='right', :popover="$t('stealthNewDay')", v-once)
|
||||
| {{ $t('stealth') }}
|
||||
strong : {{user.stats.buffs.stealth}}
|
||||
|
||||
div(v-if='user.stats.buffs.streaks')
|
||||
div
|
||||
strong.hint(popover-title="$t('streaksFrozen')", popover-trigger='mouseenter',
|
||||
popover-placement='right', :popover="$t('streaksFrozenText')")
|
||||
| {{ $t('streaksFrozen') }}
|
||||
|
||||
.col-4(v-if='hasClass')
|
||||
h3(v-once) {{ $t('characterBuild') }}
|
||||
h4(v-once) {{ $t('class') + ': ' }}
|
||||
span {{ classText }}
|
||||
button.btn.btn-danger.btn-xs(@click='changeClass(null)', v-once) {{ $t('changeClass') }}
|
||||
small.cost 3
|
||||
span.Pet_Currency_Gem1x.inline-gems
|
||||
|
||||
div
|
||||
div
|
||||
p(v-if='userLevel100Plus', v-once) {{ $t('noMoreAllocate') }}
|
||||
p(v-if='user.stats.points || userLevel100Plus')
|
||||
strong.inline
|
||||
| {{user.stats.points}}
|
||||
strong.hint(popover-trigger='mouseenter',
|
||||
popover-placement='right', :popover="$t('levelPopover')") {{ $t('unallocated') }}
|
||||
div
|
||||
fieldset.auto-allocate
|
||||
.checkbox
|
||||
label
|
||||
input(type='checkbox', v-model='user.preferences.automaticAllocation',
|
||||
@change='set({"preferences.automaticAllocation": user.preferences.automaticAllocation, "preferences.allocationMode": "taskbased"})')
|
||||
span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('autoAllocationPop')") {{ $t('autoAllocation') }}
|
||||
form(v-if='user.preferences.automaticAllocation', style='margin-left:1em')
|
||||
.radio
|
||||
label
|
||||
input(type='radio', name='allocationMode', value='flat', v-model='user.preferences.allocationMode',
|
||||
@change='set({"preferences.allocationMode": "flat"})')
|
||||
span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('evenAllocationPop')") {{ $t('evenAllocation') }}
|
||||
.radio
|
||||
label
|
||||
input(
|
||||
type='radio',
|
||||
name='allocationMode',
|
||||
value='classbased',
|
||||
v-model='user.preferences.allocationMode',
|
||||
@change='set({"preferences.allocationMode": "classbased"})'
|
||||
)
|
||||
span.hint(
|
||||
popover-trigger='mouseenter',
|
||||
popover-placement='right',
|
||||
:popover="$t('classAllocationPop')"
|
||||
) {{ $t('classAllocation') }}
|
||||
.radio
|
||||
label
|
||||
input(
|
||||
type='radio',
|
||||
name='allocationMode',
|
||||
value='taskbased',
|
||||
v-model='user.preferences.allocationMode',
|
||||
@change='set({"preferences.allocationMode": "taskbased"})'
|
||||
)
|
||||
span.hint(
|
||||
popover-trigger='mouseenter',
|
||||
popover-placement='right',
|
||||
:popover="$t('taskAllocationPop')"
|
||||
) {{ $t('taskAllocation') }}
|
||||
div(
|
||||
v-if='user.preferences.automaticAllocation && !(user.preferences.allocationMode === "taskbased") && (user.stats.points > 0)'
|
||||
)
|
||||
button.btn.btn-primary.btn-xs(
|
||||
@click='allocateNow({})',
|
||||
popover-trigger='mouseenter',
|
||||
popover-placement='right',
|
||||
:popover="$t('distributePointsPop')"
|
||||
)
|
||||
span.glyphicon.glyphicon-download
|
||||
|
|
||||
| {{ $t('distributePoints') }}
|
||||
.row(v-for='(statInfo, stat) in allocateStatsList')
|
||||
.col-8
|
||||
span.hint(
|
||||
popover-trigger='mouseenter',
|
||||
popover-placement='right',
|
||||
:popover='$t(statInfo.popover)'
|
||||
)
|
||||
| {{ $t(statInfo.title) + user.stats[stat] }}
|
||||
.col-4(v-if='user.stats.points', @click='allocate(stat)')
|
||||
button.btn.btn-primary(popover-trigger='mouseenter', popover-placement='right',
|
||||
:popover='$t(statInfo.allocatepop)') +
|
||||
<template>
|
||||
<div class="standard-page">
|
||||
<h1>Stats</h1><div class="row">
|
||||
<div class="col-6">
|
||||
<h2 class="text-center">
|
||||
Equipment
|
||||
</h2><div class="well row">
|
||||
<div class="col-4"></div>
|
||||
</div>
|
||||
</div><div class="col-6">
|
||||
<h2 class="text-center">
|
||||
Costume
|
||||
</h2>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
<div class="col-6">
|
||||
<h2 class="text-center">
|
||||
Pet
|
||||
</h2>
|
||||
</div><div class="col-6">
|
||||
<h2 class="text-center">
|
||||
Mount
|
||||
</h2>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
<hr class="col-12"><h2 class="col-12">
|
||||
Attributes
|
||||
</h2><div class="col-6"></div><div class="col-6"></div>
|
||||
</div><div class="row">
|
||||
<div class="col-6"></div><div class="col-6"></div>
|
||||
</div><div class="row">
|
||||
<div class="col-4">
|
||||
<div><h3>Basics</h3><ul><li>Health: {{ user.stats.hp }}/{{ user.stats.maxHealth }}</li><li>Mana: {{ user.stats.mp }}/{{ user.stats.maxMP }}</li><li>Gold: {{ user.stats.gp }}</li><li>Level: {{ user.stats.lvl }}</li><li>Experience: {{ user.stats.exp }}</li></ul></div><div v-if="user.flags.itemsEnabled">
|
||||
<h3>Battle Gear</h3><ul>
|
||||
<li
|
||||
v-for="(key, itemType) in user.items.gear.equipped"
|
||||
v-if="flatGear[key]"
|
||||
>
|
||||
<strong>{{ flatGear[key].text() }}</strong><strong v-if="flatGear[key].str || flatGear[key].con || flatGear[key].per || flatGear[key].int">: <span
|
||||
v-for="stat in ['str','con','per','int']"
|
||||
v-if="flatGear[key][stat]"
|
||||
>{{ flatGear[key][stat] }} {{ $t(stat) }} </span></strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div><div v-if="user.preferences.costume">
|
||||
<h4 v-once>
|
||||
{{ $t('costume') }}
|
||||
</h4><div>
|
||||
<div ng-repeat="(key, itemType) in user.items.gear.costume">
|
||||
<strong>{{ flatGear[key].text() }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div><div>
|
||||
<h3>Background</h3><ul>
|
||||
<li v-if="!user.preferences.background">
|
||||
None
|
||||
</li><li v-if="user.preferences.background">
|
||||
{{ user.preferences.background }}
|
||||
</li>
|
||||
</ul>
|
||||
</div><div ng-if="user.flags.dropsEnabled">
|
||||
<h3 v-once>
|
||||
{{ $t('pets') }}
|
||||
</h3><ul>
|
||||
<li ng-if="user.items.currentPet">
|
||||
{{ $t('activePet') }}:
|
||||
{{ formatAnimal(user.items.currentPet, 'pet') }}
|
||||
</li><li>
|
||||
{{ $t('petsFound') }}:
|
||||
{{ totalCount(user.items.pets) }}
|
||||
</li><li>
|
||||
{{ $t('beastMasterProgress') }}:
|
||||
{{ beastMasterProgress(user.items.pets) }}
|
||||
</li>
|
||||
</ul><h3 v-once>
|
||||
{{ $t('mounts') }}
|
||||
</h3><ul>
|
||||
<li v-if="user.items.currentMount">
|
||||
{{ $t('activeMount') }}:
|
||||
{{ formatAnimal(user.items.currentMount, 'mount') }}
|
||||
</li><li>
|
||||
{{ $t('mountsTamed') }}:
|
||||
{{ totalCount(user.items.mounts) }}
|
||||
</li><li>
|
||||
{{ $t('mountMasterProgress') }}:
|
||||
{{ mountMasterProgress(user.items.mounts) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><div class="col-4">
|
||||
<h3 v-once>
|
||||
{{ $t('attributes') }}
|
||||
</h3><div
|
||||
v-for="(statInfo, stat) in stats"
|
||||
class="row"
|
||||
>
|
||||
<div class="col-4">
|
||||
<span
|
||||
class="hint"
|
||||
:popover-title="$t(statInfo.title)"
|
||||
popover-placement="right"
|
||||
:popover="$t(statInfo.popover)"
|
||||
popover-trigger="mouseenter"
|
||||
><strong>{{ $t(statInfo.title) }}</strong></span><strong>: {{ statsComputed[stat] }}</strong>
|
||||
</div><div class="col-6">
|
||||
<ul class="bonus-stats">
|
||||
<li>
|
||||
{{ $t('levelBonus') }}
|
||||
{{ statsComputed.levelBonus[stat] }}
|
||||
</li><li>
|
||||
{{ $t('gearBonus') }}
|
||||
{{ statsComputed.gearBonus[stat] }}
|
||||
</li><li>
|
||||
{{ $t('classBonus') }}
|
||||
{{ statsComputed.classBonus[stat] }}
|
||||
</li><li>
|
||||
{{ $t('allocatedPoints') }}
|
||||
{{ user.stats[stat] }}
|
||||
</li><li>
|
||||
{{ $t('buffs') }}
|
||||
{{ user.stats.buffs[stat] }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><div v-if="user.stats.buffs.stealth">
|
||||
<strong
|
||||
v-once
|
||||
class="hint"
|
||||
:popover-title="$t('stealth')"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('stealthNewDay')"
|
||||
>{{ $t('stealth') }}</strong><strong>: {{ user.stats.buffs.stealth }} </strong>
|
||||
</div><div v-if="user.stats.buffs.streaks">
|
||||
<div>
|
||||
<strong
|
||||
class="hint"
|
||||
popover-title="$t('streaksFrozen')"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('streaksFrozenText')"
|
||||
></strong>{{ $t('streaksFrozen') }}
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="hasClass"
|
||||
class="col-4"
|
||||
>
|
||||
<h3 v-once>
|
||||
{{ $t('characterBuild') }}
|
||||
</h3><h4 v-once>
|
||||
{{ $t('class') + ': ' }}<span>{{ classText }} </span><button
|
||||
v-once
|
||||
class="btn btn-danger btn-xs"
|
||||
@click="changeClass(null)"
|
||||
>
|
||||
{{ $t('changeClass') }}
|
||||
</button><small class="cost">3<span class="Pet_Currency_Gem1x inline-gems"></span></small>
|
||||
</h4><div>
|
||||
<div>
|
||||
<p
|
||||
v-if="userLevel100Plus"
|
||||
v-once
|
||||
>
|
||||
{{ $t('noMoreAllocate') }}
|
||||
</p><p v-if="user.stats.points || userLevel100Plus">
|
||||
<strong class="inline">{{ user.stats.points }} </strong><strong
|
||||
class="hint"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('levelPopover')"
|
||||
>{{ $t('unallocated') }}</strong>
|
||||
</p>
|
||||
</div><div>
|
||||
<fieldset class="auto-allocate">
|
||||
<div class="checkbox">
|
||||
<label><input
|
||||
v-model="user.preferences.automaticAllocation"
|
||||
type="checkbox"
|
||||
@change="set({'preferences.automaticAllocation': user.preferences.automaticAllocation, 'preferences.allocationMode': 'taskbased'})"
|
||||
><span
|
||||
class="hint"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('autoAllocationPop')"
|
||||
>{{ $t('autoAllocation') }}</span></label>
|
||||
</div><form
|
||||
v-if="user.preferences.automaticAllocation"
|
||||
style="margin-left:1em"
|
||||
>
|
||||
<div class="radio">
|
||||
<label><input
|
||||
v-model="user.preferences.allocationMode"
|
||||
type="radio"
|
||||
name="allocationMode"
|
||||
value="flat"
|
||||
@change="set({'preferences.allocationMode': 'flat'})"
|
||||
><span
|
||||
class="hint"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('evenAllocationPop')"
|
||||
>{{ $t('evenAllocation') }}</span></label>
|
||||
</div><div class="radio">
|
||||
<label><input
|
||||
v-model="user.preferences.allocationMode"
|
||||
type="radio"
|
||||
name="allocationMode"
|
||||
value="classbased"
|
||||
@change="set({'preferences.allocationMode': 'classbased'})"
|
||||
><span
|
||||
class="hint"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('classAllocationPop')"
|
||||
>{{ $t('classAllocation') }}</span></label>
|
||||
</div><div class="radio">
|
||||
<label><input
|
||||
v-model="user.preferences.allocationMode"
|
||||
type="radio"
|
||||
name="allocationMode"
|
||||
value="taskbased"
|
||||
@change="set({'preferences.allocationMode': 'taskbased'})"
|
||||
><span
|
||||
class="hint"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('taskAllocationPop')"
|
||||
>{{ $t('taskAllocation') }}</span></label>
|
||||
</div>
|
||||
</form><div v-if="user.preferences.automaticAllocation && !(user.preferences.allocationMode === 'taskbased') && (user.stats.points > 0)">
|
||||
<button
|
||||
class="btn btn-primary btn-xs"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('distributePointsPop')"
|
||||
@click="allocateNow({})"
|
||||
>
|
||||
<span class="glyphicon glyphicon-download"></span>
|
||||
{{ $t('distributePoints') }}
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div><div
|
||||
v-for="(statInfo, stat) in allocateStatsList"
|
||||
class="row"
|
||||
>
|
||||
<div class="col-8">
|
||||
<span
|
||||
class="hint"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t(statInfo.popover)"
|
||||
></span>{{ $t(statInfo.title) + user.stats[stat] }}
|
||||
</div><div
|
||||
v-if="user.stats.points"
|
||||
class="col-4"
|
||||
@click="allocate(stat)"
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t(statInfo.allocatepop)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user