Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in develop

Browse Source
This commit is contained in:
Keith Holliday
2017-06-27 22:23:13 -06:00
parent acb4b79078 207b1e91ca
commit 7fd2522e93
897 changed files with 50434 additions and 41464 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/components/guilds/createPartyModal.vue
+121
View File
@@ -0,0 +1,121 @@
<template lang="pug">
b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
.header-wrap(slot="modal-header")
h2 Image Here
.row
.col-12.text-center
h2(v-once) {{$t('playInPartyTitle')}}
p(v-once) {{$t('playInPartyDescription')}}
.row.grey-row
.col-6.text-center
img
h3(v-once) {{$t('startYourOwnPartyTitle')}}
p(v-once) {{$t('startYourOwnPartyDescription')}}
button.btn.btn-primary(v-once) {{$t('createParty')}}
.col-6
div.text-center
img
h3(v-once) {{$t('wantToJoinPartyTitle')}}
p(v-once) {{$t('wantToJoinPartyDescription')}}
button.btn.btn-primary(v-once, @click='shareUserIdShown = !shareUserIdShown') {{$t('shartUserId')}}
.share-userid-options(v-if="shareUserIdShown")
.option-item(v-once)
.svg-icon(v-html="icons.copy")
| {{$t('copy')}}
.option-item(v-once)
.svg-icon(v-html="icons.greyBadge")
| {{$t('lookingForGroup')}}
.option-item(v-once)
.svg-icon(v-html="icons.qrCode")
| {{$t('qrCode')}}
.option-item(v-once)
.svg-icon.facebook(v-html="icons.facebook")
| {{$t('facebook')}}
.option-item(v-once)
.svg-icon(v-html="icons.twitter")
| {{$t('twitter')}}
</template>
<style lang='scss'>
@import '~client/assets/scss/colors.scss';
.modal-body {
padding-bottom: 0;
padding-top: 0;
}
.grey-row {
background-color: $gray-700;
padding: 2em;
border-radius: 0px 0px 2px 2px;
}
.share-userid-options {
background-color: $white;
border-radius: 2px;
width: 180px;
position: absolute;
top: -8em;
left: 4.8em;
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
.option-item {
padding: 1em;
.svg-icon {
margin-right: .5em;
}
.facebook svg {
width: 15px;
height: 15px;
}
}
.option-item:hover {
background-color: $header-color;
color: $purple-200;
cursor: pointer;
}
}
</style>
<script>
import bModal from 'bootstrap-vue/lib/components/modal';
import copyIcon from 'assets/svg/copy.svg';
import greyBadgeIcon from 'assets/svg/grey-badge.svg';
import qrCodeIcon from 'assets/svg/qrCode.svg';
import facebookIcon from 'assets/svg/facebook.svg';
import twitterIcon from 'assets/svg/twitter.svg';
export default {
components: {
bModal,
},
data () {
return {
icons: Object.freeze({
copy: copyIcon,
greyBadge: greyBadgeIcon,
qrCode: qrCodeIcon,
facebook: facebookIcon,
twitter: twitterIcon,
}),
shareUserIdShown: false,
};
},
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');
// });
},
},
};
</script>
website/client/components/guilds/discovery.vue
+1 -1
View File
@@ -8,7 +8,7 @@
.float-right
span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)') {{sortOption.text}}
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(
website/client/components/guilds/groupFormModal.vue
+68 -60
View File
@@ -1,10 +1,10 @@
<template lang="pug">
b-modal#guild-form(:title="title", :hide-footer="true")
b-modal#guild-form(:title="title", :hide-footer="true", size='lg')
form(@submit.stop.prevent="submit")
.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="newGuild.name")
.form-group(v-if='newGuild.id')
label
@@ -20,7 +20,7 @@
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('onlyLeaderCreatesChallenges') }}
b-tooltip.icon(:content="$t('privateDescription')")
img(src='~assets/guilds/information.svg')
.svg-icon(v-html='icons.information')
br
label.custom-control.custom-checkbox
@@ -29,15 +29,15 @@
span.custom-control-description(v-once) {{ $t('guildLeaderCantBeMessaged') }}
br
label.custom-control.custom-checkbox
label.custom-control.custom-checkbox(v-if='!creatingParty')
input.custom-control-input(type="checkbox", v-model="newGuild.privateGuild")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('privateGuild') }}
b-tooltip.icon(:content="$t('privateDescription')")
img(src='~assets/guilds/information.svg')
.svg-icon(v-html='icons.information')
br
label.custom-control.custom-checkbox
label.custom-control.custom-checkbox(v-if='!creatingParty')
input.custom-control-input(type="checkbox", v-model="newGuild.allowGuildInvationsFromNonMembers")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('allowGuildInvationsFromNonMembers') }}
@@ -46,14 +46,18 @@
label
strong(v-once) {{$t('description')}}*
div.description-count {{charactersRemaining}} {{ $t('charactersRemaining') }}
b-form-input(type="text", textarea :placeholder="$t('guildDescriptionPlaceHolder')", v-model="newGuild.description")
b-form-input(type="text", textarea :placeholder="creatingParty ? $t('partyDescriptionPlaceHolder') : $t('guildDescriptionPlaceHolder')", v-model="newGuild.description")
.form-group(v-if='newGuild.id')
.form-group(v-if='newGuild.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="newGuild.guildInformation")
.form-group(style='position: relative;')
.form-group(v-if='creatingParty && !newGuild.id')
span
toggleSwitch(:label="$t('inviteMembersNow')", v-model='inviteMembers')
.form-group(style='position: relative;', v-if='!creatingParty')
label
strong(v-once) {{$t('categories')}}*
div.category-wrap(@click.prevent="toggleCategorySelect")
@@ -70,22 +74,35 @@
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')
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.
div
div(v-for='(member, index) in membersToInvite')
input(type='text', v-model='member.value')
button(@click.prevent='removeMemberToInvite(index)') Remove
div
input(type='text', placeholder='Email address or User ID', v-model='newMemberToInvite.value')
button(@click.prevent='addMemberToInvite()') Add
.form-group.text-center
div.item-with-icon
img(src="~assets/guilds/green-gem.svg")
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') {{ $t('createGuild') }}
button.btn.btn-primary.btn-md(v-if='newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ $t('updateGuild') }}
.gem-description(v-once) {{ $t('guildGemCostInfo') }}
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') }}
.gem-description(v-once, v-if='!creatingParty') {{ $t('guildGemCostInfo') }}
</template>
<style lang="scss" scoped>
@import '~client/assets/scss/colors.scss';
<style lang="scss" scoped>
@import '~client/assets/scss/colors.scss';
textarea {
height: 150px;
}
.description-count, .gem-description {
font-size: 12px;
line-height: 1.33;
@@ -101,31 +118,6 @@
margin-top: 1em;
}
.category-box {
padding: 1em;
max-width: 400px;
position: absolute;
top: -480px;
padding: 2em;
border-radius: 2px;
background-color: $white;
box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
}
.category-label {
min-width: 100px;
border-radius: 100px;
background-color: $gray-600;
padding: .5em;
display: inline-block;
margin-right: .5em;
font-size: 12px;
font-weight: 500;
line-height: 1.33;
text-align: center;
color: $gray-300;
}
.item-with-icon {
display: inline-block;
@@ -146,21 +138,6 @@
margin-top: 1em;
}
.category-select {
border-radius: 2px;
background-color: $white;
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
padding: 1em;
}
.category-select:hover {
cursor: pointer;
}
.category-wrap {
margin-top: .5em;
}
.icon {
margin-left: .5em;
display: inline-block;
@@ -175,6 +152,10 @@ import bFormCheckbox from 'bootstrap-vue/lib/components/form-checkbox';
import bFormSelect from 'bootstrap-vue/lib/components/form-select';
import bTooltip from 'bootstrap-vue/lib/components/tooltip';
import toggleSwitch from 'client/components/ui/toggleSwitch';
import gemIcon from 'assets/svg/gem.svg';
import informationIcon from 'assets/svg/information.svg';
export default {
components: {
bModal,
@@ -183,6 +164,7 @@ export default {
bFormCheckbox,
bFormSelect,
bTooltip,
toggleSwitch,
},
data () {
let data = {
@@ -248,6 +230,13 @@ export default {
],
showCategorySelect: false,
members: ['one', 'two'],
creatingParty: true,
inviteMembers: false,
newMemberToInvite: {
value: '',
type: '',
},
membersToInvite: [],
};
let hashedCategories = {};
@@ -256,6 +245,11 @@ export default {
});
data.categoriesHashByKey = hashedCategories;
data.icons = Object.freeze({
gem: gemIcon,
information: informationIcon,
});
return data;
},
mounted () {
@@ -274,11 +268,23 @@ export default {
return 500 - this.newGuild.description.length;
},
title () {
if (this.creatingParty) return this.$t('createParty');
if (!this.newGuild.id) return this.$t('createGuild');
return this.$t('updateGuild');
},
},
methods: {
addMemberToInvite () {
// @TODO: determine type
this.membersToInvite.push(this.newMemberToInvite);
this.newMemberToInvite = {
value: '',
type: '',
};
},
removeMemberToInvite (index) {
this.membersToInvite.splice(index, 1);
},
toggleCategorySelect () {
this.showCategorySelect = !this.showCategorySelect;
},
@@ -303,7 +309,7 @@ export default {
}
// @TODO: Add proper notifications
if (!confirm(this.$t('confirmGuild'))) return;
if (!this.newGuild.id && !confirm(this.$t('confirmGuild'))) return;
if (!this.newGuild.privateGuild) {
this.newGuild.privacy = 'public';
@@ -334,6 +340,8 @@ export default {
privateGuild: true,
allowGuildInvationsFromNonMembers: true,
};
this.$root.$emit('hide::modal', 'guild-form');
},
},
};
website/client/components/guilds/guild.vue
+452 -89
View File
@@ -1,30 +1,26 @@
<template lang="pug">
// TODO this is necessary until we have a way to wait for data to be loaded from the server
.row(v-if="guild")
.row(v-if="group")
group-form-modal
.clearfix.col-8
.row
.col-6.title-details
h1 {{group.name}}
strong.float-left(v-once) {{$t('groupLeader')}}
span.float-left(v-once, v-if='group.leader.profile') : {{group.leader.profile.name}}
.col-6
.float-left
h2 {{guild.name}}
strong.float-left(v-once) {{$t('groupLeader')}}
span.float-left : {{guild.leader.profile.name}}
.col-6
.float-right
.row.icon-row
.col-6
img.icon.shield(src="~assets/guilds/gold-guild-badge.svg")
span.number {{guild.memberCount}}
div(v-once) {{ $t('guildMembers') }}
.col-6
.item-with-icon
img.icon.gem(src="~assets/header/png/gem@3x.png")
span.number {{guild.memberCount}}
div(v-once) {{ $t('guildBank') }}
.row.icon-row
.col-4(v-bind:class="{ 'offset-8': isParty }")
members-modal(:group='group', v-if='isMember')
.col-6(v-if='!isParty')
.item-with-icon
.svg-icon.gem(v-html="icons.gem")
span.number {{group.memberCount}}
div(v-once) {{ $t('guildBank') }}
.row.chat-row
.col-12
h3(v-once) {{ $t('chat') }}
textarea(placeholder="$('chatPlaceHolder')")
textarea(:placeholder="$t('chatPlaceHolder')")
button.btn.btn-secondary.send-chat.float-right(v-once) {{ $t('send') }}
.hr
@@ -32,9 +28,9 @@
.row
.col-md-2
img.icon(src="~assets/chat/like.svg")
.svg-icon(v-html="icons.like")
.col-md-10
.card(v-for="msg in guild.chat", :key="msg.id")
.card(v-for="msg in group.chat", :key="msg.id")
.card-block
h3.leader Character name
span 2 hours ago
@@ -44,66 +40,160 @@
.text {{msg.text}}
hr
span.action(v-once)
img.icon(src="~assets/chat/like.svg")
.svg-icon(v-html="icons.like")
| {{$t('like')}}
span.action(v-once)
img.icon(src="~assets/chat/copy.svg")
.svg-icon(v-html="icons.copy")
| {{$t('copyAsTodo')}}
span.action(v-once)
img.icon(src="~assets/chat/report.svg")
.svg-icon(v-html="icons.report")
| {{$t('report')}}
span.action(v-once)
img.icon(src="~assets/chat/delete.svg")
.svg-icon(v-html="icons.delete")
| {{$t('delete')}}
span.action.float-right
img.icon(src="~assets/chat/liked.svg")
.svg-icon(v-html="icons.liked")
| +3
.col-md-4.sidebar
.guild-background.row
.col-6
p Image here
p(v-if='!isParty') Image here
.col-6
members-modal(:group='guild')
br
button.btn.btn-primary(v-once) {{$t('joinGuild')}}
br
button.btn.float-left(:class="[isMember ? 'btn-danger' : 'btn-success']") {{ isMember ? $t('leave') : $t('join') }}
br
button.btn.btn-primary(v-once) {{$t('inviteToGuild')}}
br
button.btn.btn-primary(v-once) {{$t('messageGuildLeader')}}
br
button.btn.btn-primary(v-once) {{$t('donateGems')}}
br
button.btn.btn-primary(b-btn, @click="updateGuild", v-once) {{ $t('updateGuild') }}
div
h3(v-once) {{ $t('description') }}
p(v-once) {{ guild.description }}
p Life hacks are tricks, shortcuts, or methods that help increase productivity, efficiency, health, and so on. Generally, they get you to a better state of life. Life hacking is the process of utilizing and implementing these secrets. And, in this guild, we want to help everyone discover these improved ways of doing things.
div
h3(v-once) {{$t('guildInformation')}}
h4 Welcome
p Below are some resources that some members might find useful. Consider checking them out before posting any questions, as they just might help answer some of them! Feel free to share your life hacks in the guild chat, or ask any questions that you might have. Please peruse at your leisure, and remember: this guild is meant to help guide you in the right direction. Only you will know what works best for you.
div
h3 Challenges
.card
h4 Challenge
.row
.col-8
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ultrices libero.
.col-4
.row
.col-md-12
span Tag
span 100
.button-container
button.btn.btn-success(class='btn-success', v-if='isLeader') {{ $t('upgrade') }}
.button-container
button.btn.btn-primary(b-btn, @click="updateGuild", v-once, v-if='isLeader') {{ $t('edit') }}
.button-container
button.btn.btn-success(class='btn-success', v-if='!isMember') {{ $t('join') }}
.button-container
button.btn.btn-primary(v-once) {{$t('invite')}}
.button-container
button.btn.btn-primary(v-once, v-if='!isLeader') {{$t('messageGuildLeader')}}
.button-container
button.btn.btn-primary(v-once, v-if='isMember && !isParty') {{$t('donateGems')}}
.section-header
.row
.col-10
h3(v-once) {{ $t('questDetailsTitle') }}
.col-2
.toggle-up(@click="sections.quest = !sections.quest", v-if="sections.quest")
.svg-icon(v-html="icons.upIcon")
.toggle-down(@click="sections.quest = !sections.quest", v-if="!sections.quest")
.svg-icon(v-html="icons.downIcon")
.section(v-if="sections.quest")
.row.no-quest-section(v-if='isParty && !onPendingQuest && !onActiveQuest')
.col-12.text-center
.svg-icon(v-html="icons.questIcon")
h4(v-once) {{ $t('yourNotOnQuest') }}
p(v-once) {{ $t('questDescription') }}
button.btn.btn-secondary(v-once, @click="openStartQuestModal()") {{ $t('startAQuest') }}
owned-quests-modal(:group='this.group')
.row.quest-active-section(v-if='isParty && onPendingQuest && !onActiveQuest')
h2 Pending quest
button.btn.btn-secondary(v-once, @click="questForceStart()") {{ $t('begin') }}
button.btn.btn-secondary(v-once, @click="questCancel()") {{ $t('cancel') }}
.row.quest-active-section(v-if='isParty && !onPendingQuest && onActiveQuest')
.col-12.text-center
.quest-boss(:class="'quest_' + questData.key")
h3(v-once) {{ questData.text() }}
.quest-box.svg-icon(v-html="icons.questBackground")
.collect-info(v-if='questData.collect')
.row(v-for='(value, key) in questData.collect')
.col-2
div(:class="'quest_' + questData.key + '_' + key")
.col-10
strong {{value.text()}}
.collect-progress-bar
strong {{group.quest.progress.collect[key]}} / {{value.count}}
.boss-info(v-if='questData.boss')
.row
.col-6
h4.float-left(v-once) {{ questData.boss.name() }}
.col-6
span.float-right(v-once) {{ $t('participants') }}
.row
.col-12
.boss-health-bar
.row.boss-details
.col-6
span.float-left
| {{group.quest.progress.hp}} / {{questData.boss.hp}}
.col-6
span.float-right 30 pending damage
button.btn.btn-secondary(v-once, @click="questAbort()") {{ $t('abort') }}
.section-header
.row
.col-10
h3(v-once) {{ $t('description') }}
.col-2
.toggle-up(@click="sections.description = !sections.description", v-if="sections.description")
.svg-icon(v-html="icons.upIcon")
.toggle-down(@click="sections.description = !sections.description", v-if="!sections.description")
.svg-icon(v-html="icons.downIcon")
.section(v-if="sections.description")
p(v-once) {{ group.description }}
p Life hacks are tricks, shortcuts, or methods that help increase productivity, efficiency, health, and so on. Generally, they get you to a better state of life. Life hacking is the process of utilizing and implementing these secrets. And, in this guild, we want to help everyone discover these improved ways of doing things.
.section-header
.row
.col-10
h3(v-once) {{ $t('guildInformation') }}
.col-2
.toggle-up(@click="sections.information = !sections.information", v-if="sections.information")
.svg-icon(v-html="icons.upIcon")
.toggle-down(@click="sections.information = !sections.information", v-if="!sections.information")
.svg-icon(v-html="icons.downIcon")
.section(v-if="sections.information")
h4 Welcome
p Below are some resources that some members might find useful. Consider checking them out before posting any questions, as they just might help answer some of them! Feel free to share your life hacks in the guild chat, or ask any questions that you might have. Please peruse at your leisure, and remember: this guild is meant to help guide you in the right direction. Only you will know what works best for you.
.section-header.challenge
.row
.col-10.information-header
h3(v-once)
| {{ $t('challenges') }}
b-tooltip.icon.tooltip-wrapper(:content="$t('privateDescription')")
.svg-icon(v-html='icons.information')
.col-2
.toggle-up(@click="sections.challenges = !sections.challenges", v-if="sections.challenges")
.svg-icon(v-html="icons.upIcon")
.toggle-down(@click="sections.challenges = !sections.challenges", v-if="!sections.challenges")
.svg-icon(v-html="icons.downIcon")
.section(v-if="sections.challenges")
.row.no-quest-section(v-if='!hasChallenges')
.col-12.text-center
.svg-icon(v-html="icons.challengeIcon")
h4(v-once) {{ $t('haveNoChallenges') }}
p(v-once) {{ $t('challengeDescription') }}
button.btn.btn-secondary(v-once) {{ $t('createChallenge') }}
div.text-center
button.btn.btn-primary(class='btn-danger', v-if='isMember') {{ $t('leave') }}
</template>
<style lang="scss" scoped>
@import '~client/assets/scss/colors.scss';
.button-container {
margin-bottom: 1em;
button {
width: 100%;
}
}
.item-with-icon {
border-radius: 2px;
background-color: #ffffff;
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
padding: 1em;
}
.sidebar {
background-color: $gray-600;
padding-top: 2em;
}
.card {
@@ -123,13 +213,11 @@
.guild-background {
background-image: linear-gradient(to bottom, rgba($gray-600, 0), $gray-600);
height: 300px;
}
textarea {
height: 150px;
width: 100%;
border-radius: 2px;
background-color: $white;
border: solid 1px $gray-400;
font-size: 16px;
@@ -139,15 +227,18 @@
padding: .5em;
}
.icon.shield, .icon.gem {
.svg-icon.shield, .svg-icon.gem {
width: 40px;
margin-right: 1em;
}
.title-details {
padding-top: 1em;
padding-left: 1em;
}
.icon-row {
width: 200px;
margin-top: 3em;
margin-right: 3em;
margin-top: 1em;
.number {
font-size: 22px;
@@ -199,39 +290,190 @@
span.action .icon {
margin-right: .3em;
}
.no-quest-section {
padding: 2em;
color: $gray-300;
h4 {
color: $gray-300;
}
p {
margin-bottom: 2em;
}
.svg-icon {
height: 30px;
width: 30px;
margin-bottom: 2em;
}
}
.information-header {
h3, .tooltip-wrapper {
display: inline-block;
}
.tooltip-wrapper {
margin-left: 2.2em;
}
}
.quest-active-section {
.quest-box {
height: 100px;
width: 100%;
svg: {
width: 100%;
height: 100%;
}
}
.boss-info, .collect-info {
position: relative;
top: -89px;
left: 15px;
width: 32em;
text-align: left;
}
}
.section-header {
border-top: 1px solid #e1e0e3;
margin-top: 1em;
padding-top: 1em;
}
.section-header.challenge {
border-bottom: 1px solid #e1e0e3;
margin-bottom: 1em;
padding-bottom: 1em;
}
.toggle-up, .toggle-down {
cursor: pointer;
}
.quest-boss {
margin: 0 auto;
}
.boss-health-bar {
width: 80%;
background-color: red;
height: 15px;
margin-bottom: .5em;
}
.collect-progress-bar {
background-color: #24cc8f;
height: 15px;
width: 80%;
}
</style>
<script>
import groupUtilities from 'client/mixins/groupsUtilities';
import { mapState } from 'client/libs/store';
import membersModal from './membersModal';
import ownedQuestsModal from './ownedQuestsModal';
import { TAVERN_ID } from 'common/script/constants';
import quests from 'common/script/content/quests';
import percent from 'common/script/libs/percent';
import groupFormModal from './groupFormModal';
import bCollapse from 'bootstrap-vue/lib/components/collapse';
import bCard from 'bootstrap-vue/lib/components/card';
import bToggle from 'bootstrap-vue/lib/directives/toggle';
import bTooltip from 'bootstrap-vue/lib/components/tooltip';
import deleteIcon from 'assets/svg/delete.svg';
import copyIcon from 'assets/svg/copy.svg';
import likeIcon from 'assets/svg/like.svg';
import likedIcon from 'assets/svg/liked.svg';
import reportIcon from 'assets/svg/report.svg';
import gemIcon from 'assets/svg/gem.svg';
import questIcon from 'assets/svg/quest.svg';
import challengeIcon from 'assets/svg/challenge.svg';
import informationIcon from 'assets/svg/information.svg';
import questBackground from 'assets/svg/quest-background-border.svg';
import upIcon from 'assets/svg/up.svg';
import downIcon from 'assets/svg/down.svg';
export default {
mixins: [groupUtilities],
props: ['guildId'],
components: {
membersModal,
ownedQuestsModal,
bCollapse,
bCard,
bTooltip,
groupFormModal,
},
directives: {
bToggle,
},
data () {
return {
guild: null,
group: null,
icons: Object.freeze({
like: likeIcon,
copy: copyIcon,
report: reportIcon,
delete: deleteIcon,
gem: gemIcon,
liked: likedIcon,
questIcon,
challengeIcon,
information: informationIcon,
questBackground,
upIcon,
downIcon,
}),
questData: {},
selectedQuest: {},
sections: {
quest: true,
description: true,
information: true,
challenges: true,
},
};
},
computed: {
...mapState({user: 'user.data'}),
isParty () {
return this.$route.path.startsWith('/party');
},
onPendingQuest () {
return Boolean(this.group.quest.key) && !this.group.quest.active;
},
onActiveQuest () {
return this.group.quest.active;
},
isLeader () {
return this.user._id === this.group.leader._id;
},
isMember () {
return this.isMemberOfGroup(this.user, this.guild);
return this.isMemberOfGroup(this.user, this.group);
},
canEditQuest () {
let isQuestLeader = this.group.quest && this.group.quest.leader === this.user._id;
return isQuestLeader;
},
isMemberOfPendingQuest () {
let userid = this.user._id;
let group = this.guild;
let group = this.group;
if (!group.quest || !group.quest.members) return false;
if (group.quest.active) return false; // quest is started, not pending
return userid in group.quest.members && group.quest.members[userid] !== false;
},
isMemberOfRunningQuest () {
let userid = this.user._id;
let group = this.guild;
let group = this.group;
if (!group.quest || !group.quest.members) return false;
if (!group.quest.active) return false; // quest is pending, not started
return group.quest.members[userid];
@@ -251,8 +493,28 @@ export default {
let userIsManager = Boolean(group.managers[userId]);
return leader || userIsManager;
},
hasChallenges () {
if (!this.group.challenges) return false;
return this.group.challenges.length === 0;
},
bossHpPercent () {
return percent(this.group.quest.progress.hp, this.questData.boss.hp);
},
},
created () {
if (this.isParty) {
this.groupId = 'party';
// @TODO: Set up from old client. Decide what we need and what we don't
// Check Desktop notifs
// Mark Chat seen
// Load members
// Load invites
// Load challenges
// Load group tasks for group plan
// Load approvals for group plan
} else if (this.$route.path.startsWith('/guilds/tavern')) {
this.groupId = TAVERN_ID;
}
this.fetchGuild();
},
watch: {
@@ -261,35 +523,28 @@ export default {
},
methods: {
updateGuild () {
this.$store.state.editingGroup = this.guild;
this.$store.state.editingGroup = this.group;
this.$root.$emit('show::modal', 'guild-form');
},
async fetchGuild () {
this.guild = await this.$store.dispatch('guilds:getGroup', {groupId: this.guildId});
this.guild.chat = [
{
text: '@CharacterName Vestibulum ultricies, lorem non bibendum consequat, nisl lacus semper nulla, hendrerit dignissim ipsum erat eu odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at aliquet urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla non est ut nisl interdum tincidunt in eu dui. Proin condimentum a.',
},
];
},
editGroup () {
// @TODO: Open up model
},
save () {
let newLeader = this.group._newLeader && this.group._newLeader._id;
if (newLeader) {
this.group.leader = newLeader;
let group = await this.$store.dispatch('guilds:getGroup', {groupId: this.groupId});
if (this.isParty) {
this.$store.party = group;
this.group = this.$store.party;
this.checkForAchievements();
this.questData = quests.quests[this.group.quest.key];
return;
}
// Groups.Group.update(group);
this.group = group;
},
deleteAllMessages () {
if (confirm(this.$t('confirmDeleteAllMessages'))) {
// User.clearPMs();
}
},
openStartQuestModal () {
this.$root.$emit('show::modal', 'owned-quests-modal');
},
// inviteOrStartParty (group) {
// Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Invite Friends'});
@@ -312,6 +567,114 @@ export default {
// },
// });
// },
checkForAchievements () {
// Checks if user's party has reached 2 players for the first time.
if (!this.user.achievements.partyUp && this.group.memberCount >= 2) {
// @TODO
// User.set({'achievements.partyUp':true});
// Achievement.displayAchievement('partyUp');
}
// Checks if user's party has reached 4 players for the first time.
if (!this.user.achievements.partyOn && this.group.memberCount >= 4) {
// @TODO
// User.set({'achievements.partyOn':true});
// Achievement.displayAchievement('partyOn');
}
},
// @TODO: This should be moved to notifications component
async join () {
if (this.group.cancelledPlan && !confirm(this.$t('aboutToJoinCancelledGroupPlan'))) {
return;
}
await this.$store.dispatch('guilds:join', {groupId: this.group._id});
// @TODO: Implement
// User.sync();
// Analytics.updateUser({'partyID': party.id});
// $rootScope.hardRedirect('/#/options/groups/party');
},
clickLeave () {
// Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Leave Party'});
// @TODO: Get challenges and ask to keep or remove
let keep = true;
this.leave(keep);
},
async leave (keepTasks) {
let keepChallenges = 'remain-in-challenges';
await this.$store.dispatch('guilds:leave', {
groupId: this.group._id,
keep: keepTasks,
keepChallenges,
});
// @TODO: Implement
// Analytics.updateUser({'partySize':null,'partyID':null});
// User.sync().then(function () {
// $rootScope.hardRedirect('/#/options/groups/party');
// });
},
// @TODO: Move to notificatin component
async leaveOldPartyAndJoinNewParty () {
let newPartyName = 'where does this come from';
if (!confirm(`Are you sure you want to delete your party and join${newPartyName}?`)) return;
let keepChallenges = 'remain-in-challenges';
await this.$store.dispatch('guilds:leave', {
groupId: this.group._id,
keep: false,
keepChallenges,
});
await this.$store.dispatch('guilds:join', {groupId: this.group._id});
},
// @TODO: Move to notificatin component
async reject () {
await this.$store.dispatch('guilds:rejectInvite', {groupId: this.group._id});
// User.sync();
},
clickStartQuest () {
// Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Start a Quest'});
let hasQuests = find(this.user.items.quests, (quest) => {
return quest > 0;
});
if (hasQuests) {
this.$root.$emit('show::modal', 'owned-quests-modal');
return;
}
// $rootScope.$state.go('options.inventory.quests');
},
async questCancel () {
if (!confirm(this.$t('sureCancel'))) return;
let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/cancel'});
this.group.quest = quest;
},
async questAbort () {
if (!confirm(this.$t('sureAbort'))) return;
if (!confirm(this.$t('doubleSureAbort'))) return;
let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/abort'});
this.group.quest = quest;
},
async questLeave () {
if (!confirm(this.$t('sureLeave'))) return;
let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/leave'});
this.group.quest = quest;
},
async questAccept () {
let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/accept'});
this.group.quest = quest;
},
async questForceStart () {
let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/force-start'});
this.group.quest = quest;
},
// @TODO: Move to notificaitons component?
async questReject () {
let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/reject'});
this.group.quest = quest;
},
},
};
</script>
website/client/components/guilds/membersModal.vue
+182 -53
View File
@@ -1,14 +1,46 @@
<template lang="pug">
div
button.btn.btn-primary(b-btn, @click="$root.$emit('show::modal','members-modal')") {{ $t('viewMembers') }}
.item-with-icon(@click="$root.$emit('show::modal','members-modal')")
.svg-icon.shield(v-html="icons.goldGuildBadgeIcon")
span.number {{group.memberCount}}
div(v-once) {{ $t('members') }}
b-modal#members-modal(:title="$t('createGuild')")
ul(v-for='member in members', :key='member')
li(@click='clickMember') {{member}}
button(@click='removeMember(member)', v-once) {{$t('remove')}}
button(@click='quickReply(member)', v-once) {{$t('message')}}
button(@click='addManager(member)', v-once) {{$t('addManager')}}
button(@click='removeManager(member)', v-once) {{$t('addManager')}}
b-modal#members-modal(:title="$t('createGuild')", size='lg')
.header-wrap(slot="modal-header")
.row
.col-6
h1(v-once) {{$t('members')}}
.col-6
button(type="button" aria-label="Close" class="close")
span(aria-hidden="true") ×
.row
.form-group.col-6
input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
.col-4.offset-2
span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)', :key='sortOption.value') {{sortOption.text}}
.row(v-for='member in members', :key='member', )
.col-8.offset-1
member-details(:member='member')
.col-3.actions
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(@click='sort(option.value)')
.svg-icon(v-html="icons.removeIcon")
| {{$t('removeMember')}}
b-dropdown-item(@click='sort(option.value)')
.svg-icon(v-html="icons.messageIcon")
| {{$t('sendMessage')}}
b-dropdown-item(@click='sort(option.value)')
.svg-icon(v-html="icons.starIcon")
| {{$t('promoteToLeader')}}
b-dropdown-item(@click='sort(option.value)')
.svg-icon(v-html="icons.starIcon")
| {{$t('addManager')}}
b-dropdown-item(@click='sort(option.value)')
.svg-icon(v-html="icons.removeIcon")
| {{$t('removeManager2')}}
.row-fluid.gradient
b-modal#remove-member(:title="$t('confirmRemoveMember')")
button(@click='confirmRemoveMember(member)', v-once) {{$t('remove')}}
@@ -17,25 +49,134 @@ div
button(@click='confirmRemoveMember(member)', v-once) {{$t('remove')}}
</template>
<style lang='scss' scoped>
header {
background-color: #edecee;
border-radius: 4px 4px 0 0;
}
.header-wrap {
width: 100%;
}
h1 {
color: #4f2a93;
}
.actions {
padding-top: 5em;
.action-icon {
margin-right: 1em;
}
}
#members-modal_modal_body {
padding: 0;
.col-8 {
margin-left: 0;
}
.member-details {
margin: 0;
}
.member-stats {
width: 382px;
height: 147px;
}
.gradient {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
height: 200px;
width: 100%;
position: absolute;
bottom: 0px;
}
}
.item-with-icon {
border-radius: 2px;
background-color: #ffffff;
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
padding: 1em;
text-align: center;
}
.svg-icon.shield, .svg-icon.gem {
width: 40px;
margin-right: 1em;
}
.number {
font-size: 22px;
font-weight: bold;
}
</style>
<script>
import bModal from 'bootstrap-vue/lib/components/modal';
import bDropdown from 'bootstrap-vue/lib/components/dropdown';
import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
import MemberDetails from '../memberDetails';
import removeIcon from 'assets/members/remove.svg';
import messageIcon from 'assets/members/message.svg';
import starIcon from 'assets/members/star.svg';
import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
export default {
props: ['group'],
components: {
bModal,
bDropdown,
bDropdownItem,
MemberDetails,
},
created () {
this.getMembers();
},
data () {
return {
members: ['one', 'two'],
members: [],
memberToRemove: '',
sortOptions: [
{
value: 'tier',
text: this.$t('tier'),
},
{
value: 'name',
text: this.$t('name'),
},
{
value: 'level',
text: this.$t('level'),
},
{
value: 'class',
text: this.$t('class'),
},
],
searchTerm: '',
icons: Object.freeze({
removeIcon,
messageIcon,
starIcon,
goldGuildBadgeIcon,
}),
};
},
methods: {
getMembers () {
// We should get members here via store if they are not loaded
async getMembers () {
let members = await this.$store.dispatch('members:getGroupMembers', {
groupId: this.group._id,
includeAllPublicFields: true,
});
this.members = members;
},
clickMember (uid, forceShow) {
async clickMember (uid, forceShow) {
let user = this.$store.state.user.data;
if (user._id === uid && !forceShow) {
@@ -48,59 +189,47 @@ export default {
return;
}
// $root.$emit('show::modal','members-modal')
// We need the member information up top here, but then we pass it down to the modal controller
// down below. Better way of handling this?
// Members.selectMember(uid)
// .then(function () {
// $rootScope.openModal('member', {controller: 'MemberModalCtrl', windowClass: 'profile-modal', size: 'lg'});
// });
await this.$store.dispatch('members:selectMember', {
memberId: uid,
});
this.$root.$emit('show::modal', 'members-modal');
},
removeMember (member) {
async removeMember (member) {
this.memberToRemove = member;
this.$root.$emit('show::modal', 'remove-member');
},
confirmRemoveMember (confirmation) {
async confirmRemoveMember (confirmation) {
if (!confirmation) {
this.memberToRemove = '';
return;
}
// Groups.Group.removeMember(
// $scope.removeMemberData.group._id,
// $scope.removeMemberData.member._id,
// $scope.removeMemberData.message
// ).then(function (response) {
// if($scope.removeMemberData.isMember){
// _.pull($scope.removeMemberData.group.members, $scope.removeMemberData.member);
// }else{
// _.pull($scope.removeMemberData.group.invites, $scope.removeMemberData.member);
// }
//
// $scope.removeMemberData = undefined;
// });
await this.$store.dispatch('members:removeMember', {
memberId: this.memberToRemove._id,
groupId: this.group._id,
message: this.removeMessage,
});
this.memberToRemove = '';
this.removeMessage = '';
},
quickReply (uid) {
async quickReply (uid) {
this.memberToReply = uid;
this.$root.$emit('show::modal', 'private-message');
// Members.selectMember(uid)
// .then(function (response) {
// $rootScope.openModal('private-message', {controller: 'MemberModalCtrl'});
// });
await this.$store.dispatch('members:selectMember', {
memberId: uid,
});
this.$root.$emit('show::modal', 'private-message'); // MemberModalCtrl
},
addManager () {
// Groups.Group.addManager(this.group._id, this.group._newManager)
// .then(function (response) {
// this.group._newManager = '';
// this.group.managers = response.data.data.managers;
// });
async addManager (memberId) {
await this.$store.dispatch('group:addManager', {
memberId,
});
},
removeManager (memberId) {
this.memberToReply = memberId;
// Groups.Group.removeManager(this.group._id, memberId)
// .then(function (response) {
// this.group._newManager = '';
// this.group.managers = response.data.data.managers;
// });
async removeManager (memberId) {
await this.$store.dispatch('group:removeManager', {
memberId,
});
},
},
};
website/client/components/guilds/myGuilds.vue
+24 -19
View File
@@ -4,7 +4,7 @@
.col-10.no-guilds.standard-page(v-if='filteredGuilds.length === 0')
.no-guilds-wrapper
img(src='~assets/guilds/grey-badge.svg')
.svg-icon(v-html='icons.greyBadge')
h2 {{$t('noGuildsTitle')}}
p {{$t('noGuildsParagraph1')}}
p {{$t('noGuildsParagraph2')}}
@@ -17,33 +17,33 @@
.float-right
span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="$t('sort')", right=true)
b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)') {{sortOption.text}}
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
.row
.col-md-12
public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-gem-bank='true')
</template>
<style lang="scss" scoped>
@import '~client/assets/scss/colors.scss';
.sort-select {
margin: 2em;
@import '~client/assets/scss/colors.scss';
.sort-select {
margin: 2em;
}
.no-guilds {
text-align: center;
color: $gray-200;
margin-top: 15em;
p {
font-size: 14px;
line-height: 1.43;
}
.no-guilds {
text-align: center;
color: $gray-200;
margin-top: 15em;
p {
font-size: 14px;
line-height: 1.43;
}
.no-guilds-wrapper {
width: 400px;
margin: 0 auto;
}
.no-guilds-wrapper {
width: 400px;
margin: 0 auto;
}
}
</style>
<script>
@@ -58,11 +58,16 @@ import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
import PublicGuildItem from './publicGuildItem';
import Sidebar from './sidebar';
import greyBadgeIcon from 'assets/svg/grey-badge.svg';
export default {
mixins: [groupUtilities],
components: { PublicGuildItem, MugenScroll, Sidebar, bFormSelect, bDropdown, bDropdownItem },
data () {
return {
icons: Object.freeze({
greyBadge: greyBadgeIcon,
}),
loading: false,
search: '',
filters: {},
website/client/components/guilds/ownedQuestsModal.vue
+54
View File
@@ -0,0 +1,54 @@
<template lang="pug">
div
b-modal#owned-quests-modal(title="Which quest do you want to start?", size='md', hide-footer=true)
.row.content
.quest(v-for='(value, key, index) in user.items.quests', :class="'inventory_quest_scroll_' + key", @click='selectQuest(key)')
button.btn.btn-primary(@click='confirm()') Confirm
start-quest-modal(:group='group', :selectedQuest='selectedQuest')
</template>
<style lang='scss' scoped>
@import '~client/assets/scss/colors.scss';
.content {
padding: 2em;
.quest {
margin-right: 1em;
margin-bottom: 1em;
display: inline-block;
}
}
</style>
<script>
import { mapState } from 'client/libs/store';
import bModal from 'bootstrap-vue/lib/components/modal';
import startQuestModal from './startQuestModal';
export default {
props: ['group'],
components: {
bModal,
startQuestModal,
},
data () {
return {
selectedQuest: {},
};
},
computed: {
...mapState({user: 'user.data'}),
},
methods: {
selectQuest (quest) {
this.selectedQuest = quest;
},
confirm () {
this.$root.$emit('show::modal', 'start-quest-modal');
this.$root.$emit('hide::modal', 'owned-quests-modal');
},
},
};
</script>
website/client/components/guilds/publicGuildItem.vue
+62 -73
View File
@@ -3,7 +3,7 @@
.card-block
.row
.col-md-2
img.icon.shield(src="~assets/guilds/gold-guild-badge.svg")
.svg-icon.shield(v-html="icons.goldGuildBadge")
.member-count {{guild.memberCount}}
.col-md-10
.row
@@ -15,7 +15,7 @@
button.btn.btn-danger(v-if='isMember && displayLeave' @click='leave()', v-once) {{ $t('leave') }}
button.btn.btn-success(v-if='!isMember' @click='join()', v-once) {{ $t('join') }}
div.item-with-icon(v-if='displayGemBank')
img(src="~assets/guilds/green-gem.svg")
.svg-icon(v-html="icons.gem")
span.count {{ guild.balance }}
div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
.row
@@ -26,89 +26,70 @@
</template>
<style lang="scss" scoped>
@import '~client/assets/scss/colors.scss';
@import '~client/assets/scss/colors.scss';
.card {
height: 260px;
border-radius: 4px;
background-color: $white;
box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
margin-bottom: 1rem;
.card {
height: 260px;
border-radius: 4px;
background-color: $white;
box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
margin-bottom: 1rem;
.category-label {
min-width: 100px;
border-radius: 100px;
background-color: $gray-600;
padding: .5em;
display: inline-block;
margin-right: .5em;
font-size: 12px;
font-weight: 500;
line-height: 1.33;
text-align: center;
color: $gray-300;
.recommend-text {
font-size: 12px;
font-style: italic;
line-height: 2;
color: $gray-300;
}
.cta-container {
margin: 0 auto;
margin-top: 4em;
}
.item-with-icon {
.svg-icon {
height: 37px;
}
.recommend-text {
font-size: 12px;
font-style: italic;
line-height: 2;
color: $gray-300;
}
.cta-container {
margin: 0 auto;
margin-top: 4em;
}
.shield {
width: 70px;
height: 76px;
margin: auto;
margin: 4em auto;
display: block;
background-size: cover;
width: 100%;
height: 100px;
}
.item-with-icon {
img {
height: 37px;
}
.count {
font-size: 20px;
height: 37px;
width: 37px;
margin-left: .2em;
}
}
.guild-bank {
font-size: 12px;
line-height: 1.33;
color: $gray-300;
}
.member-count {
position: relative;
top: -3.6em;
left: -.1em;
font-size: 28px;
font-weight: bold;
font-family: 'Roboto Condensed';
line-height: 1.2;
text-align: center;
color: #b36213;
.count {
font-size: 20px;
height: 37px;
width: 37px;
margin-left: .2em;
}
}
.shield {
width: 70px;
}
.guild-bank {
font-size: 12px;
line-height: 1.33;
color: $gray-300;
}
.member-count {
position: relative;
top: -3.6em;
left: -.1em;
font-size: 28px;
font-weight: bold;
font-family: 'Roboto Condensed';
line-height: 1.2;
text-align: center;
color: #b36213;
}
}
</style>
<script>
import { mapState } from 'client/libs/store';
import groupUtilities from 'client/mixins/groupsUtilities';
import findIndex from 'lodash/findIndex';
import gemIcon from 'assets/svg/gem.svg';
import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
export default {
mixins: [groupUtilities],
@@ -119,6 +100,14 @@ export default {
return this.isMemberOfGroup(this.user, this.guild);
},
},
data () {
return {
icons: Object.freeze({
gem: gemIcon,
goldGuildBadge: goldGuildBadgeIcon,
}),
};
},
methods: {
async join () {
// @TODO: This needs to be in the notifications where users will now accept invites
website/client/components/guilds/startQuestModal.vue
+156
View File
@@ -0,0 +1,156 @@
<template lang="pug">
b-modal#start-quest-modal(title="Empty", size='md', hide-footer=true, v-if='questData')
.quest-image(:class="'quest_' + questData.key")
h2 {{questData.text()}}
//- span by: Keith Holliday @TODO: Add author
p {{questData.notes()}}
div.quest-details
div(v-if=' questData.collect')
Strong {{$t('collect')}}: &nbsp;
span(v-for="(value, key, index) in questData.collect")
| {{$t('collectionItems', { number: questData.collect[key].count, items: questData.collect[key].text() })}}
div
Strong {{$t('collect')}}: &nbsp;
span
.svg-icon(v-html="icons.difficultyStarIcon")
div
button.btn.btn-primary(@click='questInit()') {{$t('inviteToPartyOrQuest')}}
div
p {{$t('inviteInformation')}}
.side-panel
h4.text-center {{$t('rewards')}}
.box
.svg-icon.rewards-icon(v-html="icons.starIcon")
strong {{questData.drop.exp}} {{$t('experience')}}
.box
.svg-icon.rewards-icon(v-html="icons.goldIcon")
strong {{questData.drop.gp}} {{$t('gold')}}
h4.text-center(v-if='questData.drop.items') {{$t('questOwnerRewards')}}
.box(v-for='item in questData.drop.items')
.rewards-icon(v-if='item.type === "quest"', :class="'quest_' + item.key")
.drop-rewards-icon(v-if='item.type === "gear"', :class="'shop_' + item.key")
strong.quest-reward-text {{item.text()}}
</template>
<style lang='scss' scoped>
@import '~client/assets/scss/colors.scss';
header {
background-color: $white !important;
border: none !important;
h5 {
text-indent: -99999px;
}
}
.quest-image {
margin: 0 auto;
margin-bottom: 1em;
}
.quest-details {
margin: 0 auto;
text-align: left;
width: 180px;
}
.btn-primary {
margin: 1em 0;
}
.side-panel {
background: #edecee;
position: absolute;
height: 460px;
width: 320px;
top: -1.8em;
left: 35em;
z-index: -1;
padding-top: 1em;
border-radius: 4px;
.drop-rewards-icon {
width: 35px;
height: 35px;
float: left;
}
.rewards-icon {
float: left;
width: 30px;
height: 30px;
svg {
width: 30px;
height: 30px;
}
}
.quest-reward-text {
font-size: 12px;
}
.box {
width: 220px;
height: 64px;
border-radius: 2px;
background-color: #ffffff;
margin: 0 auto;
margin-bottom: 1em;
padding: 1em;
}
}
</style>
<script>
import bModal from 'bootstrap-vue/lib/components/modal';
import quests from 'common/script/content/quests';
import copyIcon from 'assets/svg/copy.svg';
import greyBadgeIcon from 'assets/svg/grey-badge.svg';
import qrCodeIcon from 'assets/svg/qrCode.svg';
import facebookIcon from 'assets/svg/facebook.svg';
import twitterIcon from 'assets/svg/twitter.svg';
import starIcon from 'assets/svg/star.svg';
import goldIcon from 'assets/svg/gold.svg';
import difficultyStarIcon from 'assets/svg/difficulty-star.svg';
export default {
props: ['group', 'selectedQuest'],
components: {
bModal,
},
data () {
return {
icons: Object.freeze({
copy: copyIcon,
greyBadge: greyBadgeIcon,
qrCode: qrCodeIcon,
facebook: facebookIcon,
twitter: twitterIcon,
starIcon,
goldIcon,
difficultyStarIcon,
}),
shareUserIdShown: false,
};
},
computed: {
questData () {
return quests.quests[this.selectedQuest];
},
},
methods: {
async questInit () {
let key = this.selectedQuest;
// Analytics.updateUser({'partyID': party._id, 'partySize': party.memberCount});
let response = await this.$store.dispatch('guilds:inviteToQuest', {groupId: this.group._id, key});
let quest = response.data.data;
this.$store.party.quest = quest;
this.$root.$emit('hide::modal', 'start-quest-modal');
},
},
};
</script>