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