mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-18 07:07:35 +01:00
5f2032a9d5
* wip: createIntro / onboard ui rework * extract more methods - working body settings component * move justin above the dialog * extract submenu + fix styles * white background on items, working example of "none" item, item border radius * extract options as component * move more subMenu's to the component * add chair margins * move tasks to common/content * add menu indicator * extract more parts of onboarding-intro * refactor / fully converted hair-settings * extract extra-settings * fix sprite positions / lint * extract task-strings to be translatable * style fixes - hide submenu's if not editing * style / margin fixes * more style fixes * show hair styles at onboarding - use arrowleft/right as svg instead of image fix next color * finish button style - full set background/purchase button * fix footer - prev/next hover * Add Default Tasks + `byHabitica` property * customize-options click item on the full zone * purple tasks * footer animation => none * fix onboarding task habit up/down * onboarding circle color/position * task styles * fix onboarding position * show seasonal options * add hover to (locked-) options * added the correct behavior of shop-items to onboarding options * hide hover on active options
93 lines
2.4 KiB
Vue
93 lines
2.4 KiB
Vue
<template lang="pug">
|
|
#body.section.customize-section
|
|
sub-menu.text-center(:items="items", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
|
|
div(v-if='activeSubPage === "size"')
|
|
customize-options(
|
|
:items="sizes",
|
|
:currentValue="user.preferences.size"
|
|
)
|
|
div(v-if='activeSubPage === "shirt"')
|
|
customize-options(
|
|
:items="freeShirts",
|
|
:currentValue="user.preferences.shirt"
|
|
)
|
|
customize-options(
|
|
v-if='editing',
|
|
:items='specialShirts',
|
|
:currentValue="user.preferences.shirt",
|
|
:fullSet='!userOwnsSet("shirt", specialShirtKeys)',
|
|
@unlock='unlock(`shirt.${specialShirtKeys.join(",shirt.")}`)'
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import appearance from 'common/script/content/appearance';
|
|
import {subPageMixin} from '../../mixins/subPage';
|
|
import {userStateMixin} from '../../mixins/userState';
|
|
import {avatarEditorUtilies} from '../../mixins/avatarEditUtilities';
|
|
import subMenu from './sub-menu';
|
|
import customizeOptions from './customize-options';
|
|
import gem from 'assets/svg/gem.svg';
|
|
|
|
const freeShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price === 0);
|
|
const specialShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price !== 0);
|
|
|
|
|
|
export default {
|
|
props: [
|
|
'editing',
|
|
],
|
|
components: {
|
|
subMenu,
|
|
customizeOptions,
|
|
},
|
|
mixins: [
|
|
subPageMixin,
|
|
userStateMixin,
|
|
avatarEditorUtilies,
|
|
],
|
|
data () {
|
|
return {
|
|
specialShirtKeys,
|
|
icons: Object.freeze({
|
|
gem,
|
|
}),
|
|
items: [
|
|
{
|
|
id: 'size',
|
|
label: this.$t('size'),
|
|
},
|
|
{
|
|
id: 'shirt',
|
|
label: this.$t('shirt'),
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
sizes () {
|
|
return ['slim', 'broad'].map(s => this.mapKeysToFreeOption(s, 'size'));
|
|
},
|
|
freeShirts () {
|
|
return freeShirtKeys.map(s => this.mapKeysToFreeOption(s, 'shirt'));
|
|
},
|
|
specialShirts () {
|
|
let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
|
|
let keys = this.specialShirtKeys;
|
|
let options = keys.map(key => this.mapKeysToOption(key, 'shirt'));
|
|
return options;
|
|
},
|
|
},
|
|
mounted () {
|
|
this.changeSubPage('size');
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|