2 files changed, 33 insertions, 11 deletions
diff --git a/src/components/map/groups/RackGroup.js b/src/components/map/groups/RackGroup.js
index 5dd470de..648c74d7 100644
--- a/src/components/map/groups/RackGroup.js
+++ b/src/components/map/groups/RackGroup.js
@@ -4,15 +4,28 @@ import {RACK_BACKGROUND_COLOR} from "../../../colors/index";
 import RackEnergyFillContainer from "../../../containers/map/RackEnergyFillContainer";
 import RackSpaceFillContainer from "../../../containers/map/RackSpaceFillContainer";
 import Shapes from "../../../shapes/index";
+import {convertLoadToSimulationColor} from "../../../util/simulation-load";
 import TileObject from "../elements/TileObject";
 
-const RackGroup = ({tile}) => (
-    <Group>
-        <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR}/>
-        <RackSpaceFillContainer tileId={tile.id} positionX={tile.positionX} positionY={tile.positionY}/>
-        <RackEnergyFillContainer tileId={tile.id} positionX={tile.positionX} positionY={tile.positionY}/>
-    </Group>
-);
+const RackGroup = ({tile, inSimulation, rackLoad}) => {
+    let color = RACK_BACKGROUND_COLOR;
+    if (inSimulation) {
+        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,
diff --git a/src/components/map/groups/TileGroup.js b/src/components/map/groups/TileGroup.js
index 8fbdeb31..3de712d1 100644
--- a/src/components/map/groups/TileGroup.js
+++ b/src/components/map/groups/TileGroup.js
@@ -1,25 +1,34 @@
 import PropTypes from "prop-types";
 import React from "react";
 import {Group} from "react-konva";
+import {ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR} from "../../../colors/index";
+import RackContainer from "../../../containers/map/RackContainer";
 import Shapes from "../../../shapes/index";
+import {convertLoadToSimulationColor} from "../../../util/simulation-load";
 import RoomTile from "../elements/RoomTile";
-import RackGroup from "./RackGroup";
 
-const TileGroup = ({tile, newTile, onClick}) => {
+const TileGroup = ({tile, newTile, inSimulation, roomLoad, onClick}) => {
     let tileObject;
     switch (tile.objectType) {
         case "RACK":
-            tileObject = <RackGroup tile={tile}/>;
+            tileObject = <RackContainer tile={tile}/>;
             break;
         default:
             tileObject = null;
     }
 
+    let color = ROOM_DEFAULT_COLOR;
+    if (newTile) {
+        color = ROOM_IN_CONSTRUCTION_COLOR;
+    } else if (inSimulation) {
+        color = convertLoadToSimulationColor(roomLoad);
+    }
+
     return (
         <Group
             onClick={() => onClick(tile)}
         >
-            <RoomTile tile={tile} newTile={newTile}/>
+            <RoomTile tile={tile} color={color}/>
             {tileObject}
         </Group>
     );