Enable going from building to room and back

4 files changed, 50 insertions, 12 deletions

diff --git a/src/components/map/MapConstants.js b/src/components/map/MapConstants.js
index 7e26ad81..77b1f2cf 100644
--- a/src/components/map/MapConstants.js
+++ b/src/components/map/MapConstants.js
@@ -6,5 +6,5 @@ export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5;
 export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2;
 
 export const GRID_LINE_WIDTH_IN_PIXELS = 2;
-export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 7;
+export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8;
 export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10;
diff --git a/src/components/map/elements/GrayLayer.js b/src/components/map/elements/GrayLayer.js
new file mode 100644
index 00000000..dfcbe71a
--- /dev/null
+++ b/src/components/map/elements/GrayLayer.js
@@ -0,0 +1,17 @@
+import React from "react";
+import {Rect} from "react-konva";
+import {GRAYED_OUT_AREA_COLOR} from "../../../colors/index";
+import {MAP_SIZE_IN_PIXELS} from "../MapConstants";
+
+const GrayLayer = ({onClick}) => (
+    <Rect
+        x={0}
+        y={0}
+        width={MAP_SIZE_IN_PIXELS}
+        height={MAP_SIZE_IN_PIXELS}
+        fill={GRAYED_OUT_AREA_COLOR}
+        onClick={onClick}
+    />
+);
+
+export default GrayLayer;
diff --git a/src/components/map/groups/DatacenterGroup.js b/src/components/map/groups/DatacenterGroup.js
index d7e349be..cd4baaa5 100644
--- a/src/components/map/groups/DatacenterGroup.js
+++ b/src/components/map/groups/DatacenterGroup.js
@@ -1,23 +1,42 @@
 import React from "react";
 import {Group} from "react-konva";
+import GrayContainer from "../../../containers/map/GrayContainer";
+import RoomContainer from "../../../containers/map/RoomContainer";
 import Shapes from "../../../shapes/index";
-import RoomGroup from "./RoomGroup";
 
-const DatacenterGroup = ({datacenter}) => {
+const DatacenterGroup = ({datacenter, interactionLevel}) => {
     if (!datacenter) {
         return <Group/>;
     }
-    return (
-        <Group>
-            {datacenter.rooms.map(room => (
-                <RoomGroup key={room.id} room={room}/>
-            ))}
-        </Group>
-    );
+
+    if (interactionLevel.mode === "ROOM") {
+        return (
+            <Group>
+                {datacenter.rooms
+                    .filter(room => room.id !== interactionLevel.roomId)
+                    .map(room => <RoomContainer key={room.id} room={room}/>)
+                }
+                <GrayContainer/>
+                {datacenter.rooms
+                    .filter(room => room.id === interactionLevel.roomId)
+                    .map(room => <RoomContainer key={room.id} room={room}/>)
+                }
+            </Group>
+        );
+    } else {
+        return (
+            <Group>
+                {datacenter.rooms.map(room => (
+                    <RoomContainer key={room.id} room={room}/>
+                ))}
+            </Group>
+        );
+    }
 };
 
 DatacenterGroup.propTypes = {
     datacenter: Shapes.Datacenter,
+    interactionLevel: Shapes.InteractionLevel,
 };
 
 export default DatacenterGroup;
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js
index 5f349e3c..179a24a2 100644
--- a/src/components/map/groups/RoomGroup.js
+++ b/src/components/map/groups/RoomGroup.js
@@ -5,8 +5,10 @@ import {deriveWallLocations} from "../../../util/tile-calculations";
 import WallSegment from "../elements/WallSegment";
 import TileGroup from "./TileGroup";
 
-const RoomGroup = ({room}) => (
-    <Group>
+const RoomGroup = ({room, onClick}) => (
+    <Group
+        onClick={onClick}
+    >
         {room.tiles.map(tile => (
             <TileGroup key={tile.id} tile={tile}/>
         ))}