old client structure
This commit is contained in:
Matteo Pagliazzi
@@ -0,0 +1,72 @@
|
||||
<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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h2 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.achievement-container {
|
||||
margin-bottom: 1em;
|
||||
padding: 2em;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.achievement {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.counter.badge {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #ff944c;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'client/libs/store';
|
||||
|
||||
import achievementsLib from '../../../common/script/libs/achievements';
|
||||
import Content from '../../../common/script/content';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
achievements: {},
|
||||
content: Content,
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.achievements = achievementsLib.getAchievementsForProfile(this.user);
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,598 @@
|
||||
<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",
|
||||
:checked="!this.user.inbox.optOut"
|
||||
:hoverText="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
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#inbox-modal .modal-body {
|
||||
padding-top: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
@import '~client/assets/scss/tiers.scss';
|
||||
|
||||
.header-wrap {
|
||||
padding: 0.5em;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0rem;
|
||||
|
||||
.svg-icon {
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
margin-left: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.envelope {
|
||||
color: $gray-400 !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: $gray-700;
|
||||
min-height: 540px;
|
||||
padding: 0;
|
||||
|
||||
.search-section {
|
||||
padding: 1em;
|
||||
box-shadow: 0 1px 2px 0 rgba(26, 24, 29, 0.24);
|
||||
}
|
||||
}
|
||||
|
||||
.messages {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
padding-bottom: 6em;
|
||||
height: 540px;
|
||||
}
|
||||
|
||||
.message-scroll {
|
||||
max-height: 500px;
|
||||
overflow-x: scroll;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.to-form input {
|
||||
width: 60%;
|
||||
display: inline-block;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.empty-messages {
|
||||
margin-top: 10em;
|
||||
color: $gray-400;
|
||||
padding: 1em;
|
||||
|
||||
h4 {
|
||||
color: $gray-400;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.envelope {
|
||||
width: 30px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.pm-disabled-caption {
|
||||
|
||||
padding-top: 1em;
|
||||
background-color: $gray-700;
|
||||
z-index: 2;
|
||||
|
||||
h4, p {
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.new-message-row {
|
||||
background-color: $gray-700;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 88px;
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
|
||||
textarea {
|
||||
height: 80%;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
button {
|
||||
vertical-align: bottom;
|
||||
display: inline-block;
|
||||
box-shadow: none;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.conversations {
|
||||
max-height: 400px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.conversation {
|
||||
padding: 1.5em;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.conversation.active {
|
||||
border: 1px solid $purple-400;
|
||||
}
|
||||
|
||||
.conversation:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: $gray-200;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.messagePreview {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import moment from 'moment';
|
||||
import filter from 'lodash/filter';
|
||||
import groupBy from 'lodash/groupBy';
|
||||
import orderBy from 'lodash/orderBy';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import habiticaMarkdown from 'habitica-markdown';
|
||||
import styleHelper from 'client/mixins/styleHelper';
|
||||
import toggleSwitch from 'client/components/ui/toggleSwitch';
|
||||
import axios from 'axios';
|
||||
|
||||
import chatMessages from '../chat/chatMessages';
|
||||
import messageIcon from 'assets/svg/message.svg';
|
||||
import svgClose from 'assets/svg/close.svg';
|
||||
import tier1 from 'assets/svg/tier-1.svg';
|
||||
import tier2 from 'assets/svg/tier-2.svg';
|
||||
import tier3 from 'assets/svg/tier-3.svg';
|
||||
import tier4 from 'assets/svg/tier-4.svg';
|
||||
import tier5 from 'assets/svg/tier-5.svg';
|
||||
import tier6 from 'assets/svg/tier-6.svg';
|
||||
import tier7 from 'assets/svg/tier-7.svg';
|
||||
import tier8 from 'assets/svg/tier-mod.svg';
|
||||
import tier9 from 'assets/svg/tier-staff.svg';
|
||||
import tierNPC from 'assets/svg/tier-npc.svg';
|
||||
|
||||
export default {
|
||||
mixins: [styleHelper],
|
||||
components: {
|
||||
chatMessages,
|
||||
toggleSwitch,
|
||||
},
|
||||
mounted () {
|
||||
this.$root.$on('habitica::new-inbox-message', (data) => {
|
||||
this.$root.$emit('bv::show::modal', 'inbox-modal');
|
||||
|
||||
// Wait for messages to be loaded
|
||||
const unwatchLoaded = this.$watch('loaded', (loaded) => {
|
||||
if (!loaded) return;
|
||||
|
||||
const conversation = this.conversations.find(convo => {
|
||||
return convo.key === data.userIdToMessage;
|
||||
});
|
||||
if (loaded) setImmediate(() => unwatchLoaded());
|
||||
|
||||
if (conversation) {
|
||||
this.selectConversation(data.userIdToMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
this.initiatedConversation = {
|
||||
uuid: data.userIdToMessage,
|
||||
user: data.displayName,
|
||||
username: data.username,
|
||||
backer: data.backer,
|
||||
contributor: data.contributor,
|
||||
};
|
||||
|
||||
this.selectConversation(data.userIdToMessage);
|
||||
}, {immediate: true});
|
||||
});
|
||||
},
|
||||
destroyed () {
|
||||
this.$root.$off('habitica::new-inbox-message');
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
messageIcon,
|
||||
svgClose,
|
||||
tier1,
|
||||
tier2,
|
||||
tier3,
|
||||
tier4,
|
||||
tier5,
|
||||
tier6,
|
||||
tier7,
|
||||
tier8,
|
||||
tier9,
|
||||
tierNPC,
|
||||
}),
|
||||
displayCreate: true,
|
||||
selectedConversation: {},
|
||||
search: '',
|
||||
newMessage: '',
|
||||
showPopover: false,
|
||||
messages: [],
|
||||
messagesByConversation: {}, // cache {uuid: []}
|
||||
loadedConversations: [],
|
||||
loaded: false,
|
||||
messagesLoading: false,
|
||||
initiatedConversation: null,
|
||||
updateConversionsCounter: 0,
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
timeAgo (value) {
|
||||
return moment(new Date(value)).fromNow();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
canLoadMore () {
|
||||
return this.selectedConversation && this.selectedConversation.canLoadMore;
|
||||
},
|
||||
conversations () {
|
||||
const inboxGroup = groupBy(this.loadedConversations, 'uuid');
|
||||
|
||||
// Add placeholder for new conversations
|
||||
if (this.initiatedConversation && this.initiatedConversation.uuid) {
|
||||
inboxGroup[this.initiatedConversation.uuid] = [{
|
||||
uuid: this.initiatedConversation.uuid,
|
||||
user: this.initiatedConversation.user,
|
||||
username: this.initiatedConversation.username,
|
||||
contributor: this.initiatedConversation.contributor,
|
||||
id: '',
|
||||
text: '',
|
||||
timestamp: new Date(),
|
||||
}];
|
||||
}
|
||||
// Create conversation objects
|
||||
const convos = [];
|
||||
for (let key in inboxGroup) {
|
||||
const recentMessage = inboxGroup[key][0];
|
||||
|
||||
const convoModel = {
|
||||
key: recentMessage.uuid,
|
||||
name: recentMessage.user, // Handles case where from user sent the only message or the to user sent the only message
|
||||
username: !recentMessage.text ? recentMessage.username : recentMessage.toUserName,
|
||||
date: recentMessage.timestamp,
|
||||
lastMessageText: recentMessage.text,
|
||||
canLoadMore: true,
|
||||
page: 0,
|
||||
};
|
||||
|
||||
convos.push(convoModel);
|
||||
}
|
||||
|
||||
return convos;
|
||||
},
|
||||
// Separate from selectedConversation which is not computed so messages don't update automatically
|
||||
selectedConversationMessages () {
|
||||
// Vue-subscribe to changes
|
||||
const subScribeToUpdate = this.messagesLoading || this.updateConversionsCounter > -1;
|
||||
|
||||
|
||||
const selectedConversationKey = this.selectedConversation.key;
|
||||
const selectedConversation = this.messagesByConversation[selectedConversationKey];
|
||||
this.messages = selectedConversation || [];
|
||||
|
||||
const ordered = orderBy(this.messages, [(m) => {
|
||||
return m.timestamp;
|
||||
}], ['asc']);
|
||||
|
||||
if (subScribeToUpdate) {
|
||||
return ordered;
|
||||
}
|
||||
},
|
||||
filtersConversations () {
|
||||
// Vue-subscribe to changes
|
||||
const subScribeToUpdate = this.updateConversionsCounter > -1;
|
||||
|
||||
const filtered = subScribeToUpdate && !this.search ?
|
||||
this.conversations :
|
||||
filter(this.conversations, (conversation) => {
|
||||
return conversation.name.toLowerCase().indexOf(this.search.toLowerCase()) !== -1;
|
||||
});
|
||||
|
||||
const ordered = orderBy(filtered, [(o) => {
|
||||
return moment(o.date).toDate();
|
||||
}], ['desc']);
|
||||
|
||||
return ordered;
|
||||
},
|
||||
currentLength () {
|
||||
return this.newMessage.length;
|
||||
},
|
||||
placeholderTexts () {
|
||||
if (this.user.flags.chatRevoked) {
|
||||
return {
|
||||
title: this.$t('PMPlaceholderTitleRevoked'),
|
||||
description: this.$t('chatPrivilegesRevoked'),
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: this.$t('PMPlaceholderTitle'),
|
||||
description: this.$t('PMPlaceholderDescription'),
|
||||
};
|
||||
},
|
||||
optTextSet () {
|
||||
if (!this.user.inbox.optOut) {
|
||||
return {
|
||||
switchDescription: this.$t('PMReceive'),
|
||||
popoverText: this.$t('PMEnabledOptPopoverText'),
|
||||
};
|
||||
}
|
||||
return {
|
||||
switchDescription: this.$t('PMReceive'),
|
||||
popoverText: this.$t('PMDisabledOptPopoverText'),
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async onModalShown () {
|
||||
this.loaded = false;
|
||||
|
||||
const conversationRes = await axios.get('/api/v4/inbox/conversations');
|
||||
this.loadedConversations = conversationRes.data.data;
|
||||
|
||||
this.loaded = true;
|
||||
},
|
||||
onModalHide () {
|
||||
// reset everything
|
||||
this.loadedConversations = [];
|
||||
this.loaded = false;
|
||||
this.initiatedConversation = null;
|
||||
this.messagesByConversation = {};
|
||||
this.selectedConversation = {};
|
||||
},
|
||||
messageRemoved (message) {
|
||||
const messages = this.messagesByConversation[this.selectedConversation.key];
|
||||
|
||||
const messageIndex = messages.findIndex(msg => msg.id === message.id);
|
||||
if (messageIndex !== -1) messages.splice(messageIndex, 1);
|
||||
if (this.selectedConversationMessages.length === 0) {
|
||||
this.initiatedConversation = {
|
||||
uuid: this.selectedConversation.key,
|
||||
user: this.selectedConversation.name,
|
||||
username: this.selectedConversation.username,
|
||||
backer: this.selectedConversation.backer,
|
||||
contributor: this.selectedConversation.contributor,
|
||||
};
|
||||
}
|
||||
},
|
||||
toggleClick () {
|
||||
this.displayCreate = !this.displayCreate;
|
||||
},
|
||||
toggleOpt () {
|
||||
this.$store.dispatch('user:togglePrivateMessagesOpt');
|
||||
},
|
||||
async selectConversation (key) {
|
||||
let convoFound = this.conversations.find((conversation) => {
|
||||
return conversation.key === key;
|
||||
});
|
||||
|
||||
this.selectedConversation = convoFound || {};
|
||||
|
||||
if (!this.messagesByConversation[this.selectedConversation.key]) {
|
||||
await this.loadMessages();
|
||||
}
|
||||
|
||||
Vue.nextTick(() => {
|
||||
if (!this.$refs.chatscroll) return;
|
||||
let chatscroll = this.$refs.chatscroll.$el;
|
||||
chatscroll.scrollTop = chatscroll.scrollHeight;
|
||||
});
|
||||
},
|
||||
sendPrivateMessage () {
|
||||
if (!this.newMessage) return;
|
||||
|
||||
const messages = this.messagesByConversation[this.selectedConversation.key];
|
||||
|
||||
messages.push({
|
||||
sent: true,
|
||||
text: this.newMessage,
|
||||
timestamp: new Date(),
|
||||
toUser: this.selectedConversation.name,
|
||||
toUserName: this.selectedConversation.username,
|
||||
toUserContributor: this.selectedConversation.contributor,
|
||||
toUserBacker: this.selectedConversation.backer,
|
||||
toUUID: this.selectedConversation.uuid,
|
||||
|
||||
id: '-1', // will be updated once the result is back
|
||||
likes: {},
|
||||
ownerId: this.user._id,
|
||||
uuid: this.user._id,
|
||||
fromUUID: this.user._id,
|
||||
user: this.user.profile.name,
|
||||
username: this.user.auth.local.username,
|
||||
contributor: this.user.contributor,
|
||||
backer: this.user.backer,
|
||||
});
|
||||
|
||||
// Remove the placeholder message
|
||||
if (this.initiatedConversation && this.initiatedConversation.uuid === this.selectedConversation.key) {
|
||||
this.loadedConversations.unshift(this.initiatedConversation);
|
||||
this.initiatedConversation = null;
|
||||
}
|
||||
|
||||
this.selectedConversation.lastMessageText = this.newMessage;
|
||||
this.selectedConversation.date = new Date();
|
||||
|
||||
Vue.nextTick(() => {
|
||||
if (!this.$refs.chatscroll) return;
|
||||
let chatscroll = this.$refs.chatscroll.$el;
|
||||
chatscroll.scrollTop = chatscroll.scrollHeight;
|
||||
});
|
||||
|
||||
this.$store.dispatch('members:sendPrivateMessage', {
|
||||
toUserId: this.selectedConversation.key,
|
||||
message: this.newMessage,
|
||||
}).then(response => {
|
||||
const newMessage = response.data.data.message;
|
||||
const messageToReset = messages[messages.length - 1];
|
||||
messageToReset.id = newMessage.id; // just set the id, all other infos already set
|
||||
Object.assign(messages[messages.length - 1], messageToReset);
|
||||
this.updateConversionsCounter++;
|
||||
});
|
||||
|
||||
this.newMessage = '';
|
||||
},
|
||||
close () {
|
||||
this.$root.$emit('bv::hide::modal', 'inbox-modal');
|
||||
},
|
||||
tierIcon (message) {
|
||||
const isNPC = Boolean(message.backer && message.backer.npc);
|
||||
if (isNPC) {
|
||||
return this.icons.tierNPC;
|
||||
}
|
||||
if (!message.contributor) return;
|
||||
return this.icons[`tier${message.contributor.level}`];
|
||||
},
|
||||
removeTags (html) {
|
||||
let tmp = document.createElement('DIV');
|
||||
tmp.innerHTML = html;
|
||||
return tmp.textContent || tmp.innerText || '';
|
||||
},
|
||||
parseMarkdown (text) {
|
||||
if (!text) return;
|
||||
return habiticaMarkdown.render(String(text));
|
||||
},
|
||||
infiniteScrollTrigger () {
|
||||
// show loading and wait until the loadMore debounced
|
||||
// or else it would trigger on every scrolling-pixel (while not loading)
|
||||
if (this.canLoadMore) {
|
||||
this.messagesLoading = true;
|
||||
}
|
||||
|
||||
return this.loadMore();
|
||||
},
|
||||
loadMore () {
|
||||
this.selectedConversation.page += 1;
|
||||
return this.loadMessages();
|
||||
},
|
||||
async loadMessages () {
|
||||
this.messagesLoading = true;
|
||||
|
||||
const requestUrl = `/api/v4/inbox/paged-messages?conversation=${this.selectedConversation.key}&page=${this.selectedConversation.page}`;
|
||||
const res = await axios.get(requestUrl);
|
||||
const loadedMessages = res.data.data;
|
||||
|
||||
this.messagesByConversation[this.selectedConversation.key] = this.messagesByConversation[this.selectedConversation.key] || [];
|
||||
const loadedMessagesToAdd = loadedMessages
|
||||
.filter(m => this.messagesByConversation[this.selectedConversation.key].findIndex(mI => mI.id === m.id) === -1)
|
||||
;
|
||||
this.messagesByConversation[this.selectedConversation.key].push(...loadedMessagesToAdd);
|
||||
|
||||
// only show the load more Button if the max count was returned
|
||||
this.selectedConversation.canLoadMore = loadedMessages.length === 10;
|
||||
this.messagesLoading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,661 @@
|
||||
<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>
|
||||
|
||||
<style lang="scss" >
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.profile {
|
||||
.member-details {
|
||||
.character-name, small, .small-text {
|
||||
color: #878190;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.progress-container > .progress {
|
||||
background-color: $gray-500 !important;
|
||||
height: 16px !important;
|
||||
vertical-align: middle !important;
|
||||
|
||||
.progress-bar {
|
||||
height: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-name-character {
|
||||
margin-left: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.message-icon svg {
|
||||
height: 11px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.gift-icon svg {
|
||||
height: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-profile-actions {
|
||||
margin-bottom: 3em;
|
||||
|
||||
.admin-action {
|
||||
color: blue;
|
||||
cursor: pointer;
|
||||
padding: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-actions {
|
||||
float: right;
|
||||
margin-right: 1em;
|
||||
|
||||
button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: .7em;
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.message-icon,
|
||||
.gift-icon {
|
||||
width: 14px;
|
||||
margin: auto;
|
||||
color: $gray-100;
|
||||
}
|
||||
|
||||
.gift-icon {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
width: 16px;
|
||||
color: $gray-100;
|
||||
}
|
||||
|
||||
.positive-icon {
|
||||
width: 14px;
|
||||
color: $gray-100;
|
||||
}
|
||||
|
||||
.photo img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
h1 {
|
||||
color: $purple-200;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
font-weight: bold;
|
||||
min-height: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
margin: 0 1.2em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.nav-item:hover, .nav-item.active {
|
||||
color: #4f2a93;
|
||||
border-bottom: 2px solid #4f2a93;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $gray-200;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#achievements {
|
||||
.box {
|
||||
margin: 0 auto;
|
||||
margin-top: 1em;
|
||||
padding-top: 1.2em;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.box.achievement-unearned {
|
||||
background-color: #edecee;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.counter.badge {
|
||||
position: absolute;
|
||||
top: .5em;
|
||||
right: 3em;
|
||||
color: #fff;
|
||||
background-color: #ff944c;
|
||||
box-shadow: 0 1px 1px 0 rgba(26, 24, 29, 0.12);
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
border-radius: 2em;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.achievement-icon {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.achievement {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 94px;
|
||||
height: 92px;
|
||||
border-radius: 2px;
|
||||
border: dotted 1px #c3c0c7;
|
||||
}
|
||||
|
||||
.white {
|
||||
border-radius: 2px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.15), 0 1px 4px 0 rgba(26, 24, 29, 0.1);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.member-details {
|
||||
.character-name, small, .small-text {
|
||||
color: #878190;
|
||||
}
|
||||
|
||||
.progress-container > .progress {
|
||||
border-radius: 1px;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-section {
|
||||
h2 {
|
||||
overflow: hidden;
|
||||
size: 16px;
|
||||
color: $gray-50;
|
||||
}
|
||||
h2:after {
|
||||
background-color: $gray-500;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 1px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 90%;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
.info-item {
|
||||
color: $gray-200;
|
||||
size: 14px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.info-item-label {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.info-item-value {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 8px;
|
||||
border-radius: 1px;
|
||||
|
||||
.progress-bar {
|
||||
border-radius: 1px;
|
||||
background-color: $green-10 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import axios from 'axios';
|
||||
import each from 'lodash/each';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
|
||||
import MemberDetails from '../memberDetails';
|
||||
import markdown from 'client/directives/markdown';
|
||||
import achievementsLib from '../../../common/script/libs/achievements';
|
||||
// @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
|
||||
const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
|
||||
import Content from '../../../common/script/content';
|
||||
import profileStats from './profileStats';
|
||||
|
||||
|
||||
import message from 'assets/svg/message.svg';
|
||||
import gift from 'assets/svg/gift.svg';
|
||||
import remove from 'assets/svg/remove.svg';
|
||||
import positive from 'assets/svg/positive.svg';
|
||||
import dots from 'assets/svg/dots.svg';
|
||||
import megaphone from 'assets/svg/broken-megaphone.svg';
|
||||
import lock from 'assets/svg/lock.svg';
|
||||
import challenge from 'assets/svg/challenge.svg';
|
||||
import member from 'assets/svg/member-icon.svg';
|
||||
import staff from 'assets/svg/tier-staff.svg';
|
||||
|
||||
export default {
|
||||
props: ['userId', 'startingPage'],
|
||||
directives: {
|
||||
markdown,
|
||||
},
|
||||
components: {
|
||||
MemberDetails,
|
||||
profileStats,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
message,
|
||||
remove,
|
||||
positive,
|
||||
gift,
|
||||
dots,
|
||||
megaphone,
|
||||
challenge,
|
||||
lock,
|
||||
member,
|
||||
staff,
|
||||
}),
|
||||
adminToolsLoaded: false,
|
||||
userIdToMessage: '',
|
||||
editing: false,
|
||||
editingProfile: {
|
||||
name: '',
|
||||
imageUrl: '',
|
||||
blurb: '',
|
||||
},
|
||||
hero: {},
|
||||
managerEmail: {
|
||||
hrefBlankCommunityManagerEmail: `<a href="mailto:${COMMUNITY_MANAGER_EMAIL}">${COMMUNITY_MANAGER_EMAIL}</a>`,
|
||||
},
|
||||
selectedPage: 'profile',
|
||||
achievements: {},
|
||||
content: Content,
|
||||
user: undefined,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
userLoggedIn: 'user.data',
|
||||
flatGear: 'content.gear.flat',
|
||||
}),
|
||||
userJoinedDate () {
|
||||
return moment(this.user.auth.timestamps.created).format(this.userLoggedIn.preferences.dateFormat.toUpperCase());
|
||||
},
|
||||
userLastLoggedIn () {
|
||||
return moment(this.user.auth.timestamps.loggedin).format(this.userLoggedIn.preferences.dateFormat.toUpperCase());
|
||||
},
|
||||
equippedItems () {
|
||||
return this.user.items.gear.equipped;
|
||||
},
|
||||
costumeItems () {
|
||||
return this.user.items.gear.costume;
|
||||
},
|
||||
incentivesProgress () {
|
||||
return this.getIncentivesProgress();
|
||||
},
|
||||
|
||||
classText () {
|
||||
let classTexts = {
|
||||
warrior: this.$t('warrior'),
|
||||
wizard: this.$t('mage'),
|
||||
rogue: this.$t('rogue'),
|
||||
healer: this.$t('healer'),
|
||||
};
|
||||
|
||||
return classTexts[this.user.stats.class];
|
||||
},
|
||||
startingPageOption () {
|
||||
return this.$store.state.profileOptions.startingPage;
|
||||
},
|
||||
hasClass () {
|
||||
return this.$store.getters['members:hasClass'](this.userLoggedIn);
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.loadUser();
|
||||
},
|
||||
watch: {
|
||||
startingPage () {
|
||||
this.selectedPage = this.startingPage;
|
||||
},
|
||||
async userId () {
|
||||
this.loadUser();
|
||||
},
|
||||
userLoggedIn () {
|
||||
this.loadUser();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async loadUser () {
|
||||
let user = this.userLoggedIn;
|
||||
|
||||
// Reset editing when user is changed. Move to watch or is this good?
|
||||
this.editing = false;
|
||||
this.hero = {};
|
||||
this.adminToolsLoaded = false;
|
||||
|
||||
let profileUserId = this.userId;
|
||||
|
||||
if (profileUserId && profileUserId !== this.userLoggedIn._id) {
|
||||
let response = await this.$store.dispatch('members:fetchMember', { memberId: profileUserId });
|
||||
user = response.data.data;
|
||||
}
|
||||
|
||||
this.editingProfile.name = user.profile.name;
|
||||
this.editingProfile.imageUrl = user.profile.imageUrl;
|
||||
this.editingProfile.blurb = user.profile.blurb;
|
||||
|
||||
if (!user.achievements.quests) user.achievements.quests = {};
|
||||
if (!user.achievements.challenges) user.achievements.challenges = {};
|
||||
// @TODO: this common code should handle the above
|
||||
this.achievements = achievementsLib.getAchievementsForProfile(user);
|
||||
|
||||
// @TODO For some reason markdown doesn't seem to be handling numbers or maybe undefined?
|
||||
user.profile.blurb = user.profile.blurb ? `${user.profile.blurb}` : '';
|
||||
|
||||
this.user = user;
|
||||
},
|
||||
selectPage (page) {
|
||||
this.selectedPage = page;
|
||||
history.replaceState(null, null, '');
|
||||
},
|
||||
sendMessage () {
|
||||
this.$root.$emit('habitica::new-inbox-message', {
|
||||
userIdToMessage: this.user._id,
|
||||
displayName: this.user.profile.name,
|
||||
username: this.user.auth.local.username,
|
||||
backer: this.user.backer,
|
||||
contributor: this.user.contributor,
|
||||
});
|
||||
},
|
||||
getProgressDisplay () {
|
||||
// let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
|
||||
// if (!currentLoginDay) return this.$t('checkinReceivedAllRewardsMessage');
|
||||
// let nextRewardAt = currentLoginDay.nextRewardAt;
|
||||
// if (!nextRewardAt) return this.$t('moreIncentivesComingSoon');
|
||||
// // if we are on a reward day, let's show progress relative to this
|
||||
// if (currentLoginDay.reward) currentLoginDay.prevRewardKey = this.user.loginIncentives;
|
||||
// if (!currentLoginDay.prevRewardKey) currentLoginDay.prevRewardKey = 0;
|
||||
//
|
||||
// let start = this.user.loginIncentives - currentLoginDay.prevRewardKey;
|
||||
// let end = nextRewardAt - currentLoginDay.prevRewardKey;
|
||||
// return `${this.$t('checkinProgressTitle')} ${start}/${end}`;
|
||||
},
|
||||
getIncentivesProgress () {
|
||||
let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
|
||||
if (!currentLoginDay) return 0;
|
||||
let previousRewardDay = currentLoginDay.prevRewardKey;
|
||||
let nextRewardAt = currentLoginDay.nextRewardAt;
|
||||
return (this.user.loginIncentives - previousRewardDay) / (nextRewardAt - previousRewardDay) * 100;
|
||||
},
|
||||
save () {
|
||||
let values = {};
|
||||
|
||||
let edits = cloneDeep(this.editingProfile);
|
||||
|
||||
each(edits, (value, key) => {
|
||||
// Using toString because we need to compare two arrays (websites)
|
||||
let curVal = this.user.profile[key];
|
||||
|
||||
if (!curVal || value.toString() !== curVal.toString()) {
|
||||
values[`profile.${key}`] = value;
|
||||
this.$set(this.user.profile, key, value);
|
||||
}
|
||||
});
|
||||
|
||||
this.$store.dispatch('user:set', values);
|
||||
|
||||
this.editing = false;
|
||||
},
|
||||
blockUser () {
|
||||
this.userLoggedIn.inbox.blocks.push(this.user._id);
|
||||
axios.post(`/api/v4/user/block/${this.user._id}`);
|
||||
},
|
||||
unblockUser () {
|
||||
let index = this.userLoggedIn.inbox.blocks.indexOf(this.user._id);
|
||||
this.userLoggedIn.inbox.blocks.splice(index, 1);
|
||||
axios.post(`/api/v4/user/block/${this.user._id}`);
|
||||
},
|
||||
openSendGemsModal () {
|
||||
this.$root.$emit('habitica::send-gems', this.user);
|
||||
},
|
||||
adminTurnOnShadowMuting () {
|
||||
if (!this.hero.flags) {
|
||||
this.hero.flags = {};
|
||||
}
|
||||
this.hero.flags.chatShadowMuted = true;
|
||||
|
||||
this.$store.dispatch('hall:updateHero', { heroDetails: this.hero });
|
||||
},
|
||||
adminTurnOffShadowMuting () {
|
||||
if (!this.hero.flags) {
|
||||
this.hero.flags = {};
|
||||
}
|
||||
this.hero.flags.chatShadowMuted = false;
|
||||
|
||||
this.$store.dispatch('hall:updateHero', { heroDetails: this.hero });
|
||||
},
|
||||
adminRevokeChat () {
|
||||
if (!this.hero.flags) {
|
||||
this.hero.flags = {};
|
||||
}
|
||||
this.hero.flags.chatRevoked = true;
|
||||
|
||||
this.$store.dispatch('hall:updateHero', { heroDetails: this.hero });
|
||||
},
|
||||
adminReinstateChat () {
|
||||
if (!this.hero.flags) {
|
||||
this.hero.flags = {};
|
||||
}
|
||||
this.hero.flags.chatRevoked = false;
|
||||
|
||||
this.$store.dispatch('hall:updateHero', { heroDetails: this.hero });
|
||||
},
|
||||
adminBlockUser () {
|
||||
this.hero.auth.blocked = true;
|
||||
|
||||
this.$store.dispatch('hall:updateHero', { heroDetails: this.hero });
|
||||
},
|
||||
adminUnblockUser () {
|
||||
this.hero.auth.blocked = false;
|
||||
|
||||
this.$store.dispatch('hall:updateHero', { heroDetails: this.hero });
|
||||
},
|
||||
async toggleAdminTools () {
|
||||
if (this.adminToolsLoaded) {
|
||||
this.adminToolsLoaded = false;
|
||||
} else {
|
||||
this.hero = await this.$store.dispatch('hall:getHero', { uuid: this.user._id });
|
||||
this.adminToolsLoaded = true;
|
||||
}
|
||||
},
|
||||
showAllocation () {
|
||||
return this.user._id === this.userLoggedIn._id && this.hasClass;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,50 @@
|
||||
<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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import profile from './profile';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
profile,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
userId: undefined,
|
||||
startingPage: undefined,
|
||||
path: undefined,
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.$root.$on('habitica:show-profile', (data) => {
|
||||
this.userId = data.userId;
|
||||
this.startingPage = data.startingPage || 'profile';
|
||||
this.path = data.path;
|
||||
this.$root.$emit('bv::show::modal', 'profile');
|
||||
});
|
||||
},
|
||||
destroyed () {
|
||||
this.$root.$off('habitica:show-profile');
|
||||
},
|
||||
methods: {
|
||||
onShown () {
|
||||
history.pushState('', null, this.path);
|
||||
},
|
||||
onHidden () {
|
||||
if (this.$route.path !== window.location.pathname) {
|
||||
this.$router.go(-1);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template lang="pug">
|
||||
.container
|
||||
.standard-page
|
||||
profile(:userId='userId', :startingPage='startingPage')
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import profile from './profile';
|
||||
|
||||
export default {
|
||||
props: ['userId', 'startingPage'],
|
||||
components: {
|
||||
profile,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,523 @@
|
||||
<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]]",
|
||||
: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') }}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import toggleSwitch from 'client/components/ui/toggleSwitch';
|
||||
import attributesGrid from 'client/components/inventory/equipment/attributesGrid';
|
||||
|
||||
import { mapState } from 'client/libs/store';
|
||||
import Content from '../../../common/script/content';
|
||||
import { beastMasterProgress, mountMasterProgress } from '../../../common/script/count';
|
||||
import autoAllocate from '../../../common/script/fns/autoAllocate';
|
||||
import allocateBulk from '../../../common/script/ops/stats/allocateBulk';
|
||||
import statsComputed from '../../../common/script/libs/statsComputed';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
import size from 'lodash/size';
|
||||
import keys from 'lodash/keys';
|
||||
|
||||
const DROP_ANIMALS = keys(Content.pets);
|
||||
const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
|
||||
export default {
|
||||
props: ['user', 'showAllocation'],
|
||||
components: {
|
||||
toggleSwitch,
|
||||
attributesGrid,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
equipTypes: {
|
||||
eyewear: this.$t('eyewear'),
|
||||
head: this.$t('headgearCapitalized'),
|
||||
headAccessory: this.$t('headAccess'),
|
||||
back: this.$t('backAccess'),
|
||||
armor: this.$t('armorCapitalized'),
|
||||
body: this.$t('bodyAccess'),
|
||||
weapon: this.$t('mainHand'),
|
||||
_skip: 'skip',
|
||||
shield: this.$t('offHand'),
|
||||
},
|
||||
|
||||
allocateStatsList: {
|
||||
str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' },
|
||||
int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
|
||||
con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
|
||||
per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
|
||||
},
|
||||
|
||||
stats: {
|
||||
str: {
|
||||
title: 'strength',
|
||||
popover: 'strengthText',
|
||||
},
|
||||
int: {
|
||||
title: 'intelligence',
|
||||
popover: 'intText',
|
||||
},
|
||||
con: {
|
||||
title: 'constitution',
|
||||
popover: 'conText',
|
||||
},
|
||||
per: {
|
||||
title: 'perception',
|
||||
popover: 'perText',
|
||||
},
|
||||
},
|
||||
statUpdates: {
|
||||
str: 0,
|
||||
int: 0,
|
||||
con: 0,
|
||||
per: 0,
|
||||
},
|
||||
content: Content,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
flatGear: 'content.gear.flat',
|
||||
}),
|
||||
equippedItems () {
|
||||
return this.user.items.gear.equipped;
|
||||
},
|
||||
costumeItems () {
|
||||
return this.user.items.gear.costume;
|
||||
},
|
||||
statsComputed () {
|
||||
return statsComputed(this.user);
|
||||
},
|
||||
userLevel100Plus () {
|
||||
return this.user.stats.lvl >= 100;
|
||||
},
|
||||
showStatsSave () {
|
||||
return Boolean(this.user.stats.points);
|
||||
},
|
||||
pointsRemaining () {
|
||||
let points = this.user.stats.points;
|
||||
Object.values(this.statUpdates).forEach(value => {
|
||||
points -= value;
|
||||
});
|
||||
return points;
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
getGearTitle (key) {
|
||||
return this.flatGear[key].text();
|
||||
},
|
||||
totalAllocatedStats (stat) {
|
||||
return this.user.stats[stat] + this.statUpdates[stat];
|
||||
},
|
||||
totalStatPoints (stat) {
|
||||
return this.statsComputed[stat] + this.statUpdates[stat];
|
||||
},
|
||||
totalCount (objectToCount) {
|
||||
let total = size(objectToCount);
|
||||
return total;
|
||||
},
|
||||
formatAnimal (animalName, type) {
|
||||
if (type === 'pet') {
|
||||
if (Content.petInfo.hasOwnProperty(animalName)) {
|
||||
return Content.petInfo[animalName].text();
|
||||
} else {
|
||||
return this.$t('noActivePet');
|
||||
}
|
||||
} else if (type === 'mount') {
|
||||
if (Content.mountInfo.hasOwnProperty(animalName)) {
|
||||
return Content.mountInfo[animalName].text();
|
||||
} else {
|
||||
return this.$t('noActiveMount');
|
||||
}
|
||||
}
|
||||
},
|
||||
formatBackground (background) {
|
||||
let bg = Content.appearances.background;
|
||||
|
||||
if (bg.hasOwnProperty(background)) {
|
||||
return `${bg[background].text()} (${this.$t(bg[background].set.text)})`;
|
||||
}
|
||||
|
||||
return this.$t('noBackground');
|
||||
},
|
||||
beastMasterProgress (pets) {
|
||||
let dropPetsFound = beastMasterProgress(pets);
|
||||
let display = this.formatOutOfTotalDisplay(dropPetsFound, TOTAL_NUMBER_OF_DROP_ANIMALS);
|
||||
|
||||
return display;
|
||||
},
|
||||
mountMasterProgress (mounts) {
|
||||
let dropMountsFound = mountMasterProgress(mounts);
|
||||
let display = this.formatOutOfTotalDisplay(dropMountsFound, TOTAL_NUMBER_OF_DROP_ANIMALS);
|
||||
|
||||
return display;
|
||||
},
|
||||
formatOutOfTotalDisplay (stat, totalStat) {
|
||||
let display = `${stat}/${totalStat}`;
|
||||
return display;
|
||||
},
|
||||
allocate (stat) {
|
||||
if (this.pointsRemaining === 0) return;
|
||||
this.statUpdates[stat]++;
|
||||
},
|
||||
deallocate (stat) {
|
||||
if (this.statUpdates[stat] === 0) return;
|
||||
this.statUpdates[stat]--;
|
||||
},
|
||||
async saveAttributes () {
|
||||
this.loading = true;
|
||||
|
||||
const statUpdates = {};
|
||||
['str', 'int', 'per', 'con'].forEach(stat => {
|
||||
if (this.statUpdates[stat] > 0) statUpdates[stat] = this.statUpdates[stat];
|
||||
});
|
||||
|
||||
// reset statUpdates to zero before request to avoid display errors while waiting for server
|
||||
this.statUpdates = {
|
||||
str: 0,
|
||||
int: 0,
|
||||
con: 0,
|
||||
per: 0,
|
||||
};
|
||||
|
||||
allocateBulk(this.user, { body: { stats: statUpdates } });
|
||||
|
||||
await axios.post('/api/v4/user/allocate-bulk', {
|
||||
stats: statUpdates,
|
||||
});
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
allocateNow () {
|
||||
autoAllocate(this.user);
|
||||
},
|
||||
setAutoAllocate () {
|
||||
let settings = {
|
||||
'preferences.automaticAllocation': Boolean(this.user.preferences.automaticAllocation),
|
||||
'preferences.allocationMode': 'taskbased',
|
||||
};
|
||||
|
||||
this.$store.dispatch('user:set', settings);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
#stats {
|
||||
.box div {
|
||||
margin: 0 auto;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-column {
|
||||
border-radius: 2px;
|
||||
background-color: #ffffff;
|
||||
padding: .5em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
|
||||
li strong {
|
||||
margin-right: .3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.str {
|
||||
color: #f74e52;
|
||||
}
|
||||
|
||||
.int {
|
||||
color: #2995cd;
|
||||
}
|
||||
|
||||
.con {
|
||||
color: #ffa623;
|
||||
}
|
||||
|
||||
.per {
|
||||
color: #4f2a93;
|
||||
}
|
||||
|
||||
#allocation {
|
||||
.title-row {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.counter.badge {
|
||||
position: relative;
|
||||
top: -0.25em;
|
||||
left: 0.5em;
|
||||
color: #fff;
|
||||
background-color: #ff944c;
|
||||
box-shadow: 0 1px 1px 0 rgba(26, 24, 29, 0.12);
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 148px;
|
||||
height: 84px;
|
||||
padding: .5em;
|
||||
margin: 0 auto;
|
||||
|
||||
div {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 40px;
|
||||
text-align: left;
|
||||
color: #686274;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.points {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1.67;
|
||||
text-align: left;
|
||||
color: #878190;
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.up, .down {
|
||||
border: solid #a5a1ac;
|
||||
border-width: 0 3px 3px 0;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.up:hover, .down:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.up {
|
||||
transform: rotate(-135deg);
|
||||
-webkit-transform: rotate(-135deg);
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.down {
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#attributes {
|
||||
.number {
|
||||
font-size: 64px;
|
||||
font-weight: bold;
|
||||
color: #686274;
|
||||
}
|
||||
|
||||
.attribute-label {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.well {
|
||||
background-color: #edecee;
|
||||
border-radius: 2px;
|
||||
padding: 0.4em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.well.pet-mount-well {
|
||||
padding-bottom: 1em;
|
||||
|
||||
strong {
|
||||
margin-right: .2em;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 94px;
|
||||
height: 92px;
|
||||
border-radius: 2px;
|
||||
border: dotted 1px #c3c0c7;
|
||||
}
|
||||
|
||||
.white {
|
||||
border-radius: 2px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.15), 0 1px 4px 0 rgba(26, 24, 29, 0.1);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.pet-mount-row {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.mount {
|
||||
margin-top: -0.2em !important;
|
||||
}
|
||||
|
||||
.save-row {
|
||||
margin-top: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,301 @@
|
||||
<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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.btn-xs {
|
||||
font-size: 12px;
|
||||
padding: .2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import size from 'lodash/size';
|
||||
import keys from 'lodash/keys';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import Content from '../../../common/script/content';
|
||||
import { beastMasterProgress, mountMasterProgress } from '../../../common/script/count';
|
||||
import statsComputed from '../../../common/script/libs/statsComputed';
|
||||
import autoAllocate from '../../../common/script/fns/autoAllocate';
|
||||
import changeClass from '../../../common/script/ops/changeClass';
|
||||
import allocate from '../../../common/script/ops/stats/allocate';
|
||||
|
||||
const DROP_ANIMALS = keys(Content.pets);
|
||||
const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
stats: {
|
||||
str: {
|
||||
title: 'strength',
|
||||
popover: 'strengthText',
|
||||
},
|
||||
int: {
|
||||
title: 'intelligence',
|
||||
popover: 'intText',
|
||||
},
|
||||
con: {
|
||||
title: 'constitution',
|
||||
popover: 'conText',
|
||||
},
|
||||
per: {
|
||||
title: 'perception',
|
||||
popover: 'perText',
|
||||
},
|
||||
},
|
||||
allocateStatsList: {
|
||||
str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' },
|
||||
int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
|
||||
con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
|
||||
per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
flatGear: 'content.gear.flat',
|
||||
}),
|
||||
statsComputed () {
|
||||
return statsComputed(this.user);
|
||||
},
|
||||
userLevel100Plus () {
|
||||
return this.user.stats.lvl >= 100;
|
||||
},
|
||||
classText () {
|
||||
let classTexts = {
|
||||
warrior: this.$t('warrior'),
|
||||
wizard: this.$t('mage'),
|
||||
rogue: this.$t('rogue'),
|
||||
healer: this.$t('healer'),
|
||||
};
|
||||
|
||||
return classTexts[this.user.stats.class];
|
||||
},
|
||||
hasClass () {
|
||||
return this.$store.getters['members:hasClass'](this.user);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
formatAnimal (animalName, type) {
|
||||
if (type === 'pet') {
|
||||
if (Content.petInfo.hasOwnProperty(animalName)) {
|
||||
return Content.petInfo[animalName].text();
|
||||
} else {
|
||||
return this.$t('noActivePet');
|
||||
}
|
||||
} else if (type === 'mount') {
|
||||
if (Content.mountInfo.hasOwnProperty(animalName)) {
|
||||
return Content.mountInfo[animalName].text();
|
||||
} else {
|
||||
return this.$t('noActiveMount');
|
||||
}
|
||||
}
|
||||
},
|
||||
formatBackground (background) {
|
||||
let bg = Content.appearances.background;
|
||||
|
||||
if (bg.hasOwnProperty(background)) {
|
||||
return `${bg[background].text()} (${this.$t(bg[background].set.text)})`;
|
||||
}
|
||||
return window.env.t('noBackground');
|
||||
},
|
||||
totalCount (objectToCount) {
|
||||
let total = size(objectToCount);
|
||||
return total;
|
||||
},
|
||||
beastMasterProgress (pets) {
|
||||
let dropPetsFound = beastMasterProgress(pets);
|
||||
let display = this.formatOutOfTotalDisplay(dropPetsFound, TOTAL_NUMBER_OF_DROP_ANIMALS);
|
||||
|
||||
return display;
|
||||
},
|
||||
mountMasterProgress (mounts) {
|
||||
let dropMountsFound = mountMasterProgress(mounts);
|
||||
let display = this.formatOutOfTotalDisplay(dropMountsFound, TOTAL_NUMBER_OF_DROP_ANIMALS);
|
||||
|
||||
return display;
|
||||
},
|
||||
formatOutOfTotalDisplay (stat, totalStat) {
|
||||
let display = `${stat}/${totalStat}`;
|
||||
return display;
|
||||
},
|
||||
changeClass () {
|
||||
changeClass(this.user);
|
||||
},
|
||||
allocate (stat) {
|
||||
allocate(this.user, stat);
|
||||
},
|
||||
allocateNow () {
|
||||
autoAllocate(this.user);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user