mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-18 15:17:25 +01:00
0dba37008f
* Added more styles to user profile modal and replaced memberDetail * Added notify library * Added edit avator * Added notification menu updates * Fixed lint issues * Added group invite functionality * Added many achievement modals * Added initial quest modals * Added guild, drops, and rebirth modals * Added the reset of the achievement modals and fixed lint
121 lines
5.4 KiB
Vue
121 lines
5.4 KiB
Vue
<template lang="pug">
|
|
b-modal#choose-class(:title="$t('chooseClassHeading')", size='lg', :hide-footer="true")
|
|
.modal-body.select-class
|
|
.container-fluid
|
|
.row
|
|
.col-md-3(@click='selectedClass = "warrior"')
|
|
h5 {{ $t('warriorWiki') }}
|
|
figure.herobox(:class='{"selected-class": selectedClass === "warrior"}')
|
|
.character-sprites
|
|
span(:class='`skin_${user.preferences.skin}`')
|
|
span(class='head_0')
|
|
span(:class='`${user.preferences.size}_armor_warrior_5`')
|
|
span(:class='`hair_base_${user.preferences.hair.base}_${user.preferences.hair.color}`')
|
|
span(:class='`hair_bangs_${user.preferences.hair.bangs}_${user.preferences.hair.color}`')
|
|
span(:class='`hair_beard_${user.preferences.hair.beard}_${user.preferences.hair.color}`')
|
|
span(:class='`hair_mustache_${user.preferences.hair.mustache}_${user.preferences.hair.color}`')
|
|
span(class='head_warrior_5')
|
|
span(class='shield_warrior_5')
|
|
span(class='weapon_warrior_6')
|
|
.col-md-3(@click='selectedClass = "wizard"')
|
|
h5 {{ $t('mageWiki') }}
|
|
figure.herobox(:class='{"selected-class": selectedClass === "wizard"}')
|
|
.character-sprites
|
|
span(class='`skin_${user.preferences.skin}`')
|
|
span(class='head_0')
|
|
span(:class='`${user.preferences.size}_armor_wizard_5`')
|
|
span(:class='`hair_base_${user.preferences.hair.base}_${user.preferences.hair.color}`')
|
|
span(:class='`hair_bangs_${user.preferences.hair.bangs}_${user.preferences.hair.color}`')
|
|
span(:class='`hair_beard_${user.preferences.hair.beard}_${user.preferences.hair.color}`')
|
|
span(:class='`hair_mustache_${user.preferences.hair.mustache}_${user.preferences.hair.color}`')
|
|
span(class='head_wizard_5')
|
|
span(class='shield_wizard_5')
|
|
span(class='weapon_wizard_6')
|
|
.col-md-3(@click='selectedClass = "rogue"')
|
|
h5 {{ $t('rogueWiki') }}
|
|
figure.herobox(:class='{"selected-class": selectedClass === "rogue"}')
|
|
.character-sprites
|
|
span(:class='`skin_${user.preferences.skin}`')
|
|
span(class='head_0')
|
|
span(:class='`${user.preferences.size}_armor_rogue_5`')
|
|
span(:class='`hair_base_${user.preferences.hair.base}_${user.preferences.hair.color}`')
|
|
span(:class='`hair_bangs_${user.preferences.hair.bangs}_${user.preferences.hair.color}`')
|
|
span(:class='`hair_beard_${user.preferences.hair.beard}_${user.preferences.hair.color}`')
|
|
span(:class='`hair_mustache_${user.preferences.hair.mustache}_${user.preferences.hair.color}`')
|
|
span(class='head_rogue_5')
|
|
span(class='shield_rogue_6')
|
|
span(class='weapon_rogue_6')
|
|
.col-md-3(@click='selectedClass = "healer"')
|
|
h5 {{ $t('healerWiki') }}
|
|
figure.herobox(ng-class='{"selected-class": selectedClass === "healer"}')
|
|
.character-sprites
|
|
span(:class='`skin_${user.preferences.skin}`')
|
|
span(class='head_0')
|
|
span(:class='`${user.preferences.size}_armor_healer_5`')
|
|
span(:class='`hair_base_${user.preferences.hair.base}_${user.preferences.hair.color}`')
|
|
span(:class='`hair_bangs_${user.preferences.hair.bangs}_${user.preferences.hair.color}`')
|
|
span(:class='`hair_beard_${user.preferences.hair.beard}_${user.preferences.hair.color}`')
|
|
span(:class='`hair_mustache_${user.preferences.hair.mustache}_${user.preferences.hair.color}`')
|
|
span(class='head_healer_5')
|
|
span(class='shield_healer_5')
|
|
span(class='weapon_healer_6')
|
|
br
|
|
.well(v-if='selectedClass === "warrior"') {{ $t('warriorText') }}
|
|
.well(v-if='selectedClass === "wizard"') {{ $t('mageText') }}
|
|
.well(v-if='selectedClass === "rogue"') {{ $t('rogueText') }}
|
|
.well(v-if='selectedClass === "healer"') {{ $t('healerText') }}
|
|
|
|
.modal-footer
|
|
span(popover-placement='left', popover-trigger='mouseenter', :popover="$t('optOutOfClassesText')")
|
|
button.btn.btn-danger(@click='disableClasses({}); close()') {{ $t('optOutOfClasses') }}
|
|
button.btn.btn-primary(:disabled='!selectedClass' @click='changeClass(selectedClass); selectedClass = undefined; close()') {{ $t('select') }}
|
|
.pull-left {{ $t('chooseClassLearn') }}
|
|
</template>
|
|
|
|
<style scope>
|
|
.dont-despair, .death-penalty {
|
|
margin-top: 1.5em;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import bModal from 'bootstrap-vue/lib/components/modal';
|
|
|
|
import Avatar from '../avatar';
|
|
import { mapState } from 'client/libs/store';
|
|
import percent from '../../../common/script/libs/percent';
|
|
import {maxHealth} from '../../../common/script/index';
|
|
|
|
export default {
|
|
components: {
|
|
bModal,
|
|
Avatar,
|
|
},
|
|
data () {
|
|
return {
|
|
maxHealth,
|
|
selectedClass: '',
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({user: 'user.data'}),
|
|
barStyle () {
|
|
return {
|
|
width: `${percent(this.user.stats.hp, maxHealth)}%`,
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
close () {
|
|
this.$root.$emit('hide::modal', 'choose-class');
|
|
},
|
|
disableClasses () {
|
|
// @TODO:
|
|
},
|
|
changeClass () {
|
|
// @TODO:
|
|
},
|
|
},
|
|
};
|
|
</script>
|