Add hover text to items

src/components/ItemView.vue

@@ -4,6 +4,9 @@
       <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>
 
@@ -13,7 +16,7 @@ import { Creature } from '@/game/creature'
 import { POV } from '@/game/language'
 import { Stats, Stat } from '@/game/combat'
 import { Container, VoreContainer, Vore } from '@/game/vore'
-import { Item, ItemKindIcons } from '@/game/items'
+import { Item, ItemKindIcons, ItemKind } from '@/game/items'
 
 @Component({
   data () {
@@ -23,6 +26,14 @@ import { Item, ItemKindIcons } from '@/game/items'
   }
 })
 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
 }
@@ -33,18 +44,18 @@ export default class ItemView extends Vue {
 <style scoped>
   .item-view {
     position: relative;
-    padding: 4px;
     border: 4px outset;
+    border-radius: 4px;
     margin: 4px;
   }
 
   .item-content {
     position: relative;
+    padding: 4px;
     z-index: 1;
   }
 
   .item-name {
-    font-family: serif;
     font-size: 1.5rem;
   }
 
@@ -56,4 +67,24 @@ export default class ItemView extends Vue {
     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>