82 lines
1.8 KiB
JavaScript
82 lines
1.8 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;
|
|
bottom: 0.5em;
|
|
left: 0.5em;
|
|
line-height: 1em;
|
|
width: 10em;
|
|
padding: 0.125em;
|
|
font-family: monospace;
|
|
}
|
|
.location {
|
|
}
|
|
.x {
|
|
display: inline-block;
|
|
width: 5em;
|
|
}
|
|
.y {
|
|
display: inline-block;
|
|
width: 4.125em;
|
|
}
|
|
.x:before {
|
|
content: 'x: ';
|
|
}
|
|
.y:before {
|
|
content: 'y: ';
|
|
}
|
|
`),
|
|
);
|
|
|
|
const SelfEntityComponent = ({app}) => {
|
|
const [selfEntity, setSelfEntity] = useState();
|
|
const [position, setPosition] = useState([0, 0]);
|
|
useEffect(() => {
|
|
const onSelfEntityChanged = () => {
|
|
const selfEntity = app.selfEntity;
|
|
setSelfEntity(selfEntity);
|
|
if (!selfEntity) {
|
|
return;
|
|
}
|
|
setPosition(selfEntity.position);
|
|
};
|
|
onSelfEntityChanged();
|
|
app.on('selfEntityChanged', onSelfEntityChanged);
|
|
return () => {
|
|
app.off('selfEntityChanged', onSelfEntityChanged);
|
|
}
|
|
}, [selfEntity]);
|
|
useEffect(() => {
|
|
if (!selfEntity) {
|
|
return;
|
|
}
|
|
const onPositionChanged = () => {
|
|
setPosition(selfEntity.position);
|
|
};
|
|
selfEntity.on('positionChanged', onPositionChanged);
|
|
return () => {
|
|
selfEntity.off('positionChanged', onPositionChanged);
|
|
};
|
|
}, [position]);
|
|
const roundedPosition = Vector.round(position);
|
|
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);
|