added fading item name above the hotbar (#116)

lib/hotbar.js

@@ -43,15 +43,21 @@ class HotBar extends LitElement {
   }
 
   async reloadHotbarSelected (slot) {
+    const item = this.bot.inventory.slots[this.bot.inventory.hotbarStart + slot]
     const planned = (20 * 4 * slot) + 'px'
     this.shadowRoot.getElementById('hotbar-highlight').style.marginLeft = planned
     this.bot.setQuickBarSlot(slot)
+    this.activeItemName = item?.displayName
+    const name = this.shadowRoot.getElementById('hotbar-item-name')
+    name.classList.remove('hotbar-item-name-fader')
+    setTimeout(() => name.classList.add('hotbar-item-name-fader'), 10)
   }
 
   static get properties () {
     return {
       bot: { type: Object },
-      viewerVersion: { type: String }
+      viewerVersion: { type: String },
+      activeItemName: { type: String }
     }
   }
 
@@ -114,12 +120,37 @@ class HotBar extends LitElement {
       text-shadow: 2px 2px 0px #3f3f3f;
       font-family: mojangles, minecraft, monospace;
     }
+
+    #hotbar-item-name {
+      color: white;
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translate(-50%, calc(-170px));
+      margin-top: 0px;
+      text-shadow: rgb(63, 63, 63) 2px 2px 0px;
+      font-family: mojangles, minecraft, monospace;
+      font-size: 24px;
+      text-align: center;
+    }
+
+    .hotbar-item-name-fader {
+      opacity: 0;
+      transition: visibility 0s, opacity 2s linear;
+      transition-delay: 2s;
+    }
     `
   }
 
+  constructor () {
+    super()
+    this.activeItemName = ''
+  }
+
   render () {
     return html`
     <div id="hotbar-wrapper">
+      <p id="hotbar-item-name">${this.activeItemName}</p>
       <img id="hotbar-image" src="textures/1.16.4/gui/widgets.png">
       <img id="hotbar-highlight" src="textures/1.16.4/gui/widgets.png">
       <div id="hotbar-items-wrapper">