krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-14 21:27:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Many updates on our large list (#8905)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

48
website/client/components/achievements/welcome.vue Normal file
View File

@@ -0,0 +1,48 @@
<template lang="pug">
b-modal#welcome(:title="$t('welcomeToHabit')", size='lg', :hide-footer="true")
.modal-body.container-fluid
.row
.col-4.col-centered
span(style='display:flex')
h1
| &#9312;
h3(style='margin:auto auto auto .5em') {{ $t('welcome1') }}
.welcome_basic_avatars(style='margin: 1.5em auto 1.5em')
h4 {{ $t('welcome1notes') }}
.col-4.col-centered
span(style='display:flex')
h1
| &#9313;
h3(style='margin:.3em auto auto .5em') {{ $t('welcome2') }}
.welcome_sample_tasks(style='margin: 2.5em auto 1.5em')
h4 {{ $t('welcome2notes') }}
.col-4.col-centered
span(style='display:flex')
h1
| &#9314;
h3(style='margin:auto auto auto .5em') {{ $t('welcome3') }}
.welcome_promo_party(style='margin: 1em auto 1em')
h4 {{ $t('welcome3notes') }}
.modal-footer.text-center(style='margin-top:0')
.col-3
.col-6
button.btn.btn-primary.btn-lg.flex-column(@click='ready()') {{ $t('imReady') }}
.col-3
</template>
<script>
import bModal from 'bootstrap-vue/lib/components/modal';
export default {
components: {
bModal,
},
methods: {
ready () {
// Guide.goto("intro",0)'
this.$router.push('/avatar');
this.$root.$emit('hide::modal', 'welcome');
},
},
};
</script>

285
website/client/components/appFooter.vue
View File

@@ -1,46 +1,72 @@
<template lang="pug">
<template lang='pug'>
.row
modify-inventory
footer.container-fluid
.row
.col-2
h3 iOS App
h3 Android App
h3
a(href='https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8', target='_blank') iOS App
h3
a(href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica', target='_blank') Android App
.col-2
h3 Company
ul
li How it Works
li Blog
li Tumblr
li FAQ
li News
li Merchandis
li Press Kit
li Contact Us
li
a(href='/static/features') How it Works
li
a(href='https://habitica.wordpress.com/') Blog
li
a(href='http://blog.habitrpg.com/') Tumblr
li
a(href='/static/faq') FAQ
li
a(href='/static/old-news') News
li
a(href='/static/merch') Merchandise
li
a(href='/static/press-kit') Press Kit
li
a(href='/static/contact') Contact Us
.col-2
h3 Community
ul
li Community Guidelines
li Submit a Bug
li Request a Feature
li Add-Ons & Extensions
li Forum
li Kickstarter
li Facebook
li Reddit
li
a(href='/static/community-guidelines') Community Guidelines
li
router-link(to='/groups/a29da26b-37de-4a71-b0c6-48e72a900dac') Submit a Bug
li
a(href='https://trello.com/c/odmhIqyW/440-read-first-table-of-contents', target='_blank') Request a Feature
li
a(href='http://habitica.wikia.com/wiki/Extensions,_Add-Ons,_and_Customizations', target='_blank') Add-Ons & Extensions
li
a(href='http://habitica.wikia.com/wiki/Special:Forum', target='_blank') Forum
li
a(href='https://www.kickstarter.com/projects/lefnire/habitrpg-mobile', target='_blank') Kickstarter
li
a(href='https://www.facebook.com/Habitica', target='_blank') Facebook
li
a(href='https://www.reddit.com/r/habitrpg/', target='_blank') Reddit
.col-6
.row
.col-6
h3 Developers
ul
li APIv3
li Data Display Tool
li Guidance for Blacksmiths
li The Forge - Developer Blog
li
a(href='/apidoc', target='_blank') APIv3
li
a(href='http://data.habitrpg.com/?uuid=', target='_blank') Data Display Tool
li
a(href='http://habitica.wikia.com/wiki/Guidance_for_Blacksmiths', target='_blank') Guidance for Blacksmiths
li
a(href='http://devs.habitica.com/', target='_blank') The Forge - Developer Blog
.col-6
h3 Social
.social-circle Twitter
.social-circle Instagram
.social-circle Facebook
.social-circle
a(href='https://twitter.com/habitica', target='_blank') Twitter
.social-circle
a(href='https://www.instagram.com/habitica/', target='_blank') Instagram
.social-circle
a(href='https://www.facebook.com/Habitica', target='_blank') Facebook
.row
.col-10
| We’re an open source project that depends on our users for support. The money you donate helps us keep the servers running, maintain a small staff, develop new features, and provide incentives for our volunteers.
@@ -56,6 +82,23 @@
.col-4.text-right
span Privacy Policy
span Terms of Use
.row
h4 Debug
.btn-group-vertical
a.btn.btn-default(@click='setHealthLow()') Health = 1
a.btn.btn-default(@click='addMissedDay(1)') +1 Missed Day
a.btn.btn-default(@click='addMissedDay(2)') +2 Missed Days
a.btn.btn-default(@click='addMissedDay(8)') +8 Missed Days
a.btn.btn-default(@click='addMissedDay(32)') +32 Missed Days
a.btn.btn-default(@click='addTenGems()') +10 Gems
a.btn.btn-default(@click='addHourglass()') +1 Mystic Hourglass
a.btn.btn-default(@click='addGold()') +500GP
a.btn.btn-default(@click='addMana()') +MP
a.btn.btn-default(@click='addLevelsAndGold()') +Exp +GP +MP
a.btn.btn-default(@click='addOneLevel()') +1 Level
a.btn.btn-default(@click='addQuestProgress()' tooltip="+1000 to boss quests. 300 items to collection quests") Quest Progress Up
a.btn.btn-default(@click='makeAdmin()') Make Admin
a.btn.btn-default(@click='openModifyInventoryModal()') Modify Inventory
</template>
<style scoped>
@@ -99,11 +142,19 @@
</style>
<script>
import axios from 'axios';
import moment from 'moment';
import { mapState } from 'client/libs/store';
import gryphon from 'assets/svg/gryphon.svg';
import modifyInventory from './modifyInventory';
// const IS_PRODUCTION = process.env.NODE_ENV === 'production'; // eslint-disable-line no-process-env
export default {
components: {
modifyInventory,
},
data () {
return {
icons: Object.freeze({
@@ -111,113 +162,83 @@ export default {
}),
};
},
computed: {
...mapState({user: 'user.data'}),
},
methods: {
// @TODO: add https://github.com/HabitRPG/habitica/blob/develop/website/client-old/js/controllers/footerCtrl.js$scope.setHealthLow = function(){
// $scope.setHealthLow = function(){
// User.set({
// 'stats.hp': 1
// });
// };
//
// $scope.addMissedDay = function(numberOfDays){
// if (!confirm("Are you sure you want to reset the day by " + numberOfDays + " day(s)?")) return;
//
// User.setCron(numberOfDays);
// };
//
// $scope.addTenGems = function(){
// User.addTenGems();
// };
//
// $scope.addHourglass = function(){
// User.addHourglass();
// };
//
// $scope.addGold = function(){
// User.set({
// 'stats.gp': User.user.stats.gp + 500,
// });
// };
//
// $scope.addMana = function(){
// User.set({
// 'stats.mp': User.user.stats.mp + 500,
// });
// };
//
// $scope.addLevelsAndGold = function(){
// User.set({
// 'stats.exp': User.user.stats.exp + 10000,
// 'stats.gp': User.user.stats.gp + 10000,
// 'stats.mp': User.user.stats.mp + 10000
// });
// };
//
// $scope.addOneLevel = function(){
// User.set({
// 'stats.exp': User.user.stats.exp + (Math.round(((Math.pow(User.user.stats.lvl, 2) * 0.25) + (10 * User.user.stats.lvl) + 139.75) / 10) * 10)
// });
// };
//
// $scope.addQuestProgress = function(){
// $http({
// method: "POST",
// url: 'api/v3/debug/quest-progress'
// })
// .then(function (response) {
// Notification.text('Quest progress increased');
// User.sync();
// })
// };
//
// $scope.makeAdmin = function () {
// User.makeAdmin();
// };
//
// $scope.openModifyInventoryModal = function () {
// $rootScope.openModal('modify-inventory', {controller: 'FooterCtrl', scope: $scope });
// $scope.showInv = { };
// $scope.inv = {
// gear: {},
// special: {},
// pets: {},
// mounts: {},
// eggs: {},
// hatchingPotions: {},
// food: {},
// quests: {},
// };
// $scope.setAllItems = function (type, value) {
// var set = $scope.inv[type];
//
// for (var item in set) {
// if (set.hasOwnProperty(item)) {
// set[item] = value;
// }
// }
// };
// };
//
// $scope.modifyInventory = function () {
// $http({
// method: "POST",
// url: 'api/v3/debug/modify-inventory',
// data: {
// gear: $scope.showInv.gear ? $scope.inv.gear : null,
// special: $scope.showInv.special ? $scope.inv.special : null,
// pets: $scope.showInv.pets ? $scope.inv.pets : null,
// mounts: $scope.showInv.mounts ? $scope.inv.mounts : null,
// eggs: $scope.showInv.eggs ? $scope.inv.eggs : null,
// hatchingPotions: $scope.showInv.hatchingPotions ? $scope.inv.hatchingPotions : null,
// food: $scope.showInv.food ? $scope.inv.food : null,
// quests: $scope.showInv.quests ? $scope.inv.quests : null,
// }
// })
// .then(function (response) {
// Notification.text('Inventory updated. Refresh or sync.');
// })
// };
// }
setHealthLow () {
this.$store.dispatch('user:set', {
'stats.hp': 1,
});
},
async addMissedDay (numberOfDays) {
if (!confirm(`Are you sure you want to reset the day by ${numberOfDays} day(s)?`)) return;
let date = moment(this.user.lastCron).subtract(numberOfDays, 'days').toDate();
await axios.post('/api/v3/debug/set-cron', {
lastCron: date,
});
// @TODO: Notification.text('-' + numberOfDays + ' day(s), remember to refresh');
// @TODO: Sync user?
},
async addTenGems () {
// @TODO: User.addTenGems();
await axios.post('/api/v3/debug/add-ten-gems');
// @TODO: Notification.text('+10 Gems!');
this.user.balance += 2.5;
},
async addHourglass () {
await axios.post('/api/v3/debug/add-hourglass');
// @TODO: Sync?
},
addGold () {
this.$store.dispatch('user:set', {
'stats.gp': this.user.stats.gp + 500,
});
},
addMana () {
this.$store.dispatch('user:set', {
'stats.mp': this.user.stats.mp + 500,
});
},
addLevelsAndGold () {
this.$store.dispatch('user:set', {
'stats.exp': this.user.stats.exp + 10000,
'stats.gp': this.user.stats.gp + 10000,
'stats.mp': this.user.stats.mp + 10000,
});
},
addOneLevel () {
// @TODO: Name these variables better
let exp = 0;
let five = 10 * this.user.stats.lvl;
let four = Math.pow(this.user.stats.lvl, 2) * 0.25;
let three = four + five + 139.75;
let two = three / 10;
let one = Math.round(two) * 10;
exp = this.user.stats.exp + one;
this.$store.dispatch('user:set', {
'stats.exp': exp,
});
},
async addQuestProgress () {
await axios.post('/api/v3/debug/quest-progress');
// @TODO: Notification.text('Quest progress increased');
// @TODO: User.sync();
},
async makeAdmin () {
await axios.post('/api/v3/debug/make-admin');
// @TODO: Notification.text('You are now an admin! Go to the Hall of Heroes to change your contributor level.');
// @TODO: sync()
},
openModifyInventoryModal () {
this.$root.$emit('show::modal', 'modify-inventory');
},
},
};
</script>

9
website/client/components/appHeader.vue
View File

@@ -1,5 +1,6 @@
<template lang="pug">
#app-header.row(:class='{sticky: user.preferences.stickyHeader}')
#app-header.row(:class='{sticky: user.preferences.stickyHeader}', v-if='showHeader')
create-party-modal
members-modal(:group='user.party', :hide-badge="true")
member-details(:member="user", @click="$router.push({name: 'avatar'})")
.view-party(v-if="user.party && user.party._id")
@@ -102,6 +103,10 @@ export default {
user: 'user:data',
partyMembers: 'party:members',
}),
showHeader () {
if (this.$store.state.hideHeader) return false;
return true;
},
},
methods: {
...mapActions({
@@ -115,7 +120,7 @@ export default {
}
},
openPartyModal () {
this.$root.$emit('show::modal', 'members-modal');
this.$root.$emit('show::modal', 'create-party-modal');
},
},
created () {

2
website/client/components/appMenu.vue
View File

@@ -33,7 +33,7 @@ div
a.nav-link(v-once) {{ $t('group') }}
router-link.nav-item(tag="li", :to="{name: 'myChallenges'}", exact)
a.nav-link(v-once) {{ $t('challenges') }}
router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}")
router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}", :to="{name: 'faq'}")
a.nav-link(v-once) {{ $t('help') }}
.dropdown-menu
router-link.dropdown-item(:to="{name: 'faq'}") {{ $t('faq') }}

36
website/client/components/auth/registerLogin.vue
View File

@@ -13,11 +13,11 @@
.col-6
.btn.btn-secondary.social-button(@click='socialAuth("facebook")', v-once)
.svg-icon.social-icon(v-html="icons.facebookIcon")
| {{this.registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'})}}
span {{this.registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'})}}
.col-6
.btn.btn-secondary.social-button(@click='socialAuth("google")', v-once)
.svg-icon.social-icon(v-html="icons.googleIcon")
| {{this.registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'})}}
span {{this.registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'})}}
.form-group
label(for='usernameInput', v-once) {{$t('username')}}
input#usernameInput.form-control(type='text', :placeholder='$t("usernamePlaceholder")', v-model='username')
@@ -30,10 +30,14 @@
.form-group(v-if='registering')
label(for='confirmPasswordInput', v-once) {{$t('confirmPassword')}}
input#confirmPasswordInput.form-control(type='password', :placeholder='$t("confirmPasswordPlaceholder")', v-model='passwordConfirm')
small.form-text(v-once) {{$t('termsAndAgreement')}}
small.form-text(v-once, v-html="$t('termsAndAgreement')")
.text-center
.btn.btn-info(@click='register()', v-if='registering', v-once) {{$t('joinHabitica')}}
.btn.btn-info(@click='login()', v-if='!registering', v-once) {{$t('login')}}
router-link(tag="li", :to="{name: 'login'}", v-if='registering', exact)
a(v-once) {{ $t('login') }}
router-link(tag="li", :to="{name: 'register'}", v-if='!registering', exact)
a(v-once) {{ $t('joinHabitica') }}
#bottom-background
.seamless_mountains_demo_repeat
@@ -58,13 +62,14 @@
.gryphon {
width: 63.2px;
height: 69.4px;
color: $white;
margin: 0 auto;
}
.habitica-logo {
width: 144px;
height: 31px;
margin-top: 2em;
margin-bottom: 2em;
margin: 2em auto;
}
label {
@@ -107,6 +112,8 @@
.social-icon {
margin-right: 1em;
width: 13px;
display: inline-block;
height: 13px;
}
}
@@ -157,7 +164,6 @@ export default {
email: '',
password: '',
passwordConfirm: '',
registering: true,
};
data.icons = Object.freeze({
@@ -169,11 +175,15 @@ export default {
return data;
},
computed: {
registering () {
if (this.$route.path.startsWith('/login')) {
return false;
}
return true;
},
},
mounted () {
if (this.$route.path.startsWith('/login')) {
this.registering = false;
}
hello.init({
facebook: '',
// windows: WINDOWS_CLIENT_ID,
@@ -205,7 +215,7 @@ export default {
passwordConfirm: this.passwordConfirm,
});
this.$router.go('/tasks');
this.$router.push('/tasks');
},
async login () {
await this.$store.dispatch('auth:login', {
@@ -214,7 +224,7 @@ export default {
password: this.password,
});
this.$router.go('/tasks');
this.$router.push('/tasks');
},
async socialAuth (network) {
let auth = await hello(network).login({scope: 'email'});
@@ -223,7 +233,7 @@ export default {
auth,
});
this.$router.go('/tasks');
this.$router.push('/tasks');
},
},
};

26
website/client/components/challenges/challengeDetail.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.row
challenge-modal(:challenge='challenge')
challenge-modal(:challenge='challenge', v-on:updatedChallenge='updatedChallenge')
close-challenge-modal
.col-8.standard-page
@@ -10,17 +10,17 @@
div
strong(v-once) {{$t('createdBy')}}
span {{challenge.author}}
strong.margin-left(v-once)
// @TODO: Implement in V2 strong.margin-left(v-once)
.svg-icon.calendar-icon(v-html="icons.calendarIcon")
| {{$t('endDate')}}
span {{challenge.endDate}}
.tags
span.tag(v-for='tag in challenge.tags') {{tag}}
.col-4
.box
.box(@click="showMemberModal()")
.svg-icon.member-icon(v-html="icons.memberIcon")
| {{challenge.memberCount}}
.details(v-once) {{$t('participants')}}
.details(v-once) {{$t('participantsTitle')}}
.box
.svg-icon.gem-icon(v-html="icons.gemIcon")
| {{challenge.prize}}
@@ -149,6 +149,7 @@ export default {
calendarIcon,
}),
challenge: {},
members: [],
};
},
computed: {
@@ -157,16 +158,18 @@ export default {
return this.user.challenges.indexOf(this.challenge._id) !== -1;
},
isLeader () {
if (!this.leader) return false;
return this.user._id === this.leader.id;
if (!this.challenge.leader) return false;
return this.user._id === this.challenge.leader._id;
},
},
mounted () {
this.getChallenge();
async mounted () {
this.challenge = await this.$store.dispatch('challenges:getChallenge', {challengeId: this.challengeId});
this.members = await this.$store.dispatch('members:getChallengeMembers', {challengeId: this.challengeId});
},
methods: {
async getChallenge () {
this.challenge = await this.$store.dispatch('challenges:getChallenge', {challengeId: this.challengeId});
showMemberModal () {
this.$store.state.viewingMembers = this.members;
this.$root.$emit('show::modal', 'members-modal');
},
async joinChallenge () {
this.user.challenges.push(this.challengeId);
@@ -187,6 +190,9 @@ export default {
this.$root.$emit('show::modal', 'challenge-modal');
},
// @TODO: view members
updatedChallenge (eventData) {
Object.assign(this.challenge, eventData.challenge);
},
},
};
</script>

210
website/client/components/challenges/challengeModal.vue
View File

@@ -1,16 +1,20 @@
<template lang="pug">
b-modal#challenge-modal(:title="$t('createChallenge')", size='lg')
form(@submit.stop.prevent="submit")
.form
.form-group
label
strong(v-once) {{$t('name')}}*
b-form-input(type="text", :placeholder="$t('challengeNamePlaceHolder')", v-model="workingChallenge.name")
.form-group
label
strong(v-once) {{$t('shortName')}}*
b-form-input(type="text", :placeholder="$t('challengeNamePlaceHolder')", v-model="workingChallenge.shortName")
.form-group
label
strong(v-once) {{$t('description')}}*
div.description-count.float-right {{charactersRemaining}} {{ $t('charactersRemaining') }}
b-form-input.description-textarea(type="text", textarea, :placeholder="$t('challengeDescriptionPlaceHolder')", v-model="workingChallenge.description")
.form-group
// @TODO: Implemenet in V2 .form-group
label
strong(v-once) {{$t('guildInformation')}}*
a.float-right {{ $t('markdownFormattingHelp') }}
@@ -18,27 +22,38 @@
.form-group(v-if='creating')
label
strong(v-once) {{$t('where')}}
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(@click='sort(option.value)')
.form-group
select.form-control(v-model='workingChallenge.group')
option(v-for='group in groups', :value='group._id') {{group.name}}
.form-group(v-if='workingChallenge.categories')
label
strong(v-once) {{$t('categories')}}*
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(@click='sort(option.value)')
| Member
.form-group
div.category-wrap(@click.prevent="toggleCategorySelect")
span.category-select(v-if='workingChallenge.categories.length === 0') {{$t('none')}}
.category-label(v-for='category in workingChallenge.categories') {{$t(categoriesHashByKey[category])}}
.category-box(v-if="showCategorySelect")
.form-check(
v-for="group in categoryOptions",
:key="group.key",
)
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value='group.key' v-model="workingChallenge.categories")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t(group.label) }}
button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
// @TODO: Implement in V2 .form-group
label
strong(v-once) {{$t('endDate')}}
b-form-input.end-date-input
.form-group
label
strong(v-once) {{$t('prize')}}
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(@click='sort(option.value)')
| Member
input(type='number', min='1', :max='maxPrize')
.row.footer-wrap
.col-12.text-center.submit-button-wrapper
button.btn.btn-primary(v-once) {{$t('createChallenge')}}
.alert.alert-warning(v-if='insufficientGemsForTavernChallenge')
You do not have enough gems to create a Tavern challenge
button.btn.btn-primary(v-once, v-if='creating', @click='createChallenge()') {{$t('createChallenge')}}
button.btn.btn-primary(v-once, v-if='!creating', @click='updateChallenge()') {{$t('updateChallenge')}}
.col-12.text-center
p(v-once) {{$t('challengeMinimum')}}
</template>
@@ -90,6 +105,14 @@
margin-top: 2em;
margin-bottom: 2em;
}
.category-wrap {
position: relative;
}
.category-box {
top: -40px !important;
}
}
</style>
@@ -99,6 +122,9 @@ import bDropdown from 'bootstrap-vue/lib/components/dropdown';
import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
import bFormInput from 'bootstrap-vue/lib/components/form-input';
import { TAVERN_ID } from '../../../common/script/constants';
import { mapState } from 'client/libs/store';
export default {
props: ['challenge'],
components: {
@@ -108,51 +134,151 @@ export default {
bFormInput,
},
data () {
let categoryOptions = [
{
label: 'animals',
key: 'animals',
},
{
label: 'artDesign',
key: 'art_design',
},
{
label: 'booksWriting',
key: 'books_writing',
},
{
label: 'comicsHobbies',
key: 'comics_hobbies',
},
{
label: 'diyCrafts',
key: 'diy_crafts',
},
{
label: 'education',
key: 'education',
},
{
label: 'foodCooking',
key: 'food_cooking',
},
{
label: 'healthFitness',
key: 'health_fitness',
},
{
label: 'music',
key: 'music',
},
{
label: 'relationship',
key: 'relationship',
},
{
label: 'scienceTech',
key: 'science_tech ',
},
];
let hashedCategories = {};
categoryOptions.forEach((category) => {
hashedCategories[category.key] = category.label;
});
let categoriesHashByKey = hashedCategories;
return {
creating: true,
charactersRemaining: 250,
workingChallenge: {
name: '',
description: '',
information: '',
},
workingChallenge: {},
showCategorySelect: false,
categoryOptions,
categoriesHashByKey,
groups: [],
};
},
mounted () {
if (this.challenge) {
this.workingChallenge = this.challenge;
this.creating = false;
}
async mounted () {
this.$root.$on('shown::modal', () => {
if (this.challenge) {
Object.assign(this.workingChallenge, this.challenge);
this.workingChallenge.categories = [];
this.creating = false;
}
});
this.groups = await this.$store.dispatch('guilds:getMyGuilds');
this.ressetWorkingChallenge();
},
watch: {
user () {
if (!this.challenge) this.workingChallenge.leader = this.user._id;
},
},
computed: {
...mapState({user: 'user.data'}),
maxPrize () {
// var groupBalance = 0;
// var group = _.find($scope.groups, { _id: gid });
//
// if (group && group.balance && group.leader === User.user._id) {
// groupBalance = group.balance * 4;
// }
//
// return groupBalance;
// return userBalance + availableGroupBalance;
let userBalance = this.user.balance || 0;
userBalance = userBalance * 4;
let groupBalance = 0;
let group = find(this.groups, { _id: this.workingChallenge.group });
if (group && group.balance && group.leader === this.user._id) {
groupBalance = group.balance * 4;
}
return userBalance + groupBalance;
},
insufficientGemsForTavernChallenge () {
// var balance = User.user.balance || 0;
// var isForTavern = $scope.newChallenge.group == TAVERN_ID;
//
// if (isForTavern) {
// return balance <= 0;
// } else {
// return false;
// }
let balance = this.user.balance || 0;
let isForTavern = this.workingChallenge.group === TAVERN_ID;
if (isForTavern) {
return balance <= 0;
} else {
return false;
}
},
},
methods: {
ressetWorkingChallenge () {
this.workingChallenge = {
name: '',
description: '',
information: '',
categories: [],
group: '',
dailys: [],
habits: [],
leader: '',
members: [],
official: false,
prize: 1,
rewards: [],
shortName: '',
todos: [],
};
},
createChallenge () {
// this.$store.dispatch('challenges:createChallenge', {challenge: this.workingChallenge});
if (!this.workingChallenge.name) alert('Name is required');
if (!this.workingChallenge.description) alert('Description is required');
this.workingChallenge.timestamp = new Date().getTime();
this.$store.dispatch('challenges:createChallenge', {challenge: this.workingChallenge});
this.ressetWorkingChallenge();
this.$root.$emit('hide::modal', 'challenge-modal');
},
updateChallenge () {
// this.$store.dispatch('challenges:updateChallenge', {challenge: this.workingChallenge});
this.$emit('updatedChallenge', {
challenge: this.workingChallenge,
});
this.$store.dispatch('challenges:updateChallenge', {challenge: this.workingChallenge});
this.ressetWorkingChallenge();
this.$root.$emit('hide::modal', 'challenge-modal');
},
toggleCategorySelect () {
this.showCategorySelect = !this.showCategorySelect;
},
},
};

53
website/client/components/challenges/findChallenges.vue
View File

@@ -8,14 +8,14 @@
.col-md-8.text-left
h1(v-once) {{$t('findChallenges')}}
.col-md-4
span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
// @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
button.btn.btn-secondary.create-challenge-button(@click='createChallenge()')
.svg-icon.positive-icon(v-html="icons.positiveIcon")
span(v-once) {{$t('createChallenge')}}
.row
.col-6(v-for='challenge in challenges', v-if='!memberOf(challenge)')
.col-6(v-for='challenge in filteredChallenges', v-if='!memberOf(challenge)')
challenge-item(:challenge='challenge')
</template>
@@ -48,10 +48,12 @@ import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
import Sidebar from './sidebar';
import ChallengeItem from './challengeItem';
import challengeModal from './challengeModal';
import challengeUtilities from 'client/mixins/challengeUtilities';
import positiveIcon from 'assets/svg/positive.svg';
export default {
mixins: [challengeUtilities],
components: {
Sidebar,
ChallengeItem,
@@ -65,7 +67,31 @@ export default {
positiveIcon,
}),
challenges: [],
sortOptions: [],
sort: 'none',
sortOptions: [
{
text: this.$t('none'),
value: 'none',
},
{
text: this.$t('participants'),
value: 'participants',
},
{
text: this.$t('name'),
value: 'name',
},
{
text: this.$t('end_date'),
value: 'end_date',
},
{
text: this.$t('start_date'),
value: 'start_date',
},
],
search: '',
filters: {},
};
},
mounted () {
@@ -75,16 +101,25 @@ export default {
},
computed: {
...mapState({user: 'user.data'}),
filteredChallenges () {
let search = this.search;
let filters = this.filters;
let user = this.$store.state.user.data;
// @TODO: Move this to the server
return this.challenges.filter((challenge) => {
return this.filterChallenge(challenge, filters, search, user);
});
},
},
methods: {
memberOf (challenge) {
return this.user.challenges.indexOf(challenge._id) !== -1;
},
updateSearch () {
updateSearch (eventData) {
this.search = eventData.searchTerm;
},
updateFilters () {
updateFilters (eventData) {
this.filters = eventData;
},
createChallenge () {
this.$root.$emit('show::modal', 'challenge-modal');

13
website/client/components/challenges/groupChallenges.vue
View File

@@ -1,11 +1,12 @@
<template lang="pug">
div
challenge-modal
.row.no-quest-section(v-if='challenges.length === 0')
.col-12.text-center
.svg-icon.challenge-icon(v-html="icons.challengeIcon")
h4(v-once) {{ $t('haveNoChallenges') }}
p(v-once) {{ $t('challengeDescription') }}
button.btn.btn-secondary(v-once) {{ $t('createChallenge') }}
button.btn.btn-secondary(v-once, @click='createChallenge()') {{ $t('createChallenge') }}
.col-12.challenge-item(v-for='challenge in challenges')
.row
.col-9
@@ -77,12 +78,17 @@ div
</style>
<script>
import challengeModal from './challengeModal';
import gemIcon from 'assets/svg/gem.svg';
import memberIcon from 'assets/svg/member-icon.svg';
import challengeIcon from 'assets/svg/challenge.svg';
export default {
props: ['groupId'],
components: {
challengeModal,
},
async mounted () {
this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', {groupId: this.groupId});
},
@@ -96,5 +102,10 @@ export default {
}),
};
},
methods: {
createChallenge () {
this.$root.$emit('show::modal', 'challenge-modal');
},
},
};
</script>

52
website/client/components/challenges/myChallenges.vue
View File

@@ -8,9 +8,9 @@
.col-md-8.text-left
h1(v-once) {{$t('myChallenges')}}
.col-md-4
span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
// @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
button.btn.btn-secondary.create-challenge-button(@click='createChallenge()')
.svg-icon.positive-icon(v-html="icons.positiveIcon")
span(v-once) {{$t('createChallenge')}}
@@ -70,11 +70,13 @@ import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
import Sidebar from './sidebar';
import ChallengeItem from './challengeItem';
import challengeModal from './challengeModal';
import challengeUtilities from 'client/mixins/challengeUtilities';
import challengeIcon from 'assets/svg/challenge.svg';
import positiveIcon from 'assets/svg/positive.svg';
export default {
mixins: [challengeUtilities],
components: {
Sidebar,
ChallengeItem,
@@ -89,7 +91,33 @@ export default {
positiveIcon,
}),
challenges: [],
sortOptions: [],
sort: 'none',
sortOptions: [
{
text: this.$t('none'),
value: 'none',
},
{
text: this.$t('participants'),
value: 'participants',
},
{
text: this.$t('name'),
value: 'name',
},
{
text: this.$t('end_date'),
value: 'end_date',
},
{
text: this.$t('start_date'),
value: 'start_date',
},
],
search: '',
filters: {
roles: ['member'], // This is required for my challenges
},
};
},
mounted () {
@@ -98,10 +126,12 @@ export default {
computed: {
...mapState({user: 'user.data'}),
filteredChallenges () {
let search = this.search;
let filters = this.filters;
let user = this.$store.state.user.data;
// @TODO: Move this to the server
return this.challenges.filter((challenge) => {
let isMember = this.memberOf(challenge);
// @TODO: Other filters
return isMember;
return this.filterChallenge(challenge, filters, search, user);
});
},
},
@@ -109,11 +139,11 @@ export default {
memberOf (challenge) {
return this.user.challenges.indexOf(challenge._id) !== -1;
},
updateSearch () {
updateSearch (eventData) {
this.search = eventData.searchTerm;
},
updateFilters () {
updateFilters (eventData) {
this.filters = eventData;
},
createChallenge () {
this.$root.$emit('show::modal', 'challenge-modal');

28
website/client/components/challenges/sidebar.vue
View File

@@ -28,11 +28,11 @@
.form-group
h3 Ownership
.form-check(
v-for="group in guildSizeOptions",
v-for="group in ownershipOptions",
:key="group.key",
)
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value='group.key' v-model="guildSizeFilters")
input.custom-control-input(type="checkbox", :value='group.key' v-model="ownershipFilters")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t(group.label) }}
</template>
@@ -76,13 +76,13 @@ export default {
label: 'not_participating',
key: 'not_participating',
},
{
label: 'either',
key: 'either',
},
// {
// label: 'either',
// key: 'either',
// },
],
guildSizeFilters: [],
guildSizeOptions: [
ownershipFilters: [],
ownershipOptions: [
{
label: 'owned',
key: 'owned',
@@ -91,10 +91,10 @@ export default {
label: 'not_owned',
key: 'not_owned',
},
{
label: 'either',
key: 'either',
},
// {
// label: 'either',
// key: 'either',
// },
],
searchTerm: '',
};
@@ -106,7 +106,7 @@ export default {
roleFilters: function roleFilters () {
this.emitFilters();
},
guildSizeFilters: function guildSizeFilters () {
ownershipFilters: function ownershipFilters () {
this.emitFilters();
},
searchTerm: throttle(function searchTerm (newSearch) {
@@ -120,7 +120,7 @@ export default {
this.$emit('filter', {
categories: this.categoryFilters,
roles: this.roleFilters,
guildSize: this.guildSizeFilters,
ownership: this.ownershipFilters,
});
},
},

409
website/client/components/creatorIntro.vue
View File

@@ -1,207 +1,208 @@
<template lang="pug">
#creator-background
#creator-modal
.section.row.welcome-section(v-if='modalPage == 1')
.col-6.offset-3.text-center
h3(v-once) {{$t('welcomeTo')}}
.svg-icon.logo(v-html='icons.logoPurple')
b-modal#avatar-modal(title="", size='md', :hide-header='true', :hide-footer='true')
.section.row.welcome-section(v-if='modalPage == 1')
.col-6.offset-3.text-center
h3(v-once) {{$t('welcomeTo')}}
.svg-icon.logo(v-html='icons.logoPurple')
.section.row
.col-6.offset-3
.user-creation-bg
avatar(:member='user')
div(v-if='modalPage == 2')
.section.row
.col-6.offset-3
.user-creation-bg
avatar(:member='user')
.col-12.text-center
button.btn.btn-secondary(v-once) {{$t('randomize')}}
.section.row.text-center.customize-menu
.col-3
.menu-item(@click='changeTopPage("body", "size")')
.svg-icon(v-html='icons.bodyIcon')
strong(v-once) {{$t('body')}}
.col-3
.menu-item(@click='changeTopPage("skin", "color")')
.svg-icon(v-html='icons.skinIcon')
strong(v-once) {{$t('skin')}}
.col-3
.menu-item(@click='changeTopPage("hair", "color")')
.svg-icon(v-html='icons.hairIcon')
strong(v-once) {{$t('hair')}}
.col-3
.menu-item(@click='changeTopPage("extra", "glasses")')
.svg-icon(v-html='icons.accessoriesIcon')
strong(v-once) {{$t('extra')}}
.section.customize-section(v-if='activeTopPage === "body"')
.row.sub-menu
.col-2.offset-4.sub-menu-item(@click='changeSubPage("size")', :class='{active: activeSubPage === "size"}')
strong(v-once) {{$t('size')}}
.col-2.sub-menu-item(@click='changeSubPage("shirt")', :class='{active: activeSubPage === "shirt"}')
strong(v-once) {{$t('shirt')}}
.row(v-if='activeSubPage === "size"')
.col-12.customize-options.size-options
.slim_shirt_black.option(@click='set({"preferences.size":"slim"})', :class='{active: user.preferences.size === "slim"}')
.broad_shirt_black.option(@click='set({"preferences.size":"broad"})', :class='{active: user.preferences.size === "broad"}')
.row(v-if='activeSubPage === "shirt"')
.col-12.customize-options
.slim_shirt_black.option(@click='set({"preferences.shirt":"black"})', :class='{active: user.preferences.shirt === "black"}')
.slim_shirt_blue.option(@click='set({"preferences.shirt":"blue"})', :class='{active: user.preferences.shirt === "blue"}')
.slim_shirt_green.option(@click='set({"preferences.shirt":"green"})', :class='{active: user.preferences.shirt === "green"}')
.slim_shirt_pink.option(@click='set({"preferences.shirt":"pink"})', :class='{active: user.preferences.shirt === "pink"}')
.slim_shirt_white.option(@click='set({"preferences.shirt":"white"})', :class='{active: user.preferences.shirt === "white"}')
.slim_shirt_yellow.option(@click='set({"preferences.shirt":"yellow"})', :class='{active: user.preferences.shirt === "yellow"}')
div(v-if='modalPage == 2')
.section.row
.col-12.text-center
button.btn.btn-secondary(v-once) {{$t('randomize')}}
.section.row.text-center.customize-menu
.col-3
.menu-item(@click='changeTopPage("body", "size")')
.svg-icon(v-html='icons.bodyIcon')
strong(v-once) {{$t('body')}}
.col-3
.menu-item(@click='changeTopPage("skin", "color")')
.svg-icon(v-html='icons.skinIcon')
strong(v-once) {{$t('skin')}}
.col-3
.menu-item(@click='changeTopPage("hair", "color")')
.svg-icon(v-html='icons.hairIcon')
strong(v-once) {{$t('hair')}}
.col-3
.menu-item(@click='changeTopPage("extra", "glasses")')
.svg-icon(v-html='icons.accessoriesIcon')
strong(v-once) {{$t('extra')}}
.section.customize-section(v-if='activeTopPage === "body"')
.row.sub-menu
.col-2.offset-4.sub-menu-item(@click='changeSubPage("size")', :class='{active: activeSubPage === "size"}')
strong(v-once) {{$t('size')}}
.col-2.sub-menu-item(@click='changeSubPage("shirt")', :class='{active: activeSubPage === "shirt"}')
strong(v-once) {{$t('shirt')}}
.row(v-if='activeSubPage === "size"')
.col-12.customize-options.size-options
.slim_shirt_black.option(@click='set({"preferences.size":"slim"})', :class='{active: user.preferences.size === "slim"}')
.broad_shirt_black.option(@click='set({"preferences.size":"broad"})', :class='{active: user.preferences.size === "broad"}')
.row(v-if='activeSubPage === "shirt"')
.col-12.customize-options
.slim_shirt_black.option(@click='set({"preferences.shirt":"black"})', :class='{active: user.preferences.shirt === "black"}')
.slim_shirt_blue.option(@click='set({"preferences.shirt":"blue"})', :class='{active: user.preferences.shirt === "blue"}')
.slim_shirt_green.option(@click='set({"preferences.shirt":"green"})', :class='{active: user.preferences.shirt === "green"}')
.slim_shirt_pink.option(@click='set({"preferences.shirt":"pink"})', :class='{active: user.preferences.shirt === "pink"}')
.slim_shirt_white.option(@click='set({"preferences.shirt":"white"})', :class='{active: user.preferences.shirt === "white"}')
.slim_shirt_yellow.option(@click='set({"preferences.shirt":"yellow"})', :class='{active: user.preferences.shirt === "yellow"}')
.section.customize-section(v-if='activeTopPage === "skin"')
.row.sub-menu
.col-6.offset-3.text-center.sub-menu-item(:class='{active: activeSubPage === "color"}')
strong(v-once) {{$t('color')}}
.row
.col-12.customize-options
.skin_ddc994.option(@click='set({"preferences.skin":"ddc994"})', :class='{active: user.preferences.skin === "ddc994"}')
.skin_f5a76e.option(@click='set({"preferences.skin":"f5a76e"})', :class='{active: user.preferences.skin === "f5a76e"}')
.skin_ea8349.option(@click='set({"preferences.skin":"ea8349"})', :class='{active: user.preferences.skin === "ea8349"}')
.skin_c06534.option(@click='set({"preferences.skin":"c06534"})', :class='{active: user.preferences.skin === "c06534"}')
.skin_98461a.option(@click='set({"preferences.skin":"98461a"})', :class='{active: user.preferences.skin === "98461a"}')
.skin_915533.option(@click='set({"preferences.skin":"915533"})', :class='{active: user.preferences.skin === "915533"}')
.skin_c3e1dc.option(@click='set({"preferences.skin":"c3e1dc"})', :class='{active: user.preferences.skin === "c3e1dc"}')
.skin_6bd049.option(@click='set({"preferences.skin":"6bd049"})', :class='{active: user.preferences.skin === "6bd049"}')
.section.customize-section(v-if='activeTopPage === "hair"')
.row.sub-menu
.col-2.offset-3.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color"}')
strong(v-once) {{$t('color')}}
.col-2.text-center.sub-menu-item(@click='changeSubPage("bangs")', :class='{active: activeSubPage === "bangs"}')
strong(v-once) {{$t('bangs')}}
.col-2.text-center.sub-menu-item(@click='changeSubPage("ponytail")', :class='{active: activeSubPage === "ponytail"}')
strong(v-once) {{$t('ponytail')}}
.row(v-if='activeSubPage === "color"')
.col-12.customize-options
.hair_bangs_1_white.option(@click='set({"preferences.hair.color": "white"})', :class='{active: user.preferences.hair.color === "white"}')
.hair_bangs_1_brown.option(@click='set({"preferences.hair.color": "brown"})', :class='{active: user.preferences.hair.color === "brown"}')
.hair_bangs_1_blond.option(@click='set({"preferences.hair.color": "blond"})', :class='{active: user.preferences.hair.color === "blond"}')
.hair_bangs_1_red.option(@click='set({"preferences.hair.color": "red"})', :class='{active: user.preferences.hair.color === "red"}')
.hair_bangs_1_black.option(@click='set({"preferences.hair.color": "black"})', :class='{active: user.preferences.hair.color === "black"}')
.row(v-if='activeSubPage === "bangs"')
.col-12.customize-options
.head_0.option(@click='set({"preferences.hair.bangs": 0})', :class="[{ active: user.preferences.hair.bangs === 0 }, 'hair_bangs_0_' + user.preferences.hair.color]")
.option(@click='set({"preferences.hair.bangs": 1})', :class="[{ active: user.preferences.hair.bangs === 1 }, 'hair_bangs_1_' + user.preferences.hair.color]")
.option(@click='set({"preferences.hair.bangs": 2})',:class="[{ active: user.preferences.hair.bangs === 2 }, 'hair_bangs_2_' + user.preferences.hair.color]")
.option(@click='set({"preferences.hair.bangs": 3})', :class="[{ active: user.preferences.hair.bangs === 3 }, 'hair_bangs_3_' + user.preferences.hair.color]")
.option(@click='set({"preferences.hair.bangs": 4})', :class="[{ active: user.preferences.hair.bangs === 4 }, 'hair_bangs_4_' + user.preferences.hair.color]")
.row(v-if='activeSubPage === "ponytail"')
.col-12.customize-options
.head_0.option(@click='set({"preferences.hair.base": 0})', :class="[{ active: user.preferences.hair.base === 0 }, 'hair_base_0_' + user.preferences.hair.color]")
.hair_base_1_blond.option(@click='set({"preferences.hair.base": 1})', :class="[{ active: user.preferences.hair.base === 1 }, 'hair_base_1_' + user.preferences.hair.color]")
.hair_base_3_blond.option(@click='set({"preferences.hair.base": 3})', :class="[{ active: user.preferences.hair.base === 3 }, 'hair_base_3_' + user.preferences.hair.color]")
.section.container.customize-section(v-if='activeTopPage === "extra"')
.row.sub-menu
.col-4.text-center.sub-menu-item(@click='changeSubPage("glasses")', :class='{active: activeSubPage === "glasses"}')
strong(v-once) {{$t('glasses')}}
.col-4.text-center.sub-menu-item(@click='changeSubPage("wheelchair")', :class='{active: activeSubPage === "wheelchair"}')
strong(v-once) {{$t('wheelchair')}}
.col-4.text-center.sub-menu-item(@click='changeSubPage("flower")', :class='{active: activeSubPage === "flower"}')
strong(v-once) {{$t('flower')}}
.row(v-if='activeSubPage === "glasses"')
.col-12.customize-options
.eyewear_special_blackTopFrame.option(@click='equip("eyewear_special_blackTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_blackTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_blackTopFrame"}')
.eyewear_special_blueTopFrame.option(@click='equip("eyewear_special_blueTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_blueTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_blueTopFrame"}')
.eyewear_special_greenTopFrame.option(@click='equip("eyewear_special_greenTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_greenTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_greenTopFrame"}')
.eyewear_special_pinkTopFrame.option(@click='equip("eyewear_special_pinkTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_pinkTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_pinkTopFrame"}')
.eyewear_special_redTopFrame.option(@click='equip("eyewear_special_redTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_redTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_redTopFrame"}')
.eyewear_special_whiteTopFrame.option(@click='equip("eyewear_special_whiteTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_whiteTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_whiteTopFrame"}')
.eyewear_special_yellowTopFrame.option(@click='equip("eyewear_special_yellowTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_yellowTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_yellowTopFrame"}')
.row(v-if='activeSubPage === "wheelchair"')
.col-12.customize-options.weelchairs
.option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}')
| None
.option(@click='set({"preferences.chair": "black"})', :class='{active: user.preferences.chair === "black"}')
.button_chair_black
.option(@click='set({"preferences.chair": "blue"})', :class='{active: user.preferences.chair === "blue"}')
.button_chair_blue
.option(@click='set({"preferences.chair": "green"})', :class='{active: user.preferences.chair === "green"}')
.button_chair_green
.option(@click='set({"preferences.chair": "pink"})', :class='{active: user.preferences.chair === "pink"}')
.button_chair_pink
.option(@click='set({"preferences.chair": "red"})', :class='{active: user.preferences.chair === "red"}')
.button_chair_red
.option(@click='set({"preferences.chair": "yellow"})', :class='{active: user.preferences.chair === "yellow"}')
.button_chair_yellow
.row(v-if='activeSubPage === "flower"')
.col-12.customize-options
.head_0.option(@click='set({"preferences.hair.flower":0})', :class='{active: user.preferences.hair.flower === 0}')
.hair_flower_1.option(@click='set({"preferences.hair.flower":1})', :class='{active: user.preferences.hair.flower === 1}')
.hair_flower_2.option(@click='set({"preferences.hair.flower":2})', :class='{active: user.preferences.hair.flower === 2}')
.hair_flower_3.option(@click='set({"preferences.hair.flower":3})', :class='{active: user.preferences.hair.flower === 3}')
.hair_flower_4.option(@click='set({"preferences.hair.flower":4})', :class='{active: user.preferences.hair.flower === 4}')
.hair_flower_5.option(@click='set({"preferences.hair.flower":5})', :class='{active: user.preferences.hair.flower === 5}')
.hair_flower_6.option(@click='set({"preferences.hair.flower":6})', :class='{active: user.preferences.hair.flower === 6}')
.container.interests-section(v-if='modalPage == 3')
.section.row
.col-12.text-center
h2 I want to work on:
.section.row
.col-4.offset-2
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('work') }}
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('excercise') }}
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('health') }}
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('school') }}
.col-4
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('chores') }}
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('creativity') }}
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('budgeting') }}
.section.row.justin-message-section(:class='{top: modalPage > 1}')
.col-9
.justin-message(v-if='modalPage == 1')
p(v-once) {{$t('justinIntroMessage1')}}
p(v-once) {{$t('justinIntroMessage2')}}
.justin-message(v-if='modalPage > 1')
p(v-once) {{$t('justinIntroMessage3')}}
.section.container.footer
.section.customize-section(v-if='activeTopPage === "skin"')
.row.sub-menu
.col-6.offset-3.text-center.sub-menu-item(:class='{active: activeSubPage === "color"}')
strong(v-once) {{$t('color')}}
.row
.col-3.offset-1.text-center
div(v-if='modalPage > 1', @click='prev()')
.prev-arrow
.prev(v-once) {{$t('prev')}}
.col-4.text-center.circles
.circle(:class="{active: modalPage === 1}")
.circle(:class="{active: modalPage === 2}")
.circle(:class="{active: modalPage === 3}")
.col-3.text-center
div(v-if='modalPage < 3', @click='next()')
.next(v-once) {{$t('next')}}
.next-arrow
.col-12.customize-options
.skin_ddc994.option(@click='set({"preferences.skin":"ddc994"})', :class='{active: user.preferences.skin === "ddc994"}')
.skin_f5a76e.option(@click='set({"preferences.skin":"f5a76e"})', :class='{active: user.preferences.skin === "f5a76e"}')
.skin_ea8349.option(@click='set({"preferences.skin":"ea8349"})', :class='{active: user.preferences.skin === "ea8349"}')
.skin_c06534.option(@click='set({"preferences.skin":"c06534"})', :class='{active: user.preferences.skin === "c06534"}')
.skin_98461a.option(@click='set({"preferences.skin":"98461a"})', :class='{active: user.preferences.skin === "98461a"}')
.skin_915533.option(@click='set({"preferences.skin":"915533"})', :class='{active: user.preferences.skin === "915533"}')
.skin_c3e1dc.option(@click='set({"preferences.skin":"c3e1dc"})', :class='{active: user.preferences.skin === "c3e1dc"}')
.skin_6bd049.option(@click='set({"preferences.skin":"6bd049"})', :class='{active: user.preferences.skin === "6bd049"}')
.section.customize-section(v-if='activeTopPage === "hair"')
.row.sub-menu
.col-2.offset-3.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color"}')
strong(v-once) {{$t('color')}}
.col-2.text-center.sub-menu-item(@click='changeSubPage("bangs")', :class='{active: activeSubPage === "bangs"}')
strong(v-once) {{$t('bangs')}}
.col-2.text-center.sub-menu-item(@click='changeSubPage("ponytail")', :class='{active: activeSubPage === "ponytail"}')
strong(v-once) {{$t('ponytail')}}
.row(v-if='activeSubPage === "color"')
.col-12.customize-options
.hair_bangs_1_white.option(@click='set({"preferences.hair.color": "white"})', :class='{active: user.preferences.hair.color === "white"}')
.hair_bangs_1_brown.option(@click='set({"preferences.hair.color": "brown"})', :class='{active: user.preferences.hair.color === "brown"}')
.hair_bangs_1_blond.option(@click='set({"preferences.hair.color": "blond"})', :class='{active: user.preferences.hair.color === "blond"}')
.hair_bangs_1_red.option(@click='set({"preferences.hair.color": "red"})', :class='{active: user.preferences.hair.color === "red"}')
.hair_bangs_1_black.option(@click='set({"preferences.hair.color": "black"})', :class='{active: user.preferences.hair.color === "black"}')
.row(v-if='activeSubPage === "bangs"')
.col-12.customize-options
.head_0.option(@click='set({"preferences.hair.bangs": 0})', :class="[{ active: user.preferences.hair.bangs === 0 }, 'hair_bangs_0_' + user.preferences.hair.color]")
.option(@click='set({"preferences.hair.bangs": 1})', :class="[{ active: user.preferences.hair.bangs === 1 }, 'hair_bangs_1_' + user.preferences.hair.color]")
.option(@click='set({"preferences.hair.bangs": 2})',:class="[{ active: user.preferences.hair.bangs === 2 }, 'hair_bangs_2_' + user.preferences.hair.color]")
.option(@click='set({"preferences.hair.bangs": 3})', :class="[{ active: user.preferences.hair.bangs === 3 }, 'hair_bangs_3_' + user.preferences.hair.color]")
.option(@click='set({"preferences.hair.bangs": 4})', :class="[{ active: user.preferences.hair.bangs === 4 }, 'hair_bangs_4_' + user.preferences.hair.color]")
.row(v-if='activeSubPage === "ponytail"')
.col-12.customize-options
.head_0.option(@click='set({"preferences.hair.base": 0})', :class="[{ active: user.preferences.hair.base === 0 }, 'hair_base_0_' + user.preferences.hair.color]")
.hair_base_1_blond.option(@click='set({"preferences.hair.base": 1})', :class="[{ active: user.preferences.hair.base === 1 }, 'hair_base_1_' + user.preferences.hair.color]")
.hair_base_3_blond.option(@click='set({"preferences.hair.base": 3})', :class="[{ active: user.preferences.hair.base === 3 }, 'hair_base_3_' + user.preferences.hair.color]")
.section.container.customize-section(v-if='activeTopPage === "extra"')
.row.sub-menu
.col-4.text-center.sub-menu-item(@click='changeSubPage("glasses")', :class='{active: activeSubPage === "glasses"}')
strong(v-once) {{$t('glasses')}}
.col-4.text-center.sub-menu-item(@click='changeSubPage("wheelchair")', :class='{active: activeSubPage === "wheelchair"}')
strong(v-once) {{$t('wheelchair')}}
.col-4.text-center.sub-menu-item(@click='changeSubPage("flower")', :class='{active: activeSubPage === "flower"}')
strong(v-once) {{$t('flower')}}
.row(v-if='activeSubPage === "glasses"')
.col-12.customize-options
.eyewear_special_blackTopFrame.option(@click='equip("eyewear_special_blackTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_blackTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_blackTopFrame"}')
.eyewear_special_blueTopFrame.option(@click='equip("eyewear_special_blueTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_blueTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_blueTopFrame"}')
.eyewear_special_greenTopFrame.option(@click='equip("eyewear_special_greenTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_greenTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_greenTopFrame"}')
.eyewear_special_pinkTopFrame.option(@click='equip("eyewear_special_pinkTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_pinkTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_pinkTopFrame"}')
.eyewear_special_redTopFrame.option(@click='equip("eyewear_special_redTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_redTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_redTopFrame"}')
.eyewear_special_whiteTopFrame.option(@click='equip("eyewear_special_whiteTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_whiteTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_whiteTopFrame"}')
.eyewear_special_yellowTopFrame.option(@click='equip("eyewear_special_yellowTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_yellowTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_yellowTopFrame"}')
.row(v-if='activeSubPage === "wheelchair"')
.col-12.customize-options.weelchairs
.option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}')
| None
.option(@click='set({"preferences.chair": "black"})', :class='{active: user.preferences.chair === "black"}')
.button_chair_black
.option(@click='set({"preferences.chair": "blue"})', :class='{active: user.preferences.chair === "blue"}')
.button_chair_blue
.option(@click='set({"preferences.chair": "green"})', :class='{active: user.preferences.chair === "green"}')
.button_chair_green
.option(@click='set({"preferences.chair": "pink"})', :class='{active: user.preferences.chair === "pink"}')
.button_chair_pink
.option(@click='set({"preferences.chair": "red"})', :class='{active: user.preferences.chair === "red"}')
.button_chair_red
.option(@click='set({"preferences.chair": "yellow"})', :class='{active: user.preferences.chair === "yellow"}')
.button_chair_yellow
.row(v-if='activeSubPage === "flower"')
.col-12.customize-options
.head_0.option(@click='set({"preferences.hair.flower":0})', :class='{active: user.preferences.hair.flower === 0}')
.hair_flower_1.option(@click='set({"preferences.hair.flower":1})', :class='{active: user.preferences.hair.flower === 1}')
.hair_flower_2.option(@click='set({"preferences.hair.flower":2})', :class='{active: user.preferences.hair.flower === 2}')
.hair_flower_3.option(@click='set({"preferences.hair.flower":3})', :class='{active: user.preferences.hair.flower === 3}')
.hair_flower_4.option(@click='set({"preferences.hair.flower":4})', :class='{active: user.preferences.hair.flower === 4}')
.hair_flower_5.option(@click='set({"preferences.hair.flower":5})', :class='{active: user.preferences.hair.flower === 5}')
.hair_flower_6.option(@click='set({"preferences.hair.flower":6})', :class='{active: user.preferences.hair.flower === 6}')
.container.interests-section(v-if='modalPage == 3')
.section.row
.col-12.text-center
h2 I want to work on:
.section.row
.col-4.offset-2
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('work') }}
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('excercise') }}
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('health') }}
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('school') }}
.col-4
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('chores') }}
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('creativity') }}
div
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('budgeting') }}
.section.row.justin-message-section(:class='{top: modalPage > 1}')
.col-9
.justin-message(v-if='modalPage == 1')
p(v-once) {{$t('justinIntroMessage1')}}
p(v-once) {{$t('justinIntroMessage2')}}
.justin-message(v-if='modalPage > 1')
p(v-once) {{$t('justinIntroMessage3')}}
.section.container.footer
.row
.col-3.offset-1.text-center
div(v-if='modalPage > 1', @click='prev()')
.prev-arrow
.prev(v-once) {{$t('prev')}}
.col-4.text-center.circles
.circle(:class="{active: modalPage === 1}")
.circle(:class="{active: modalPage === 2}")
.circle(:class="{active: modalPage === 3}")
.col-3.text-center
div(v-if='modalPage < 3', @click='next()')
.next(v-once) {{$t('next')}}
.next-arrow
div(v-if='modalPage === 3', @click='done()')
button.btn.btn-primary.next(v-once) {{$t('done')}}
</template>
<style lang="scss" scoped>
@@ -399,6 +400,8 @@
import { mapState } from 'client/libs/store';
import avatar from './avatar';
import bModal from 'bootstrap-vue/lib/components/modal';
import logoPurple from 'assets/svg/logo-purple.svg';
import bodyIcon from 'assets/svg/body.svg';
import accessoriesIcon from 'assets/svg/accessories.svg';
@@ -408,6 +411,10 @@ import hairIcon from 'assets/svg/hair.svg';
export default {
components: {
avatar,
bModal,
},
mounted () {
this.$root.$emit('show::modal', 'avatar-modal');
},
data () {
return {
@@ -446,6 +453,10 @@ export default {
equip (key) {
this.$store.dispatch('common:equip', {key, type: 'costume'});
},
done () {
this.$root.$emit('hide::modal', 'avatar-modal');
this.$router.push('/');
},
},
};
</script>

35
website/client/components/groups/createPartyModal.vue
View File

@@ -11,7 +11,7 @@ b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
img
h3(v-once) {{$t('startYourOwnPartyTitle')}}
p(v-once) {{$t('startYourOwnPartyDescription')}}
button.btn.btn-primary(v-once) {{$t('createParty')}}
button.btn.btn-primary(v-once, @click='createParty()') {{$t('createParty')}}
.col-6
div.text-center
img
@@ -39,6 +39,14 @@ b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
<style lang='scss'>
@import '~client/assets/scss/colors.scss';
.header-wrap {
color: #4e4a57;
h2 {
color: #4f2a93;
}
}
.modal-body {
padding-bottom: 0;
padding-top: 0;
@@ -46,6 +54,7 @@ b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
.grey-row {
background-color: $gray-700;
color: #4e4a57;
padding: 2em;
border-radius: 0px 0px 2px 2px;
}
@@ -81,6 +90,8 @@ b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
</style>
<script>
import { mapState } from 'client/libs/store';
import bModal from 'bootstrap-vue/lib/components/modal';
import copyIcon from 'assets/svg/copy.svg';
@@ -105,16 +116,20 @@ export default {
shareUserIdShown: false,
};
},
computed: {
...mapState({user: 'user.data'}),
},
methods: {
createParty () {
// group.loadingParty = true;
//
// if (!group.name) group.name = env.t('possessiveParty', {name: User.user.profile.name});
// Groups.Group.create(group)
// .then(function(response) {
// Analytics.updateUser({'partyID': $scope.group ._id, 'partySize': 1});
// $rootScope.hardRedirect('/#/options/groups/party');
// });
async createParty () {
let group = {
type: 'party',
};
group.name = this.$t('possessiveParty', {name: this.user.profile.name});
let party = await this.$store.dispatch('guilds:create', {group});
this.$store.state.party = party;
this.user.party._id = party._id;
this.$root.$emit('hide::modal', 'create-party-modal');
// @TODO: Analytics.updateUser({'partyID': $scope.group ._id, 'partySize': 1});
},
},
};

51
website/client/components/groups/discovery.vue
View File

@@ -3,27 +3,40 @@
sidebar(@search="updateSearch", @filter="updateFilters")
.standard-page
.clearfix
.header.row
.col-8
h1.page-header.float-left(v-once) {{ $t('publicGuilds') }}
.float-right
.col-4
// @TODO: Add when we implement recent activity .float-right
span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
.col-md-12
public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-leave='true')
mugen-scroll(
:handler="fetchGuilds",
:should-handle="!loading && !this.hasLoadedAllGuilds",
:handle-on-mount="false",
v-show="loading",
)
span(v-once) {{ $t('loading') }}
button.btn.btn-secondary.create-group-button.float-right(@click='createGroup()')
.svg-icon.positive-icon(v-html="icons.positiveIcon")
span(v-once) {{$t('create')}}
.row
.col-md-12
public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-leave='true')
mugen-scroll(
:handler="fetchGuilds",
:should-handle="!loading && !this.hasLoadedAllGuilds",
:handle-on-mount="false",
v-show="loading",
)
span(v-once) {{ $t('loading') }}
</template>
<style>
.sort-select {
margin: 2em;
}
<style scoped>
.sort-select {
margin: 2em;
}
.positive-icon {
color: $green-10;
width: 10px;
display: inline-block;
margin-right: .5em;
}
</style>
<script>
@@ -36,11 +49,16 @@ import bFormSelect from 'bootstrap-vue/lib/components/form-select';
import bDropdown from 'bootstrap-vue/lib/components/dropdown';
import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
import positiveIcon from 'assets/svg/positive.svg';
export default {
mixins: [groupUtilities],
components: { PublicGuildItem, MugenScroll, Sidebar, bFormSelect, bDropdown, bDropdownItem },
data () {
return {
icons: Object.freeze({
positiveIcon,
}),
loading: false,
hasLoadedAllGuilds: false,
lastPageLoaded: 0,
@@ -99,6 +117,9 @@ export default {
this.lastPageLoaded++;
this.loading = false;
},
createGroup () {
this.$root.$emit('show::modal', 'guild-form');
},
},
};
</script>

104
website/client/components/groups/groupFormModal.vue
View File

@@ -4,12 +4,12 @@
.form-group
label
strong(v-once) {{$t('name')}}*
b-form-input(type="text", :placeholder="$t('newGuildPlaceHolder')", v-model="newGuild.name")
b-form-input(type="text", :placeholder="$t('newGuildPlaceHolder')", v-model="workingGuild.name")
.form-group(v-if='newGuild.id && members.length > 0')
.form-group(v-if='workingGuild.id && members.length > 0')
label
strong(v-once) {{$t('guildLeader')}}*
select.form-control(v-model="newGuild.newLeader")
select.form-control(v-model="workingGuild.newLeader")
option(v-for='member in members', :value="member._id") {{ member.profile.name }}
.form-group
@@ -17,29 +17,29 @@
strong(v-once) {{$t('privacySettings')}}*
br
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="newGuild.onlyLeaderCreatesChallenges")
input.custom-control-input(type="checkbox", v-model="workingGuild.onlyLeaderCreatesChallenges")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('onlyLeaderCreatesChallenges') }}
b-tooltip.icon(:content="$t('privateDescription')")
.svg-icon(v-html='icons.information')
br
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="newGuild.guildLeaderCantBeMessaged")
// br
// @TODO Implement in V2 label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="workingGuild.guildLeaderCantBeMessaged")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('guildLeaderCantBeMessaged') }}
br
label.custom-control.custom-checkbox(v-if='!creatingParty')
input.custom-control-input(type="checkbox", v-model="newGuild.privateGuild")
input.custom-control-input(type="checkbox", v-model="workingGuild.privateGuild")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('privateGuild') }}
b-tooltip.icon(:content="$t('privateDescription')")
.svg-icon(v-html='icons.information')
br
label.custom-control.custom-checkbox(v-if='!creatingParty')
input.custom-control-input(type="checkbox", v-model="newGuild.allowGuildInvationsFromNonMembers")
// br
// @TODO: Implement in v2 label.custom-control.custom-checkbox(v-if='!creatingParty')
input.custom-control-input(type="checkbox", v-model="workingGuild.allowGuildInvationsFromNonMembers")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('allowGuildInvationsFromNonMembers') }}
@@ -47,14 +47,14 @@
label
strong(v-once) {{$t('description')}}*
div.description-count {{charactersRemaining}} {{ $t('charactersRemaining') }}
b-form-input(type="text", textarea :placeholder="creatingParty ? $t('partyDescriptionPlaceHolder') : $t('guildDescriptionPlaceHolder')", v-model="newGuild.description")
b-form-input(type="text", textarea :placeholder="creatingParty ? $t('partyDescriptionPlaceHolder') : $t('guildDescriptionPlaceHolder')", v-model="workingGuild.description")
.form-group(v-if='newGuild.id && !creatingParty')
.form-group(v-if='workingGuild.id && !creatingParty')
label
strong(v-once) {{$t('guildInformation')}}*
b-form-input(type="text", textarea, :placeholder="$t('guildInformationPlaceHolder')", v-model="newGuild.guildInformation")
b-form-input(type="text", textarea, :placeholder="$t('guildInformationPlaceHolder')", v-model="workingGuild.guildInformation")
.form-group(v-if='creatingParty && !newGuild.id')
.form-group(v-if='creatingParty && !workingGuild.id')
span
toggleSwitch(:label="$t('inviteMembersNow')", v-model='inviteMembers')
@@ -62,20 +62,20 @@
label
strong(v-once) {{$t('categories')}}*
div.category-wrap(@click.prevent="toggleCategorySelect")
span.category-select(v-if='newGuild.categories.length === 0') {{$t('none')}}
.category-label(v-for='category in newGuild.categories') {{$t(categoriesHashByKey[category])}}
span.category-select(v-if='workingGuild.categories.length === 0') {{$t('none')}}
.category-label(v-for='category in workingGuild.categories') {{$t(categoriesHashByKey[category])}}
.category-box(v-if="showCategorySelect")
.form-check(
v-for="group in categoryOptions",
:key="group.key",
)
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value='group.key' v-model="newGuild.categories")
input.custom-control-input(type="checkbox", :value='group.key' v-model="workingGuild.categories")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t(group.label) }}
button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
.form-group(v-if='inviteMembers && !newGuild.id')
.form-group(v-if='inviteMembers && !workingGuild.id')
label
strong(v-once) Invite via Email or User ID
p Invite users via a valid email or 36-digit User ID. If an email isn’t registered yet, we’ll invite them to join.
@@ -92,8 +92,8 @@
div.item-with-icon(v-if='!creatingParty')
.svg-icon(v-html="icons.gem")
span.count 4
button.btn.btn-primary.btn-md(v-if='!newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ creatingParty ? $t('createParty') : $t('createGuild') }}
button.btn.btn-primary.btn-md(v-if='newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ creatingParty ? $t('updateParty') : $t('updateGuild') }}
button.btn.btn-primary.btn-md(v-if='!workingGuild.id', :disabled='!workingGuild.name || !workingGuild.description') {{ creatingParty ? $t('createParty') : $t('createGuild') }}
button.btn.btn-primary.btn-md(v-if='workingGuild.id', :disabled='!workingGuild.name || !workingGuild.description') {{ creatingParty ? $t('updateParty') : $t('updateGuild') }}
.gem-description(v-once, v-if='!creatingParty') {{ $t('guildGemCostInfo') }}
</template>
@@ -157,6 +157,12 @@ import toggleSwitch from 'client/components/ui/toggleSwitch';
import gemIcon from 'assets/svg/gem.svg';
import informationIcon from 'assets/svg/information.svg';
// @TODO: Not sure the best way to pass party creating status
// Since we need the modal in the header, passing props doesn't work
// because we can't import the create group in the index of groups
// I think state is the correct spot, but maybe we should separate into
// two modals?
export default {
components: {
bModal,
@@ -169,7 +175,7 @@ export default {
},
data () {
let data = {
newGuild: {
workingGuild: {
id: '',
name: '',
type: 'guild',
@@ -231,7 +237,6 @@ export default {
],
showCategorySelect: false,
members: [],
creatingParty: true,
inviteMembers: false,
newMemberToInvite: {
value: '',
@@ -254,33 +259,37 @@ export default {
return data;
},
mounted () {
// @TODO: do we need this? Maybe us computed. If we need, then make it on show a specific modal
this.$root.$on('shown::modal', () => {
let editingGroup = this.$store.state.editingGroup;
if (!editingGroup) return;
this.newGuild.name = editingGroup.name;
this.newGuild.type = editingGroup.type;
this.newGuild.privacy = editingGroup.privacy;
if (editingGroup.description) this.newGuild.description = editingGroup.description;
this.newGuild.id = editingGroup._id;
this.newGuild.newLeader = editingGroup.leader._id;
this.getMembers();
if (!editingGroup._id) return;
this.workingGuild.name = editingGroup.name;
this.workingGuild.type = editingGroup.type;
this.workingGuild.privacy = editingGroup.privacy;
if (editingGroup.description) this.workingGuild.description = editingGroup.description;
if (editingGroup._id) this.workingGuild.id = editingGroup._id;
if (editingGroup.leader._id) this.workingGuild.newLeader = editingGroup.leader._id;
if (editingGroup._id) this.getMembers();
});
},
computed: {
charactersRemaining () {
return 500 - this.newGuild.description.length;
return 500 - this.workingGuild.description.length;
},
title () {
if (this.creatingParty) return this.$t('createParty');
if (!this.newGuild.id) return this.$t('createGuild');
if (!this.workingGuild.id) return this.$t('createGuild');
return this.$t('updateGuild');
},
creatingParty () {
return this.$store.state.groupFormOptions.createParty;
},
},
methods: {
async getMembers () {
if (!this.newGuild.id) return;
if (!this.workingGuild.id) return;
let members = await this.$store.dispatch('members:getGroupMembers', {
groupId: this.newGuild.id,
groupId: this.workingGuild.id,
includeAllPublicFields: true,
});
this.members = members;
@@ -300,49 +309,50 @@ export default {
this.showCategorySelect = !this.showCategorySelect;
},
async submit () {
if (this.$store.state.user.data.balance < 1 && !this.newGuild.id) {
if (this.$store.state.user.data.balance < 1 && !this.workingGuild.id) {
// @TODO: Add proper notifications
alert('Not enough gems');
return;
// @TODO return $rootScope.openModal('buyGems', {track:"Gems > Create Group"});
}
if (!this.newGuild.name || !this.newGuild.description) {
if (!this.workingGuild.name || !this.workingGuild.description) {
// @TODO: Add proper notifications
alert('Enter a name and description');
return;
}
if (this.newGuild.description.length > 500) {
if (this.workingGuild.description.length > 500) {
// @TODO: Add proper notifications
alert('Description is too long');
return;
}
// @TODO: Add proper notifications
if (!this.newGuild.id && !confirm(this.$t('confirmGuild'))) return;
if (!this.workingGuild.id && !confirm(this.$t('confirmGuild'))) return;
if (!this.newGuild.privateGuild) {
this.newGuild.privacy = 'public';
if (!this.workingGuild.privateGuild) {
this.workingGuild.privacy = 'public';
}
if (!this.newGuild.onlyLeaderCreatesChallenges) {
this.newGuild.leaderOnly = {
if (!this.workingGuild.onlyLeaderCreatesChallenges) {
this.workingGuild.leaderOnly = {
challenges: true,
};
}
if (this.newGuild.id) {
await this.$store.dispatch('guilds:update', {group: this.newGuild});
if (this.workingGuild.id) {
await this.$store.dispatch('guilds:update', {group: this.workingGuild});
// @TODO: this doesn't work because of the async resource
// if (updatedGroup.type === 'party') this.$store.state.party = {data: updatedGroup};
} else {
await this.$store.dispatch('guilds:create', {group: this.newGuild});
await this.$store.dispatch('guilds:create', {group: this.workingGuild});
this.$store.state.user.balance -= 1;
}
this.$store.state.editingGroup = {};
this.newGuild = {
this.workingGuild = {
name: '',
type: 'guild',
privacy: 'private',

6
website/client/components/groups/groupPlan.vue
View File

@@ -83,6 +83,7 @@ div
<style lang="scss" scoped>
.header {
margin-bottom: 3em;
margin-top: 4em;
background-color: #4f2a93;
color: #fff;
padding: 2em;
@@ -189,6 +190,11 @@ export default {
},
mounted () {
this.activePage = this.PAGES.BENEFITS;
this.$store.state.hideHeader = true;
},
destroyed () {
// @TODO: going from the page back to party modal does not show
this.$store.state.hideHeader = false;
},
computed: {
newGroupIsReady () {

60
website/client/components/groups/guild.vue
View File

@@ -31,10 +31,10 @@
chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
.col-md-4.sidebar
.col-4.sidebar
.guild-background.row
.col-6
p(v-if='!isParty') Image here
p(v-if='!isParty')
.col-6
.button-container
button.btn.btn-success(class='btn-success', v-if='isLeader') {{ $t('upgrade') }}
@@ -142,7 +142,7 @@
.section(v-if="sections.challenges")
group-challenges(:groupId='searchId')
div.text-center
button.btn.btn-primary(class='btn-danger', v-if='isMember') {{ $t('leave') }}
button.btn.btn-primary(class='btn-danger', v-if='isMember', @click='clickLeave()') {{ $t('leave') }}
</template>
<style lang="scss" scoped>
@@ -170,6 +170,7 @@
.svg-icon.shield, .svg-icon.gem {
width: 40px;
margin: 0 auto;
display: inline-block;
}
.number {
@@ -184,7 +185,6 @@
.sidebar {
background-color: $gray-600;
padding-top: 2em;
padding-bottom: 2em;
}
@@ -204,7 +204,8 @@
}
.guild-background {
background-image: linear-gradient(to bottom, rgba($gray-600, 0), $gray-600);
background-image: url('~assets/images/groups/grassy-meadow-backdrop.png');
height: 246px;
}
textarea {
@@ -430,6 +431,9 @@ export default {
},
computed: {
...mapState({user: 'user.data'}),
partyStore () {
return this.$store.state.party;
},
isParty () {
return this.$route.path.startsWith('/party');
},
@@ -490,7 +494,7 @@ export default {
return quests.quests[this.group.quest.key];
},
},
created () {
mounted () {
this.searchId = this.groupId;
if (this.isParty) {
this.searchId = 'party';
@@ -506,6 +510,14 @@ export default {
watch: {
// call again the method if the route changes (when this route is already active)
$route: 'fetchGuild',
partyStore () {
if (this.$store.state.party._id) {
this.group = this.$store.state.party;
} else {
this.group = null;
this.$router.push('/');
}
},
},
methods: {
showMemberModal () {
@@ -527,6 +539,11 @@ export default {
this.$root.$emit('show::modal', 'invite-modal');
},
async fetchGuild () {
if (this.searchId === 'party' && !this.user.party._id) {
this.$root.$emit('show::modal', 'create-party-modal');
return;
}
let group = await this.$store.dispatch('guilds:getGroup', {groupId: this.searchId});
if (this.isParty) {
this.$store.party = group;
@@ -544,28 +561,6 @@ export default {
openStartQuestModal () {
this.$root.$emit('show::modal', 'start-quest-modal');
},
// inviteOrStartParty (group) {
// Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Invite Friends'});
// var sendInviteText = window.env.t('sendInvitations');
// if (group.type !== 'party' && group.type !== 'guild') {
// $location.path("/options/groups/party");
// return console.log('Invalid group type.')
// }
//
// if (group.purchased && group.purchased.plan && group.purchased.plan.customerId) sendInviteText += window.env.t('groupAdditionalUserCost');
//
// group.sendInviteText = sendInviteText;
//
// $rootScope.openModal('invite-' + group.type, {
// controller:'InviteToGroupCtrl',
// resolve: {
// injectedGroup: function() {
// return group;
// },
// },
// });
// },
checkForAchievements () {
// Checks if user's party has reached 2 players for the first time.
if (!this.user.achievements.partyUp && this.group.memberCount >= 2) {
@@ -602,11 +597,16 @@ export default {
},
async leave (keepTasks) {
let keepChallenges = 'remain-in-challenges';
await this.$store.dispatch('guilds:leave', {
let data = {
groupId: this.group._id,
keep: keepTasks,
keepChallenges,
});
};
if (this.isParty) data.type = 'party';
await this.$store.dispatch('guilds:leave', data);
// @TODO: Implement
// Analytics.updateUser({'partySize':null,'partyID':null});

20
website/client/components/groups/membersModal.vue
View File

@@ -120,8 +120,10 @@ export default {
bDropdownItem,
MemberDetails,
},
created () {
this.getMembers();
mounted () {
this.$root.$on('shown::modal', () => {
this.getMembers();
});
},
data () {
return {
@@ -156,11 +158,15 @@ export default {
},
methods: {
async getMembers () {
let members = await this.$store.dispatch('members:getGroupMembers', {
groupId: this.group._id,
includeAllPublicFields: true,
});
this.members = members;
if (this.group._id) {
let members = await this.$store.dispatch('members:getGroupMembers', {
groupId: this.group._id,
includeAllPublicFields: true,
});
this.members = members;
}
if (this.$store.state.viewingMembers) this.members = this.$store.state.viewingMembers;
},
async clickMember (uid, forceShow) {
let user = this.$store.state.user.data;

20
website/client/components/groups/myGuilds.vue
View File

@@ -12,9 +12,13 @@
.standard-page(v-if='filteredGuilds.length > 0')
.row
.col-md-12
.col-md-8
h1.page-header.float-left(v-once) {{ $t('myGuilds') }}
.float-right
.col-4
button.btn.btn-secondary.create-group-button.float-right(@click='createGroup()')
.svg-icon.positive-icon(v-html="icons.positiveIcon")
span(v-once) {{$t('create')}}
// @TODO: Add when we implement recent activity .float-right
span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
@@ -29,6 +33,13 @@
margin: 2em;
}
.positive-icon {
color: $green-10;
width: 10px;
display: inline-block;
margin-right: .5em;
}
.no-guilds {
text-align: center;
color: $gray-200;
@@ -64,6 +75,7 @@ import PublicGuildItem from './publicGuildItem';
import Sidebar from './sidebar';
import greyBadgeIcon from 'assets/svg/grey-badge.svg';
import positiveIcon from 'assets/svg/positive.svg';
export default {
mixins: [groupUtilities],
@@ -72,6 +84,7 @@ export default {
return {
icons: Object.freeze({
greyBadge: greyBadgeIcon,
positiveIcon,
}),
loading: false,
search: '',
@@ -122,6 +135,9 @@ export default {
await this.$store.dispatch('guilds:getMyGuilds');
this.loading = false;
},
createGroup () {
this.$root.$emit('show::modal', 'guild-form');
},
},
};
</script>

11
website/client/components/groups/tavern.vue
View File

@@ -14,11 +14,10 @@
autocomplete(:text='newMessage', v-on:select="selectedAutocomplete")
button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
.container.community-guidelines(v-if='!communityGuidelinesAccepted')
.row
div.col-8(v-once) {{ $t('communityGuidelinesIntro') }}
div.col-4
button.btn.btn-info(@click='acceptCommunityGuidelines()', v-once) {{ $t('acceptCommunityGuidelines') }}
.row.community-guidelines(v-if='!communityGuidelinesAccepted')
div.col-8(v-once) {{ $t('communityGuidelinesIntro') }}
div.col-4
button.btn.btn-info(@click='acceptCommunityGuidelines()', v-once) {{ $t('acceptCommunityGuidelines') }}
.row
chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
@@ -124,7 +123,7 @@
height: 150px;
padding-top: 3em;
margin-top: 2.3em;
width: 98%;
width: 100%;
border-radius: 4px;
}

320
website/client/components/modifyInventory.vue Normal file
View File

@@ -0,0 +1,320 @@
<template lang="pug">
b-modal#modify-inventory(title="Modify Inventory", size='lg', :hide-footer="true")
.modal-header
h4 Modify Inventory for {{user.profile.name}}
.modal-body
.container-fluid
.row
.col-xs-12
button.btn.btn-default.pull-right(ng-if="!showInv.gear", @click="showInv.gear = true") Show Gear
button.btn.btn-default.pull-right(ng-if="showInv.gear", @click="showInv.gear = false") Hide Gear
h4 Gear
div(ng-if="showInv.gear")
button.btn.btn-default(@click="setAllItems('gear', true)") Own All
button.btn.btn-default(@click="setAllItems('gear', false)") Previously Own All
button.btn.btn-default(@click="setAllItems('gear', undefined)") Never Own All
hr
ul.list-group
li.list-group-item(v-for="item in content.gear.flat" ng-init="inv.gear[item.key] = user.items.gear.owned[item.key]")
.pull-left(:class="'shop_' + item.key" style="margin-right: 10px")
| {{item.text()}}
.clearfix
label.radio-inline
input(type="radio", :name="'gear-' + item.key" ng-model="inv.gear[item.key]" ng-value="true")
| Owned
label.radio-inline
input(type="radio", :name="'gear-' + item.key" ng-model="inv.gear[item.key]" ng-value="false")
| Previously Owned
label.radio-inline
input(type="radio", :name="'gear-' + item.key" ng-model="inv.gear[item.key]" ng-value="undefined")
| Never Owned
hr
.row
.col-xs-12
button.btn.btn-default.pull-right(ng-if="!showInv.special", @click="showInv.special = true") Show Special Items
button.btn.btn-default.pull-right(ng-if="showInv.special", @click="showInv.special = false") Hide Special Items
h4 Special Items
div(ng-if="showInv.special")
button.btn.btn-default(@click="setAllItems('special', 999)") Set All to 999
button.btn.btn-default(@click="setAllItems('special', 0)") Set All to 0
button.btn.btn-default(@click="setAllItems('special', undefined)") Set All to undefined
hr
ul.list-group
li.list-group-item(v-for="item in content.special" ng-init="inv.special[item.key] = user.items.special[item.key]" ng-if="item.value === 15")
.form-inline.clearfix
.pull-left(:class="'inventory_special_' + item.key" style="margin-right: 10px")
p {{item.text()}}
input.form-control(type="number" ng-model="inv.special[item.key]")
hr
.row
.col-xs-12
button.btn.btn-default.pull-right(ng-if="!showInv.pets", @click="showInv.pets = true") Show Pets
button.btn.btn-default.pull-right(ng-if="showInv.pets", @click="showInv.pets = false") Hide Pets
h4 Pets
div(ng-if="showInv.pets")
button.btn.btn-default(@click="setAllItems('pets', 45)") Set All to 45
button.btn.btn-default(@click="setAllItems('pets', 0)") Set All to 0
button.btn.btn-default(@click="setAllItems('pets', -1)") Set All to -1
button.btn.btn-default(@click="setAllItems('pets', undefined)") Set All to undefined
hr
h5 Drop Pets
ul.list-group
li.list-group-item(v-for="(pet, value) in content.pets" ng-init="inv.pets[pet] = user.items.pets[pet]")
.form-inline.clearfix
.pull-left(:class="'Pet-' + pet", style="margin-right: 10px")
p {{pet}}
input.form-control(type="number" ng-model="inv.pets[pet]")
h5 Quest Pets
ul.list-group
li.list-group-item(v-for="(pet, value) in content.questPets" ng-init="inv.pets[pet] = user.items.pets[pet]")
.form-inline.clearfix
.pull-left(:class="'Pet-' + pet", style="margin-right: 10px")
p {{pet}}
input.form-control(type="number" ng-model="inv.pets[pet]")
h5 Special Pets
ul.list-group
li.list-group-item(v-for="(pet, value) in content.specialPets" ng-init="inv.pets[pet] = user.items.pets[pet]")
.form-inline.clearfix
.pull-left(:class="'Pet-' + pet", style="margin-right: 10px")
p {{pet}}
input.form-control(type="number" ng-model="inv.pets[pet]")
h5 Premium Pets
ul.list-group
li.list-group-item(v-for="(pet, value) in content.premiumPets" ng-init="inv.pets[pet] = user.items.pets[pet]")
.form-inline.clearfix
.pull-left(:class="'Pet-' + pet", style="margin-right: 10px")
p {{pet}}
input.form-control(type="number" ng-model="inv.pets[pet]")
hr
.row
.col-xs-12
button.btn.btn-default.pull-right(ng-if="!showInv.mounts", @click="showInv.mounts = true") Show Mounts
button.btn.btn-default.pull-right(ng-if="showInv.mounts", @click="showInv.mounts = false") Hide Mounts
h4 Mounts
div(ng-if="showInv.mounts")
button.btn.btn-default(@click="setAllItems('mounts', true)") Set all to Owned
button.btn.btn-default(@click="setAllItems('mounts', undefined)") Set all to Not Owned
hr
h5 Drop Mounts
ul.list-group
li.list-group-item(v-for="(mount, value) in content.mounts" ng-init="inv.mounts[mount] = user.items.mounts[mount]")
.pull-left(:class="'Mount_Icon_' + mount", style="margin-right: 10px")
| {{mount}}
.clearfix
label.radio-inline
input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="true")
| Owned
label.radio-inline
input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="undefined")
| Not Owned
h5 Quest Mounts
ul.list-group
li.list-group-item(v-for="(mount, value) in content.questMounts" ng-init="inv.mounts[mount] = user.items.mounts[mount]")
.pull-left(:class="'Mount_Icon_' + mount", style="margin-right: 10px")
| {{mount}}
.clearfix
label.radio-inline
input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="true")
| Owned
label.radio-inline
input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="undefined")
| Not Owned
h5 Special Mounts
ul.list-group
li.list-group-item(v-for="(mount, value) in content.specialMounts" ng-init="inv.mounts[mount] = user.items.mounts[mount]")
.pull-left(:class="'Mount_Icon_' + mount", style="margin-right: 10px")
| {{mount}}
.clearfix
label.radio-inline
input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="true")
| Owned
label.radio-inline
input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="undefined")
| Not Owned
h5 Premium Mounts
ul.list-group
li.list-group-item(v-for="(mount, value) in content.premiumMounts" ng-init="inv.mounts[mount] = user.items.mounts[mount]")
.pull-left(:class="'Mount_Icon_' + mount", style="margin-right: 10px")
| {{mount}}
.clearfix
label.radio-inline
input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="true")
| Owned
label.radio-inline
input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="undefined")
| Not Owned
hr
.row
.col-xs-12
button.btn.btn-default.pull-right(ng-if="!showInv.hatchingPotions", @click="showInv.hatchingPotions = true") Show Hatching Potions
button.btn.btn-default.pull-right(ng-if="showInv.hatchingPotions", @click="showInv.hatchingPotions = false") Hide Hatching Potions
h4 Hatching Potions
div(ng-if="showInv.hatchingPotions")
button.btn.btn-default(@click="setAllItems('hatchingPotions', 999)") Set All to 999
button.btn.btn-default(@click="setAllItems('hatchingPotions', 0)") Set All to 0
button.btn.btn-default(@click="setAllItems('hatchingPotions', undefined)") Set All to undefined
hr
ul.list-group
li.list-group-item(v-for="item in content.hatchingPotions" ng-init="inv.hatchingPotions[item.key] = user.items.hatchingPotions[item.key]")
.form-inline.clearfix
.pull-left(:class="'Pet_HatchingPotion_' + item.key" style="margin-right: 10px")
p {{item.text()}}
input.form-control(type="number" ng-model="inv.hatchingPotions[item.key]")
hr
.row
.col-xs-12
button.btn.btn-default.pull-right(ng-if="!showInv.eggs", @click="showInv.eggs = true") Show Eggs
button.btn.btn-default.pull-right(ng-if="showInv.eggs", @click="showInv.eggs = false") Hide Eggs
h4 Eggs
div(ng-if="showInv.eggs")
button.btn.btn-default(@click="setAllItems('eggs', 999)") Set All to 999
button.btn.btn-default(@click="setAllItems('eggs', 0)") Set All to 0
button.btn.btn-default(@click="setAllItems('eggs', undefined)") Set All to undefined
hr
ul.list-group
li.list-group-item(v-for="item in content.eggs" ng-init="inv.eggs[item.key] = user.items.eggs[item.key]")
.form-inline.clearfix
.pull-left(:class="'Pet_Egg_' + item.key" style="margin-right: 10px")
p {{item.text()}}
input.form-control(type="number" ng-model="inv.eggs[item.key]")
hr
.row
.col-xs-12
button.btn.btn-default.pull-right(ng-if="!showInv.food", @click="showInv.food = true") Show Food
button.btn.btn-default.pull-right(ng-if="showInv.food", @click="showInv.food = false") Hide Food
h4 Food
div(ng-if="showInv.food")
button.btn.btn-default(@click="setAllItems('food', 999)") Set All to 999
button.btn.btn-default(@click="setAllItems('food', 0)") Set All to 0
button.btn.btn-default(@click="setAllItems('food', undefined)") Set All to undefined
hr
ul.list-group
li.list-group-item(v-for="item in content.food" ng-init="inv.food[item.key] = user.items.food[item.key]")
.form-inline.clearfix
.pull-left(:class="'Pet_Food_' + item.key" style="margin-right: 10px")
p {{item.text()}}
input.form-control(type="number" ng-model="inv.food[item.key]")
hr
.row
.col-xs-12
button.btn.btn-default.pull-right(ng-if="!showInv.quests", @click="showInv.quests = true") Show Quests
button.btn.btn-default.pull-right(ng-if="showInv.quests", @click="showInv.quests = false") Hide Quests
h4 Quests
div(ng-if="showInv.quests")
button.btn.btn-default(@click="setAllItems('quests', 999)") Set All to 999
button.btn.btn-default(@click="setAllItems('quests', 0)") Set All to 0
button.btn.btn-default(@click="setAllItems('quests', undefined)") Set All to undefined
hr
ul.list-group
li.list-group-item(v-for="item in content.quests" ng-init="inv.quests[item.key] = user.items.quests[item.key]" ng-if="item.category !== 'world'")
.form-inline.clearfix
.pull-left(:class="'inventory_quest_scroll_' + item.key" style="margin-right: 10px")
p {{item.text()}}
input.form-control(type="number" ng-model="inv.quests[item.key]")
.modal-footer
button.btn.btn-default(@click="close()") {{ $t('close') }}
button.btn.btn-primary(@click="close();modifyInventory()") Apply Changes
</template>
<script>
import axios from 'axios';
import bModal from 'bootstrap-vue/lib/components/modal';
import { mapState } from 'client/libs/store';
import Content from '../../common/script/content';
export default {
components: {
bModal,
},
computed: {
...mapState({user: 'user.data'}),
},
data () {
let showInv = {};
let inv = {
gear: {},
special: {},
pets: {},
mounts: {},
eggs: {},
hatchingPotions: {},
food: {},
quests: {},
};
return {
showInv,
inv,
content: Content,
};
},
methods: {
setAllItems (type, value) {
let set = this.inv[type];
for (let item in set) {
if (set.hasOwnProperty(item)) {
set[item] = value;
}
}
},
async modifyInventory () {
await axios.post('/api/v3/debug/modify-inventory', {
gear: this.showInv.gear ? this.inv.gear : null,
special: this.showInv.special ? this.inv.special : null,
pets: this.showInv.pets ? this.inv.pets : null,
mounts: this.showInv.mounts ? this.inv.mounts : null,
eggs: this.showInv.eggs ? this.inv.eggs : null,
hatchingPotions: this.showInv.hatchingPotions ? this.inv.hatchingPotions : null,
food: this.showInv.food ? this.inv.food : null,
quests: this.showInv.quests ? this.inv.quests : null,
});
// @TODO: Notification.text('Inventory updated. Refresh or sync.');
// @TODO: Sync
},
close () {
this.$root.$emit('hide::modal', 'modify-inventory');
},
},
};
</script>

76
website/client/components/notificationMenu.vue
View File

@@ -4,50 +4,38 @@
// span.glyphicon(:class='iconClasses()')
// span.notification-counter(v-if='getNotificationsCount()') {{getNotificationsCount()}}
.dropdown-menu.dropdown-menu-right.user-dropdown
a.dropdown-item test
h4 {{ $t('notifications') }}
div
ul.toolbar-notifs-notifs
li.toolbar-notifs-no-messages(v-if='hasNoNotifications()') {{ $t('noNotifications') }}
li(v-if='user.purchased.plan.mysteryItems.length')
a(@click='$state.go("options.inventory.drops"); ')
span.glyphicon.glyphicon-gift
span {{ $t('newSubscriberItem') }}
li(v-for='party in user.invitations.parties')
a(ui-sref='options.social.party')
span.glyphicon.glyphicon-user
span {{ $t('invitedTo', {name: party.name}) }}
li(v-if='user.flags.cardReceived')
a(@click='$state.go("options.inventory.drops"); ')
span.glyphicon.glyphicon-envelope
span {{ $t('cardReceived') }}
a(@click='clearCards()', :popover="$t('clear')", popover-placement='right', popover-trigger='mouseenter',popover-append-to-body='true')
span.glyphicon.glyphicon-remove-circle
li(v-for='guild in user.invitations.guilds')
a(ui-sref='options.social.guilds.public')
span.glyphicon.glyphicon-user
span {{ $t('invitedTo', {name: guild.name}) }}
li(v-if='user.flags.classSelected && !user.preferences.disableClasses && user.stats.points')
a(ui-sref='options.profile.stats')
span.glyphicon.glyphicon-plus-sign
span {{ $t('haveUnallocated', {points: user.stats.points}) }}
li(v-for='(k,v) in user.newMessages', v-if='v.value')
a(@click='(k === party._id || k === user.party._id) ? $state.go("options.social.party") : $state.go("options.social.guilds.detail",{gid:k}); ')
span.glyphicon.glyphicon-comment
span {{v.name}}
a(@click='clearMessages(k)', :popover="$t('clear')", popover-placement='right', popover-trigger='mouseenter',popover-append-to-body='true')
span.glyphicon.glyphicon-remove-circle
li(v-for='notification in user.groupNotifications')
a(@click='viewGroupApprovalNotification(notification, $index, true)')
span(:class="groupApprovalNotificationIcon(notification)")
span
| {{notification.data.message}}
a(@click='viewGroupApprovalNotification(notification, $index)',
:popover="$t('clear')",
popover-placement='right',
popover-trigger='mouseenter',
popover-append-to-body='true')
span.glyphicon.glyphicon-remove-circle
h4.dropdown-item(v-if='!hasNoNotifications()') {{ $t('notifications') }}
h4.dropdown-item.toolbar-notifs-no-messages(v-if='hasNoNotifications()') {{ $t('noNotifications') }}
a.dropdown-item(v-if='user.purchased.plan.mysteryItems.length', @click='$state.go("options.inventory.drops"); ')
span.glyphicon.glyphicon-gift
span {{ $t('newSubscriberItem') }}
a.dropdown-item(v-for='party in user.invitations.parties', ui-sref='options.social.party')
span.glyphicon.glyphicon-user
span {{ $t('invitedTo', {name: party.name}) }}
a.dropdown-item(v-if='user.flags.cardReceived', @click='$state.go("options.inventory.drops"); ')
span.glyphicon.glyphicon-envelope
span {{ $t('cardReceived') }}
a.dropdown-item(@click='clearCards()', :popover="$t('clear')", popover-placement='right', popover-trigger='mouseenter',popover-append-to-body='true')
a.dropdown-item(v-for='guild in user.invitations.guilds', ui-sref='options.social.guilds.public')
span.glyphicon.glyphicon-user
span {{ $t('invitedTo', {name: guild.name}) }}
a.dropdown-item(v-if='user.flags.classSelected && !user.preferences.disableClasses && user.stats.points', ui-sref='options.profile.stats')
span.glyphicon.glyphicon-plus-sign
span {{ $t('haveUnallocated', {points: user.stats.points}) }}
a.dropdown-item(v-for='(k,v) in user.newMessages', v-if='v.value', @click='(k === party._id || k === user.party._id) ? $state.go("options.social.party") : $state.go("options.social.guilds.detail",{gid:k}); ')
span.glyphicon.glyphicon-comment
span {{v.name}}
a.dropdown-item(@click='clearMessages(k)', :popover="$t('clear')", popover-placement='right', popover-trigger='mouseenter',popover-append-to-body='true')
a.dropdown-item(v-for='notification in user.groupNotifications', @click='viewGroupApprovalNotification(notification, $index, true)')
span(:class="groupApprovalNotificationIcon(notification)")
span
| {{notification.data.message}}
a.dropdown-item(@click='viewGroupApprovalNotification(notification, $index)',
:popover="$t('clear')",
popover-placement='right',
popover-trigger='mouseenter',
popover-append-to-body='true')
span.glyphicon.glyphicon-remove-circle
</template>
<style lang='scss' scoped>

8
website/client/components/notifications.vue
View File

@@ -1,12 +1,17 @@
<template lang="pug">
welcome-modal
</template>
<script>
// import moment from 'moment';
import { mapState } from 'client/libs/store';
import welcomeModal from './achievements/welcome';
export default {
components: {
welcomeModal,
},
data () {
// Levels that already display modals and should not trigger generic Level Up
let unlockLevels = {
@@ -153,6 +158,9 @@ export default {
},
},
async mounted () {
if (!this.user.flags.welcomed) {
this.$root.$emit('show::modal', 'welcome');
}
},
methods: {
playSound () {

4
website/client/components/static/faq.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.row
.col-md-12
.col-6.offset-3
.page-header
h1 {{ $t('frequentlyAskedQuestions') }}
p.pagemeta
@@ -9,7 +9,7 @@
| {{ $t('January') }}
|&nbsp;5&comma; 2016
div(v-for='(heading, index) in headings')
strong.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }}
h2.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }}
// @TODO: Markdown
div(v-if='activePage === heading', v-html="$t('webFaqAnswer' + index, replacements)")

1169
website/client/components/static/front.vue
View File

File diff suppressed because it is too large Load Diff

460
website/client/components/userMenu/profile.vue
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>

2
website/client/components/userMenu/stats.vue
View File

@@ -169,12 +169,10 @@
</template>
<style lang="scss" scoped>
.btn-xs {
font-size: 12px;
padding: .2em;
}
</style>
<script>

47
website/client/mixins/challengeUtilities.js Normal file
View File

@@ -0,0 +1,47 @@
import intersection from 'lodash/intersection';
export default {
methods: {
isMemberOfChallenge (user, challenge) {
return user.challenges.indexOf(challenge._id) !== -1;
},
isLeaderOfChallenge (user, challenge) {
return challenge.leader && user._id === challenge.leader._id;
},
filterChallenge (challenge, filters, search, user) {
let passedSearch = true;
let hasCategories = true;
let isMember = true;
let isLeader = true;
let ownerShip = true;
if (search) {
passedSearch = challenge.name.toLowerCase().indexOf(search.toLowerCase()) >= 0;
}
if (filters.categories && filters.categories.length > 0) {
let intersectingCats = intersection(filters.categories, challenge.categories);
hasCategories = intersectingCats.length > 0;
}
let filteringRole = filters.roles && filters.roles.length > 0;
if (filteringRole && filters.roles.indexOf('participating') !== -1) {
isMember = this.isMemberOfChallenge(user, challenge);
}
if (filteringRole && filters.roles.indexOf('not_participating') !== -1) {
isMember = !this.isMemberOfChallenge(user, challenge);
}
if (filters.ownership && filters.ownership.indexOf('not_owned') !== -1) {
ownerShip = !this.isLeaderOfChallenge(user, challenge);
}
if (filters.ownership && filters.ownership.indexOf('owned') !== -1) {
ownerShip = this.isLeaderOfChallenge(user, challenge);
}
return passedSearch && hasCategories && isMember && isLeader && ownerShip;
},
},
};

19
website/client/mixins/groupsUtilities.js
View File

@@ -26,6 +26,7 @@ export default {
let hasCategories = true;
let isMember = true;
let isLeader = true;
let correctSize = true;
if (search) {
passedSearch = group.name.toLowerCase().indexOf(search.toLowerCase()) >= 0;
@@ -37,17 +38,27 @@ export default {
}
let filteringRole = filters.roles && filters.roles.length > 0;
if (filteringRole && filters.roles.indexOf('member')) {
if (filteringRole && filters.roles.indexOf('member') !== -1) {
isMember = this.isMemberOfGroup(user, group);
}
if (filteringRole && filters.roles.indexOf('guild_leader')) {
if (filteringRole && filters.roles.indexOf('guild_leader') !== -1) {
isLeader = this.isLeaderOfGroup(user, group);
}
// @TODO: Tier filters
if (filters.guildSize && filters.guildSize.indexOf('gold_tier') !== -1) {
correctSize = group.memberCount > 1000;
}
return passedSearch && hasCategories && isMember && isLeader;
if (filters.guildSize && filters.guildSize.indexOf('silver_tier') !== -1) {
correctSize = group.memberCount > 10 && group.memberCount < 1000;
}
if (filters.guildSize && filters.guildSize.indexOf('bronze_tier') !== -1) {
correctSize = group.memberCount < 10;
}
return passedSearch && hasCategories && isMember && isLeader && correctSize;
},
},
};

325
website/client/mixins/guide.js Normal file
View File

@@ -0,0 +1,325 @@
// var chapters = {
// intro: [
// [
// {
// state: 'options.profile.avatar',
// element: '.tab-content.ng-scope',
// content: this.$t('tourAvatar'),
// placement: 'top',
// proceed: this.$t('tourAvatarProceed'),
// backdrop: false,
// orphan: true,
// gold: 4,
// experience: 29
// },
// {
// state: 'tasks',
// element: '.task-column.todos',
// content: this.$t('tourToDosBrief'),
// placement: 'top',
// proceed: this.$t('tourOkay'),
// gold: 4,
// experience: 29
// },
// {
// state: 'tasks',
// element: '.task-column.dailys',
// content: this.$t('tourDailiesBrief'),
// placement: 'top',
// proceed: this.$t('tourDailiesProceed'),
// gold: 4,
// experience: 29
// },
// {
// state: 'tasks',
// element: '.task-column.habits',
// content: this.$t('tourHabitsBrief'),
// placement: 'top',
// proceed: this.$t('tourHabitsProceed'),
// gold: 4,
// experience: 29
// },
// {
// state: 'tasks',
// element: 'h2.task-column_title.reward-title',
// content: User.user.flags.armoireEnabled ? this.$t('tourRewardsArmoire') : this.$t('tourRewardsBrief'),
// placement: 'left',
// proceed: this.$t('tourRewardsProceed'),
// gold: 4,
// experience: 29,
// final: true
// }
// ]
// ],
// classes: [
// [
// {
// orphan: true,
// content: this.$t('classGearText'),
// final: true,
// state: 'options.inventory.equipment',
// element: '.equipment-tab',
// title: this.$t('classGear'),
// hideNavigation: true
// }
// /*, {
// state: 'options.profile.stats',
// element: '.allocate-stats',
// title: this.$t('stats'),
// content: this.$t('classStats')
// }, {
// state: 'options.profile.stats',
// element: '.auto-allocate',
// title: this.$t('autoAllocate'),
// placement: 'left',
// content: this.$t('autoAllocateText')
// }, {
// element: '.meter.mana',
// title: this.$t('spells'),
// content: this.$t('spellsText')
// }, {
// orphan: true,
// title: this.$t('readMore'),
// content: this.$t('moreClass'),
// final: true
// }*/
// ]
// ],
// stats: [[
// {
// orphan: true,
// content: this.$t('tourStatsPage'),
// final: true,
// proceed: this.$t('tourOkay'),
// hideNavigation: true
// }
// ]],
// tavern: [[
// {
// orphan: true,
// content: this.$t('tourTavernPage'),
// final: true,
// proceed: this.$t('tourAwesome'),
// hideNavigation: true
// }
// ]],
// party: [[
// {
// orphan: true,
// content: this.$t('tourPartyPage'),
// final: true,
// proceed: this.$t('tourSplendid'),
// hideNavigation: true
// }
// ]],
// guilds: [[
// {
// orphan: true,
// content: this.$t('tourGuildsPage'),
// final: true,
// proceed: this.$t('tourNifty'),
// hideNavigation: true
// }
// ]],
// challenges: [[
// {
// orphan: true,
// content: this.$t('tourChallengesPage'),
// final: true,
// proceed: this.$t('tourOkay'),
// hideNavigation: true
// }
// ]],
// market: [[
// {
// orphan: true,
// content: this.$t('tourMarketPage'),
// final: true,
// proceed: this.$t('tourAwesome'),
// hideNavigation: true
// }
// ]],
// hall: [[
// {
// orphan: true,
// content: this.$t('tourHallPage'),
// final: true,
// proceed: this.$t('tourSplendid'),
// hideNavigation: true
// }
// ]],
// pets: [[
// {
// orphan: true,
// content: this.$t('tourPetsPage'),
// final: true,
// proceed: this.$t('tourNifty'),
// hideNavigation: true
// }
// ]],
// mounts: [[
// {
// orphan: true,
// content: this.$t('tourMountsPage'),
// final: true,
// proceed: this.$t('tourOkay'),
// hideNavigation: true
// }
// ]],
// equipment: [[
// {
// orphan: true,
// content: this.$t('tourEquipmentPage'),
// final: true,
// proceed: this.$t('tourAwesome'),
// hideNavigation: true
// }
// ]]
// }
//
// _.each(chapters, function(chapter, k){
// _(chapter).flattenDeep().forEach(function(step, i) {
// step.content = '<div><div class='' + (env.worldDmg.guide ? 'npc_justin_broken' : 'npc_justin') + ' float-left'></div>' + step.content + '</div>';
// $(step.element).popover('destroy'); // destroy existing hover popovers so we can add our own
// step.onShow = function(){
// Analytics.track({'hitType':'event','eventCategory':'behavior','eventAction':'tutorial','eventLabel':k+'-web','eventValue':i+1,'complete':false});
// if (step.state && !$state.is(step.state)) {
// $state.go(step.state);
// return $timeout(function(){});
// }
// };
// step.onHide = function(){
// var ups = {};
// var lastKnownStep = User.user.flags.tour[k];
//
// // Return early if user has already completed this tutorial
// if (lastKnownStep === -2) {
// return;
// }
//
// if (i > lastKnownStep) {
// if (step.gold) ups['stats.gp'] = User.user.stats.gp + step.gold;
// if (step.experience) ups['stats.exp'] = User.user.stats.exp + step.experience;
// ups['flags.tour.'+k] = i;
// }
//
// if (step.final) { // -2 indicates complete
// if (k === 'intro') {
// // Manually show bunny scroll reward
// var rewardData = {
// reward: [Shared.content.quests.dustbunnies],
// rewardKey: ['inventory_quest_scroll_dustbunnies'],
// rewardText: Shared.content.quests.dustbunnies.text(),
// message: this.$t('checkinEarned'),
// nextRewardAt: 1,
// };
// Notification.showLoginIncentive(User.user, rewardData, Social.loadWidgets);
// }
// //Mark tour complete
// ups['flags.tour.'+k] = -2;
// Analytics.track({'hitType':'event','eventCategory':'behavior','eventAction':'tutorial','eventLabel':k+'-web','eventValue':i+1,'complete':true})
// }
//
// User.set(ups);
// // User.set() doesn't include a check for level changes, so manually check here.
// if (step.experience) {
// User.user.fns.updateStats(User.user.stats);
// }
// }
// });
// });
//
// var tour = {};
// _.each(chapters, function(v,k){
// tour[k] = new Tour({
// name: k,
// backdrop: true,
// template: function(i,step){
// var showFinish = step.final || k == 'classes';
// var showCounter = k=='intro' && !step.final;
//
// return '<div class='popover' role='tooltip'>' +
// '<div class='arrow'></div>' +
// '<h3 class='popover-title'></h3>' +
// '<div class='popover-content'></div>' +
// '<div class='popover-navigation'> ' +
// (showCounter ? '<span style='float:right;'>'+ (i+1 +' of '+ _.flattenDeep(chapters[k]).length) +'</span>' : '')+ // counter
// '<div class='btn-group'>' +
// (step.hideNavigation ? '' : '<button class='btn btn-sm btn-default' data-role='prev'>&laquo; Previous</button>') +
// (showFinish ? ('<button class='btn btn-sm btn-primary' data-role='end' style='float:none;'>' + (step.proceed ? step.proceed : 'Finish Tour') + '</button>') :
// (step.hideNavigation ? '' : ('<button class='btn btn-sm btn-primary' data-role='next'>' + (step.proceed ? step.proceed : 'Next') + ' &raquo;</button>'))) +
// '<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>Pause</button>' +
// '</div>' +
// '</div>' +
// '</div>';
// },
// storage: false
// });
// });
//
// var goto = function(chapter, page, force) {
// if (chapter == 'intro' && User.user.flags.welcomed != true) User.set({'flags.welcomed': true});
// if (chapter == 'classes' && User.user.flags.tour.classes === -2) return;
// if (page === -1) page = 0;
// var curr = User.user.flags.tour[chapter];
// if (page != curr+1 && !force) return;
// var chap = tour[chapter], opts = chap._options;
// opts.steps = [];
// _.times(page, function(p){
// opts.steps = opts.steps.concat(chapters[chapter][p]);
// })
//
// var end = opts.steps.length;
// opts.steps = opts.steps.concat(chapters[chapter][page]);
// chap._removeState('end');
//
// if (chap._inited) {
// chap.goTo(end);
// } else {
// chap.setCurrentStep(end);
// if (page > 0) {
// chap.init();
// chap.goTo(page);
// } else {
// chap.start();
// }
// }
// }
//
// //Init and show the welcome tour (only after user is pulled from server & wrapped).
// var watcher = $rootScope.$watch('User.user._wrapped', function(wrapped){
// if (!wrapped) return; // only run after user has been wrapped
// watcher(); // deregister watcher
// if (window.env.IS_MOBILE) return; // Don't show tour immediately on mobile devices
// if (User.user.flags.welcomed == false) {
// $rootScope.openModal('welcome', {size: 'lg', backdrop: 'static', keyboard: false});
// }
//
// var alreadyShown = function(before, after) { return !(!before && after === true) };
// //$rootScope.$watch('user.flags.dropsEnabled', _.flow(alreadyShown, function(already) { //FIXME requires lodash@~3.2.0
// $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
// switch (toState.name) {
// // case 'options.profile.avatar': return goto('intro', 5);
// case 'options.profile.stats': return goto('stats', 0);
// case 'options.social.tavern': return goto('tavern', 0);
// case 'options.social.party': return goto('party', 0);
// case 'options.social.guilds.public': return goto('guilds', 0);
// case 'options.social.challenges': return goto('challenges', 0);
// case 'options.social.hall.heroes': return goto('hall', 0);
// case 'options.inventory.drops': return goto('market', 0);
// case 'options.inventory.pets': return goto('pets', 0);
// case 'options.inventory.mounts': return goto('mounts', 0);
// case 'options.inventory.equipment': return goto('equipment', 0);
// }
// });
// });
//
// export default {
// methods: {
// hoyo (user) {
// // @TODO: What is was the timeout for?
// window.amplitude.setUserId(user._id);
// window.ga('set', {userId: user._id});
// },
// },
// };

14
website/client/router.js
View File

@@ -9,7 +9,6 @@ import ParentPage from './components/parentPage';
import Page from './components/page';
// Static Pages
const Home = () => import(/* webpackChunkName: "static" */'./components/static/home');
const AppPage = () => import(/* webpackChunkName: "static" */'./components/static/app');
const ClearBrowserDataPage = () => import(/* webpackChunkName: "static" */'./components/static/clearBrowserData');
const CommunityGuidelinesPage = () => import(/* webpackChunkName: "static" */'./components/static/communityGuidelines');
@@ -33,8 +32,8 @@ const RegisterLogin = () => import(/* webpackChunkName: "auth" */'./components/a
// User Pages
const CreatorIntro = () => import(/* webpackChunkName: "creator" */'./components/creatorIntro');
const BackgroundsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/backgrounds');
const StatsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/stats');
const AchievementsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/achievements');
// const StatsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/stats');
// const AchievementsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/achievements');
const ProfilePage = () => import(/* webpackChunkName: "user" */'./components/userMenu/profile');
// Settings
@@ -97,8 +96,8 @@ const router = new VueRouter({
},
// requiresLogin is true by default, isStatic false
routes: [
{ name: 'creator', path: '/creator', component: CreatorIntro },
{ name: 'home', path: '/home', component: Home, meta: {requiresLogin: false} },
{ name: 'avatar', path: '/avatar', component: CreatorIntro },
{ name: 'home', path: '/home', component: FrontPage, meta: {requiresLogin: false} },
{ name: 'register', path: '/register', component: RegisterLogin, meta: {requiresLogin: false} },
{ name: 'login', path: '/login', component: RegisterLogin, meta: {requiresLogin: false} },
{ name: 'tasks', path: '/', component: UserTasks },
@@ -173,10 +172,9 @@ const router = new VueRouter({
path: '/user',
component: ParentPage,
children: [
{ name: 'avatar', path: 'avatar', component: Page },
{ name: 'backgrounds', path: 'backgrounds', component: BackgroundsPage },
{ name: 'stats', path: 'stats', component: StatsPage },
{ name: 'achievements', path: 'achievements', component: AchievementsPage },
{ name: 'stats', path: 'stats', component: ProfilePage },
{ name: 'achievements', path: 'achievements', component: ProfilePage },
{ name: 'profile', path: 'profile', component: ProfilePage },
{
name: 'settings',

8
website/client/store/actions/challenges.js
View File

@@ -2,9 +2,7 @@ import axios from 'axios';
import omit from 'lodash/omit';
export async function createChallenge (store, payload) {
let response = await axios.post('/api/v3/challenges', {
data: payload.challenge,
});
let response = await axios.post('/api/v3/challenges', payload.challenge);
return response.data.data;
}
@@ -55,9 +53,7 @@ export async function updateChallenge (store, payload) {
if (challengeDataToSend.leader && challengeDataToSend.leader._id) challengeDataToSend.leader = challengeDataToSend.leader._id;
let response = await axios.post(`/api/v3/challenges/${payload.challenge._id}`, {
data: challengeDataToSend,
});
let response = await axios.put(`/api/v3/challenges/${payload.challenge._id}`, challengeDataToSend);
return response.data.data;
}

15
website/client/store/actions/guilds.js
View File

@@ -58,16 +58,19 @@ export async function leave (store, payload) {
keep: payload.keep,
keepChallenges: payload.keepChallenges,
};
let response = await axios.post(`/api/v3/groups/${payload.guildId}/leave`, data);
let response = await axios.post(`/api/v3/groups/${payload.groupId}/leave`, data);
// @TODO: update for party
let index = store.state.user.data.guilds.indexOf(payload.guildId);
let index = store.state.user.data.guilds.indexOf(payload.groupId);
store.state.user.data.guilds.splice(index, 1);
if (payload.type === 'myGuilds') {
let guildIndex = findIndex(store.state.myGuilds, (guild) => {
return guild._id === payload.guildId;
return guild._id === payload.groupId;
});
store.state.myGuilds.splice(guildIndex, 1);
} else if (payload.type === 'party') {
store.state.user.data.party._id = null;
store.state.party = {};
}
return response.data.data;
@@ -80,10 +83,14 @@ export async function create (store, payload) {
// @TODO: Add party
if (newGroup.privacy === 'public') {
store.state.publicGuilds.push(newGroup);
} else if (newGroup.privacy === 'private') {
}
if (newGroup.leader._id === store.state.user.data._id || newGroup.privacy === 'private') {
store.state.myGuilds.push(newGroup);
}
store.state.user.data.guilds.push(newGroup._id);
return newGroup;
}

4
website/client/store/actions/members.js
View File

@@ -26,9 +26,9 @@ export async function getGroupInvites (store, payload) {
}
export async function getChallengeMembers (store, payload) {
let url = `${apiV3Prefix}/challenges/${payload.challengeId}/members?includeAllMembers=true`;
let url = `${apiV3Prefix}/challenges/${payload.challengeId}/members?includeAllMembers=true&includeAllPublicFields=true`;
let response = await axios.get(url);
return response;
return response.data.data;
}
export async function getChallengeMemberProgress (store, payload) {

6
website/client/store/index.js
View File

@@ -47,12 +47,18 @@ export default function () {
market: asyncResourceFactory(),
},
myGuilds: [],
publicGuilds: [],
groupFormOptions: {
creatingParty: false,
},
editingGroup: {}, // TODO move to local state
// content data, frozen to prevent Vue from modifying it since it's static and never changes
// TODO apply freezing to the entire codebase (the server) and not only to the client side?
// NOTE this takes about 10-15ms on a fast computer
content: deepFreeze(content),
constants: deepFreeze(constants),
hideHeader: false,
viewingMembers: [],
},
});

5
website/common/locales/en/newClient.json
View File

@@ -77,6 +77,7 @@
"silverTier": "Silver Tier",
"bronzeTier": "Bronze Tier",
"privacySettings": "Privacy Settings",
"updateChallenge": "Update Challenge",
"onlyLeaderCreatesChallenges": "Only the Leader can create Challenges",
"guildLeaderCantBeMessaged": "Leader can not be messaged directly",
"privateGuild": "Private Guild",
@@ -230,5 +231,7 @@
"featuredItems": "Featured Items!",
"not_participating": "Not Participating",
"owned": "Owned",
"not_owned": "Not Owned"
"not_owned": "Not Owned",
"participantsTitle": "Participants",
"shortName": "Short Name"
}

5
website/server/controllers/api-v3/members.js
View File

@@ -219,6 +219,11 @@ function _getMembersForItem (type) {
if (type === 'challenge-members') {
query.challenges = challenge._id;
if (req.query.includeAllPublicFields === 'true') {
fields = memberFields;
addComputedStats = true;
}
} else if (type === 'group-members') {
if (group.type === 'guild') {
query.guilds = group._id;