51 lines
1.8 KiB
JavaScript
51 lines
1.8 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
const shapes = require('./shapes');
|
|
|
|
const addState = connect(({ animText }) => ({ animText }));
|
|
|
|
class GameConstructLife extends preact.Component {
|
|
shouldComponentUpdate(newProps) {
|
|
if (newProps.animText !== this.props.animText) {
|
|
if (newProps.animText && newProps.animText.target === this.props.construct.id) {
|
|
const [type] = newProps.animText.variant;
|
|
if (type === 'Damage' || type === 'Healing' || type === 'Recharge') return true;
|
|
}
|
|
}
|
|
if (newProps.construct !== this.props.construct) return true;
|
|
return false;
|
|
}
|
|
|
|
render() {
|
|
const { construct, animText } = this.props;
|
|
const lifeBars = (redLife, greenLife, blueLife) => {
|
|
return (
|
|
<div class="stats">
|
|
<div>
|
|
{shapes.RedLife()}
|
|
<div class="max" >{redLife} / {construct.red_life.max}</div>
|
|
</div>
|
|
<div>
|
|
{shapes.GreenLife()}
|
|
<div class="max" >{greenLife} / {construct.green_life.max}</div>
|
|
</div>
|
|
<div>
|
|
{shapes.BlueLife()}
|
|
<div class="max" >{blueLife} / {construct.blue_life.max}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
if (animText) {
|
|
const { red, blue, green } = animText.variant[1].display;
|
|
return lifeBars(red, green, blue);
|
|
}
|
|
|
|
return lifeBars(construct.red_life.value, construct.green_life.value, construct.blue_life.value);
|
|
}
|
|
}
|
|
|
|
module.exports = addState(GameConstructLife);
|