6 files changed, 218 insertions, 0 deletions
diff --git a/src/components/app/map/groups/DatacenterGroup.js b/src/components/app/map/groups/DatacenterGroup.js
new file mode 100644
index 00000000..1c978360
--- /dev/null
+++ b/src/components/app/map/groups/DatacenterGroup.js
@@ -0,0 +1,42 @@
+import React from "react";
+import {Group} from "react-konva";
+import GrayContainer from "../../../../containers/app/map/GrayContainer";
+import RoomContainer from "../../../../containers/app/map/RoomContainer";
+import Shapes from "../../../../shapes/index";
+
+const DatacenterGroup = ({datacenter, interactionLevel}) => {
+    if (!datacenter) {
+        return <Group/>;
+    }
+
+    if (interactionLevel.mode === "BUILDING") {
+        return (
+            <Group>
+                {datacenter.roomIds.map(roomId => (
+                    <RoomContainer key={roomId} roomId={roomId}/>
+                ))}
+            </Group>
+        );
+    }
+
+    return (
+        <Group>
+            {datacenter.roomIds
+                .filter(roomId => roomId !== interactionLevel.roomId)
+                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)
+            }
+            {interactionLevel.mode === "ROOM" ? <GrayContainer/> : null}
+            {datacenter.roomIds
+                .filter(roomId => roomId === interactionLevel.roomId)
+                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)
+            }
+        </Group>
+    );
+};
+
+DatacenterGroup.propTypes = {
+    datacenter: Shapes.Datacenter,
+    interactionLevel: Shapes.InteractionLevel,
+};
+
+export default DatacenterGroup;
diff --git a/src/components/app/map/groups/GridGroup.js b/src/components/app/map/groups/GridGroup.js
new file mode 100644
index 00000000..b3c6e1d5
--- /dev/null
+++ b/src/components/app/map/groups/GridGroup.js
@@ -0,0 +1,30 @@
+import React from "react";
+import {Group, Line} from "react-konva";
+import {GRID_COLOR} from "../../../../util/colors";
+import {GRID_LINE_WIDTH_IN_PIXELS, MAP_SIZE, MAP_SIZE_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i);
+const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
+    0, index * TILE_SIZE_IN_PIXELS,
+    MAP_SIZE_IN_PIXELS, index * TILE_SIZE_IN_PIXELS
+]);
+const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
+    index * TILE_SIZE_IN_PIXELS, 0,
+    index * TILE_SIZE_IN_PIXELS, MAP_SIZE_IN_PIXELS
+]);
+
+const GridGroup = () => (
+    <Group>
+        {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
+            <Line
+                key={index}
+                points={points}
+                stroke={GRID_COLOR}
+                strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
+                listening={false}
+            />
+        ))}
+    </Group>
+);
+
+export default GridGroup;
diff --git a/src/components/app/map/groups/RackGroup.js b/src/components/app/map/groups/RackGroup.js
new file mode 100644
index 00000000..233d0c20
--- /dev/null
+++ b/src/components/app/map/groups/RackGroup.js
@@ -0,0 +1,34 @@
+import React from "react";
+import {Group} from "react-konva";
+import RackEnergyFillContainer from "../../../../containers/app/map/RackEnergyFillContainer";
+import RackSpaceFillContainer from "../../../../containers/app/map/RackSpaceFillContainer";
+import Shapes from "../../../../shapes/index";
+import {RACK_BACKGROUND_COLOR} from "../../../../util/colors";
+import {convertLoadToSimulationColor} from "../../../../util/simulation-load";
+import TileObject from "../elements/TileObject";
+
+const RackGroup = ({tile, inSimulation, rackLoad}) => {
+    let color = RACK_BACKGROUND_COLOR;
+    if (inSimulation && rackLoad) {
+        color = convertLoadToSimulationColor(rackLoad);
+    }
+
+    return (
+        <Group>
+            <TileObject positionX={tile.positionX} positionY={tile.positionY} color={color}/>
+            {inSimulation ?
+                undefined :
+                <Group>
+                    <RackSpaceFillContainer tileId={tile.id} positionX={tile.positionX} positionY={tile.positionY}/>
+                    <RackEnergyFillContainer tileId={tile.id} positionX={tile.positionX} positionY={tile.positionY}/>
+                </Group>
+            }
+        </Group>
+    );
+};
+
+RackGroup.propTypes = {
+    tile: Shapes.Tile,
+};
+
+export default RackGroup;
diff --git a/src/components/app/map/groups/RoomGroup.js b/src/components/app/map/groups/RoomGroup.js
new file mode 100644
index 00000000..18a6bd84
--- /dev/null
+++ b/src/components/app/map/groups/RoomGroup.js
@@ -0,0 +1,48 @@
+import React from "react";
+import {Group} from "react-konva";
+import GrayContainer from "../../../../containers/app/map/GrayContainer";
+import TileContainer from "../../../../containers/app/map/TileContainer";
+import WallContainer from "../../../../containers/app/map/WallContainer";
+import Shapes from "../../../../shapes/index";
+
+const RoomGroup = ({room, interactionLevel, currentRoomInConstruction, onClick}) => {
+    if (currentRoomInConstruction === room.id) {
+        return (
+            <Group onClick={onClick}>
+                {room.tileIds.map(tileId => (
+                    <TileContainer key={tileId} tileId={tileId} newTile={true}/>
+                ))}
+            </Group>
+        );
+    }
+
+    return (
+        <Group onClick={onClick}>
+            {(() => {
+                if ((interactionLevel.mode === "RACK" || interactionLevel.mode === "MACHINE")
+                    && interactionLevel.roomId === room.id) {
+                    return [
+                        room.tileIds
+                            .filter(tileId => tileId !== interactionLevel.tileId)
+                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
+                        <GrayContainer key={-1}/>,
+                        room.tileIds
+                            .filter(tileId => tileId === interactionLevel.tileId)
+                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>)
+                    ];
+                } else {
+                    return room.tileIds.map(tileId => (
+                        <TileContainer key={tileId} tileId={tileId}/>
+                    ));
+                }
+            })()}
+            <WallContainer roomId={room.id}/>
+        </Group>
+    );
+};
+
+RoomGroup.propTypes = {
+    room: Shapes.Room,
+};
+
+export default RoomGroup;
diff --git a/src/components/app/map/groups/TileGroup.js b/src/components/app/map/groups/TileGroup.js
new file mode 100644
index 00000000..c41e78a4
--- /dev/null
+++ b/src/components/app/map/groups/TileGroup.js
@@ -0,0 +1,42 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Group} from "react-konva";
+import RackContainer from "../../../../containers/app/map/RackContainer";
+import Shapes from "../../../../shapes/index";
+import {ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR} from "../../../../util/colors";
+import {convertLoadToSimulationColor} from "../../../../util/simulation-load";
+import RoomTile from "../elements/RoomTile";
+
+const TileGroup = ({tile, newTile, inSimulation, roomLoad, onClick}) => {
+    let tileObject;
+    switch (tile.objectType) {
+        case "RACK":
+            tileObject = <RackContainer tile={tile}/>;
+            break;
+        default:
+            tileObject = null;
+    }
+
+    let color = ROOM_DEFAULT_COLOR;
+    if (newTile) {
+        color = ROOM_IN_CONSTRUCTION_COLOR;
+    } else if (inSimulation && roomLoad) {
+        color = convertLoadToSimulationColor(roomLoad);
+    }
+
+    return (
+        <Group
+            onClick={() => onClick(tile)}
+        >
+            <RoomTile tile={tile} color={color}/>
+            {tileObject}
+        </Group>
+    );
+};
+
+TileGroup.propTypes = {
+    tile: Shapes.Tile,
+    newTile: PropTypes.bool,
+};
+
+export default TileGroup;
diff --git a/src/components/app/map/groups/WallGroup.js b/src/components/app/map/groups/WallGroup.js
new file mode 100644
index 00000000..6de22523
--- /dev/null
+++ b/src/components/app/map/groups/WallGroup.js
@@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Group} from "react-konva";
+import Shapes from "../../../../shapes/index";
+import {deriveWallLocations} from "../../../../util/tile-calculations";
+import WallSegment from "../elements/WallSegment";
+
+const WallGroup = ({tiles}) => {
+    return (
+        <Group>
+            {deriveWallLocations(tiles).map((wallSegment, index) => (
+                <WallSegment key={index} wallSegment={wallSegment}/>
+            ))}
+        </Group>
+    );
+};
+
+WallGroup.propTypes = {
+    tiles: PropTypes.arrayOf(Shapes.Tile).isRequired,
+};
+
+export default WallGroup;