58 lines
1.2 KiB
JavaScript
58 lines
1.2 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';
|
|
// 1st party.
|
|
import {usePropertyChange} from '../hooks/use-property-change';
|
|
import {useSelfEntity} from '../hooks/use-self-entity';
|
|
|
|
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 = useSelfEntity(app);
|
|
const position = usePropertyChange(selfEntity, 'position', [0, 0]);
|
|
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);
|