refactor: tidy

packages/topdown/src/components/room.jsx

@@ -1,5 +1,3 @@
-import './room.scss';
-
 import {
   PropTypes,
   React,
@@ -7,47 +5,51 @@ import {
   useRef,
 } from '@flecks/react';
 
-const Room = ({
+import styles from './room.module.scss';
+
+// This is the DOM side of a rendered room. Dialog text, damage numbers, (DOM node entities)...
+function Room({
   domScale,
   left,
   room,
   top,
-}) => {
+}) {
   const ref = useRef();
   useEffect(() => {
     if (!ref.current || !room) {
       return undefined;
     }
+    // Manage entities' relationship with the DOM.
     const onEntityAdded = async (entity) => {
       if (entity.is('DomNode')) {
         /* eslint-disable no-param-reassign */
         [entity.domScaleX, entity.domScaleY] = domScale;
-        entity.parentNode = ref.current.querySelector('.entities');
+        entity.parentNode = ref.current.querySelector(`.${styles.entities}`);
         /* eslint-enable no-param-reassign */
       }
     };
+    // Existing entities.
     Object.values(room.entities).forEach(onEntityAdded);
+    // Any new entities.
     room.on('entityAdded', onEntityAdded);
     return () => {
       room.off('entityAdded', onEntityAdded);
     };
   }, [domScale, ref, room]);
+  // Update the transform.
   useEffect(() => {
     if (!ref.current || !room) {
       return;
     }
-    const entities = ref.current.querySelector('.entities');
-    entities.style.transform = `translate(${left * domScale[0]}px, ${top * domScale[1]}px)`;
+    ref.current
+      .style.transform = `translate(${left * domScale[0]}px, ${top * domScale[1]}px)`;
   });
   return (
-    <div
-      className="room"
-      ref={ref}
-    >
-      <div className="entities" />
+    <div className={styles.room} ref={ref}>
+      <div className={styles.entities} />
     </div>
   );
-};
+}
 
 Room.defaultProps = {
   room: undefined,

packages/topdown/src/components/room.module.scss

@@ -0,0 +1,19 @@
+.room {
+  position: relative;
+}
+
+.entities {
+  // @todo Doesn't belong here.
+  :global(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: dialogue;
+    font-size: 1.75em;
+    max-width: 75rem;
+    padding: 0.5em;
+  }
+}
+

packages/topdown/src/components/room.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: dialogue;
-  font-size: 1.75em;
-  max-width: 75rem;
-  padding: 0.5em;
-}
-