refactor: elegance

packages/app/src/components/app/play/index.jsx

@@ -66,6 +66,12 @@ function Play() {
       clearInterval(inputHandle);
     };
   }, [selfEntity, socket]);
+  // Initial camera position snap.
+  useEffect(() => {
+    if (selfEntity) {
+      selfEntity.camera.realPosition = selfEntity.camera.position;
+    }
+  }, [selfEntity]);
   return (
     <>
       <Renderable />

packages/app/src/components/app/play/ui/index.jsx

@@ -1,11 +1,9 @@
 import {Vector} from '@avocado/math';
+import {usePropertyChange} from '@avocado/react';
 import {RoomUi} from '@avocado/topdown';
 import {
   React,
-  useEffect,
   useFlecks,
-  useRef,
-  useState,
 } from '@flecks/react';
 
 import {
@@ -14,48 +12,22 @@ import {
 } from '../../../../hooks';
 import Hotbar from './hotbar';
 
+const focus = (element) => {
+  element.focus();
+};
+
 const PlayUi = () => {
-  const flecks = useFlecks();
+  const {config: {'@humus/app': {resolution}}} = useFlecks();
-  const ref = useRef();
   const room = useRoom();
   const selfEntity = useSelfEntity();
-  const [position, setPosition] = useState([0, 0]);
-  const [domScale, setDomScale] = useState([1, 1]);
-  // Handle camera changes.
-  useEffect(() => {
-    if (!room || !selfEntity) {
-      return undefined;
-    }
-    // Initial snap camera to position.
-    selfEntity.camera.realPosition = selfEntity.camera.position;
-    const onCameraRealOffsetChanged = () => {
-      setPosition(Vector.scale(selfEntity.camera.realOffset, -1));
-    };
-    const onCameraViewSizeChanged = () => {
-      setDomScale(Vector.div(flecks.get('@humus/app.resolution'), selfEntity.camera.viewSize));
-    };
-    onCameraRealOffsetChanged();
-    onCameraViewSizeChanged();
-    selfEntity.camera.on('realOffsetChanged', onCameraRealOffsetChanged);
-    selfEntity.camera.on('viewSizeChanged', onCameraViewSizeChanged);
-    return () => {
-      const {camera} = selfEntity;
-      if (camera) {
-        camera.off('realOffsetChanged', onCameraViewSizeChanged);
-        camera.off('viewSizeChanged', onCameraViewSizeChanged);
-      }
-    };
-  }, [flecks, room, selfEntity]);
-  // Focus.
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.focus();
-    }
-  });
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    <div ref={ref} tabIndex="0">
+    <div ref={focus} tabIndex="0">
-      <RoomUi domScale={domScale} position={position} room={room} />
+      <RoomUi
+        domScale={Vector.div(resolution, usePropertyChange(selfEntity?.camera, 'viewSize', [0, 0]))}
+        position={Vector.scale(usePropertyChange(selfEntity?.camera, 'realOffset', [0, 0]), -1)}
+        room={room}
+      />
       {selfEntity && <Hotbar selfEntity={selfEntity} />}
     </div>
   );