mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 14:47:53 +01:00
split profile and profileStats (#10185)
This commit is contained in:
negue
Matteo Pagliazzi
@@ -134,146 +134,11 @@ div
|
||||
h2.text-center {{$t('questsCompleted')}}
|
||||
div(v-for='(value, key) in user.achievements.quests')
|
||||
span {{ content.quests[key].text() }} ({{ value }})
|
||||
#stats.standard-page(v-show='selectedPage === "stats"', v-if='user.preferences')
|
||||
.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.gearTitle {{ getGearTitle(equippedItems[key]) }}
|
||||
attributesGrid.attributesGrid(
|
||||
:item="content.gear.flat[equippedItems[key]]",
|
||||
)
|
||||
|
||||
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.gearTitle {{ getGearTitle(costumeItems[key]) }}
|
||||
attributesGrid.attributesGrid(
|
||||
:item="content.gear.flat[costumeItems[key]]",
|
||||
)
|
||||
|
||||
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 {{ statsComputed[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')}}:
|
||||
| {{user.stats[stat]}}
|
||||
li
|
||||
strong {{$t('buffs')}}:
|
||||
| {{user.stats.buffs[stat]}}
|
||||
#allocation(v-if='user._id === userLoggedIn._id && hasClass')
|
||||
.row.title-row
|
||||
.col-12.col-md-6
|
||||
h3(v-if='userLevel100Plus', v-once, v-html="$t('noMoreAllocate')")
|
||||
h3(v-if='user.stats.points || userLevel100Plus')
|
||||
| {{$t('pointsAvailable')}}
|
||||
.counter.badge(v-if='user.stats.points || userLevel100Plus')
|
||||
| {{user.stats.points}}
|
||||
.col-12.col-md-6
|
||||
.float-right
|
||||
toggle-switch(:label="$t('autoAllocation')",
|
||||
v-model='user.preferences.automaticAllocation',
|
||||
@change='userset({"preferences.automaticAllocation": Boolean(user.preferences.automaticAllocation), "preferences.allocationMode": "taskbased"})')
|
||||
|
||||
.row
|
||||
.col-12.col-md-3(v-for='(statInfo, stat) in allocateStatsList')
|
||||
.box.white.row.col-12
|
||||
.col-12
|
||||
div(:class='stat') {{ $t(stats[stat].title) }}
|
||||
.number {{ user.stats[stat] }}
|
||||
.points {{$t('pts')}}
|
||||
.col-12.col-md-4
|
||||
.up(v-if='user.stats.points', @click='allocate(stat)')
|
||||
profileStats(
|
||||
:user='user',
|
||||
v-show='selectedPage === "stats"',
|
||||
:showAllocation='showAllocation()',
|
||||
v-if='user.preferences')
|
||||
send-gems-modal(:userReceivingGems='userReceivingGems')
|
||||
</template>
|
||||
|
||||
@@ -345,15 +210,6 @@ div
|
||||
color: #686274;
|
||||
}
|
||||
|
||||
.pet-mount-row {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.mount {
|
||||
margin-top: -0.2em !important;
|
||||
}
|
||||
|
||||
.photo img {
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -385,33 +241,6 @@ div
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
||||
#achievements {
|
||||
.box {
|
||||
margin: 0 auto;
|
||||
@@ -470,107 +299,7 @@ div
|
||||
}
|
||||
}
|
||||
|
||||
#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);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
border: solid #a5a1ac;
|
||||
border-width: 0 3px 3px 0;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
transform: rotate(-135deg);
|
||||
-webkit-transform: rotate(-135deg);
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.up:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -578,25 +307,17 @@ import moment from 'moment';
|
||||
import axios from 'axios';
|
||||
import each from 'lodash/each';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import size from 'lodash/size';
|
||||
import keys from 'lodash/keys';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import { beastMasterProgress, mountMasterProgress } from '../../../common/script/count';
|
||||
import statsComputed from '../../../common/script/libs/statsComputed';
|
||||
import autoAllocate from '../../../common/script/fns/autoAllocate';
|
||||
import allocate from '../../../common/script/ops/stats/allocate';
|
||||
|
||||
import MemberDetails from '../memberDetails';
|
||||
import sendGemsModal from 'client/components/payments/sendGemsModal';
|
||||
import markdown from 'client/directives/markdown';
|
||||
import toggleSwitch from 'client/components/ui/toggleSwitch';
|
||||
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 attributesGrid from 'client/components/inventory/equipment/attributesGrid';
|
||||
const DROP_ANIMALS = keys(Content.pets);
|
||||
const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
|
||||
import profileStats from './profileStats';
|
||||
|
||||
|
||||
import message from 'assets/svg/message.svg';
|
||||
import gift from 'assets/svg/gift.svg';
|
||||
@@ -616,8 +337,7 @@ export default {
|
||||
components: {
|
||||
sendGemsModal,
|
||||
MemberDetails,
|
||||
toggleSwitch,
|
||||
attributesGrid,
|
||||
profileStats,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -649,41 +369,6 @@ export default {
|
||||
selectedPage: 'profile',
|
||||
achievements: {},
|
||||
content: Content,
|
||||
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'),
|
||||
},
|
||||
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' },
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
@@ -746,12 +431,7 @@ export default {
|
||||
incentivesProgress () {
|
||||
return this.getIncentivesProgress();
|
||||
},
|
||||
statsComputed () {
|
||||
return statsComputed(this.user);
|
||||
},
|
||||
userLevel100Plus () {
|
||||
return this.user.stats.lvl >= 100;
|
||||
},
|
||||
|
||||
classText () {
|
||||
let classTexts = {
|
||||
warrior: this.$t('warrior'),
|
||||
@@ -786,9 +466,6 @@ export default {
|
||||
userName: this.user.profile.name,
|
||||
});
|
||||
},
|
||||
getGearTitle (key) {
|
||||
return this.flatGear[key].text();
|
||||
},
|
||||
getProgressDisplay () {
|
||||
// let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
|
||||
// if (!currentLoginDay) return this.$t('checkinReceivedAllRewardsMessage');
|
||||
@@ -828,60 +505,6 @@ export default {
|
||||
|
||||
this.editing = false;
|
||||
},
|
||||
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');
|
||||
},
|
||||
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;
|
||||
},
|
||||
allocate (stat) {
|
||||
allocate(this.user, {query: { stat }});
|
||||
axios.post(`/api/v3/user/allocate?stat=${stat}`);
|
||||
},
|
||||
allocateNow () {
|
||||
autoAllocate(this.user);
|
||||
},
|
||||
userset (settings) {
|
||||
this.$store.dispatch('user:set', settings);
|
||||
},
|
||||
blockUser () {
|
||||
this.userLoggedIn.inbox.blocks.push(this.user._id);
|
||||
axios.post(`/api/v3/user/block/${this.user._id}`);
|
||||
@@ -925,6 +548,10 @@ export default {
|
||||
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>
|
||||
|
||||
460
website/client/components/userMenu/profileStats.vue
Normal file
460
website/client/components/userMenu/profileStats.vue
Normal file
@@ -0,0 +1,460 @@
|
||||
<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.gearTitle {{ getGearTitle(equippedItems[key]) }}
|
||||
attributesGrid.attributesGrid(
|
||||
:item="content.gear.flat[equippedItems[key]]",
|
||||
)
|
||||
|
||||
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.gearTitle {{ getGearTitle(costumeItems[key]) }}
|
||||
attributesGrid.attributesGrid(
|
||||
:item="content.gear.flat[costumeItems[key]]",
|
||||
)
|
||||
|
||||
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 {{ statsComputed[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')}}:
|
||||
| {{user.stats[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(v-if='user.stats.points || userLevel100Plus')
|
||||
| {{$t('pointsAvailable')}}
|
||||
.counter.badge(v-if='user.stats.points || userLevel100Plus')
|
||||
| {{user.stats.points}}
|
||||
.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-12
|
||||
div(:class='stat') {{ $t(stats[stat].title) }}
|
||||
.number {{ user.stats[stat] }}
|
||||
.points {{$t('pts')}}
|
||||
.col-12.col-md-4
|
||||
.up(v-if='user.stats.points', @click='allocate(stat)')
|
||||
</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 allocate from '../../../common/script/ops/stats/allocate';
|
||||
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 {
|
||||
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',
|
||||
},
|
||||
},
|
||||
|
||||
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;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getGearTitle (key) {
|
||||
return this.flatGear[key].text();
|
||||
},
|
||||
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) {
|
||||
allocate(this.user, {query: { stat }});
|
||||
axios.post(`/api/v3/user/allocate?stat=${stat}`);
|
||||
},
|
||||
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);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
border: solid #a5a1ac;
|
||||
border-width: 0 3px 3px 0;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
transform: rotate(-135deg);
|
||||
-webkit-transform: rotate(-135deg);
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.up:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user