feat: selfEntity debug component

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 = <DebugUi
   actionRegistry={actionRegistry}
   Parser={AugmentedParser}
+  selfEntityPromise={selfEntityPromise}
   stage={stage}
 />;
 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;

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 <div
     className="debug"
     style={{
+      display: Vector.isNull(size) ? 'none': 'block',
       left: position[0],
       top: position[1],
       width: size[0],
@@ -68,6 +76,7 @@ const DebugUi = ({actionRegistry, stage, Parser}) => {
       }}
     >
       <Throughput Parser={Parser} />
+      <SelfEntity selfEntityPromise={selfEntityPromise} />
     </div>
   </div>;
 };

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 <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);