refactor: selfEntity owned by app

client/app.js

@@ -9,6 +9,9 @@ const decorate = compose(
   Property('selfEntity', {
     track: true,
   }),
+  Property('selfEntityUuid', {
+    track: true,
+  }),
 );
 
 export class App extends decorate(class {}) {}

client/index.js

@@ -33,11 +33,6 @@ const visibleSize = [320, 180];
 const visibleScale = [2, 2];
 const stage = new Stage(Vector.mul(visibleSize, visibleScale));
 stage.scale = visibleScale;
-// Handle "own" entity.
-let selfEntity;
-function hasSelfEntity() {
-  return selfEntity && 'string' !== typeof selfEntity;
-}
 // Create room.
 const room = new Room();
 room.world = new World();
@@ -83,10 +78,10 @@ room.on('entityAdded', (entity) => {
   }
   entity.stage = stage;
   // Set self entity.
-  if ('string' === typeof selfEntity) {
+  if (app.selfEntityUuid) {
-    if (entity === room.findEntity(selfEntity)) {
+    if (entity === room.findEntity(app.selfEntityUuid)) {
-      selfEntity = entity;
       app.selfEntity = entity;
+      app.selfEntityUuid = undefined;
       // Add back our self entity traits.
       for (const type of selfEntityOnlyTraits) {
         entity.addTrait(type);
@@ -119,12 +114,12 @@ appNode.addEventListener('touchmove', (event) => {
 });
 // Mouse/touch movement.
 function createMoveToNormal(position) {
-  if (!selfEntity) {
+  if (!app.selfEntity) {
     return;
   }
   const realEntityPosition = Vector.sub(
-    selfEntity.position,
+    app.selfEntity.position,
-    selfEntity.camera.realOffset,
+    app.selfEntity.camera.realOffset,
   );
   const magnitude = Vector.magnitude(position, realEntityPosition);
   if (magnitude < 8) {
@@ -174,7 +169,8 @@ const socket = createClient(window.location.href, {
 let isConnected = false;
 socket.on('connect', () => {
   room.layers.destroy();
-  selfEntity = undefined;
+  app.selfEntity = undefined;
+  app.selfEntityUuid = undefined;
   isConnected = true;
 });
 socket.on('disconnect', () => {
@@ -233,8 +229,8 @@ const predictionHandle = setInterval(() => {
   const now = performance.now();
   const elapsed = (now - lastTime) / 1000;
   lastTime = now;
-  if (hasSelfEntity()) {
+  if (app.selfEntity) {
-    selfEntity.inputState = actionState.toJS();
+    app.selfEntity.inputState = actionState.toJS();
   }
   // Tick synchronized.
   synchronizer.tick(elapsed);
@@ -251,11 +247,11 @@ function onPacket(packet) {
   if (packet instanceof StatePacket) {
     const patch = unpacker.unpack(packet.data);
     // Yank out self entity.
-    if (!selfEntity) {
+    if (!app.selfEntityUuid) {
       for (const step of patch) {
         const {op, path, value} = step;
         if ('add' === op && '/selfEntity' === path) {
-          selfEntity = value;
+          app.selfEntityUuid = value;
         }
       }
     }
@@ -343,11 +339,11 @@ stage.addToDom(appNode);
 // Eval.
 const evaluationContext = {
   room,
-  selfEntity,
+  selfEntity: app.selfEntity,
   stage,
 };
-app.on('selfEntityChanged', (selfEntity) => {
+app.on('selfEntityChanged', () => {
-  evaluationContext.selfEntity = selfEntity;
+  evaluationContext.selfEntity = app.selfEntity;
 });
 // Just inject it into global for now.
 window.humus = evaluationContext;

client/ui/debug/self-entity.js

@@ -44,8 +44,12 @@ const SelfEntityComponent = ({app}) => {
   const [position, setPosition] = useState([0, 0]);
   useEffect(() => {
     const onSelfEntityChanged = () => {
-      setSelfEntity(app.selfEntity);
+      const selfEntity = app.selfEntity;
-      setPosition(app.selfEntity.position);
+      if (!selfEntity) {
+        return;
+      }
+      setSelfEntity(selfEntity);
+      setPosition(selfEntity.position);
     };
     app.on('selfEntityChanged', onSelfEntityChanged);
     return () => {