Add simulation mode framework

Includes object states in the store (by tick), charting, and progress bars.

1 files changed, 20 insertions, 7 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,