refactor: components

packages/topdown/package.json

@@ -28,6 +28,7 @@
     "@avocado/s13n": "2.0.0",
     "@avocado/traits": "^2.0.0",
     "@latus/core": "2.0.0",
+    "@latus/react": "^2.0.0",
     "@latus/socket": "^2.0.0",
     "debug": "4.3.1"
   },

packages/topdown/src/components/room.jsx

@@ -0,0 +1,62 @@
+import {
+  PropTypes,
+  React,
+  useEffect,
+  useRef,
+} from '@latus/react';
+
+const Room = ({
+  left,
+  room,
+  top,
+}) => {
+  const ref = useRef();
+  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]);
+  useEffect(() => {
+    if (!ref.current || !room) {
+      return;
+    }
+    const entities = ref.current.querySelector('.entities');
+    entities.style.left = `${left}px`;
+    entities.style.top = `${top}px`;
+  });
+  return (
+    <div
+      className="room"
+      ref={ref}
+    >
+      <div className="entities" />
+    </div>
+  );
+};
+
+Room.defaultProps = {
+  room: undefined,
+};
+
+Room.propTypes = {
+  left: PropTypes.number.isRequired,
+  room: PropTypes.shape({
+    entities: PropTypes.shape({}),
+    off: PropTypes.func,
+    on: PropTypes.func,
+  }),
+  top: PropTypes.number.isRequired,
+};
+
+export default Room;

packages/topdown/src/components/room.scss

@@ -0,0 +1,16 @@
+.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/topdown/src/index.js

@@ -1,5 +1,7 @@
 import {gatherWithLatus} from '@latus/core';
 
+export {default as Room} from './components/room';
+
 export {default as Camera} from './camera';
 export {default as LayerView} from './layer-view';
 export {default as RoomView} from './room-view';

packages/topdown/yarn.lock

@@ -1109,7 +1109,7 @@
     webpack-hot-middleware "^2.25.0"
     webpack-virtual-modules "^0.4.1"
 
-"@latus/react@2.0.0":
+"@latus/react@2.0.0", "@latus/react@^2.0.0":
   version "2.0.0"
   resolved "http://npm.cha0sdev/@latus%2freact/-/react-2.0.0.tgz#1a4aab9a4a7e2edf40e146feca8c6601aee204ce"
   integrity sha512-GKaYhsIe+BrUsaM5rrFFHfbMN23so+mQLFfm+uF1AdBOxkvg1LiXL8yWbcH2pt0G1OUsgOKjTWW9hCc1OjSuEw==