use litelement properly for debugmenu (#110)

* use litelement properly for debugmenu

* add customEntries to debugMenu

* add bot on move listener to update when view is moved

README.md

@@ -76,6 +76,12 @@ Some variables are exposed in window for debugging:
 * worldView
 * Vec3
 * pathfinder
+* debugMenu
+
+### How to add more stuff to the debugMenu ?
+
+debugMenu.customEntries['myKey'] = 'myValue'
+delete debugMenu.customEntries['myKey']
 
 ### Some debugging examples
 

index.js

@@ -87,6 +87,7 @@ async function connect (options) {
   })
 
   hotbar.bot = bot
+  debugMenu.bot = bot
 
   bot.on('error', (err) => {
     console.log('Encountered error!', err)
@@ -128,7 +129,6 @@ async function connect (options) {
 
     chat.init(bot._client, renderer)
     playerList.init(bot)
-    debugMenu.init(bot)
 
     // Create viewer
     const viewer = new Viewer(renderer)
@@ -141,6 +141,7 @@ async function connect (options) {
     window.viewer = viewer
     window.Vec3 = Vec3
     window.pathfinder = pathfinder
+    window.debugMenu = debugMenu
 
     // Link WorldView and Viewer
     viewer.listen(worldView)

lib/debugmenu.js

@@ -1,14 +1,23 @@
 const { LitElement, html, css } = require('lit-element')
 
-class DebugMenuEntry {
-  constructor (text, hidden, breaking) {
-    this.text = text
-    this.hidden = hidden
-    this.breaking = breaking
-  }
-}
-
 class DebugMenu extends LitElement {
+  constructor () {
+    super()
+
+    this.isOpen = false
+    this.customEntries = {}
+  }
+
+  firstUpdated () {
+    document.addEventListener('keydown', e => {
+      e ??= window.event
+      if (e.key === 'F3') {
+        this.isOpen = !this.isOpen
+        e.preventDefault()
+      }
+    })
+  }
+
   static get styles () {
     return css`
         .debugmenu-wrapper {
@@ -41,183 +50,62 @@ class DebugMenu extends LitElement {
 
   static get properties () {
     return {
-      debugEntries: { type: Object },
       isOpen: { type: Boolean },
-      cursorBlock: { type: Object }
+      cursorBlock: { type: Object },
+      bot: { type: Object },
+      customEntries: { type: Object }
+
+    }
+  }
+
+  updated (changedProperties) {
+    if (changedProperties.has('bot')) {
+      this.bot.on('move', () => {
+        this.requestUpdate()
+      })
     }
   }
 
   render () {
+    if (!this.isOpen) {
+      return html``
+    }
+
+    const target = this.cursorBlock
+    const targetDiggable = (target && this.bot.canDigBlock(target))
+
+    const pos = this.bot.entity.position
+    const rot = [this.bot.entity.yaw, this.bot.entity.pitch]
+
+    const viewDegToMinecraft = (yaw) => {
+      return yaw % 360 - 180 * (yaw < 0 ? -1 : 1)
+    }
+
+    const quadsDescription = [
+      'north (towards negative Z)',
+      'east (towards positive X)',
+      'south (towards positive Z)',
+      'west (towards negative X)'
+    ]
+
+    const minecraftYaw = viewDegToMinecraft(rot[0] * -180 / Math.PI)
+    const minecraftQuad = Math.floor(((minecraftYaw + 180) / 90 + 0.5) % 4)
+
     return html`
     <div id="debugmenu-wrapper" class="debugmenu-wrapper">
-      <div class="debugmenu" id="debugmenu" style="display: none;">
+      <div class="debugmenu" id="debugmenu">
         <p id="debug-entry-renderer">Renderer: three.js r${global.THREE.REVISION}</p>
         </br>
-        ${Object.entries(this.debugEntries).map(([id, entry]) => html`
+        <p>XYZ: ${pos.x.toFixed(3)} / ${pos.y.toFixed(3)} / ${pos.z.toFixed(3)}</p>
-          <p id="debug-entry-${id}" style="display:${entry.hidden ? 'none' : 'block'}">${entry.text}</p>${entry.breaking ? html`<br>` : ''}
+        <p>Chunk: ${Math.floor(pos.x % 16)} ~ ${Math.floor(pos.z % 16)} in ${Math.floor(pos.x / 16)} ~ ${Math.floor(pos.z / 16)}</p>
-        `)}
+        <p>Facing (viewer): ${rot[0].toFixed(3)} ${rot[1].toFixed(3)}</p>
+        <p>Facing (minecraft): ${quadsDescription[minecraftQuad]} (${minecraftYaw.toFixed(1)} ${(rot[1] * -180 / Math.PI).toFixed(1)})</p>
+        ${targetDiggable ? html`<p>Looking at: ${target.position.x} ${target.position.y} ${target.position.z}</p>` : ''}<br>
+        ${Object.entries(this.customEntries).map(([name, value]) => html`<p>${name}: ${value}</p>`)}
       </div>
     </div>
     `
   }
-
-  constructor () {
-    super()
-
-    this.debugEntries = {}
-    this.isOpen = false
-  }
-
-  updated (changedProperties) {
-    if (changedProperties.has('isOpen')) {
-      if (this.isOpen) {
-        this.updateListener = () => {
-          const pos = this.bot.entity.position
-          const rot = [this.bot.entity.yaw, this.bot.entity.pitch]
-
-          const viewDegToMinecraft = (yaw) => {
-            return yaw % 360 - 180 * (yaw < 0 ? -1 : 1)
-          }
-
-          const minecraftYaw = viewDegToMinecraft(rot[0] * -180 / Math.PI)
-          const minecraftQuad = Math.floor(((minecraftYaw + 180) / 90 + 0.5) % 4)
-
-          const target = this.cursorBlock
-          const targetDiggable = (target && this.bot.canDigBlock(target))
-
-          this.updateEntry(this.positionEntry, `XYZ: ${pos.x.toFixed(3)} / ${pos.y.toFixed(3)} / ${pos.z.toFixed(3)}`)
-          this.updateEntry(this.chunkEntry, `Chunk: ${Math.floor(pos.x % 16)} ~ ${Math.floor(pos.z % 16)} in ${Math.floor(pos.x / 16)} ~ ${Math.floor(pos.z / 16)}`)
-
-          const quadsDescription = [
-            'north (towards negative Z)',
-            'east (towards positive X)',
-            'south (towards positive Z)',
-            'west (towards negative X)'
-          ]
-
-          this.updateEntry(this.rotationEntryV, `Facing (viewer): ${rot[0].toFixed(3)} ${rot[1].toFixed(3)}`)
-          this.updateEntry(this.rotationEntryM, `Facing (minecraft): ${quadsDescription[minecraftQuad]} (${minecraftYaw.toFixed(1)} ${(rot[1] * -180 / Math.PI).toFixed(1)})`)
-
-          if (targetDiggable) {
-            if (this.getEntry(this.targetBlockEntry).hidden) this.setEntryVisible(this.targetBlockEntry, true)
-
-            this.updateEntry(this.targetBlockEntry, `Looking at: ${target.position.x} ${target.position.y} ${target.position.z}`)
-          } else if (!targetDiggable && !this.getEntry(this.targetBlockEntry).hidden) {
-            this.setEntryVisible(this.targetBlockEntry, false)
-          }
-        }
-        this.bot.on('move', this.updateListener)
-      } else if (this.updateListener) {
-        this.bot.removeListener('move', this.updateListener)
-        this.updateListener = null
-      }
-    }
-  }
-
-  /**
-   * Creates debug menu entry
-   *
-   * @param  {string} text - Text to render
-   * @param  {boolean} [breaking=false] - Adds a line break after the entry if set to true (useful if you want to separate a section from everything else)
-   * @return {number} Debug entry id - keep it somewhere to update entry contents later!
-   */
-  addEntry (text, breaking = false) {
-    const currentIds = Object.keys(this.debugEntries)
-    const id = parseInt(currentIds[currentIds.length - 1] ?? -1) + 1
-
-    this.debugEntries[id] = new DebugMenuEntry(text, false, breaking)
-
-    this.requestUpdate()
-    return id
-  }
-
-  /**
-   * Updates entry contents
-   *
-   * @param  {number} id - Debug entry id (returned with addEntry())
-   * @param  {string} text - Text to render
-   * @return {boolean} true if successfully updated, false otherwise (if entry doesn't exist)
-   */
-  updateEntry (id, text) {
-    if (this.debugEntries[id] !== undefined) {
-      this.debugEntries[id].text = text
-
-      if (this.isOpen) this.requestUpdate() // This will make performance comparisons easier should something go wrong
-      return true
-    }
-
-    return false
-  }
-
-  /**
-   * Sets entry visibility
-   *
-   * @param  {number} id - Debug entry id (returned with addEntry())
-   * @param  {boolean} [shouldRender=true] - set to false if you want to hide the entry
-   * @return {boolean|undefined} current visibility or undefined if entry doesn't exist
-   */
-  setEntryVisible (id, shouldRender = true) {
-    if (this.debugEntries[id] !== undefined) {
-      this.debugEntries[id].hidden = !shouldRender
-
-      this.requestUpdate()
-      return this.debugEntries[id].hidden
-    }
-  }
-
-  /**
-   * Returns entry internals
-   *
-   * @param  {number} id - Debug entry id (returned with addEntry())
-   * @return {DebugEntry} Debug entry internals
-   */
-  getEntry (id) {
-    return this.debugEntries[id] ?? null
-  }
-
-  /**
-   * Completely removes debug entry (you won't be able to update it afterwards!)
-   *
-   * @param  {number} id - Debug entry id (returned with addEntry())
-   * @return {boolean} true if element existed and was successfully annihilated, false otherwise
-   */
-  removeEntry (id) {
-    if (this.debugEntries[id]) {
-      delete this.debugEntries[id]
-
-      this.requestUpdate()
-      return true
-    }
-
-    return false
-  }
-
-  init (bot) {
-    const debugMenu = this.shadowRoot.querySelector('#debugmenu')
-    this.isOpen = false
-
-    const showMenu = (shouldShow = true) => {
-      debugMenu.style.display = shouldShow ? 'block' : 'none'
-      this.isOpen = shouldShow
-    }
-
-    document.addEventListener('keydown', e => {
-      e ??= window.event
-      if (e.key === 'F3') {
-        showMenu(!this.isOpen)
-
-        this.requestUpdate()
-        e.preventDefault()
-      }
-    })
-    this.bot = bot
-
-    this.positionEntry = this.addEntry('XYZ: 0 / 0 / 0')
-    this.chunkEntry = this.addEntry('Chunk: 0 0 0 in 0 0 0')
-    this.rotationEntryV = this.addEntry('Facing (viewer): 0 0')
-    this.rotationEntryM = this.addEntry('Facing (minecraft): 0 0')
-    this.targetBlockEntry = this.addEntry('Looking at: 0 0 0', true)
-  }
 }
 
 window.customElements.define('debug-menu', DebugMenu)