flow: room

packages/topdown-persea/src/controllers/room/component.jsx

@@ -25,7 +25,7 @@ const ticker = () => {};
 
 const RoomComponent = ({
   resource,
-  path,
+  // path,
 }) => {
   const latus = useLatus();
   const {uri} = useParams();
@@ -34,6 +34,7 @@ const RoomComponent = ({
   const [roomRenderable, setRoomRenderable] = useState();
   const [viewport, setViewport] = useState([0, 0]);
   const roomSides = latus.get('%room-sides');
+  const [currentAction, setCurrentAction] = useState(0);
   const [currentSide, setCurrentSide] = useState(0);
   const [sideIsActive, setSideIsActive] = useState(false);
   useEffect(() => {
@@ -70,10 +71,12 @@ const RoomComponent = ({
   if (!roomRenderable) {
     return null;
   }
-  const buttons = roomSides.map(({button}, i) => React.cloneElement(
-    button,
-    {
-      onClick: () => {
+  const buttons = roomSides.map(({Button}, i) => (
+    <Button
+      className={classnames(i === currentSide && locals.active)}
+      // eslint-disable-next-line react/no-array-index-key
+      key={i}
+      onClick={() => {
         if (i === currentSide) {
           setSideIsActive(!sideIsActive);
         }
@@ -81,8 +84,8 @@ const RoomComponent = ({
           setSideIsActive(true);
         }
         setCurrentSide(i);
-      },
-    },
+      }}
+    />
   ));
   const {Side} = roomSides[currentSide];
   return (
@@ -101,8 +104,24 @@ const RoomComponent = ({
       />
       <div className={locals.bar}>
         <div className={locals['button-group']}>
-          <button aria-label="Pan" title="Pan" type="button" className={locals.pan} />
-          <button aria-label="Interact" title="Interact" type="button" className={locals.interact} />
+          <button
+            aria-label="Pan"
+            title="Pan"
+            type="button"
+            className={classnames(locals.pan, 0 === currentAction && locals.active)}
+            onClick={() => {
+              setCurrentAction(0);
+            }}
+          />
+          <button
+            aria-label="Interact"
+            title="Interact"
+            type="button"
+            className={classnames(locals.interact, 1 === currentAction && locals.active)}
+            onClick={() => {
+              setCurrentAction(1);
+            }}
+          />
         </div>
         <div className="grow" />
         <div className={locals['button-group']}>
@@ -115,7 +134,7 @@ const RoomComponent = ({
 };
 
 RoomComponent.defaultProps = {
-  path: '/',
+  // path: '/',
 };
 
 RoomComponent.displayName = 'RoomComponent';
@@ -124,7 +143,7 @@ RoomComponent.propTypes = {
   resource: PropTypes.shape({
     traits: PropTypes.shape({}),
   }).isRequired,
-  path: PropTypes.string,
+  // path: PropTypes.string,
 };
 
 export default hot(module)(RoomComponent);

packages/topdown-persea/src/controllers/room/component.module.scss

@@ -60,6 +60,11 @@
     overflow: hidden;
     width: 3em;
 
+    &.active {
+      box-shadow: 0px 0px 5px white;
+      background-color: #777;
+      border: 2px solid yellow;
+    }
     &.pan {
       background-image: url('./img/select.png');
     }

packages/topdown-persea/src/room-sides/entities-side/button.jsx

@@ -1,13 +1,34 @@
-import {React} from '@latus/react';
+import {
+  classnames,
+  hot,
+  PropTypes,
+  React,
+} from '@latus/react';
 
 import {locals} from './button.module.scss';
 
-export default (
-  <button
-    aria-label="Entities"
-    className={locals.tiles}
-    key="entities"
-    title="Entities"
-    type="button"
-  />
-);
+function Button({className, onClick}) {
+  return (
+    <button
+      aria-label="Entities"
+      className={classnames(className, locals.entities)}
+      onClick={onClick}
+      title="Entities"
+      type="button"
+    />
+  );
+}
+
+Button.defaultProps = {
+  className: '',
+  onClick: () => {},
+};
+
+Button.displayName = 'Button';
+
+Button.propTypes = {
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+export default hot(module)(Button);

packages/topdown-persea/src/room-sides/entities-side/button.module.scss

@@ -1,3 +1,3 @@
-.tiles {
+.entities {
   background-image: url('./group.png');
 }

packages/topdown-persea/src/room-sides/entities-side/index.js

@@ -1,7 +1,7 @@
-import button from './button';
+import Button from './button';
 import Side from './side';
 
 export default {
-  button,
+  Button,
   Side,
 };

packages/topdown-persea/src/room-sides/entities-side/side.jsx

@@ -35,13 +35,16 @@ function EntitiesSide({room}) {
       </button>
     ));
   return (
-    <>
-      <div>{names}</div>
+    <div className={locals['entities-side']}>
+      <div className={classnames('label', locals.label)}>
+        <span className="vertical">Entities</span>
+        <div className={locals.list}>{names}</div>
+      </div>
       <EntityController.Component
         resource={Object.values(room.entities)[selectedEntity]}
-        path="/entities/0"
+        path={`/entities/${selectedEntity}`}
       />
-    </>
+    </div>
   );
 }
 

packages/topdown-persea/src/room-sides/entities-side/side.module.scss

@@ -1,3 +1,26 @@
+.entities-side {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  :global(.entity-renderer) {
+    flex-grow: 1;
+    height: auto;
+  }
+}
+
 .entity {
   height: 2em;
-}
+  margin-bottom: 0;
+  margin-right: 0.5em;
+}
+
+.label {
+  max-height: 33%;
+}
+
+.list {
+  display: block;
+  height: 100%;
+  overflow: auto;
+}

packages/topdown-persea/src/room-sides/tiles-side/button.jsx

@@ -1,13 +1,34 @@
-import {React} from '@latus/react';
+import {
+  classnames,
+  hot,
+  PropTypes,
+  React,
+} from '@latus/react';
 
 import {locals} from './button.module.scss';
 
-export default (
-  <button
-    aria-label="Tiles"
-    className={locals.tiles}
-    key="tiles"
-    title="Tiles"
-    type="button"
-  />
-);
+function Button({className, onClick}) {
+  return (
+    <button
+      aria-label="Tiles"
+      className={classnames(className, locals.tiles)}
+      onClick={onClick}
+      title="Tiles"
+      type="button"
+    />
+  );
+}
+
+Button.defaultProps = {
+  className: '',
+  onClick: () => {},
+};
+
+Button.displayName = 'Button';
+
+Button.propTypes = {
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+export default hot(module)(Button);

packages/topdown-persea/src/room-sides/tiles-side/index.js

@@ -1,7 +1,7 @@
-import button from './button';
+import Button from './button';
 import Side from './side';
 
 export default {
-  button,
+  Button,
   Side,
 };