Kalista Payne
121 lines
2.6 KiB
Vue
121 lines
2.6 KiB
Vue
<template>
|
|
<div
|
|
v-if="displayName"
|
|
v-b-tooltip.hover.top="tierTitle"
|
|
class="user-label"
|
|
:class="levelStyle()"
|
|
>
|
|
{{ displayName }}
|
|
<div
|
|
v-if="hasTier"
|
|
class="svg-icon"
|
|
v-html="tierIcon()"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import '@/assets/scss/colors.scss';
|
|
|
|
.user-label.no-tier {
|
|
color: $gray-50;
|
|
}
|
|
|
|
.user-label {
|
|
font-weight: bold;
|
|
margin-bottom: 0;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
|
|
.svg-icon {
|
|
width: 10px;
|
|
display: inline-block;
|
|
margin-left: .5em;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import achievementsLib from '@/../../common/script/libs/achievements';
|
|
|
|
import styleHelper from '@/mixins/styleHelper';
|
|
|
|
import tier1 from '@/assets/svg/tier-1.svg?raw';
|
|
import tier2 from '@/assets/svg/tier-2.svg?raw';
|
|
import tier3 from '@/assets/svg/tier-3.svg?raw';
|
|
import tier4 from '@/assets/svg/tier-4.svg?raw';
|
|
import tier5 from '@/assets/svg/tier-5.svg?raw';
|
|
import tier6 from '@/assets/svg/tier-6.svg?raw';
|
|
import tier7 from '@/assets/svg/tier-7.svg?raw';
|
|
import tier8 from '@/assets/svg/tier-mod.svg?raw';
|
|
import tier9 from '@/assets/svg/tier-staff.svg?raw';
|
|
import tierNPC from '@/assets/svg/tier-npc.svg?raw';
|
|
|
|
export default {
|
|
mixins: [styleHelper],
|
|
props: ['user', 'name', 'backer', 'contributor', 'hideTooltip'],
|
|
data () {
|
|
return {
|
|
icons: Object.freeze({
|
|
tier1,
|
|
tier2,
|
|
tier3,
|
|
tier4,
|
|
tier5,
|
|
tier6,
|
|
tier7,
|
|
tier8,
|
|
tier9,
|
|
tierNPC,
|
|
}),
|
|
};
|
|
},
|
|
computed: {
|
|
displayName () {
|
|
if (this.name) {
|
|
return this.name;
|
|
}
|
|
if (this.user && this.user.profile) {
|
|
return this.user.profile.name;
|
|
}
|
|
|
|
return null;
|
|
},
|
|
level () {
|
|
if (this.contributor) {
|
|
return this.contributor.level;
|
|
} if (this.user && this.user.contributor) {
|
|
return this.user.contributor.level;
|
|
}
|
|
return 0;
|
|
},
|
|
isNPC () {
|
|
if (this.backer) {
|
|
return this.backer.tier === 800;
|
|
} if (this.user && this.user.backer) {
|
|
return this.user.backer.tier === 800;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
hasTier () {
|
|
return this.isNPC || this.level !== 0;
|
|
},
|
|
},
|
|
methods: {
|
|
tierIcon () {
|
|
if (this.isNPC) {
|
|
return this.icons.tierNPC;
|
|
}
|
|
return this.icons[`tier${this.level}`];
|
|
},
|
|
tierTitle () {
|
|
return this.hideTooltip ? '' : achievementsLib.getContribText(this.contributor, this.isNPC) || '';
|
|
},
|
|
levelStyle () {
|
|
return this.userLevelStyleFromLevel(this.level, this.isNPC);
|
|
},
|
|
},
|
|
};
|
|
</script>
|