158 lines
3.9 KiB
JavaScript
158 lines
3.9 KiB
JavaScript
const { LitElement, html, css } = require('lit')
|
|
|
|
function getEffectClass (effect) {
|
|
switch (effect.id) {
|
|
case 19: return 'poisoned'
|
|
case 20: return 'withered'
|
|
case 22: return 'absorption'
|
|
default: return ''
|
|
}
|
|
}
|
|
|
|
class HealthBar extends LitElement {
|
|
static get styles () {
|
|
return css`
|
|
.health {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: row;
|
|
left: calc(50% - 91px);
|
|
bottom: 30px;
|
|
--hardcore: 0;
|
|
--kind: 0;
|
|
--lightened: 0;
|
|
--offset: calc(-1 * (52px + (9px * (4 * var(--kind) + var(--lightened) * 2)) ));
|
|
--bg-x: calc(-1 * (16px + 9px * var(--lightened)));
|
|
--bg-y: calc(-1 * var(--hardcore) * 45px);
|
|
}
|
|
|
|
.health.creative {
|
|
display: none;
|
|
}
|
|
|
|
.health.hardcore {
|
|
--hardcore: 1;
|
|
}
|
|
|
|
.health.poisoned {
|
|
--kind: 1;
|
|
}
|
|
|
|
.health.withered {
|
|
--kind: 2;
|
|
}
|
|
|
|
.health.absorption {
|
|
--kind: 3;
|
|
}
|
|
|
|
.heart {
|
|
width: 9px;
|
|
height: 9px;
|
|
background-image: url('textures/1.17.1/gui/icons.png'), url('textures/1.17.1/gui/icons.png');
|
|
background-size: 256px, 256px;
|
|
background-position: var(--bg-x) var(--bg-y), var(--bg-x) var(--bg-y);
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.heart.full {
|
|
background-position: var(--offset) var(--bg-y), var(--bg-x) var(--bg-y);
|
|
}
|
|
|
|
.heart.half {
|
|
background-position: calc(var(--offset) - 9px) var(--bg-y), var(--bg-x) var(--bg-y);
|
|
}
|
|
|
|
.health.low .heart {
|
|
animation: lowHealthAnim 0.2s steps(2, end) infinite;
|
|
}
|
|
|
|
.health.low .heart:nth-of-type(2n) {
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
.health.low .heart:nth-of-type(3n) {
|
|
animation-duration: 0.1s;
|
|
}
|
|
|
|
.health.damaged {
|
|
animation: damagedAnim 0.3s steps(2, end) 2;
|
|
}
|
|
|
|
@keyframes lowHealthAnim {
|
|
to {
|
|
transform: translateY(1px);
|
|
}
|
|
}
|
|
|
|
@keyframes damagedAnim {
|
|
to { --lightened: 1; }
|
|
}
|
|
`
|
|
}
|
|
|
|
effectAdded (effect) {
|
|
this.shadowRoot.querySelector('#health').classList.add(getEffectClass(effect))
|
|
}
|
|
|
|
effectEnded (effect) {
|
|
this.shadowRoot.querySelector('#health').classList.remove(getEffectClass(effect))
|
|
}
|
|
|
|
onDamage () {
|
|
this.shadowRoot.querySelector('#health').classList.toggle('damaged', true)
|
|
if (this.hurtTimeout) clearTimeout(this.hurtTimeout)
|
|
this.hurtTimeout = setTimeout(() => {
|
|
this.shadowRoot.querySelector('#health').classList.toggle('damaged', false)
|
|
this.hurtTimeout = null
|
|
}, 1000)
|
|
}
|
|
|
|
gameModeChanged (gamemode, hardcore) {
|
|
this.shadowRoot.querySelector('#health').classList.toggle('creative', gamemode === 1)
|
|
this.shadowRoot.querySelector('#health').classList.toggle('hardcore', hardcore)
|
|
}
|
|
|
|
updateHealth (hValue, d) {
|
|
const health = this.shadowRoot.querySelector('#health')
|
|
health.classList.toggle('low', hValue <= 4)
|
|
|
|
const hearts = health.children
|
|
|
|
for (let i = 0; i < hearts.length; i++) {
|
|
hearts[i].classList.remove('full')
|
|
hearts[i].classList.remove('half')
|
|
}
|
|
|
|
if (d) this.onDamage()
|
|
|
|
for (let i = 0; i < Math.ceil(hValue / 2); i++) {
|
|
if (i >= hearts.length) break
|
|
|
|
if (hValue % 2 !== 0 && Math.ceil(hValue / 2) === i + 1) {
|
|
hearts[i].classList.add('half')
|
|
} else {
|
|
hearts[i].classList.add('full')
|
|
}
|
|
}
|
|
}
|
|
|
|
render () {
|
|
return html`
|
|
<div id="health" class="health">
|
|
<div class="heart"></div>
|
|
<div class="heart"></div>
|
|
<div class="heart"></div>
|
|
<div class="heart"></div>
|
|
<div class="heart"></div>
|
|
<div class="heart"></div>
|
|
<div class="heart"></div>
|
|
<div class="heart"></div>
|
|
<div class="heart"></div>
|
|
<div class="heart"></div>
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
window.customElements.define('pmui-healthbar', HealthBar)
|