94 lines
2.6 KiB
JavaScript
94 lines
2.6 KiB
JavaScript
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)
|