feast/src/components/ItemView.vue

<template>
  <div class="item-view">
    <div class="item-content">
      <div class="item-name">{{ item.name.capital.all.toString() }}</div>
    </div>
    <i :class="'item-icon ' + $data.ItemKindIcons[item.kind]" />
    <div class="item-hover">
      <div class="item-hover-text">{{ hoverText }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
import { Item, ItemKindIcons, ItemKind } from '@/game/items'

@Component({
  data () {
    return {
      ItemKindIcons: ItemKindIcons
    }
  }
})
export default class ItemView extends Vue {
  get hoverText () {
    switch (this.item.kind) {
      case ItemKind.Key: return "Inspect"
      case ItemKind.Consumable: return "Use"
      case ItemKind.Equipment: return "Equip"
    }
  }

  @Prop({ required: true })
  item!: Item
}

</script>

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

  .item-content {
    position: relative;
    padding: 4px;
    z-index: 1;
  }

  .item-name {
    font-size: 1.5rem;
  }

  .item-icon {
    color: #666;
    font-size: 250%;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .item-hover {
    display: none;
    --item-hover-text: "oops";
  }

  .item-view:hover .item-hover {
    position: absolute;
    display: grid;
    place-items: center;
    top: 0;
    left: 0;
    background: #ffffff;
    color: black;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    z-index: 2;
    user-select: none;
  }
</style>