mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-16 14:17:22 +01:00
1348 lines
33 KiB
Vue
1348 lines
33 KiB
Vue
<template>
|
|
<b-modal
|
|
id="avatar-modal"
|
|
title
|
|
:size="editing ? 'lg' : 'md'"
|
|
:hide-header="true"
|
|
:hide-footer="true"
|
|
:modal-class="{'page-2':modalPage > 1 && !editing}"
|
|
:no-close-on-esc="!editing"
|
|
:no-close-on-backdrop="!editing"
|
|
>
|
|
<span
|
|
v-if="editing"
|
|
class="close-icon svg-icon inline icon-10"
|
|
@click="close()"
|
|
v-html="icons.close"
|
|
></span>
|
|
<div
|
|
v-if="modalPage === 1 && !editing"
|
|
class="section row welcome-section"
|
|
>
|
|
<div class="col-6 offset-3 text-center">
|
|
<h3 v-once>
|
|
{{ $t('welcomeTo') }}
|
|
</h3>
|
|
<div
|
|
class="svg-icon logo"
|
|
v-html="icons.logoPurple"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="modalPage > 1"
|
|
class="avatar-section row"
|
|
:class="{'page-2': modalPage === 2}"
|
|
>
|
|
<div class="col-6 offset-3">
|
|
<div
|
|
v-if="!editing"
|
|
class="user-creation-bg"
|
|
></div>
|
|
<avatar
|
|
:member="user"
|
|
:avatar-only="!editing"
|
|
:class="{'edit-avatar': editing}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="modalPage === 2"
|
|
class="section"
|
|
:class="{'edit-modal': editing}"
|
|
>
|
|
<!-- @TODO Implement in V2 .section.row.col-12.text-center
|
|
button.btn.btn-secondary(v-once) {{$t('randomize')}}-->
|
|
<div
|
|
id="options-nav"
|
|
class="container section text-center customize-menu"
|
|
>
|
|
<div class="row">
|
|
<div
|
|
class="menu-container"
|
|
:class="{
|
|
'col-3': !editing,
|
|
'col-2 offset-1': editing,
|
|
active: activeTopPage === 'body'}"
|
|
@click="changeTopPage('body', 'size')"
|
|
>
|
|
<div class="menu-item">
|
|
<div
|
|
class="svg-icon"
|
|
v-html="icons.bodyIcon"
|
|
></div>
|
|
</div>
|
|
<strong v-once>{{ $t('bodyBody') }}</strong>
|
|
<div class="indicator"></div>
|
|
</div>
|
|
<div
|
|
class="menu-container"
|
|
:class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'skin'}"
|
|
@click="changeTopPage('skin', 'color')"
|
|
>
|
|
<div class="menu-item">
|
|
<div
|
|
class="svg-icon"
|
|
v-html="icons.skinIcon"
|
|
></div>
|
|
</div>
|
|
<strong v-once>{{ $t('skin') }}</strong>
|
|
<div class="indicator"></div>
|
|
</div>
|
|
<div
|
|
class="menu-container"
|
|
:class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'hair'}"
|
|
@click="changeTopPage('hair', 'color')"
|
|
>
|
|
<div class="menu-item">
|
|
<div
|
|
class="svg-icon"
|
|
v-html="icons.hairIcon"
|
|
></div>
|
|
</div>
|
|
<strong v-once>{{ $t('hair') }}</strong>
|
|
<div class="indicator"></div>
|
|
</div>
|
|
<div
|
|
class="menu-container"
|
|
:class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'extra'}"
|
|
@click="changeTopPage('extra', 'glasses')"
|
|
>
|
|
<div class="menu-item">
|
|
<div
|
|
class="svg-icon"
|
|
v-html="icons.accessoriesIcon"
|
|
></div>
|
|
</div>
|
|
<strong v-once>{{ $t('extra') }}</strong>
|
|
<div class="indicator"></div>
|
|
</div>
|
|
<div
|
|
v-if="editing"
|
|
class="menu-container col-2"
|
|
:class="{active: activeTopPage === 'backgrounds'}"
|
|
@click="changeTopPage('backgrounds', '2020')"
|
|
>
|
|
<div class="menu-item">
|
|
<div
|
|
class="svg-icon"
|
|
v-html="icons.backgroundsIcon"
|
|
></div>
|
|
</div>
|
|
<strong v-once>{{ $t('backgrounds') }}</strong>
|
|
<div class="indicator"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<body-settings
|
|
v-if="activeTopPage === 'body'"
|
|
:editing="editing"
|
|
/>
|
|
<skin-settings
|
|
v-if="activeTopPage === 'skin'"
|
|
:editing="editing"
|
|
/>
|
|
<hairSettings
|
|
v-if="activeTopPage === 'hair'"
|
|
:editing="editing"
|
|
/>
|
|
<extraSettings
|
|
v-if="activeTopPage === 'extra'"
|
|
:editing="editing"
|
|
/>
|
|
<div
|
|
v-if="activeTopPage === 'backgrounds'"
|
|
id="backgrounds"
|
|
class="section container customize-section"
|
|
>
|
|
<div class="row title-row">
|
|
<toggle-switch
|
|
v-model="filterBackgrounds"
|
|
class="backgroundFilterToggle"
|
|
:label="'Hide locked backgrounds'"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="!filterBackgrounds"
|
|
class="row text-center title-row"
|
|
>
|
|
<strong>{{ backgroundShopSets[0].text }}</strong>
|
|
</div>
|
|
<div
|
|
v-if="!filterBackgrounds"
|
|
class="row title-row"
|
|
>
|
|
<div
|
|
v-if="showPlainBackgroundBlurb(
|
|
backgroundShopSets[0].identifier, backgroundShopSets[0].items
|
|
)"
|
|
class="col-12"
|
|
>
|
|
{{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
|
|
</div>
|
|
<div
|
|
v-for="bg in backgroundShopSets[0].items"
|
|
:key="bg.key"
|
|
class="col-2"
|
|
:popover-title="bg.text"
|
|
:popover="bg.notes"
|
|
popover-trigger="mouseenter"
|
|
@click="unlock('background.' + bg.key)"
|
|
>
|
|
<div
|
|
class="incentive-background"
|
|
:class="[`background_${bg.key}`]"
|
|
>
|
|
<div class="small-rectangle"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<sub-menu
|
|
class="text-center"
|
|
:items="bgSubMenuItems"
|
|
:active-sub-page="activeSubPage"
|
|
@changeSubPage="changeSubPage($event)"
|
|
/>
|
|
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
|
<div
|
|
v-for="(sets, key) in backgroundShopSetsByYear"
|
|
v-if="!filterBackgrounds"
|
|
:key="key"
|
|
class="row customize-menu"
|
|
>
|
|
<!-- eslint-enable vue/no-use-v-if-with-v-for -->
|
|
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
|
<div
|
|
v-for="set in sets"
|
|
v-if="activeSubPage === key"
|
|
:key="set.identifier"
|
|
class="row background-set"
|
|
>
|
|
<!-- eslint-enable vue/no-use-v-if-with-v-for -->
|
|
<div class="col-8 offset-2 text-center set-title">
|
|
<strong>{{ set.text }}</strong>
|
|
</div>
|
|
<div
|
|
v-for="bg in set.items"
|
|
:key="bg.key"
|
|
class="col-4 text-center customize-option background-button"
|
|
:popover-title="bg.text"
|
|
:popover="bg.notes"
|
|
popover-trigger="mouseenter"
|
|
@click="!user.purchased.background[bg.key]
|
|
? backgroundSelected(bg) : unlock('background.' + bg.key)"
|
|
>
|
|
<div
|
|
class="background"
|
|
:class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
|
|
></div>
|
|
<i
|
|
v-if="!user.purchased.background[bg.key]"
|
|
class="glyphicon glyphicon-lock"
|
|
></i>
|
|
<div
|
|
v-if="!user.purchased.background[bg.key]"
|
|
class="purchase-background single"
|
|
>
|
|
<div
|
|
class="svg-icon gem"
|
|
v-html="icons.gem"
|
|
></div>
|
|
<span class="price">7</span>
|
|
</div>
|
|
<span
|
|
v-if="!user.purchased.background[bg.key]"
|
|
class="badge badge-pill badge-item badge-svg"
|
|
:class="{
|
|
'item-selected-badge': isBackgroundPinned(bg),
|
|
'hide': !isBackgroundPinned(bg)}"
|
|
@click.prevent.stop="togglePinned(bg)"
|
|
>
|
|
<span
|
|
class="svg-icon inline icon-12 color"
|
|
v-html="icons.pin"
|
|
></span>
|
|
</span>
|
|
</div>
|
|
<div
|
|
v-if="!ownsSet('background', set.items) && set.identifier !== 'incentiveBackgrounds'"
|
|
class="purchase-background set"
|
|
@click="unlock(setKeys('background', set.items))"
|
|
>
|
|
<span class="label">{{ $t('purchaseAll') }}</span>
|
|
<div
|
|
class="svg-icon gem"
|
|
v-html="icons.gem"
|
|
></div>
|
|
<span class="price">15</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="filterBackgrounds"
|
|
class="row customize-menu"
|
|
>
|
|
<div
|
|
v-for="(bg) in ownedBackgrounds"
|
|
:key="bg.key"
|
|
class="col-4 text-center customize-option background-button"
|
|
:popover-title="bg.text"
|
|
:popover="bg.notes"
|
|
popover-trigger="mouseenter"
|
|
@click="unlock('background.' + bg.key)"
|
|
>
|
|
<div
|
|
class="background"
|
|
:class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="modalPage === 3 && !editing"
|
|
class="container interests-section"
|
|
>
|
|
<div class="section row">
|
|
<div class="col-12 text-center">
|
|
<h2>{{ $t('wantToWorkOn') }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-6">
|
|
<div class="task-option">
|
|
<div class="custom-control custom-checkbox">
|
|
<input
|
|
id="work"
|
|
v-model="taskCategories"
|
|
class="custom-control-input"
|
|
type="checkbox"
|
|
value="work"
|
|
>
|
|
<label
|
|
v-once
|
|
class="custom-control-label"
|
|
for="work"
|
|
>{{ $t('work') }}</label>
|
|
</div>
|
|
</div>
|
|
<div class="task-option">
|
|
<div class="custom-control custom-checkbox">
|
|
<input
|
|
id="excercise"
|
|
v-model="taskCategories"
|
|
class="custom-control-input"
|
|
type="checkbox"
|
|
value="exercise"
|
|
>
|
|
<label
|
|
v-once
|
|
class="custom-control-label"
|
|
for="excercise"
|
|
>{{ $t('exercise') }}</label>
|
|
</div>
|
|
</div>
|
|
<div class="task-option">
|
|
<div class="custom-control custom-checkbox">
|
|
<input
|
|
id="health_wellness"
|
|
v-model="taskCategories"
|
|
class="custom-control-input"
|
|
type="checkbox"
|
|
value="health_wellness"
|
|
>
|
|
<label
|
|
v-once
|
|
class="custom-control-label"
|
|
for="health_wellness"
|
|
>{{ $t('health_wellness') }}</label>
|
|
</div>
|
|
</div>
|
|
<div class="task-option">
|
|
<div class="custom-control custom-checkbox">
|
|
<input
|
|
id="school"
|
|
v-model="taskCategories"
|
|
class="custom-control-input"
|
|
type="checkbox"
|
|
value="school"
|
|
>
|
|
<label
|
|
v-once
|
|
class="custom-control-label"
|
|
for="school"
|
|
>{{ $t('school') }}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="task-option">
|
|
<div class="custom-control custom-checkbox">
|
|
<input
|
|
id="chores"
|
|
v-model="taskCategories"
|
|
class="custom-control-input"
|
|
type="checkbox"
|
|
value="chores"
|
|
>
|
|
<label
|
|
v-once
|
|
class="custom-control-label"
|
|
for="chores"
|
|
>{{ $t('chores') }}</label>
|
|
</div>
|
|
</div>
|
|
<div class="task-option">
|
|
<div class="custom-control custom-checkbox">
|
|
<input
|
|
id="creativity"
|
|
v-model="taskCategories"
|
|
class="custom-control-input"
|
|
type="checkbox"
|
|
value="creativity"
|
|
>
|
|
<label
|
|
v-once
|
|
class="custom-control-label"
|
|
for="creativity"
|
|
>{{ $t('creativity') }}</label>
|
|
</div>
|
|
</div>
|
|
<div class="task-option">
|
|
<div class="custom-control custom-checkbox">
|
|
<input
|
|
id="self_care"
|
|
v-model="taskCategories"
|
|
class="custom-control-input"
|
|
type="checkbox"
|
|
value="self_care"
|
|
>
|
|
<label
|
|
v-once
|
|
class="custom-control-label"
|
|
for="self_care"
|
|
>{{ $t('self_care') }}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="!editing"
|
|
class="section d-flex justify-content-center justin-outer-section"
|
|
:class="{top: modalPage > 1}"
|
|
>
|
|
<div class="justin-section d-flex align-items-center">
|
|
<div class="featured-label">
|
|
<span class="rectangle"></span>
|
|
<span class="text">Justin</span>
|
|
<span class="rectangle"></span>
|
|
</div>
|
|
<div class="justin-message">
|
|
<div
|
|
class="corner-decoration"
|
|
:style="{top: '-2px', right: '-2px'}"
|
|
></div>
|
|
<div
|
|
class="corner-decoration"
|
|
:style="{top: '-2px', left: '-2px'}"
|
|
></div>
|
|
<div
|
|
class="corner-decoration"
|
|
:style="{bottom: '-2px', right: '-2px'}"
|
|
></div>
|
|
<div
|
|
class="corner-decoration"
|
|
:style="{bottom: '-2px', left: '-2px'}"
|
|
></div>
|
|
<div v-if="modalPage === 1">
|
|
<p
|
|
v-once
|
|
v-html="$t('justinIntroMessage1')"
|
|
></p>
|
|
<p v-once>
|
|
{{ $t('justinIntroMessageUsername') }}
|
|
</p>
|
|
</div>
|
|
<div v-if="modalPage === 2">
|
|
<p>{{ $t('justinIntroMessageAppearance') }}</p>
|
|
</div>
|
|
<div v-if="modalPage === 3">
|
|
<p v-once>
|
|
{{ $t('justinIntroMessage3') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="npc-justin-textbox"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="modalPage === 1"
|
|
class="section mr-5 ml-5 first-page-footer"
|
|
>
|
|
<username-form
|
|
:avatar-intro="true"
|
|
@usernameConfirmed="modalPage += 1"
|
|
/>
|
|
<div
|
|
class="small text-center"
|
|
v-html="$t('usernameTOSRequirements')"
|
|
></div>
|
|
</div>
|
|
<div
|
|
v-if="!editing && !(modalPage === 1)"
|
|
class="section container footer"
|
|
>
|
|
<div class="footer-left">
|
|
<div
|
|
v-if="modalPage > 1"
|
|
class="prev-outer"
|
|
@click="prev()"
|
|
>
|
|
<div
|
|
class="prev-arrow svg-icon"
|
|
v-html="icons.arrowLeft"
|
|
></div>
|
|
<div
|
|
v-once
|
|
class="prev"
|
|
>
|
|
{{ $t('prev') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-center text-center circles">
|
|
<div
|
|
class="circle"
|
|
:class="{active: modalPage === 1}"
|
|
></div>
|
|
<div
|
|
class="circle"
|
|
:class="{active: modalPage === 2}"
|
|
></div>
|
|
<div
|
|
class="circle"
|
|
:class="{active: modalPage === 3}"
|
|
></div>
|
|
</div>
|
|
<div class="footer-right">
|
|
<div
|
|
v-if="modalPage < 3"
|
|
class="next-outer"
|
|
@click="next()"
|
|
>
|
|
<div
|
|
v-once
|
|
class="next"
|
|
>
|
|
{{ $t('next') }}
|
|
</div>
|
|
<div
|
|
class="next-arrow svg-icon"
|
|
v-html="icons.arrowRight"
|
|
></div>
|
|
</div>
|
|
<div
|
|
v-if="modalPage === 3 && !loading"
|
|
class="next-outer"
|
|
:class="{disabled: taskCategories.length === 0}"
|
|
@click="done()"
|
|
>
|
|
<div
|
|
v-once
|
|
class="next"
|
|
>
|
|
{{ $t('finish') }}
|
|
</div>
|
|
<div
|
|
class="next-arrow svg-icon"
|
|
v-html="icons.arrowRight"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-modal>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import '~@/assets/scss/colors.scss';
|
|
|
|
$dialogMarginTop: 56px;
|
|
$userCreationBgHeight: 105px;
|
|
|
|
/* @TODO do not rely on avatar-modal___BV_modal_body_,
|
|
it already changed once when bootstrap-vue reached version 1 */
|
|
|
|
#avatar-modal___BV_modal_body_, #avatar-modal___BV_modal_body_ {
|
|
padding: 0;
|
|
}
|
|
|
|
.page-2 {
|
|
#avatar-modal___BV_modal_body_ {
|
|
margin-top: $dialogMarginTop;
|
|
}
|
|
|
|
&#avatar-modal {
|
|
.modal-dialog.modal-md {
|
|
margin-top: 186px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#avatar-modal {
|
|
|
|
.first-page-footer {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.customize-section {
|
|
text-align: center;
|
|
padding-bottom: 2em;
|
|
}
|
|
|
|
#creator-background {
|
|
background-color: $purple-200;
|
|
}
|
|
|
|
.corner-decoration {
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #ffbe5d;
|
|
border: inherit;
|
|
outline: inherit;
|
|
}
|
|
|
|
.small {
|
|
color: $gray-200;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
color: $gray-200;
|
|
}
|
|
|
|
.purchase-all {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.edit-modal {
|
|
margin-top: 10em;
|
|
}
|
|
|
|
.row.sub-menu + .row.sub-menu {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.welcome-section {
|
|
margin-top: 2.5em;
|
|
margin-bottom: 2.5em;
|
|
}
|
|
|
|
.logo {
|
|
width: 190px;
|
|
margin: 0 auto 1.25em;
|
|
}
|
|
|
|
.user-creation-bg {
|
|
background-image: url('~@/assets/creator/creator-hills-bg.png');
|
|
height: $userCreationBgHeight;
|
|
width: 219px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.avatar {
|
|
position: absolute !important; // was overwritten in production build
|
|
top: -22px;
|
|
left: 4em;
|
|
}
|
|
|
|
.top {
|
|
position: absolute;
|
|
top: -($dialogMarginTop + $userCreationBgHeight - 16px);
|
|
right: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
.justin-outer-section:not(.top) {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.avatar-section {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.edit-avatar {
|
|
left: 9.2em;
|
|
}
|
|
|
|
.justin-section {
|
|
position: relative;
|
|
}
|
|
|
|
.justin-message {
|
|
border-color: #ffa623;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
outline-color: #b36213;
|
|
outline-style: solid;
|
|
outline-width: 2px;
|
|
position: relative;
|
|
padding: 2em;
|
|
margin: 2px;
|
|
height: 100%;
|
|
width: 400px;
|
|
background: $gray-700;
|
|
|
|
p {
|
|
margin: auto;
|
|
}
|
|
|
|
p + p {
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
|
|
.npc-justin-textbox {
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: -3.1rem;
|
|
width: 48px;
|
|
height: 48px;
|
|
background-image: url('~@/assets/images/justin_textbox.png');
|
|
}
|
|
|
|
.featured-label {
|
|
position: absolute;
|
|
top: -1rem;
|
|
left: 1.5rem;
|
|
border-radius: 2px;
|
|
margin: auto;
|
|
|
|
.text {
|
|
font-size: 12px;
|
|
min-height: auto;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.circles {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.circle {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #d8d8d8;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 1em;
|
|
|
|
&:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.circle.active {
|
|
background-color: $purple-300;
|
|
}
|
|
|
|
.customize-menu {
|
|
.menu-item .svg-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.menu-container {
|
|
color: #a5a1ac;
|
|
}
|
|
|
|
.menu-container:hover, .menu-container.active {
|
|
cursor: pointer;
|
|
color: $purple-300;
|
|
}
|
|
|
|
.indicator {
|
|
display: none;
|
|
}
|
|
|
|
.menu-container.active .indicator{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-left: 12px solid transparent;
|
|
border-right: 12px solid transparent;
|
|
border-bottom: 12px solid $gray-700;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
|
|
.text-center {
|
|
.gem-lock, .gold-lock {
|
|
display: inline-block;
|
|
margin-right: 1em;
|
|
margin-bottom: 1.6em;
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
|
|
.gem-lock, .gold-lock {
|
|
.svg-icon {
|
|
width: 16px;
|
|
}
|
|
|
|
span {
|
|
font-weight: bold;
|
|
margin-left: .5em;
|
|
}
|
|
|
|
.svg-icon, span {
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
|
|
.gem-lock span {
|
|
color: $green-10
|
|
}
|
|
|
|
.gold-lock span {
|
|
color: $yellow-10
|
|
}
|
|
|
|
.customize-section {
|
|
background-color: #f9f9f9;
|
|
min-height: 280px;
|
|
}
|
|
|
|
.interests-section {
|
|
margin-top: 3em;
|
|
margin-bottom: 60px;
|
|
|
|
.task-option {
|
|
margin: 0 auto;
|
|
width: 70%;
|
|
}
|
|
}
|
|
|
|
#backgrounds {
|
|
padding-top: 12px;
|
|
|
|
.title-row {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.backgroundFilterToggle {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.set-title {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.background {
|
|
margin: 0 auto;
|
|
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
strong {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.incentive-background {
|
|
background-image: none;
|
|
width: 68px;
|
|
height: 68px;
|
|
border-radius: 8px;
|
|
background-color: #92b6bd;
|
|
margin: 0 auto;
|
|
padding-top: .3em;
|
|
|
|
.small-rectangle {
|
|
width: 60px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
margin: 0 auto;
|
|
opacity: .6;
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
.background_violet {
|
|
background-color: #a993ed;
|
|
}
|
|
|
|
.background_blue {
|
|
background-color: #92b6bd;
|
|
}
|
|
|
|
.background_green {
|
|
background-color: #92bd94;
|
|
}
|
|
|
|
.background_purple {
|
|
background-color: #9397bd;
|
|
}
|
|
|
|
.background_red {
|
|
background-color: #b77e80;
|
|
}
|
|
|
|
.background_yellow {
|
|
background-color: #bcbb91;
|
|
}
|
|
|
|
.incentive-background:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.background:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.purchase-background {
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
padding: 0.5em;
|
|
border-radius: 0 0 2px 2px;
|
|
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
|
|
cursor: pointer;
|
|
|
|
span {
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
}
|
|
|
|
span.price {
|
|
color: #24cc8f;
|
|
}
|
|
|
|
.gem, .coin {
|
|
width: 16px;
|
|
}
|
|
|
|
&.single {
|
|
width: 141px;
|
|
}
|
|
|
|
&.set {
|
|
width: 100%;
|
|
|
|
span {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.gem, .coin {
|
|
width: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gem, .coin {
|
|
margin: 0 .5em;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.background-set {
|
|
width: 100%;
|
|
margin: 10px;
|
|
background-color: #edecee;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 24px;
|
|
padding-bottom: 24px;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
bottom: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
* {
|
|
transition: none !important;
|
|
}
|
|
|
|
.footer-left, .footer-right {
|
|
flex: auto;
|
|
flex-grow: 0;
|
|
width: 30%
|
|
}
|
|
|
|
.footer-center {
|
|
flex: 1;
|
|
}
|
|
|
|
.prev, .next {
|
|
color: $gray-300;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
padding: 0.4em;
|
|
}
|
|
|
|
.prev {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.next {
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.prev-outer {
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
|
|
.prev {
|
|
color: $purple-300;
|
|
}
|
|
|
|
.prev-arrow {
|
|
path {
|
|
fill: $purple-300;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.prev-arrow, .next-arrow {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.next-outer {
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
text-align: right;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
|
|
.next {
|
|
color: $purple-300;
|
|
}
|
|
|
|
.next-arrow {
|
|
path {
|
|
fill: $purple-300;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.badge-svg {
|
|
left: calc((100% - 18px) / 2);
|
|
cursor: pointer;
|
|
color: $gray-400;
|
|
background: $white;
|
|
padding: 4.5px 6px;
|
|
|
|
&.item-selected-badge {
|
|
background: $purple-300;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.icon-12 {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
span.badge.badge-pill.badge-item.badge-svg:not(.item-selected-badge) {
|
|
color: #a5a1ac;
|
|
}
|
|
|
|
span.badge.badge-pill.badge-item.badge-svg.hide {
|
|
display: none;
|
|
}
|
|
|
|
.background-button {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.background-button:hover {
|
|
span.badge.badge-pill.badge-item.badge-svg.hide {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
import map from 'lodash/map';
|
|
import { mapState } from '@/libs/store';
|
|
import avatar from './avatar';
|
|
import usernameForm from './settings/usernameForm';
|
|
import shops from '@/../../common/script/libs/shops';
|
|
import guide from '@/mixins/guide';
|
|
import notifications from '@/mixins/notifications';
|
|
import toggleSwitch from '@/components/ui/toggleSwitch';
|
|
import bodySettings from './avatarModal/body-settings';
|
|
import skinSettings from './avatarModal/skin-settings';
|
|
import hairSettings from './avatarModal/hair-settings';
|
|
import extraSettings from './avatarModal/extra-settings';
|
|
import subMenu from './avatarModal/sub-menu';
|
|
|
|
import logoPurple from '@/assets/svg/logo-purple.svg';
|
|
import bodyIcon from '@/assets/svg/body.svg';
|
|
import accessoriesIcon from '@/assets/svg/accessories.svg';
|
|
import skinIcon from '@/assets/svg/skin.svg';
|
|
import hairIcon from '@/assets/svg/hair.svg';
|
|
import backgroundsIcon from '@/assets/svg/backgrounds.svg';
|
|
import gem from '@/assets/svg/gem.svg';
|
|
import gold from '@/assets/svg/gold.svg';
|
|
import pin from '@/assets/svg/pin.svg';
|
|
import arrowRight from '@/assets/svg/arrow_right.svg';
|
|
import arrowLeft from '@/assets/svg/arrow_left.svg';
|
|
import svgClose from '@/assets/svg/close.svg';
|
|
import isPinned from '@/../../common/script/libs/isPinned';
|
|
import { avatarEditorUtilies } from '../mixins/avatarEditUtilities';
|
|
|
|
import content from '@/../../common/script/content/index';
|
|
|
|
export default {
|
|
components: {
|
|
avatar,
|
|
toggleSwitch,
|
|
usernameForm,
|
|
bodySettings,
|
|
skinSettings,
|
|
hairSettings,
|
|
extraSettings,
|
|
|
|
subMenu,
|
|
},
|
|
mixins: [guide, notifications, avatarEditorUtilies],
|
|
data () {
|
|
const backgroundShopSets = shops.getBackgroundShopSets();
|
|
|
|
return {
|
|
loading: false,
|
|
backgroundShopSets,
|
|
backgroundUpdate: new Date(),
|
|
filterBackgrounds: false,
|
|
|
|
icons: Object.freeze({
|
|
logoPurple,
|
|
bodyIcon,
|
|
accessoriesIcon,
|
|
skinIcon,
|
|
hairIcon,
|
|
backgroundsIcon,
|
|
gem,
|
|
pin,
|
|
gold,
|
|
arrowRight,
|
|
arrowLeft,
|
|
close: svgClose,
|
|
}),
|
|
modalPage: 1,
|
|
activeTopPage: 'body',
|
|
activeSubPage: 'size',
|
|
taskCategories: [],
|
|
skinSubMenuItems: [
|
|
{
|
|
id: 'color',
|
|
label: this.$t('color'),
|
|
},
|
|
],
|
|
|
|
bgSubMenuItems: ['2020', '2019', '2018', '2017', '2016', '2015', '2014'].map(y => ({
|
|
id: y,
|
|
label: y,
|
|
})),
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({ user: 'user.data' }),
|
|
editing () {
|
|
return this.$store.state.avatarEditorOptions.editingUser;
|
|
},
|
|
startingPage () {
|
|
return this.$store.state.avatarEditorOptions.startingPage;
|
|
},
|
|
backgroundShopSetsByYear () {
|
|
// @TODO: add dates to backgrounds
|
|
const backgroundShopSetsByYear = {
|
|
2014: [],
|
|
2015: [],
|
|
2016: [],
|
|
2017: [],
|
|
2018: [],
|
|
2019: [],
|
|
2020: [],
|
|
};
|
|
|
|
// Hack to force update for now until we restructure the data
|
|
let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
|
|
|
|
this.backgroundShopSets.forEach(set => {
|
|
const year = set.identifier.substr(set.identifier.length - 4);
|
|
if (!backgroundShopSetsByYear[year]) return;
|
|
|
|
let setOwnedByUser = false;
|
|
for (const key in set.items) {
|
|
if (this.user.purchased.background[key]) setOwnedByUser = true;
|
|
}
|
|
set.userOwns = setOwnedByUser;
|
|
|
|
backgroundShopSetsByYear[year].push(set);
|
|
});
|
|
return backgroundShopSetsByYear;
|
|
},
|
|
ownedBackgrounds () {
|
|
const ownedBackgrounds = [];
|
|
|
|
// Hack to force update for now until we restructure the data
|
|
let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
|
|
|
|
this.backgroundShopSets.forEach(set => {
|
|
set.items.forEach(bg => {
|
|
if (this.user.purchased.background[bg.key]) {
|
|
ownedBackgrounds.push(bg);
|
|
}
|
|
});
|
|
});
|
|
return ownedBackgrounds;
|
|
},
|
|
},
|
|
watch: {
|
|
editing () {
|
|
if (this.editing) this.modalPage = 2;
|
|
},
|
|
startingPage () {
|
|
if (!this.$store.state.avatarEditorOptions.startingPage) return;
|
|
this.activeTopPage = this.$store.state.avatarEditorOptions.startingPage;
|
|
this.activeSubPage = this.$store.state.avatarEditorOptions.subpage;
|
|
this.$store.state.avatarEditorOptions.startingPage = '';
|
|
this.$store.state.avatarEditorOptions.subpage = '';
|
|
},
|
|
},
|
|
mounted () {
|
|
if (this.editing) this.modalPage = 2;
|
|
// Buy modal is global, so we listen at root. I'd like to not
|
|
this.$root.$on('buyModal::boughtItem', this.backgroundPurchased);
|
|
},
|
|
methods: {
|
|
close () {
|
|
this.$root.$emit('bv::hide::modal', 'avatar-modal');
|
|
},
|
|
purchase (type, key) {
|
|
this.$store.dispatch('shops:purchase', {
|
|
type,
|
|
key,
|
|
});
|
|
this.backgroundUpdate = new Date();
|
|
},
|
|
prev () {
|
|
this.modalPage -= 1;
|
|
},
|
|
next () {
|
|
this.modalPage += 1;
|
|
},
|
|
changeTopPage (page, subpage) {
|
|
this.activeTopPage = page;
|
|
if (subpage) this.activeSubPage = subpage;
|
|
},
|
|
changeSubPage (page) {
|
|
this.activeSubPage = page;
|
|
},
|
|
async done () {
|
|
this.loading = true;
|
|
|
|
let tasksToCreate = [
|
|
...content.tasksByCategory.defaults.map(t => ({
|
|
...t,
|
|
text: t.text(),
|
|
notes: t.notes && t.notes(),
|
|
})),
|
|
];
|
|
this.taskCategories.forEach(category => {
|
|
tasksToCreate = tasksToCreate.concat(content.tasksByCategory[category].map(t => ({
|
|
...t,
|
|
text: t.text(),
|
|
notes: t.notes && t.notes(),
|
|
})));
|
|
});
|
|
|
|
// @TODO: Move to the action
|
|
const response = await axios.post('/api/v4/tasks/user', tasksToCreate);
|
|
const tasks = response.data.data;
|
|
tasks.forEach(task => {
|
|
this.$store.state.user.data.tasksOrder[`${task.type}s`].unshift(task._id);
|
|
this.$store.state.tasks.data[`${task.type}s`].unshift(task);
|
|
});
|
|
|
|
this.$root.$emit('bv::hide::modal', 'avatar-modal');
|
|
if (this.$route.path !== '/') {
|
|
this.$router.push('/');
|
|
}
|
|
|
|
// NOTE: it's important this flag is set AFTER the onboarding default tasks
|
|
// have been created or it'll break the onboarding guide achievement for creating a task
|
|
this.$store.dispatch('user:set', {
|
|
'flags.welcomed': true,
|
|
});
|
|
|
|
// @TODO: This is a timeout to ensure dom is loaded
|
|
window.setTimeout(() => {
|
|
this.initTour();
|
|
this.goto('intro', 0);
|
|
}, 1000);
|
|
},
|
|
showPlainBackgroundBlurb (identifier, set) {
|
|
return identifier === 'incentiveBackgrounds' && !this.ownsSet('background', set);
|
|
},
|
|
ownsSet (type, set) {
|
|
let setOwnedByUser = false;
|
|
|
|
for (let key of Object.keys(set)) {
|
|
const value = set[key];
|
|
if (type === 'background') key = value.key;
|
|
if (this.user.purchased[type][key]) setOwnedByUser = true;
|
|
}
|
|
|
|
return setOwnedByUser;
|
|
},
|
|
setKeys (type, _set) {
|
|
return map(_set, (v, k) => {
|
|
if (type === 'background') k = v.key; // eslint-disable-line no-param-reassign
|
|
return `${type}.${k}`;
|
|
}).join(',');
|
|
},
|
|
backgroundLockedStatus (bgKey) {
|
|
let backgroundClass = 'background-locked';
|
|
if (this.user.purchased.background[bgKey]) backgroundClass = 'background-unlocked';
|
|
return backgroundClass;
|
|
},
|
|
isBackgroundPinned (bg) {
|
|
return isPinned(this.user, bg);
|
|
},
|
|
togglePinned (bg) {
|
|
if (!this.$store.dispatch('user:togglePinnedItem', { type: bg.pinType, path: bg.path })) {
|
|
this.text(this.$t('unpinnedItem', { item: bg.text }));
|
|
}
|
|
},
|
|
backgroundSelected (bg) {
|
|
this.$root.$emit('buyModal::showItem', bg);
|
|
},
|
|
backgroundPurchased () {
|
|
this.backgroundUpdate = new Date();
|
|
},
|
|
},
|
|
};
|
|
</script>
|