refactor: remove FACTOR

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

@@ -11,6 +11,7 @@ import {
 import {
   React,
   useEffect,
+  useFlecks,
   useRef,
   useState,
 } from '@flecks/react';
@@ -20,10 +21,9 @@ import {useSocket} from '@flecks/socket';
 
 import Hotbar from './hotbar';
 
-const FACTOR = 5;
-
 const PlayUi = () => {
   const dispatch = useDispatch();
+  const flecks = useFlecks();
   const {uuid} = useParams();
   const ref = useRef();
   const room = useRoom();
@@ -31,6 +31,7 @@ const PlayUi = () => {
   const socket = useSocket();
   const [left, setLeft] = useState(0);
   const [top, setTop] = useState(0);
+  const [domScale, setDomScale] = useState([1, 1]);
   useEffect(() => {
     if (!room || !selfEntity) {
       return undefined;
@@ -38,8 +39,10 @@ const PlayUi = () => {
     selfEntity.camera.realPosition = selfEntity.camera.position;
     const onCameraRealOffsetChanged = () => {
       const [left, top] = Vector.scale(selfEntity.camera.realOffset, -1);
-      setLeft(FACTOR * left);
-      setTop(FACTOR * top);
+      const {resolution} = flecks.get('@humus/app');
+      setDomScale(Vector.div(resolution, selfEntity.camera.viewSize));
+      setLeft(left);
+      setTop(top);
     };
     onCameraRealOffsetChanged();
     selfEntity.camera.on('realOffsetChanged', onCameraRealOffsetChanged);
@@ -49,7 +52,7 @@ const PlayUi = () => {
         camera.off('realOffsetChanged', onCameraRealOffsetChanged);
       }
     };
-  }, [room, selfEntity]);
+  }, [flecks, room, selfEntity]);
   useEffect(() => {
     const join = async () => {
       dispatch(setSelfEntity(await socket.send(['Join', uuid])));
@@ -96,7 +99,7 @@ const PlayUi = () => {
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex="0"
     >
-      <Room left={left} room={room} top={top} />
+      <Room domScale={domScale} left={left} room={room} top={top} />
       {selfEntity && <Hotbar selfEntity={selfEntity} />}
     </div>
   );