habitica/website/client/components/avatar.vue

<template lang="pug">
.avatar(:style="{width, height, paddingTop}", :class="backgroundClass")
  .character-sprites
    template(v-if="!avatarOnly" v-once)
      // Mount Body
      span(v-if="member.items.currentMount", :class="'Mount_Body_' + member.items.currentMount")

    // Buffs that cause visual changes to avatar: Snowman, Ghost, Flower, etc
    template(v-for="(klass, item) in visualBuffs")
      span(v-if="member.stats.buffs[item]", :class="klass")

    // Show flower ALL THE TIME!!!
    // See https://github.com/HabitRPG/habitica/issues/7133
    span(:class="'hair_flower_' + member.preferences.hair.flower")

    // Show avatar only if not currently affected by visual buff
    template(v-if!="!member.stats.buffs.snowball && !member.stats.buffs.spookySparkles && !member.stats.buffs.shinySeed && !member.stats.buffs.seafoam")
      span(:class="'chair_' + member.preferences.chair")
      span(:class="member.items.gear[costumeClass].back")
      span(:class="skinClass")
      span(:class="member.preferences.size + '_shirt_' + member.preferences.shirt")
      span(:class="member.preferences.size + '_' + member.items.gear[costumeClass].armor")
      span(:class="member.items.gear[costumeClass].back_collar")
      span(:class="member.items.gear[costumeClass].body")
      span.head_0
      template(v-for="type in ['base', 'bangs', 'mustache', 'beard']")
        span(:class="'hair_' + type + '_' + member.preferences.hair[type] + '_' + member.preferences.hair.color")
      span(:class="member.items.gear[costumeClass].eyewear")
      span(:class="member.items.gear[costumeClass].head")
      span(:class="member.items.gear[costumeClass].headAccessory")
      span(:class="'hair_flower_' + member.preferences.hair.flower")
      span(:class="member.items.gear[costumeClass].shield")
      span(:class="member.items.gear[costumeClass].weapon")

    // Resting
    span.zzz(v-if="member.preferences.sleep")

    template(v-if="!avatarOnly" v-once)
      // Mount Head
      span(v-if="member.items.currentMount", :class="'Mount_Head_' + member.items.currentMount")
      // Pet
      span.current-pet(v-if="member.items.currentPet", :class="'Pet-' + member.items.currentPet")
  .class-badge.d-flex.justify-content-center(v-if="hasClass")
    .align-self-center.svg-icon(v-html="icons[member.stats.class]")
</template>

<style lang="scss" scoped>
@import '~client/assets/scss/colors.scss';

.avatar {
  width: 140px;
  height: 147px;
  image-rendering: pixelated;
  position: relative;
  cursor: pointer;
}

.character-sprites {
  margin: 0 auto;
  width: 90px;
  height: 90px;
}

.character-sprites span {
  position: absolute;
}

.current-pet {
  bottom: 0px;
  left: 0px;
}

.class-badge {
  $badge-size: 32px;
  position: absolute;
  left: calc(50% - (16px));
  bottom: -($badge-size / 2);

  width: $badge-size;
  height: $badge-size;
  background: $white;
  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
  border-radius: 100px;

  .svg-icon {
    width: 19px;
    height: 19px;
  }
}
</style>

<script>
import warriorIcon from 'assets/svg/warrior.svg';
import rogueIcon from 'assets/svg/rogue.svg';
import healerIcon from 'assets/svg/healer.svg';
import wizardIcon from 'assets/svg/wizard.svg';

export default {
  props: {
    member: {
      type: Object,
      required: true,
    },
    avatarOnly: {
      type: Boolean,
      default: false,
    },
    width: {
      type: Number,
      default: 140,
    },
    height: {
      type: Number,
      default: 147,
    },
  },
  data () {
    return {
      icons: Object.freeze({
        warrior: warriorIcon,
        rogue: rogueIcon,
        healer: healerIcon,
        wizard: wizardIcon,
      }),
    };
  },
  computed: {
    hasClass () {
      return this.$store.getters['members:hasClass'](this.member);
    },
    isBuffed () {
      return this.$store.getters['members:isBuffed'](this.member);
    },
    paddingTop () {
      let val = '28px';

      if (!this.avatarOnly) {
        if (this.member.items.currentPet) val = '24.5px';
        if (this.member.items.currentMount) val = '0px';
      }

      return val;
    },
    backgroundClass () {
      let background = this.member.preferences.background;

      if (background && !this.avatarOnly) {
        return `background_${this.member.preferences.background}`;
      }

      return '';
    },
    visualBuffs () {
      return {
        snowball: 'snowman',
        spookySparkles: 'ghost',
        shinySeed: `avatar_floral_${this.member.stats.class}`,
        seafoam: 'seafoam_star',
      };
    },
    skinClass () {
      let baseClass = `skin_${this.member.preferences.skin}`;

      return `${baseClass}${this.member.preferences.sleep ? '_sleep' : ''}`;
    },
    costumeClass () {
      return this.member.preferences.costume ? 'costume' : 'equipped';
    },
  },
};
</script>