init (renderer, bot, host) {
    const debugMenu = this.shadowRoot.querySelector('#debug-overlay')
    const playerList = this.shadowRoot.querySelector('#playerlist-overlay')
    const healthbar = this.shadowRoot.querySelector('#health-bar')
    const foodbar = this.shadowRoot.querySelector('#food-bar')
    // const breathbar = this.shadowRoot.querySelector('#breath-bar')
    const chat = this.shadowRoot.querySelector('#chat')
    const hotbar = this.shadowRoot.querySelector('#hotbar')
    const xpLabel = this.shadowRoot.querySelector('#xp-label')

    this.bot = bot
    hotbar.bot = bot
    debugMenu.bot = bot

    hotbar.init()
    chat.init(bot._client, renderer)
    bot.on('spawn', () => playerList.init(bot, host))

    bot.on('entityHurt', (entity) => {
      if (entity !== bot.entity) return
      healthbar.onDamage()
    })

    bot.on('entityEffect', (entity, effect) => {
      if (entity !== bot.entity) return
      healthbar.effectAdded(effect)
    })

    bot.on('entityEffectEnd', (entity, effect) => {
      if (entity !== bot.entity) return
      healthbar.effectEnded(effect)
    })

    bot.on('game', () => {
      healthbar.gameModeChanged(bot.player.gamemode, bot.game.hardcore)
      foodbar.gameModeChanged(bot.player.gamemode)
      // breathbar.gameModeChanged(bot.player.gamemode)
      this.shadowRoot.querySelector('#xp-bar-bg').style.display = bot.player.gamemode === 1 ? 'none' : 'block'
    })

    bot.on('health', () => {
      healthbar.updateHealth(bot.health, true)
      foodbar.updateHunger(bot.food, true)
    })

    bot.on('experience', () => {
      this.shadowRoot.querySelector('#xp-bar-bg').firstElementChild.style.width = `${182 * bot.experience.progress}px`
      xpLabel.innerHTML = bot.experience.level
      xpLabel.style.display = bot.experience.level > 0 ? 'block' : 'none'
    })

    // bot.on('breath', () => {
    //   breathbar.updateOxygen(bot.oxygenLevel)
    // })

    bot.on('spawn', () => {
      this.shadowRoot.querySelector('#xp-bar-bg').style.display = bot.player.gamemode === 1 ? 'none' : 'block'
      this.shadowRoot.querySelector('#xp-bar-bg').firstElementChild.style.width = `${182 * bot.experience.progress}px`
      xpLabel.innerHTML = bot.experience.level
      xpLabel.style.display = bot.experience.level > 0 ? 'block' : 'none'
      healthbar.gameModeChanged(bot.player.gamemode, bot.game.hardcore)
      healthbar.updateHealth(bot.health)
      foodbar.updateHunger(bot.food)
      // breathbar.updateOxygen(bot.oxygenLevel ?? 20)
    })

    if (document.getElementById('options-screen').forceMobileControls || isMobile()) {
      this.showMobileControls(true)
    } else {
      this.showMobileControls(false)
    }
  }
@param {globalThis.THREE.Renderer} renderer
@param {import('mineflayer').Bot} bot
@param {string} host