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