diff --git a/client/index.js b/client/index.js
index 80137af..b2e7821 100644
--- a/client/index.js
+++ b/client/index.js
@@ -32,6 +32,10 @@ const stage = new Stage(Vector.mul(visibleSize, visibleScale));
stage.scale = visibleScale;
// Handle "own" entity.
let selfEntity;
+let selfEntityResolver;
+const selfEntityPromise = new Promise((resolve) => {
+ selfEntityResolver = resolve;
+});
function hasSelfEntity() {
return selfEntity && 'string' !== typeof selfEntity;
}
@@ -71,7 +75,7 @@ room.on('entityAdded', (entity) => {
if ('string' === typeof selfEntity) {
if (entity === room.findEntity(selfEntity)) {
selfEntity = entity;
- evaluationContext.selfEntity = selfEntity;
+ selfEntityResolver(entity);
// Add back our self entity traits.
for (const type of selfEntityOnlyTraits) {
entity.addTrait(type);
@@ -270,6 +274,7 @@ const debugUiNode = document.querySelector('.debug-container');
const DebugUiComponent = ;
ReactDOM.render(DebugUiComponent, debugUiNode);
@@ -281,5 +286,8 @@ const evaluationContext = {
selfEntity,
stage,
};
+selfEntityPromise.then((entity) => {
+ evaluationContext.selfEntity = entity;
+});
// Just inject it into global for now.
window.humus = evaluationContext;
diff --git a/client/ui/debug/index.js b/client/ui/debug/index.js
index a8a14f1..17a4b26 100644
--- a/client/ui/debug/index.js
+++ b/client/ui/debug/index.js
@@ -3,8 +3,10 @@ import React, {useEffect, useState} from 'react';
import {hot} from 'react-hot-loader/root';
// 2nd party.
import {compose} from '@avocado/core';
+import {Vector} from '@avocado/math';
import contempo from 'contempo';
// 3rd party.
+import SelfEntity from './self-entity';
import Throughput from './throughput';
const decorate = compose(
@@ -12,7 +14,12 @@ const decorate = compose(
hot,
);
-const DebugUi = ({actionRegistry, stage, Parser}) => {
+const DebugUi = ({
+ actionRegistry,
+ selfEntityPromise,
+ stage,
+ Parser,
+}) => {
const [size, setSize] = useState([0, 0]);
const [position, setPosition] = useState([0, 0]);
const [transformRatio, setTransformRatio] = useState(1);
@@ -51,6 +58,7 @@ const DebugUi = ({actionRegistry, stage, Parser}) => {
return
{
}}
>
+
;
};
diff --git a/client/ui/debug/self-entity.js b/client/ui/debug/self-entity.js
new file mode 100644
index 0000000..b16daaf
--- /dev/null
+++ b/client/ui/debug/self-entity.js
@@ -0,0 +1,75 @@
+// 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
+
+
{roundedPosition[0]}
+
{roundedPosition[1]}
+
+
;
+}
+
+export default decorate(SelfEntityComponent);