mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-14 02:02:19 +00:00
[WIP] Began adding tavern and party (#8814)
* Began adding tavern and party * Fixed routing conflicts and tavern constant * Updated button styles * Added not on quest block * Added no challenge block * Began adding quest details * Began updating group create modal to have party info * Added create party modal * Added share userid menu * Began adding toggle * Finished toggle styles * Added start quest modal * Ported over party ctrl code * Finished porting over party ctrl code * Added more quest actions * Added own quests modal and quest modal details * Fixed member modal styles and icons * Added many random style updates * Small text align fix * Removed extra update * Removed config and extra key * Removed client string extras
This commit is contained in:
Keith Holliday
GitHub
parent
6e1bbd05bc
commit
aee21edd5f
25 changed files with 1197 additions and 254 deletions
3
website/client/assets/svg/difficulty-star.svg
Normal file
3
website/client/assets/svg/difficulty-star.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="#FFB445" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 213 B |
3
website/client/assets/svg/down.svg
Normal file
3
website/client/assets/svg/down.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="13" viewBox="0 0 20 13">
|
||||
<path fill="none" fill-rule="evenodd" stroke="#C3C0C7" stroke-width="4" d="M18 2l-8 8-8-8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 188 B |
3
website/client/assets/svg/facebook.svg
Normal file
3
website/client/assets/svg/facebook.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
|
||||
<path fill="#878190" fill-rule="evenodd" d="M7.145 8.006H4.903V16H1.58V8.006H0V5.182h1.58V3.354C1.58 2.045 2.202 0 4.933 0l2.461.01v2.742H5.608c-.291 0-.705.145-.705.77v1.66h2.533l-.291 2.824z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 289 B |
3
website/client/assets/svg/message.svg
Normal file
3
website/client/assets/svg/message.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12">
|
||||
<path fill="#4F2A93" fill-rule="evenodd" d="M14 10H2V2l6 5 6-5v8zm0-10H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 235 B |
3
website/client/assets/svg/qrCode.svg
Normal file
3
website/client/assets/svg/qrCode.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="#878190" fill-rule="evenodd" d="M7 8h1V7H7v1zm4 5h2v-2h-2v2zm-8 0h2v-2H3v2zm8-8h2V3h-2v2zM3 5h2V3H3v2zm7 1h4V2h-4v4zm4 3h-1V8h-1V7h1v1h1v1zm-4 5h4v-4h-4v4zm-3 0v-1h1v-1H7v-1h1v-1H7V9H6V7h1V5h1V4h1v1H8v1h1v2h1V7h1v2H9V8H8v2h1v3H8v1H7zm-5 0h4v-4H2v4zm0-6h1V7h2v1H4v1H2V8zm0-2h4V2H2v4zm7-4v1H7V2h2zm5-2H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 477 B |
36
website/client/assets/svg/quest-background-border.svg
Normal file
36
website/client/assets/svg/quest-background-border.svg
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="424" height="80" viewBox="0 0 424 80">
|
||||
<defs>
|
||||
<path id="a" d="M0 0h424v80H0z"/>
|
||||
<path id="b" d="M0 0h10v10H0z"/>
|
||||
<path id="c" d="M414 0h10v10h-10z"/>
|
||||
<path id="d" d="M0 70h10v10H0z"/>
|
||||
<path id="e" d="M414 70h10v10h-10z"/>
|
||||
</defs>
|
||||
<g fill="#F9F9F9" fill-rule="evenodd">
|
||||
<g>
|
||||
<use fill="#F9F9F9" xlink:href="#a"/>
|
||||
<path stroke="#E1E0E3" stroke-width="4" d="M2 2h420v76H2z"/>
|
||||
<path stroke="#C3C0C7" stroke-width="2" d="M1 1h422v78H1z"/>
|
||||
</g>
|
||||
<g>
|
||||
<use fill="#EDECEE" xlink:href="#b"/>
|
||||
<path stroke="#E1E0E3" stroke-width="4" d="M2 2h6v6H2z"/>
|
||||
<path stroke="#C3C0C7" stroke-width="2" d="M1 1h8v8H1z"/>
|
||||
</g>
|
||||
<g>
|
||||
<use fill="#EDECEE" xlink:href="#c"/>
|
||||
<path stroke="#E1E0E3" stroke-width="4" d="M416 2h6v6h-6z"/>
|
||||
<path stroke="#C3C0C7" stroke-width="2" d="M415 1h8v8h-8z"/>
|
||||
</g>
|
||||
<g>
|
||||
<use fill="#EDECEE" xlink:href="#d"/>
|
||||
<path stroke="#E1E0E3" stroke-width="4" d="M2 72h6v6H2z"/>
|
||||
<path stroke="#C3C0C7" stroke-width="2" d="M1 71h8v8H1z"/>
|
||||
</g>
|
||||
<g>
|
||||
<use fill="#EDECEE" xlink:href="#e"/>
|
||||
<path stroke="#E1E0E3" stroke-width="4" d="M416 72h6v6h-6z"/>
|
||||
<path stroke="#C3C0C7" stroke-width="2" d="M415 71h8v8h-8z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
3
website/client/assets/svg/quest.svg
Normal file
3
website/client/assets/svg/quest.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20">
|
||||
<path fill="#C3C0C7" fill-rule="evenodd" d="M3 16h4v-1H3v1zm0-4h9v-1H3v1zm0-2h9V9H3v1zm0-5h9V4H3v1zm0 3h9V7H3v1zm10 7v3H2V2h11v13zm2 3h1v-1h-1v1zm0-15h1V2h-1v1zm3 2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3h-3V5h3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 340 B |
3
website/client/assets/svg/remove.svg
Normal file
3
website/client/assets/svg/remove.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="#878190" fill-rule="evenodd" d="M8 14a5.96 5.96 0 0 1-3.327-1.011l8.316-8.316A5.96 5.96 0 0 1 14 8c0 3.309-2.691 6-6 6M8 2a5.96 5.96 0 0 1 3.327 1.011l-8.316 8.316A5.96 5.96 0 0 1 2 8c0-3.309 2.691-6 6-6m0-2a8 8 0 1 0 0 16A8 8 0 0 0 8 0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 347 B |
10
website/client/assets/svg/star.svg
Normal file
10
website/client/assets/svg/star.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="#FFA623" d="M16 16l8-4-8-4-4-8-4 8-8 4 8 4 4 8z"/>
|
||||
<path fill="#FFF" d="M4.5 12l5-2.5L12 12zM12 19.5l-2.5-5L12 12zM19.5 12l-5 2.5L12 12zM12 4.5l2.5 5L12 12z" opacity=".25"/>
|
||||
<path fill="#BF7D1A" d="M19.5 12l-5-2.5L12 12z" opacity=".25"/>
|
||||
<path fill="#BF7D1A" d="M12 19.5l2.5-5L12 12z" opacity=".5"/>
|
||||
<path fill="#FFF" d="M4.5 12l5 2.5L12 12zM12 4.5l-2.5 5L12 12z" opacity=".5"/>
|
||||
<path fill="#FFF" d="M10.8 13.2L8.5 12l2.3-1.2L12 8.5l1.2 2.3 2.3 1.2-2.3 1.2-1.2 2.3z" opacity=".5"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 682 B |
3
website/client/assets/svg/twitter.svg
Normal file
3
website/client/assets/svg/twitter.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13">
|
||||
<path fill="#878190" fill-rule="evenodd" d="M14.362 3.238c.007.141.01.281.01.424 0 4.338-3.302 9.34-9.34 9.34A9.284 9.284 0 0 1 0 11.527c.257.029.518.045.783.045a6.576 6.576 0 0 0 4.076-1.404 3.288 3.288 0 0 1-3.065-2.28 3.312 3.312 0 0 0 1.481-.056A3.288 3.288 0 0 1 .642 4.613v-.041c.444.246.949.393 1.488.41A3.28 3.28 0 0 1 .67 2.25c0-.602.162-1.166.444-1.651a9.315 9.315 0 0 0 6.766 3.43A3.28 3.28 0 0 1 11.078 0c.943 0 1.797.398 2.395 1.035a6.565 6.565 0 0 0 2.085-.797 3.289 3.289 0 0 1-1.443 1.816A6.543 6.543 0 0 0 16 1.539a6.665 6.665 0 0 1-1.638 1.699"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 660 B |
3
website/client/assets/svg/up.svg
Normal file
3
website/client/assets/svg/up.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="13" viewBox="0 0 20 13">
|
||||
<path fill="none" fill-rule="evenodd" stroke="#A5A1AC" stroke-width="4" d="M18 11l-8-8-8 8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 189 B |
|
|
@ -59,15 +59,30 @@
|
|||
.no-party {
|
||||
.small-text {
|
||||
color: $header-color;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $white;
|
||||
margin-bottom: 4px;
|
||||
.no-party, .party-members {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 16px;
|
||||
.party-members {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.no-party {
|
||||
.small-text {
|
||||
color: $header-color;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $white;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -75,10 +90,12 @@
|
|||
<script>
|
||||
import { mapGetters, mapActions } from 'client/libs/store';
|
||||
import MemberDetails from './memberDetails';
|
||||
import createPartyModal from './guilds/createPartyModal';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MemberDetails,
|
||||
createPartyModal,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -102,6 +119,9 @@ export default {
|
|||
this.expandedMember = memberId;
|
||||
}
|
||||
},
|
||||
launchPartyModal () {
|
||||
this.$root.$emit('show::modal', 'create-party-modal');
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.getPartyMembers();
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
|
|||
router-link.dropdown-item(:to="{name: 'stable'}") {{ $t('stable') }}
|
||||
router-link.nav-item(tag="li", :to="{name: 'shops'}", exact)
|
||||
a.nav-link(v-once) {{ $t('shops') }}
|
||||
router-link.nav-item(tag="li", :to="{name: 'party'}", exact)
|
||||
router-link.nav-item.dropdown(:to="{name: 'party'}")
|
||||
a.nav-link(v-once) {{ $t('party') }}
|
||||
router-link.nav-item.dropdown(tag="li", :to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/guilds')}")
|
||||
a.nav-link(v-once) {{ $t('guilds') }}
|
||||
|
|
@ -41,7 +41,7 @@ nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
|
|||
router-link.dropdown.item-with-icon.item-user(:to="{name: 'avatar'}")
|
||||
.svg-icon(v-html="icons.user")
|
||||
.dropdown-menu.dropdown-menu-right.user-dropdown
|
||||
router-link.dropdown-item.edit-avatar(:to="{name: 'avatar'}")
|
||||
router-link.dropdown-item.edit-avatar(:to="{name: 'avatar'}")
|
||||
h3 {{ user.profile.name }}
|
||||
span.small-text {{ $t('editAvatar') }}
|
||||
router-link.dropdown-item(:to="{name: 'inbox'}") {{ $t('inbox') }}
|
||||
|
|
|
|||
121
website/client/components/guilds/createPartyModal.vue
Normal file
121
website/client/components/guilds/createPartyModal.vue
Normal 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>
|
||||
|
|
@ -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
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
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') }}
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
.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,13 +74,26 @@
|
|||
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
|
||||
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>
|
||||
|
|
@ -135,6 +152,7 @@ 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';
|
||||
|
||||
|
|
@ -146,6 +164,7 @@ export default {
|
|||
bFormCheckbox,
|
||||
bFormSelect,
|
||||
bTooltip,
|
||||
toggleSwitch,
|
||||
},
|
||||
data () {
|
||||
let data = {
|
||||
|
|
@ -211,6 +230,13 @@ export default {
|
|||
],
|
||||
showCategorySelect: false,
|
||||
members: ['one', 'two'],
|
||||
creatingParty: true,
|
||||
inviteMembers: false,
|
||||
newMemberToInvite: {
|
||||
value: '',
|
||||
type: '',
|
||||
},
|
||||
membersToInvite: [],
|
||||
};
|
||||
|
||||
let hashedCategories = {};
|
||||
|
|
@ -242,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;
|
||||
},
|
||||
|
|
@ -271,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';
|
||||
|
|
@ -302,6 +340,8 @@ export default {
|
|||
privateGuild: true,
|
||||
allowGuildInvationsFromNonMembers: true,
|
||||
};
|
||||
|
||||
this.$root.$emit('hide::modal', 'guild-form');
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,25 +1,21 @@
|
|||
<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
|
||||
.svg-icon.shield(v-html="icons.goldGuildBadge")
|
||||
span.number {{guild.memberCount}}
|
||||
div(v-once) {{ $t('guildMembers') }}
|
||||
.col-6
|
||||
.item-with-icon
|
||||
.svg-icon.gem(v-html="icons.gem")
|
||||
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') }}
|
||||
|
|
@ -34,7 +30,7 @@
|
|||
.col-md-2
|
||||
.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
|
||||
|
|
@ -62,146 +58,336 @@
|
|||
.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(: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';
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.sidebar {
|
||||
background-color: $gray-600;
|
||||
}
|
||||
.button-container {
|
||||
margin-bottom: 1em;
|
||||
|
||||
.card {
|
||||
margin: 2em 0;
|
||||
padding: 1em;
|
||||
|
||||
h3.leader {
|
||||
color: $purple-200;
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
.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 {
|
||||
margin: 2em 0;
|
||||
padding: 1em;
|
||||
|
||||
h3.leader {
|
||||
color: $purple-200;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
line-height: 1.43;
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
.guild-background {
|
||||
background-image: linear-gradient(to bottom, rgba($gray-600, 0), $gray-600);
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
border: solid 1px $gray-400;
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
line-height: 1.43;
|
||||
color: $gray-50;
|
||||
color: $gray-300;
|
||||
padding: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.guild-background {
|
||||
background-image: linear-gradient(to bottom, rgba($gray-600, 0), $gray-600);
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
border: solid 1px $gray-400;
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
line-height: 1.43;
|
||||
color: $gray-300;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.svg-icon.shield, .svg-icon.gem {
|
||||
width: 40px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.icon-row {
|
||||
width: 200px;
|
||||
margin-top: 3em;
|
||||
margin-right: 3em;
|
||||
|
||||
.number {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-row {
|
||||
margin-top: 2em;
|
||||
|
||||
.send-chat {
|
||||
margin-top: -3.5em;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
.svg-icon.shield, .svg-icon.gem {
|
||||
width: 40px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.hr {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid $gray-500;
|
||||
text-align: center;
|
||||
margin: 2em 0;
|
||||
}
|
||||
.title-details {
|
||||
padding-top: 1em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.hr-middle {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto Condensed';
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: $gray-200;
|
||||
background-color: $gray-700;
|
||||
padding: .2em;
|
||||
margin-top: .2em;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
.icon-row {
|
||||
margin-top: 1em;
|
||||
|
||||
span.action {
|
||||
font-size: 14px;
|
||||
line-height: 1.33;
|
||||
color: $gray-200;
|
||||
font-weight: 500;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.number {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
span.action .icon {
|
||||
margin-right: .3em;
|
||||
}
|
||||
.chat-row {
|
||||
margin-top: 2em;
|
||||
|
||||
.send-chat {
|
||||
margin-top: -3.5em;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.hr {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid $gray-500;
|
||||
text-align: center;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.hr-middle {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto Condensed';
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: $gray-200;
|
||||
background-color: $gray-700;
|
||||
padding: .2em;
|
||||
margin-top: .2em;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
span.action {
|
||||
font-size: 14px;
|
||||
line-height: 1.33;
|
||||
color: $gray-200;
|
||||
font-weight: 500;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
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';
|
||||
|
|
@ -209,43 +395,85 @@ 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 goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.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,
|
||||
goldGuildBadge: goldGuildBadgeIcon,
|
||||
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];
|
||||
|
|
@ -265,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: {
|
||||
|
|
@ -275,23 +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.',
|
||||
},
|
||||
];
|
||||
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;
|
||||
}
|
||||
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'});
|
||||
|
||||
|
|
@ -314,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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<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')", size='lg')
|
||||
.header-wrap(slot="modal-header")
|
||||
|
|
@ -19,24 +22,25 @@ div
|
|||
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(:user='member')
|
||||
member-details(:member='member')
|
||||
.col-3.actions
|
||||
b-dropdown(:text="$t('sort')", right=true)
|
||||
b-dropdown-item(@click='sort(option.value)')
|
||||
img.action-icon(src='~assets/members/remove.svg')
|
||||
.svg-icon(v-html="icons.removeIcon")
|
||||
| {{$t('removeMember')}}
|
||||
b-dropdown-item(@click='sort(option.value)')
|
||||
img.action-icon(src='~assets/members/message.svg')
|
||||
.svg-icon(v-html="icons.messageIcon")
|
||||
| {{$t('sendMessage')}}
|
||||
b-dropdown-item(@click='sort(option.value)')
|
||||
img.action-icon(src='~assets/members/star.svg')
|
||||
.svg-icon(v-html="icons.starIcon")
|
||||
| {{$t('promoteToLeader')}}
|
||||
b-dropdown-item(@click='sort(option.value)')
|
||||
img.action-icon(src='~assets/members/star.svg')
|
||||
.svg-icon(v-html="icons.starIcon")
|
||||
| {{$t('addManager')}}
|
||||
b-dropdown-item(@click='sort(option.value)')
|
||||
img.action-icon(src='~assets/members/remove.svg')
|
||||
.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')}}
|
||||
|
|
@ -45,7 +49,7 @@ div
|
|||
button(@click='confirmRemoveMember(member)', v-once) {{$t('remove')}}
|
||||
</template>
|
||||
|
||||
<style lang='scss'>
|
||||
<style lang='scss' scoped>
|
||||
header {
|
||||
background-color: #edecee;
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
|
@ -66,6 +70,49 @@ div
|
|||
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>
|
||||
|
|
@ -74,6 +121,10 @@ 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'],
|
||||
|
|
@ -109,6 +160,12 @@ export default {
|
|||
},
|
||||
],
|
||||
searchTerm: '',
|
||||
icons: Object.freeze({
|
||||
removeIcon,
|
||||
messageIcon,
|
||||
starIcon,
|
||||
goldGuildBadgeIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
54
website/client/components/guilds/ownedQuestsModal.vue
Normal file
54
website/client/components/guilds/ownedQuestsModal.vue
Normal 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>
|
||||
156
website/client/components/guilds/startQuestModal.vue
Normal file
156
website/client/components/guilds/startQuestModal.vue
Normal 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')}}:
|
||||
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')}}:
|
||||
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>
|
||||
|
|
@ -4,8 +4,9 @@
|
|||
.toggle-switch.float-left
|
||||
input.toggle-switch-checkbox(
|
||||
type='checkbox', :id="id",
|
||||
@change="$emit('change', $event.target.checked)",
|
||||
:checked="checked",
|
||||
@change="handleChange",
|
||||
:checked="isChecked",
|
||||
:value="value",
|
||||
)
|
||||
label.toggle-switch-label(:for="id")
|
||||
span.toggle-switch-inner
|
||||
|
|
@ -13,88 +14,88 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.toggle-switch-container {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.toggle-switch-container {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
user-select: none;
|
||||
margin-left: 9px;
|
||||
}
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
user-select: none;
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
.toggle-switch-description {
|
||||
height: 20px;
|
||||
border-bottom: 1px dashed $gray-200;
|
||||
}
|
||||
.toggle-switch-description {
|
||||
height: 20px;
|
||||
border-bottom: 1px dashed $gray-200;
|
||||
}
|
||||
|
||||
.toggle-switch-checkbox {
|
||||
display: none;
|
||||
}
|
||||
.toggle-switch-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-switch-label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border-radius: 100px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.toggle-switch-label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border-radius: 100px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.toggle-switch-inner {
|
||||
display: block;
|
||||
width: 200%;
|
||||
margin-left: -100%;
|
||||
transition: margin 0.3s ease-in 0s;
|
||||
}
|
||||
.toggle-switch-inner {
|
||||
display: block;
|
||||
width: 200%;
|
||||
margin-left: -100%;
|
||||
transition: margin 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
.toggle-switch-inner:before, .toggle-switch-inner:after {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
.toggle-switch-inner:before, .toggle-switch-inner:after {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toggle-switch-inner:before {
|
||||
content: "";
|
||||
padding-left: 10px;
|
||||
background-color: $purple-400;
|
||||
}
|
||||
.toggle-switch-inner:before {
|
||||
content: "";
|
||||
padding-left: 10px;
|
||||
background-color: $purple-400;
|
||||
}
|
||||
|
||||
.toggle-switch-inner:after {
|
||||
content: "";
|
||||
padding-right: 10px;
|
||||
background-color: $gray-200;
|
||||
text-align: right;
|
||||
}
|
||||
.toggle-switch-inner:after {
|
||||
content: "";
|
||||
padding-right: 10px;
|
||||
background-color: $gray-200;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.toggle-switch-switch {
|
||||
box-shadow: 0 1px 2px 0 rgba($black, 0.32);
|
||||
display: block;
|
||||
width: 20px;
|
||||
margin: -2px;
|
||||
margin-top: 1px;
|
||||
height: 20px;
|
||||
background: $white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 22px;
|
||||
border-radius: 100px;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
.toggle-switch-switch {
|
||||
box-shadow: 0 1px 2px 0 rgba($black, 0.32);
|
||||
display: block;
|
||||
width: 20px;
|
||||
margin: -2px;
|
||||
margin-top: 1px;
|
||||
height: 20px;
|
||||
background: $white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 22px;
|
||||
border-radius: 100px;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-inner {
|
||||
margin-left: 0;
|
||||
}
|
||||
.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-inner {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
|
||||
right: 0px;
|
||||
}
|
||||
.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
|
||||
right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
@ -105,7 +106,14 @@ export default {
|
|||
id: Math.random(),
|
||||
};
|
||||
},
|
||||
model: {
|
||||
prop: 'checked',
|
||||
event: 'change',
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
|
|
@ -115,5 +123,15 @@ export default {
|
|||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isChecked () {
|
||||
return this.checked === this.value;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleChange ({ target: { checked } }) {
|
||||
this.$emit('change', checked ? this.value : this.uncheckedValue);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const InboxConversationPage = () => import(/* webpackChunkName: "inbox" */ './co
|
|||
|
||||
// Guilds
|
||||
const GuildIndex = () => import(/* webpackChunkName: "guilds" */ './components/guilds/index');
|
||||
const TavernPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/tavern');
|
||||
// const TavernPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/tavern');
|
||||
const MyGuilds = () => import(/* webpackChunkName: "guilds" */ './components/guilds/myGuilds');
|
||||
const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/discovery');
|
||||
const GuildPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/guild');
|
||||
|
|
@ -56,11 +56,12 @@ export default new VueRouter({
|
|||
],
|
||||
},
|
||||
{ name: 'shops', path: '/shops', component: Page },
|
||||
{ name: 'party', path: '/party', component: GuildPage },
|
||||
{
|
||||
path: '/guilds',
|
||||
component: GuildIndex,
|
||||
children: [
|
||||
{ name: 'tavern', path: 'tavern', component: TavernPage },
|
||||
{ name: 'tavern', path: 'tavern', component: GuildPage },
|
||||
{
|
||||
name: 'myGuilds',
|
||||
path: 'myGuilds',
|
||||
|
|
@ -80,7 +81,6 @@ export default new VueRouter({
|
|||
],
|
||||
},
|
||||
{ name: 'challenges', path: 'challenges', component: Page },
|
||||
{ name: 'party', path: 'party', component: Page },
|
||||
{
|
||||
path: '/user',
|
||||
component: ParentPage,
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import * as tasks from './tasks';
|
|||
import * as guilds from './guilds';
|
||||
import * as party from './party';
|
||||
import * as members from './members';
|
||||
import * as quests from './quests';
|
||||
|
||||
// Actions should be named as 'actionName' and can be accessed as 'namespace:actionName'
|
||||
// Example: fetch in user.js -> 'user:fetch'
|
||||
|
|
@ -17,6 +18,7 @@ const actions = flattenAndNamespace({
|
|||
guilds,
|
||||
party,
|
||||
members,
|
||||
quests,
|
||||
});
|
||||
|
||||
export default actions;
|
||||
|
|
|
|||
16
website/client/store/actions/quests.js
Normal file
16
website/client/store/actions/quests.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import axios from 'axios';
|
||||
// export async function initQuest (store) {
|
||||
// }
|
||||
|
||||
export async function sendAction (store, payload) {
|
||||
// Analytics.updateUser({
|
||||
// partyID: party._id,
|
||||
// partySize: party.memberCount
|
||||
// });
|
||||
let response = await axios.post(`/api/v3/groups/${payload.groupId}/${payload.action}`);
|
||||
|
||||
// @TODO: Update user?
|
||||
// User.sync();
|
||||
|
||||
return response.data.quest || response.data.data;
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@ export default function () {
|
|||
user: asyncResourceFactory(),
|
||||
tasks: asyncResourceFactory(), // user tasks
|
||||
party: {
|
||||
quest: {},
|
||||
members: asyncResourceFactory(),
|
||||
},
|
||||
myGuilds: [],
|
||||
|
|
|
|||
|
|
@ -71,8 +71,8 @@
|
|||
"silverTier": "Silver Tier",
|
||||
"bronzeTier": "Bronze Tier",
|
||||
"privacySettings": "Privacy Settings",
|
||||
"onlyLeaderCreatesChallenges": "Only the Guild Leader can create Guild Challenges",
|
||||
"guildLeaderCantBeMessaged": "Guild Leader can not be messaged directly",
|
||||
"onlyLeaderCreatesChallenges": "Only the Leader can create Challenges",
|
||||
"guildLeaderCantBeMessaged": "Leader can not be messaged directly",
|
||||
"privateGuild": "Private Guild",
|
||||
"allowGuildInvationsFromNonMembers": "Allow Guild invitations from non-members",
|
||||
"charactersRemaining": "characters remaining",
|
||||
|
|
@ -88,6 +88,30 @@
|
|||
"removeManager2": "Remove Manager",
|
||||
"promoteToLeader": "Promote to Leader",
|
||||
"inviteFriendsParty": "Inviting friends to your party will grant you an exclusive <br/> Quest Scroll to battle the Basi-List together!",
|
||||
"upgradeParty": "Upgrade Party",
|
||||
"questDetailsTitle": "Quest Details",
|
||||
"yourNotOnQuest": "You're not on a quest",
|
||||
"questDescription": "Quests allow players to focus on long-term, in-game goals with the members of their party.",
|
||||
"haveNoChallenges": "You don’t have any Challenges",
|
||||
"challengeDescription": "Challenges are community events in which players compete and earn prizes by completing a group of related tasks.",
|
||||
"createParty": "Create a Party",
|
||||
"partyDescriptionPlaceHolder": "This is our party’s description. It describes what we do in this party. If you want to learn more about what we do in this party, read the description. Party on.",
|
||||
"inviteMembersNow": "Would you like to invite users now?",
|
||||
"playInPartyTitle": "Play Habitica in a Party!",
|
||||
"playInPartyDescription": "Take on amazing quests with friends or on your own. Battle monsters, create Challenges, and help yourself stay accountable through Parties.",
|
||||
"startYourOwnPartyTitle": "Start your own Party",
|
||||
"startYourOwnPartyDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan sagittis tellus tempor euismod. Sed imperdiet facilisis tortor in malesuada.",
|
||||
"shartUserId": "Share User ID",
|
||||
"wantToJoinPartyTitle": "Want to join a Party?",
|
||||
"wantToJoinPartyDescription": "Aenean non mattis eros, quis semper ipsum. Phasellus vulputate in nibh et suscipit. In hac habitasse platea dictumst.",
|
||||
"copy": "Copy",
|
||||
"lookingForGroup": "Looking for Group",
|
||||
"inviteToPartyOrQuest": "Invite Party to Quest",
|
||||
"inviteInformation": "Clicking “Invite” will send an invitation to your party members. When all members have accepted or denied, the Quest begins.",
|
||||
"questOwnerRewards": "Quest Owner Rewards",
|
||||
"guildInformationPlaceHolder": "This is our party’s description. It describes what we do in this party. If you want to learn more about what we do in this party, read the description. Party on.",
|
||||
"updateParty": "Update Party",
|
||||
"upgrade": "Upgrade",
|
||||
"showAllAnimals": "Show All <%= color %> <%= type %>",
|
||||
"showLessAnimals": "Show Less <%= color %> <%= type %>",
|
||||
"quickInventory": "Quick Inventory",
|
||||
|
|
|
|||
Loading…
Reference in a new issue