feast/src/components/EquipmentView.vue

<template>
  <div class="equipment-view">
    <button @click="unequip(slot)" :class="equipmentClass(slot)" :style="equipmentCss(slot)" v-for="slot in Object.keys(EquipmentSlot)" :key="slot">{{ subject.equipment[slot] === undefined ? slot : subject.equipment[slot].name.capital.all }}</button>
  </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'
import { World } from '@/game/world'

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

export default class ItemView extends Vue {
  @Prop()
  world!: World

  @Prop({ required: true })
  subject!: Creature

  unequip (slot: EquipmentSlot) {
    if (this.subject.side === this.world.player.side) {
      this.subject.unequip(slot)
    }
  }

  equipmentClass (slot: EquipmentSlot) {
    const classes: string[] = []
    classes.push("equipment-slot")

    if (this.subject.equipment[slot] !== undefined) {
      classes.push("equipment-slot-active")
    } else {
      classes.push("equipment-slot-empty")
    }

    return classes.reduce((info: any, cls: string) => { info[cls] = true; return info }, {})
  }

  equipmentCss (slot: EquipmentSlot) {
    const css = {
      top: "",
      left: ""
    }

    switch (slot) {
      case EquipmentSlot.Head:
        css.top = "10%"
        css.left = "50%"
        break
      case EquipmentSlot.Chest:
        css.top = "35%"
        css.left = "25%"
        break
      case EquipmentSlot.Arms:
        css.top = "35%"
        css.left = "75%"
        break
      case EquipmentSlot.MainHand:
        css.top = "60%"
        css.left = "15%"
        break
      case EquipmentSlot.OffHand:
        css.top = "60%"
        css.left = "85%"
        break
      case EquipmentSlot.Legs:
        css.top = "60%"
        css.left = "50%"
        break
      case EquipmentSlot.Feet:
        css.top = "90%"
        css.left = "50%"
        break
    }

    return css
  }
}

</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%);
    background: #333;
    color: #eee;
    margin: 0px;
    padding: 0px;
  }

  .equipment-slot-active:hover {
    background: #555;
  }

  .equipment-slot-active:active {
    background: #555;
    border-style: inset;
  }

  .equipment-slot-empty {
    color: #666;
  }
</style>