Many updates on our large list (#8905)

* Many updates on our large list

* Added footer debug functions
This commit is contained in:
Keith Holliday
2017-07-31 13:54:52 -06:00
committed by GitHub
parent aad6130b21
commit ffe46c0f07
37 changed files with 2731 additions and 1234 deletions

View File

@@ -1,68 +1,245 @@
<template lang="pug">
.standard-page
b-modal#profile(title="Profile", size='lg', :hide-footer="true")
.row
.col-8
.header
h1 {{user.profile.name}}
h4
strong User Id:
| {{user._id}}
.col-4
button.btn.btn-secondary(@click='editing = !editing') Edit
.row(v-if='!editing')
.col-8
.about
h2 About
p {{user.profile.blurb}}
.photo
h2 Photo
img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
.col-6.offset-3.text-center.nav
.nav-item(@click='selectedPage = "profile"', :class="{active: selectedPage === 'profile'}") Profile
.nav-item(@click='selectedPage = "achievements"', :class="{active: selectedPage === 'achievements'}") Achievements
.nav-item(@click='selectedPage = "stats"', :class="{active: selectedPage === 'stats'}") Stats
.standard-page(v-show='selectedPage === "profile"')
.row
.col-8
.header
h1 {{user.profile.name}}
h4
strong User Id:
| {{user._id}}
.col-4
button.btn.btn-secondary(@click='editing = !editing') Edit
.row(v-if='!editing')
.col-8
.about
h2 About
p {{user.profile.blurb}}
.photo
h2 Photo
img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
.col-4
.info
h2 info
.col-4
.info
h2 info
div
strong Joined:
| {{user.auth.timestamps.created}}
div
strong Total Log Ins:
span {{ $t('totalCheckins', {count: user.loginIncentives}) }}
div
| {{getProgressDisplay()}}
.progress
.progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
span.sr-only {{ incentivesProgress }}% Complete
// @TODO: Implement in V2 .social
.row(v-if='editing')
h1 Edit Profile
.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-3.offset-6.text.center
button.btn.btn-primary(@click='save()') {{ $t("save") }}
button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
.standard-page.container(v-show='selectedPage === "achievements"')
.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 }}
.standard-page(v-show='selectedPage === "stats"')
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#attributes
hr.col-12
h2.col-12 Attributes
.row.col-6(v-for="(statInfo, stat) in stats")
.col-4.attribute-label
span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
:popover='$t(statInfo.popover)', popover-trigger='mouseenter')
div {{ $t(statInfo.title) }}
strong.number {{ statsComputed[stat] }}
.col-6
ul.bonus-stats
li
strong Level:
| {{statsComputed.levelBonus[stat]}}
li
strong Equipment:
| {{statsComputed.gearBonus[stat]}}
li
strong Class:
| {{statsComputed.classBonus[stat]}}
li
strong Allocated:
| {{user.stats[stat]}}
li
strong Buffs:
| {{user.stats.buffs[stat]}}
.row
.col-4
div
strong Joined:
| {{user.auth.timestamps.created}}
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') :&nbsp;
span(v-for='stat in ["str","con","per","int"]', v-if='flatGear[key][stat]') {{flatGear[key][stat]}} {{ $t(stat) }}&nbsp;
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
strong Total Log Ins:
span {{ $t('totalCheckins', {count: user.loginIncentives}) }}
div
| {{getProgressDisplay()}}
.progress
.progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
span.sr-only {{ incentivesProgress }}% Complete
// @TODO: Implement in V2 .social
h3 Background
ul
li(v-if='!user.preferences.background') None
li(v-if='user.preferences.background') {{ user.preferences.background }}
.row(v-if='editing')
h1 Edit Profile
.col-12
.alert.alert-info.alert-sm(v-html='$t("communityGuidelinesWarning", managerEmail)')
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) }}
// 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')
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-3.offset-6.text.center
button.btn.btn-primary(@click='save()') {{ $t("save") }}
button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
.col-4(v-if='user.flags.classSelected && !user.preferences.disableClasses')
h3(v-once) {{ $t('characterBuild') }}
h4(v-once) {{ $t('class') + ': ' }}
span {{ classText }}&nbsp;
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}}&nbsp;
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
|&nbsp;
| {{ $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>
@@ -77,17 +254,61 @@
color: #686274;
}
}
.nav {
font-weight: bold;
height: 40px;
}
.nav-item {
display: inline-block;
margin-right: 2em;
margin-left: 1em;
padding: 1em;
}
.nav-item:hover, .nav-item.active {
color: #4f2a93;
border-bottom: 2px solid #4f2a93;
cursor: pointer;
}
#attributes {
.number {
font-size: 64px;
font-weight: bold;
color: #686274;
}
.attribute-label {
text-align: center;
}
}
</style>
<script>
import bModal from 'bootstrap-vue/lib/components/modal';
import each from 'lodash/each';
import { mapState } from 'client/libs/store';
import size from 'lodash/size';
import keys from 'lodash/keys';
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/allocate';
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';
const DROP_ANIMALS = keys(Content.pets);
const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
export default {
components: {
bModal,
},
data () {
return {
editing: false,
@@ -99,32 +320,79 @@ export default {
managerEmail: {
hrefBlankCommunityManagerEmail: `<a href="mailto:${COMMUNITY_MANAGER_EMAIL}">${COMMUNITY_MANAGER_EMAIL}</a>`,
},
selectedPage: 'profile',
achievements: {},
content: Content,
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 () {
this.editingProfile.name = this.user.profile.name;
this.editingProfile.imageUrl = this.user.profile.imageUrl;
this.editingProfile.imageUrl = this.user.profile.imageUrl;
this.achievements = achievementsLib.getAchievementsForProfile(this.user);
this.$root.$emit('show::modal', 'profile');
},
computed: {
...mapState({user: 'user.data'}),
...mapState({
user: 'user.data',
flatGear: 'content.gear.flat',
}),
incentivesProgress () {
return this.getIncentivesProgress();
},
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];
},
},
methods: {
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}`;
// 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];
@@ -147,6 +415,58 @@ 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 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>