refactor: vector

packages/topdown/src/components/room.jsx

@@ -1,3 +1,4 @@
+import {Vector} from '@avocado/math';
 import {
   PropTypes,
   React,
@@ -10,9 +11,8 @@ 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,
+  position,
   room,
-  top,
 }) {
   const ref = useRef();
   useEffect(() => {
@@ -41,8 +41,9 @@ function Room({
     if (!ref.current || !room) {
       return;
     }
+    const translated = Vector.mul(position, domScale);
     ref.current
-      .style.transform = `translate(${left * domScale[0]}px, ${top * domScale[1]}px)`;
+      .style.transform = `translate(${translated[0]}px, ${translated[1]}px)`;
   });
   return (
     <div className={styles.room} ref={ref}>
@@ -58,13 +59,12 @@ Room.defaultProps = {
 Room.propTypes = {
   // @todo Real prop type
   domScale: PropTypes.arrayOf(PropTypes.number).isRequired,
-  left: PropTypes.number.isRequired,
+  position: PropTypes.arrayOf(PropTypes.number).isRequired,
   room: PropTypes.shape({
     entities: PropTypes.shape({}),
     off: PropTypes.func,
     on: PropTypes.func,
   }),
-  top: PropTypes.number.isRequired,
 };
 
 export default Room;