const { LitElement, css, html } = require('lit') const { repeat } = require('../../util') class BreathBar extends LitElement { static get styles () { return css` .breathbar { position: absolute; display: flex; flex-direction: row-reverse; left: calc(50% + 91px); transform: translate(-100%); bottom: 40px; --offset: calc(-1 * 16px); --bg-x: calc(-1 * 16px); --bg-y: calc(-1 * 18px); } .breath { width: 9px; height: 9px; margin-left: -1px; } .breath.full { background-image: url('textures/1.17.1/gui/icons.png'); background-size: 256px; background-position: var(--offset) var(--bg-y); } .breath.half { background-image: url('textures/1.17.1/gui/icons.png'); background-size: 256px; background-position: calc(var(--offset) - 9px) var(--bg-y); } ` } static get properties () { return { playerInCreative: { type: Boolean }, breathBubbles: { type: Number }, showBreathBubbles: { type: Boolean } } } constructor() { super() this.showBreathBubbles = false this.breathBubbles = 20 this.playerInCreative = false } init () { this.playerInCreative = bot.player.gamemode === 1 this.breathBubbles = bot.oxygenLevel ?? 20 this.showBreathBubbles = this.breathBubbles < 20 bot.on('game', () => { this.playerInCreative = bot.player.gamemode === 1 }) bot.on('breath', () => { this.breathBubbles = bot.oxygenLevel ?? 20 this.showBreathBubbles = this.breathBubbles < 20 console.log('breathBubbles='+this.breathBubbles,'showBreathBubbles=',this.showBreathBubbles) }) } _bubbleInfo (ix) { if (this.breathBubbles === 20) { return { hidden: true, class: 'breath' } } else if (this.playerInCreative) { return { hidden: true, class: 'breath' } } else if (this.breathBubbles === 0) { return { hidden: false, class: 'breath full' } } const bubbles = this.breathBubbles / 2 if (Math.ceil(bubbles) !== Math.floor(bubbles) && Math.ceil(bubbles) === ix) { return { hidden: false, class: 'breath half' } } else if (Math.floor(bubbles) >= ix) { return { hidden: false, class: 'breath full'} } return { hidden: true, class: 'breath' } } render () { return html` <div id="breathbar" class="breathbar" ?hidden=${!this.showBreathBubbles}> ${repeat(11, ix => html`<div ?hidden=${this._bubbleInfo(ix).hidden} class=${this._bubbleInfo(ix).class}></div>`, 1)} </div> ` } } window.customElements.define('pmui-breathbar', BreathBar)