88 lines
2.2 KiB
JavaScript
88 lines
2.2 KiB
JavaScript
const { LitElement, html, css } = require('lit')
|
|
|
|
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) - 9) var(--bg-y);
|
|
}
|
|
`
|
|
}
|
|
|
|
gameModeChanged (gamemode) {
|
|
this.shadowRoot.querySelector('#breathbar').classList.toggle('creative', gamemode === 1)
|
|
}
|
|
|
|
updateOxygen (hValue) {
|
|
const breathbar = this.shadowRoot.querySelector('#breathbar')
|
|
breathbar.style.display = 'block'
|
|
|
|
const breaths = breathbar.children
|
|
|
|
for (let i = 0; i < breaths.length; i++) {
|
|
breaths[i].classList.remove('full')
|
|
breaths[i].classList.remove('half')
|
|
}
|
|
|
|
for (let i = 0; i < Math.ceil(hValue / 2); i++) {
|
|
if (i >= breaths.length) break
|
|
|
|
if (hValue % 2 !== 0 && Math.ceil(hValue / 2) === i + 1) {
|
|
breaths[i].classList.add('half')
|
|
} else {
|
|
breaths[i].classList.add('full')
|
|
}
|
|
}
|
|
|
|
// if (hValue === 20) {
|
|
// setTimeout(() => {
|
|
// breathbar.style.display = 'none'
|
|
// }, 1000)
|
|
// }
|
|
}
|
|
|
|
render () {
|
|
return html`
|
|
<div id="breathbar" class="breathbar">
|
|
<div class="breath"></div>
|
|
<div class="breath"></div>
|
|
<div class="breath"></div>
|
|
<div class="breath"></div>
|
|
<div class="breath"></div>
|
|
<div class="breath"></div>
|
|
<div class="breath"></div>
|
|
<div class="breath"></div>
|
|
<div class="breath"></div>
|
|
<div class="breath"></div>
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
window.customElements.define('pmui-breathbar', BreathBar)
|