Add BossBars (#319)

* Add component

* Add preload function to hud (required for already existing BossBars)

* Remove useless debug log

* Display bars

* Values and colors

* Add dividers

* Add titles

* Remove ;

* Make titles smaller

* Delete BossBars

* Store the container

* Update code standard

* Move BossBars to components

* Proper use of LitElement

* Code style improvements

* init hotbar before player spawn, fixes hotbar not working when joining

index.js

@@ -10,6 +10,7 @@ require('./lib/menus/components/food_bar')
 require('./lib/menus/components/breath_bar')
 require('./lib/menus/components/debug_overlay')
 require('./lib/menus/components/playerlist_overlay')
+require('./lib/menus/components/bossbars_overlay')
 require('./lib/menus/hud')
 require('./lib/menus/play_screen')
 require('./lib/menus/pause_screen')
@@ -186,6 +187,7 @@ async function connect (options) {
     noPongTimeout: 240 * 1000,
     closeTimeout: 240 * 1000
   })
+  hud.preload(bot)
 
   bot.on('error', (err) => {
     console.log('Encountered error!', err)

lib/menus/components/bossbars_overlay.js

@@ -0,0 +1,147 @@
+const { LitElement, html, css } = require('lit')
+const { styleMap } = require('lit/directives/style-map.js')
+
+const colors = ['pink', 'blue', 'red', 'green', 'yellow', 'purple', 'white']
+const divs = [0, 6, 10, 12, 20]
+const translations = {
+  'entity.minecraft.ender_dragon': 'Ender Dragon',
+  'entity.minecraft.wither': 'Wither'
+}
+class BossBar extends LitElement {
+  constructor (bar) {
+    super()
+    this.bar = bar
+    this.title = ''
+    this.progress = 0
+    this.bossBarStyles = {}
+    this.fillStyles = {}
+    this.div1Styles = {}
+    this.div2Styles = {}
+  }
+
+  static get styles () {
+    return css`
+      .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .title {
+        font-size: 7px;
+        color: #fff;
+      }
+      .bossbar {
+        background-image: url("textures/1.18.1/gui/bars.png");
+        width: 182px;
+        height: 5px;
+        position: relative;
+      }
+      .bossbar .fill {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 5px;
+        width: 0;
+        background-image: url("textures/1.18.1/gui/bars.png");
+      }`
+  }
+
+  static get properties () {
+    return {
+      bar: { type: Object }
+    }
+  }
+
+  render () {
+    this.updateBar(this.bar)
+
+    return html`
+        <div class="container">
+            <div class="title">${this.title}</div>
+            <div class="bossbar" style=${styleMap(this.bossBarStyles)}>
+                <div class="fill" style=${styleMap(this.fillStyles)}></div>
+                <div class="fill" style=${styleMap(this.div1Styles)}></div>
+                <div class="fill" style=${styleMap(this.div2Styles)}></div>
+            </div>
+        </div>`
+  }
+
+  setTitle (bar) {
+    if (bar._title.text) this.title = bar._title.text
+    else this.title = translations[this._title.translate] || 'Unkown Entity'
+  }
+
+  setColor (bar) {
+    this.bossBarStyles.backgroundPositionY = `-${colors.indexOf(bar._color) * 10}px`
+    this.fillStyles.backgroundPositionY = `-${colors.indexOf(bar._color) * 10 + 5}px`
+  }
+
+  setProgress (bar) {
+    this.fillStyles.width = `${bar._health * 100}%`
+    this.div2Styles.width = `${bar._health * 100}%`
+  }
+
+  setDiv (bar) {
+    this.div1Styles.backgroundPositionY = `-${divs.indexOf(bar._dividers) * 10 + 70}px`
+    this.div2Styles.backgroundPositionY = `-${divs.indexOf(bar._dividers) * 10 + 75}px`
+  }
+
+  updateBar (bar) {
+    this.setTitle(bar)
+    this.setColor(bar)
+    this.setDiv(bar)
+    this.setProgress(bar)
+  }
+}
+
+class BossBars extends LitElement {
+  constructor () {
+    super()
+    this.bossBars = new Map()
+  }
+
+  static get styles () {
+    return css`
+      .bossBars {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        position: absolute;
+        top: 9px;
+        left: 50%;
+        transform: translate(-50%);
+      }`
+  }
+
+  static get properties () {
+    return {
+      bossBars: { type: Map }
+    }
+  }
+
+  render () {
+    return html`<div class="bossBars" id="bossBars">
+        ${[...this.bossBars.values()]}
+    </div>`
+  }
+
+  init () {
+    this.bot.on('bossBarCreated', async (bossBar) => {
+      this.bossBars.set(bossBar.entityUUID, new BossBar(bossBar))
+      this.requestUpdate()
+    })
+    this.bot.on('bossBarUpdated', (bossBar) => {
+      const bar = this.bossBars.get(bossBar.entityUUID)
+      bar.bar = bossBar
+      bar.requestUpdate()
+    })
+    this.bot.on('bossBarDeleted', (bossBar) => {
+      this.bossBars.delete(bossBar.entityUUID)
+      this.requestUpdate()
+    })
+  }
+}
+
+window.customElements.define('pmui-bossbars-overlay', BossBars)
+window.customElements.define('pmui-bossbar', BossBar)

lib/menus/hud.js

@@ -192,6 +192,16 @@ class Hud extends LitElement {
     }
   }
 
+  /**
+   * @param {import('mineflayer').Bot} bot
+   */
+  preload (bot) {
+    const bossBars = this.shadowRoot.querySelector('#bossbars-overlay')
+    bossBars.bot = bot
+
+    bossBars.init()
+  }
+
   /**
    * @param {globalThis.THREE.Renderer} renderer
    * @param {import('mineflayer').Bot} bot
@@ -211,6 +221,7 @@ class Hud extends LitElement {
     hotbar.bot = bot
     debugMenu.bot = bot
 
+    hotbar.init()
     chat.init(bot._client, renderer)
     bot.on('spawn', () => playerList.init(bot, host))
 
@@ -260,7 +271,6 @@ class Hud extends LitElement {
       healthbar.updateHealth(bot.health)
       foodbar.updateHunger(bot.food)
       // breathbar.updateOxygen(bot.oxygenLevel ?? 20)
-      hotbar.init()
     })
 
     if (document.getElementById('options-screen').forceMobileControls || isMobile()) {
@@ -342,6 +352,7 @@ class Hud extends LitElement {
 
       <pmui-debug-overlay id="debug-overlay"></pmui-debug-overlay>
       <pmui-playerlist-overlay id="playerlist-overlay"></pmui-playerlist-overlay>
+      <pmui-bossbars-overlay id="bossbars-overlay"></pmui-bossbars-overlay>
       <div class="crosshair"></div>
       <chat-box id="chat"></chat-box>
       <!--<pmui-breathbar id="breath-bar"></pmui-breathbar>-->