88 lines
2.1 KiB
JavaScript
88 lines
2.1 KiB
JavaScript
|
// 3rd party.
|
||
|
|
import classnames from 'classnames';
|
||
|
|
import React from 'react';
|
||
|
|
// 2nd party.
|
||
|
|
import {compose} from '@avocado/core';
|
||
|
|
import contempo from 'contempo';
|
||
|
|
// 1st party.
|
||
|
|
import {usePropertyChange} from '../hooks/use-property-change';
|
||
|
|
import {useSelfEntity} from '../hooks/use-self-entity';
|
||
|
|
|
||
|
|
const decorate = compose(
|
||
|
|
contempo(`
|
||
|
|
.status {
|
||
|
|
color: white;
|
||
|
|
display: inline-block;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 6px;
|
||
|
|
line-height: normal;
|
||
|
|
text-shadow: 0.5px 0.5px 0px black;
|
||
|
|
position: absolute;
|
||
|
|
top: 5px;
|
||
|
|
right: 262px;
|
||
|
|
}
|
||
|
|
.status .health {
|
||
|
|
}
|
||
|
|
.status .health-inner {
|
||
|
|
box-shadow:
|
||
|
|
-.5px -.5px 0 rgba(0, 0, 0, 1),
|
||
|
|
.5px .5px 0 rgba(0, 0, 0, 1),
|
||
|
|
-.5px .5px 0 rgba(0, 0, 0, 1),
|
||
|
|
.5px -.5px 0 rgba(0, 0, 0, 1)
|
||
|
|
;
|
||
|
|
display: inline-block;
|
||
|
|
padding: 1px 3px;
|
||
|
|
line-height: 6px;
|
||
|
|
}
|
||
|
|
.status .currency {
|
||
|
|
}
|
||
|
|
.status .health:before {
|
||
|
|
content: '♥️ ';
|
||
|
|
opacity: 0.75;
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
`),
|
||
|
|
);
|
||
|
|
|
||
|
|
const QuickStatusComponent = ({app}) => {
|
||
|
|
const selfEntity = useSelfEntity(app);
|
||
|
|
const life = usePropertyChange(selfEntity, 'life', 0);
|
||
|
|
const maxLife = usePropertyChange(selfEntity, 'maxLife', 0);
|
||
|
|
const width = life / maxLife;
|
||
|
|
const multiplier = maxLife / life;
|
||
|
|
const gradient = [
|
||
|
|
'to right',
|
||
|
|
'rgba(255, 0, 0, 0.75)',
|
||
|
|
];
|
||
|
|
const yellowStart = multiplier * 0.25;
|
||
|
|
if (yellowStart <= 1) {
|
||
|
|
gradient.push(...[
|
||
|
|
`${yellowStart * 100}%`,
|
||
|
|
'rgba(255, 255, 0, 0.75)',
|
||
|
|
])
|
||
|
|
}
|
||
|
|
const greenStart = multiplier * 0.75;
|
||
|
|
if (greenStart <= 1) {
|
||
|
|
gradient.push(...[
|
||
|
|
`${greenStart * 100}%`,
|
||
|
|
'rgba(0, 255, 0, 0.75)',
|
||
|
|
])
|
||
|
|
}
|
||
|
|
if (2 === gradient.length) {
|
||
|
|
gradient.push('rgba(255, 0, 0, 0.75)');
|
||
|
|
}
|
||
|
|
return <div className="status">
|
||
|
|
<div className="health">
|
||
|
|
<div className="health-inner" style={{
|
||
|
|
backgroundRepeat: 'no-repeat',
|
||
|
|
backgroundImage: `linear-gradient(${gradient.join(', ')})`,
|
||
|
|
backgroundSize: `${width * 100}% 100%`,
|
||
|
|
}}>
|
||
|
|
<span className="life">{life}</span>/<span className="max-life">{maxLife}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default decorate(QuickStatusComponent);
|