feast/src/components/EquipmentView.vue

<template>
  <div class="equipment-view">
    <div v-if="subject.equipment[EquipmentSlot.Head] !== undefined" class="equipment-slot equipment-head">{{ subject.equipment[EquipmentSlot.Head].name.capital.all }}</div>
    <div v-if="subject.equipment[EquipmentSlot.Chest] !== undefined" class="equipment-slot equipment-chest">{{ subject.equipment[EquipmentSlot.Chest].name.capital.all }}</div>
    <div v-if="subject.equipment[EquipmentSlot.MainHand] !== undefined" class="equipment-slot equipment-main-hand">{{ subject.equipment[EquipmentSlot.MainHand].name.capital.all }}</div>
    <div v-if="subject.equipment[EquipmentSlot.OffHand] !== undefined" class="equipment-slot equipment-off-hand">{{ subject.equipment[EquipmentSlot.OffHand].name.capital.all }}</div>
    <div v-if="subject.equipment[EquipmentSlot.Legs] !== undefined" class="equipment-slot equipment-legs">{{ subject.equipment[EquipmentSlot.Legs].name.capital.all }}</div>
    <div v-if="subject.equipment[EquipmentSlot.Feet] !== undefined" class="equipment-slot equipment-feet">{{ subject.equipment[EquipmentSlot.Feet].name.capital.all }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
import { Creature } from '@/game/creature'
import { POV } from '@/game/language'
import { Stats, Stat } from '@/game/combat'
import { Item, ItemKindIcons, ItemKind, EquipmentSlot } from '@/game/items'

@Component({
  data () {
    return {
      ItemKindIcons: ItemKindIcons,
      EquipmentSlot: EquipmentSlot
    }
  }
})

export default class ItemView extends Vue {
  @Prop({ required: true })
  subject!: Creature
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .equipment-view {
    position: relative;
    border: 4px outset;
    border-radius: 4px;
    margin: 4px;
  }

  .equipment-slot {
    position: absolute;
    width: 3rem;
    height: 3rem;
    border-width: 5px;
    border-style: outset;
    transform: translate(-50%, -50%)
  }

  .equipment-head {
    top: 10%;
    left: 50%;
  }

  .equipment-chest {
    top: 30%;
    left: 50%;
  }

  .equipment-main-hand {
    top: 20%;
    left: 30%;
  }

  .equipment-off-hand {
    top: 20%;
    left: 70%;
  }

  .equipment-legs {
    top: 60%;
    left: 50%;
  }

  .equipment-feet {
    top: 80%;
    left: 50%;
  }
</style>