76 lines
1.6 KiB
JavaScript
76 lines
1.6 KiB
JavaScript
// 3rd party.
|
|
import React, {useEffect, useState} from 'react';
|
|
// 2nd party.
|
|
import {compose} from '@avocado/core';
|
|
import {Vector} from '@avocado/math';
|
|
import contempo from 'contempo';
|
|
|
|
const decorate = compose(
|
|
contempo(`
|
|
.self-entity {
|
|
background-color: rgba(0, 0, 0, .3);
|
|
border: 1px solid white;
|
|
color: white;
|
|
font-size: 0.8em;
|
|
position: absolute;
|
|
top: calc(180px + 0.5em);
|
|
left: 0.5em;
|
|
line-height: 1em;
|
|
width: 16em;
|
|
padding: 0.125em;
|
|
font-family: monospace;
|
|
}
|
|
.location {
|
|
}
|
|
.x {
|
|
display: inline-block;
|
|
width: 8em;
|
|
}
|
|
.y {
|
|
display: inline-block;
|
|
width: 7.125em;
|
|
}
|
|
.x:before {
|
|
content: 'x: ';
|
|
}
|
|
.y:before {
|
|
content: 'y: ';
|
|
}
|
|
`),
|
|
);
|
|
|
|
const SelfEntityComponent = ({selfEntityPromise}) => {
|
|
const [selfEntity, setSelfEntity] = useState();
|
|
const [position, setPosition] = useState([0, 0]);
|
|
useEffect(() => {
|
|
selfEntityPromise.then((entity) => {
|
|
setSelfEntity(entity);
|
|
setPosition(entity.position);
|
|
});
|
|
}, [selfEntity]);
|
|
useEffect(() => {
|
|
if (!selfEntity) {
|
|
return;
|
|
}
|
|
const onPositionChanged = () => {
|
|
setPosition(selfEntity.position);
|
|
};
|
|
selfEntity.on('positionChanged', onPositionChanged);
|
|
return () => {
|
|
selfEntity.off('positionChanged', onPositionChanged);
|
|
};
|
|
}, [position]);
|
|
const roundedPosition = Vector.div(
|
|
Vector.floor(Vector.scale(position, 1000)),
|
|
[1000, 1000],
|
|
);
|
|
return <div className="self-entity unselectable">
|
|
<div className="location">
|
|
<div className="x">{roundedPosition[0]}</div>
|
|
<div className="y">{roundedPosition[1]}</div>
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
export default decorate(SelfEntityComponent);
|