refactor: components

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

@@ -2,6 +2,7 @@ import './index.scss';
 
 import {InputNormalizer} from '@avocado/input/client';
 import {Vector} from '@avocado/math';
+import {Room} from '@avocado/topdown';
 import {
   setSelfEntity,
   useRoom,
@@ -11,6 +12,7 @@ import {
   React,
   useEffect,
   useRef,
+  useState,
 } from '@latus/react';
 import {useDispatch} from '@latus/redux';
 import {useSocket} from '@latus/socket';
@@ -27,22 +29,8 @@ const Play = () => {
   const room = useRoom();
   const selfEntity = useSelfEntity();
   const socket = useSocket();
-  useEffect(() => {
-    if (!ref.current || !room) {
-      return undefined;
-    }
-    const onEntityAdded = async (entity) => {
-      if (entity.is('DomNode')) {
-        // eslint-disable-next-line no-param-reassign
-        entity.parentNode = ref.current.querySelector('.entities');
-      }
-    };
-    Object.values(room.entities).forEach(onEntityAdded);
-    room.on('entityAdded', onEntityAdded);
-    return () => {
-      room.off('entityAdded', onEntityAdded);
-    };
-  }, [ref, room]);
+  const [left, setLeft] = useState(0);
+  const [top, setTop] = useState(0);
   useEffect(() => {
     if (!room || !selfEntity) {
       return undefined;
@@ -50,9 +38,8 @@ const Play = () => {
     selfEntity.camera.realPosition = selfEntity.camera.position;
     const onCameraRealOffsetChanged = () => {
       const [left, top] = Vector.scale(selfEntity.camera.realOffset, -1);
-      const entities = ref.current.querySelector('.entities');
-      entities.style.left = `${FACTOR * left}px`;
-      entities.style.top = `${FACTOR * top}px`;
+      setLeft(FACTOR * left);
+      setTop(FACTOR * top);
     };
     onCameraRealOffsetChanged();
     selfEntity.camera.on('realOffsetChanged', onCameraRealOffsetChanged);
@@ -63,7 +50,6 @@ const Play = () => {
       }
     };
   }, [room, selfEntity]);
-
   useEffect(() => {
     const join = async () => {
       dispatch(setSelfEntity(await socket.send(['Join', uuid])));
@@ -94,7 +80,7 @@ const Play = () => {
     return () => {
       clearInterval(inputHandle);
     };
-  });
+  }, [selfEntity, socket]);
   return (
     <div
       className="play"
@@ -102,7 +88,7 @@ const Play = () => {
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex="0"
     >
-      <div className="entities" />
+      <Room left={left} room={room} top={top} />
       {selfEntity && <Hotbar selfEntity={selfEntity} />}
     </div>
   );

packages/http/src/components/play/index.scss

@@ -1,16 +0,0 @@
-.entities {
-  position: relative;
-}
-
-entity.dialog {
-  background-color: rgba(0, 0, 0, 0.6);
-  border-radius: 0.5em;
-  border: 2px solid #444;
-  display: inline-flex;
-  flex-wrap: wrap;
-  font-family: Joystix;
-  font-size: 2.5em;
-  max-width: 75rem;
-  padding: 1em;
-}
-

packages/http/src/components/ui/index.jsx

@@ -1,4 +1,4 @@
-import './ui.scss';
+import './index.scss';
 
 import {
   PropTypes,