html format other components

This commit is contained in:
Matteo Pagliazzi
2019-10-12 17:05:15 +02:00
parent 7b4671fbf9
commit f99e3fab8b
180 changed files with 6536 additions and 2894 deletions
@@ -6,7 +6,8 @@
>
<h2 class="col-12">
{{ $t(key+'Achievs') }}
</h2><div
</h2>
<div
v-for="achievment in category.achievements"
class="col-3 text-center"
>
@@ -33,21 +34,27 @@
>
{{ achievment.optionalCount }}
</div>
</div><div
</div>
<div
v-if="!achievment.earned"
class="achievement achievement-unearned2x"
></div>
</div>
</div>
</div>
</div><div class="row">
</div>
<div class="row">
<div class="col-6">
<h2>Challeges Won</h2><div v-for="chal in user.achievements.challenges">
<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 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>
@@ -1,7 +1,7 @@
<template>
<b-modal
id="inbox-modal"
title=""
title
:hide-footer="true"
size="lg"
@shown="onModalShown"
@@ -19,7 +19,8 @@
class="svg-icon envelope"
v-html="icons.messageIcon"
></div>
</div><div class="col-6">
</div>
<div class="col-6">
<h2
v-once
class="text-center"
@@ -28,7 +29,8 @@
</h2>
</div>
</div>
</div><div class="col-4 offset-3">
</div>
<div class="col-4 offset-3">
<toggle-switch
class="float-right"
:label="optTextSet.switchDescription"
@@ -36,7 +38,8 @@
:hover-text="optTextSet.popoverText"
@change="toggleOpt()"
/>
</div><div class="col-1">
</div>
<div class="col-1">
<div class="close">
<span
class="svg-icon inline icon-10"
@@ -47,26 +50,31 @@
</div>
</div>
</div>
</div><div class="row">
</div>
<div class="row">
<div class="col-4 sidebar">
<div class="search-section">
<b-form-input
v-model="search"
:placeholder="$t('search')"
/>
</div><div
</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>
></div>
<h4 v-once>
{{ $t('emptyMessagesLine1') }}
</h4><p v-if="!user.flags.chatRevoked">
</h4>
<p v-if="!user.flags.chatRevoked">
{{ $t('emptyMessagesLine2') }}
</p>
</div><div
</div>
<div
v-if="filtersConversations.length > 0"
class="conversations"
>
@@ -78,22 +86,29 @@
>
<div>
<h3 :class="userLevelStyle(conversation)">
{{ conversation.name }}<div
{{ conversation.name }}
<div
class="svg-icon"
v-html="tierIcon(conversation)"
></div>
</h3>
</div><div class="time">
</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.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>
<div class="col-8 messages d-flex flex-column justify-content-between">
<div
v-if="!selectedConversation.key"
class="empty-messages text-center"
@@ -101,13 +116,17 @@
<div
class="svg-icon envelope"
v-html="icons.messageIcon"
></div><h4>{{ placeholderTexts.title }}</h4><p v-html="placeholderTexts.description"></p>
</div><div
></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
</div>
<chat-messages
v-if="selectedConversation && selectedConversationMessages.length > 0"
ref="chatscroll"
class="message-scroll"
@@ -116,13 +135,16 @@
:can-load-more="canLoadMore"
:is-loading="messagesLoading"
@message-removed="messageRemoved"
@triggerLoad="infiniteScrollTrigger"
/><div
@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
<h4>{{ $t('PMDisabledCaptionTitle') }}</h4>
<p>{{ $t('PMDisabledCaptionText') }}</p>
</div>
<div
v-if="selectedConversation.key && !user.flags.chatRevoked"
class="new-message-row"
>
@@ -130,12 +152,14 @@
v-model="newMessage"
maxlength="3000"
@keyup.ctrl.enter="sendPrivateMessage()"
></textarea><button
></textarea>
<button
class="btn btn-secondary"
@click="sendPrivateMessage()"
>
{{ $t('send') }}
</button><div class="row">
</button>
<div class="row">
<span class="ml-3">{{ currentLength }} / 3000</span>
</div>
</div>
@@ -14,7 +14,8 @@
class="svg-icon message-icon"
v-html="icons.message"
></div>
</button><button
</button>
<button
v-b-tooltip.hover.bottom="$t('sendGems')"
class="btn btn-secondary gift-icon"
@click="openSendGemsModal()"
@@ -23,7 +24,8 @@
class="svg-icon gift-icon"
v-html="icons.gift"
></div>
</button><button
</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"
@@ -33,7 +35,8 @@
class="svg-icon remove-icon"
v-html="icons.remove"
></div>
</button><button
</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"
@@ -43,7 +46,8 @@
class="svg-icon positive-icon"
v-html="icons.positive"
></div>
</button><button
</button>
<button
v-if="this.userLoggedIn.contributor.admin"
v-b-tooltip.hover.right="'Admin - Toggle Tools'"
class="btn btn-secondary positive-icon"
@@ -54,7 +58,8 @@
v-html="icons.staff"
></div>
</button>
</div><div
</div>
<div
v-if="this.userLoggedIn.contributor.admin && adminToolsLoaded"
class="row admin-profile-actions"
>
@@ -64,39 +69,46 @@
v-b-tooltip.hover.bottom="'Turn on Shadow Muting'"
class="admin-action"
@click="adminTurnOnShadowMuting()"
>shadow-mute</span><span
>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
>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
>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
>un-mute</span>
<span
v-if="!hero.auth.blocked"
v-b-tooltip.hover.bottom="'Ban User'"
class="admin-action"
@click="adminBlockUser()"
>ban</span><span
>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>
<div class="row">
<div class="col-12">
<member-details :member="user" />
</div>
</div>
</div><div class="row">
</div>
<div class="row">
<div class="col-12 col-md-6 offset-md-3 text-center nav">
<div
class="nav-item"
@@ -104,13 +116,15 @@
@click="selectPage('profile')"
>
{{ $t('profile') }}
</div><div
</div>
<div
class="nav-item"
:class="{active: selectedPage === 'stats'}"
@click="selectPage('stats')"
>
{{ $t('stats') }}
</div><div
</div>
<div
class="nav-item"
:class="{active: selectedPage === 'achievements'}"
@click="selectPage('achievements')"
@@ -118,7 +132,8 @@
{{ $t('achievements') }}
</div>
</div>
</div><div
</div>
<div
v-show="selectedPage === 'profile'"
v-if="user.profile"
id="userProfile"
@@ -127,14 +142,16 @@
<div class="row">
<div class="col-12 col-md-8">
<div class="header mb-3">
<h1>{{ user.profile.name }}</h1><div
<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">
</div>
<div class="col-12 col-md-4">
<button
v-if="user._id === userLoggedIn._id"
class="btn btn-secondary"
@@ -144,49 +161,64 @@
{{ $t('edit') }}
</button>
</div>
</div><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
<h2>{{ $t('about') }}</h2>
<p
v-if="user.profile.blurb"
v-markdown="user.profile.blurb"
></p><p v-else>
></p>
<p v-else>
{{ $t('noDescription') }}
</p>
</div><div class="photo profile-section">
<h2>{{ $t('photo') }}</h2><img
</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>
>
<p v-else>
{{ $t('noPhoto') }}
</p>
</div>
</div><div class="col-12 col-md-4">
</div>
<div class="col-12 col-md-4">
<div class="info profile-section">
<h2>{{ $t('info') }}</h2><div class="info-item">
<h2>{{ $t('info') }}</h2>
<div class="info-item">
<div class="info-item-label">
{{ $t('joined') }}:
</div><div class="info-item-value">
</div>
<div class="info-item-value">
{{ userJoinedDate }}
</div>
</div><div class="info-item">
</div>
<div class="info-item">
<div class="info-item-label">
{{ $t('totalLogins') }}:
</div><div class="info-item-value">
</div>
<div class="info-item-value">
{{ user.loginIncentives }}
</div>
</div><div class="info-item">
</div>
<div class="info-item">
<div class="info-item-label">
{{ $t('latestCheckin') }}:
</div><div class="info-item-value">
</div>
<div class="info-item-value">
{{ userLastLoggedIn }}
</div>
</div><div class="info-item">
{{ getProgressDisplay() }}<div class="progress">
</div>
<div class="info-item">
{{ getProgressDisplay() }}
<div class="progress">
<div
class="progress-bar"
role="progressbar"
@@ -199,45 +231,58 @@
</div>
</div>
</div>
</div><!-- @TODO: Implement in V2 .social-->
</div>
<!-- @TODO: Implement in V2 .social-->
</div>
</div><div
</div>
<div
v-if="editing"
class="row"
>
<h1>{{ $t('editProfile') }}</h1><div class="col-12">
<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
></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
</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
</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-->
></textarea>
<!-- include ../../shared/formatting-help-->
</div>
</div><div class="col-12 text-center">
</div>
<div class="col-12 text-center">
<button
class="btn btn-primary"
@click="save()"
>
{{ $t("save") }}
</button><button
</button>
<button
class="btn btn-warning"
@click="editing = false"
>
@@ -245,7 +290,8 @@
</button>
</div>
</div>
</div><div
</div>
<div
v-show="selectedPage === 'achievements'"
v-if="user.achievements"
id="achievements"
@@ -257,7 +303,8 @@
>
<h2 class="col-12 text-center">
{{ $t(key+'Achievs') }}
</h2><div
</h2>
<div
v-for="(achievement, key) in category.achievements"
class="col-12 col-md-3 text-center"
>
@@ -273,11 +320,13 @@
>
<h4 class="popover-content-title">
{{ achievement.title }}
</h4><div
</h4>
<div
class="popover-content-text"
v-html="achievement.text"
></div>
</b-popover><div
</b-popover>
<div
v-if="achievement.earned"
class="achievement"
:class="achievement.icon + '2x'"
@@ -288,34 +337,44 @@
>
{{ achievement.optionalCount }}
</div>
</div><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>
<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">
<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>
</h2>
<div v-for="chal in user.achievements.challenges">
<span v-markdown="chal"></span>
<hr>
</div>
</div><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">
<div class="achievement-icon achievement-alien"></div>
<h2 class="text-center">
{{ $t('questsCompleted') }}
</h2><div v-for="(value, key) in user.achievements.quests">
</h2>
<div v-for="(value, key) in user.achievements.quests">
<span>{{ content.quests[key].text() }} ({{ value }})</span>
</div>
</div>
</div>
</div><profileStats
</div>
<profileStats
v-show="selectedPage === 'stats'"
v-if="user.preferences"
:user="user"
@@ -7,7 +7,8 @@
<div class="col-12 col-md-6">
<h2 class="text-center">
{{ $t('equipment') }}
</h2><div class="well">
</h2>
<div class="well">
<div
v-for="(label, key) in equipTypes"
class="col-12 col-md-4 item-wrapper"
@@ -19,7 +20,8 @@
:class="{white: equippedItems[key] && equippedItems[key].indexOf('base_0') === -1}"
>
<div :class="`shop_${equippedItems[key]}`"></div>
</div><b-popover
</div>
<b-popover
v-if="label !== 'skip' && equippedItems[key] && equippedItems[key].indexOf('base_0') === -1"
:target="key"
triggers="hover"
@@ -28,39 +30,48 @@
>
<h4 class="popover-title-only">
{{ getGearTitle(equippedItems[key]) }}
</h4><attributesGrid
</h4>
<attributesGrid
class="attributesGrid"
:item="content.gear.flat[equippedItems[key]]"
:user="user"
/>
</b-popover><h3 v-if="label !== 'skip'">
</b-popover>
<h3 v-if="label !== 'skip'">
{{ label }}
</h3>
</div>
</div>
</div><div class="col-12 col-md-6">
</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
</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
<!-- 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
</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
</div>
<b-popover
v-if="label !== 'skip' && costumeItems[key] && costumeItems[key].indexOf('base_0') === -1"
:target="key + 'C'"
triggers="hover"
@@ -69,27 +80,32 @@
>
<h4 class="popover-title-only">
{{ getGearTitle(costumeItems[key]) }}
</h4><attributesGrid
</h4>
<attributesGrid
class="attributesGrid"
:item="content.gear.flat[costumeItems[key]]"
:user="user"
/>
</b-popover><h3 v-if="label !== 'skip'">
</b-popover>
<h3 v-if="label !== 'skip'">
{{ label }}
</h3><h3 v-else>
</h3>
<h3 v-else>
{{ $t('background') }}
</h3>
</div>
</div>
</div>
</div><div class="row pet-mount-row">
</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">
</h2>
<div class="well pet-mount-well">
<div class="row col-12">
<div class="col-12 col-md-4">
<div
@@ -101,18 +117,29 @@
: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 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">
</div>
<div class="col-12 col-md-6">
<h2
v-once
class="text-center"
>
{{ $t('mounts') }}
</h2><div class="well pet-mount-well">
</h2>
<div class="well pet-mount-well">
<div class="row col-12">
<div class="col-12 col-md-4">
<div
@@ -124,19 +151,31 @@
: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 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
</div>
<div
id="attributes"
class="row"
>
<hr class="col-12"><h2 class="col-12">
<hr class="col-12">
<h2 class="col-12">
{{ $t('attributes') }}
</h2><div
</h2>
<div
v-for="(statInfo, stat) in stats"
class="col-12 col-md-6"
>
@@ -148,20 +187,43 @@
popover-placement="right"
:popover="$t(statInfo.popover)"
popover-trigger="mouseenter"
></span><div
></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">
</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>
<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
</div>
<div
v-if="showAllocation"
id="allocation"
>
@@ -171,15 +233,18 @@
v-if="userLevel100Plus"
v-once
v-html="$t('noMoreAllocate')"
></h3><h3>
{{ $t('statPoints') }}<div
></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>
<div class="col-12 col-md-6">
<div class="float-right">
<toggle-switch
v-model="user.preferences.automaticAllocation"
@@ -188,7 +253,8 @@
/>
</div>
</div>
</div><div class="row">
</div>
<div class="row">
<div
v-for="(statInfo, stat) in allocateStatsList"
class="col-12 col-md-3"
@@ -197,19 +263,23 @@
<div class="col-9">
<div :class="stat">
{{ $t(stats[stat].title) }}
</div><div class="number">
</div>
<div class="number">
{{ totalAllocatedStats(stat) }}
</div><div class="points">
</div>
<div class="points">
{{ $t('pts') }}
</div>
</div><div class="col-3">
</div>
<div class="col-3">
<div>
<div
v-if="showStatsSave"
class="up"
@click="allocate(stat)"
></div>
</div><div>
</div>
<div>
<div
v-if="showStatsSave"
class="down"
@@ -219,7 +289,8 @@
</div>
</div>
</div>
</div><div
</div>
<div
v-if="showStatsSave"
class="row save-row"
>
+194 -104
View File
@@ -1,96 +1,140 @@
<template>
<div class="standard-page">
<h1>Stats</h1><div class="row">
<h1>Stats</h1>
<div class="row">
<div class="col-6">
<h2 class="text-center">
Equipment
</h2><div class="well row">
</h2>
<div class="well row">
<div class="col-4"></div>
</div>
</div><div class="col-6">
</div>
<div class="col-6">
<h2 class="text-center">
Costume
</h2>
</div>
</div><div class="row">
</div>
<div class="row">
<div class="col-6">
<h2 class="text-center">
Pet
</h2>
</div><div class="col-6">
</div>
<div class="col-6">
<h2 class="text-center">
Mount
</h2>
</div>
</div><div class="row">
<hr class="col-12"><h2 class="col-12">
</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">
</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>
<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">:&nbsp;<span
v-for="stat in ['str','con','per','int']"
v-if="flatGear[key][stat]"
>{{ flatGear[key][stat] }} {{ $t(stat) }}&nbsp;</span></strong>
<strong>{{ flatGear[key].text() }}</strong>
<strong
v-if="flatGear[key].str || flatGear[key].con || flatGear[key].per || flatGear[key].int"
>
:&nbsp;
<span
v-for="stat in ['str','con','per','int']"
v-if="flatGear[key][stat]"
>{{ flatGear[key][stat] }} {{ $t(stat) }}&nbsp;</span>
</strong>
</li>
</ul>
</div><div v-if="user.preferences.costume">
</div>
<div v-if="user.preferences.costume">
<h4 v-once>
{{ $t('costume') }}
</h4><div>
</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>
</div>
<div>
<h3>Background</h3>
<ul>
<li v-if="!user.preferences.background">
None
</li><li v-if="user.preferences.background">
</li>
<li v-if="user.preferences.background">
{{ user.preferences.background }}
</li>
</ul>
</div><div ng-if="user.flags.dropsEnabled">
</div>
<div ng-if="user.flags.dropsEnabled">
<h3 v-once>
{{ $t('pets') }}
</h3><ul>
</h3>
<ul>
<li ng-if="user.items.currentPet">
{{ $t('activePet') }}:
{{ formatAnimal(user.items.currentPet, 'pet') }}
</li><li>
</li>
<li>
{{ $t('petsFound') }}:
{{ totalCount(user.items.pets) }}
</li><li>
</li>
<li>
{{ $t('beastMasterProgress') }}:
{{ beastMasterProgress(user.items.pets) }}
</li>
</ul><h3 v-once>
</ul>
<h3 v-once>
{{ $t('mounts') }}
</h3><ul>
</h3>
<ul>
<li v-if="user.items.currentMount">
{{ $t('activeMount') }}:
{{ formatAnimal(user.items.currentMount, 'mount') }}
</li><li>
</li>
<li>
{{ $t('mountsTamed') }}:
{{ totalCount(user.items.mounts) }}
</li><li>
</li>
<li>
{{ $t('mountMasterProgress') }}:
{{ mountMasterProgress(user.items.mounts) }}
</li>
</ul>
</div>
</div><div class="col-4">
</div>
<div class="col-4">
<h3 v-once>
{{ $t('attributes') }}
</h3><div
</h3>
<div
v-for="(statInfo, stat) in stats"
class="row"
>
@@ -101,28 +145,37 @@
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">
>
<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>
</li>
<li>
{{ $t('gearBonus') }}
{{ statsComputed.gearBonus[stat] }}
</li><li>
</li>
<li>
{{ $t('classBonus') }}
{{ statsComputed.classBonus[stat] }}
</li><li>
</li>
<li>
{{ $t('allocatedPoints') }}
{{ user.stats[stat] }}
</li><li>
</li>
<li>
{{ $t('buffs') }}
{{ user.stats.buffs[stat] }}
</li>
</ul>
</div>
</div><div v-if="user.stats.buffs.stealth">
</div>
<div v-if="user.stats.buffs.stealth">
<strong
v-once
class="hint"
@@ -130,8 +183,10 @@
popover-trigger="mouseenter"
popover-placement="right"
:popover="$t('stealthNewDay')"
>{{ $t('stealth') }}</strong><strong>: {{ user.stats.buffs.stealth }}&nbsp;</strong>
</div><div v-if="user.stats.buffs.streaks">
>{{ $t('stealth') }}</strong>
<strong>: {{ user.stats.buffs.stealth }}&nbsp;</strong>
</div>
<div v-if="user.stats.buffs.streaks">
<div>
<strong
class="hint"
@@ -139,96 +194,127 @@
popover-trigger="mouseenter"
popover-placement="right"
:popover="$t('streaksFrozenText')"
></strong>{{ $t('streaksFrozen') }}
></strong>
{{ $t('streaksFrozen') }}
</div>
</div>
</div><div
</div>
<div
v-if="hasClass"
class="col-4"
>
<h3 v-once>
{{ $t('characterBuild') }}
</h3><h4 v-once>
{{ $t('class') + ': ' }}<span>{{ classText }}&nbsp;</span><button
</h3>
<h4 v-once>
{{ $t('class') + ': ' }}
<span>{{ classText }}&nbsp;</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>
</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 }}&nbsp;</strong><strong
</p>
<p v-if="user.stats.points || userLevel100Plus">
<strong class="inline">{{ user.stats.points }}&nbsp;</strong>
<strong
class="hint"
popover-trigger="mouseenter"
popover-placement="right"
:popover="$t('levelPopover')"
>{{ $t('unallocated') }}</strong>
</p>
</div><div>
</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
<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>
<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>
</form><div v-if="user.preferences.automaticAllocation && !(user.preferences.allocationMode === 'taskbased') && (user.stats.points > 0)">
<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"
@@ -236,12 +322,14 @@
:popover="$t('distributePointsPop')"
@click="allocateNow({})"
>
<span class="glyphicon glyphicon-download"></span>&nbsp;
<span class="glyphicon glyphicon-download"></span>
&nbsp;
{{ $t('distributePoints') }}
</button>
</div>
</fieldset>
</div><div
</div>
<div
v-for="(statInfo, stat) in allocateStatsList"
class="row"
>
@@ -251,8 +339,10 @@
popover-trigger="mouseenter"
popover-placement="right"
:popover="$t(statInfo.popover)"
></span>{{ $t(statInfo.title) + user.stats[stat] }}
</div><div
></span>
{{ $t(statInfo.title) + user.stats[stat] }}
</div>
<div
v-if="user.stats.points"
class="col-4"
@click="allocate(stat)"