2 files changed, 46 insertions, 0 deletions
diff --git a/src/components/map/groups/RackGroup.js b/src/components/map/groups/RackGroup.js
new file mode 100644
index 00000000..9bc28331
--- /dev/null
+++ b/src/components/map/groups/RackGroup.js
@@ -0,0 +1,17 @@
+import React from "react";
+import {Group} from "react-konva";
+import {RACK_BACKGROUND_COLOR} from "../../../colors/index";
+import Shapes from "../../../shapes/index";
+import TileObject from "../elements/TileObject";
+
+const RackGroup = ({tile}) => (
+    <Group>
+        <TileObject tile={tile} color={RACK_BACKGROUND_COLOR}/>
+    </Group>
+);
+
+RackGroup.propTypes = {
+    tile: Shapes.Tile,
+};
+
+export default RackGroup;
diff --git a/src/components/map/groups/TileGroup.js b/src/components/map/groups/TileGroup.js
new file mode 100644
index 00000000..7493f953
--- /dev/null
+++ b/src/components/map/groups/TileGroup.js
@@ -0,0 +1,29 @@
+import React from "react";
+import {Group} from "react-konva";
+import Shapes from "../../../shapes/index";
+import RoomTile from "../elements/RoomTile";
+import RackGroup from "./RackGroup";
+
+const TileGroup = ({tile}) => {
+    let tileObject;
+    switch (tile.objectType) {
+        case "RACK":
+            tileObject = <RackGroup tile={tile}/>;
+            break;
+        default:
+            tileObject = null;
+    }
+
+    return (
+        <Group>
+            <RoomTile tile={tile}/>
+            {tileObject}
+        </Group>
+    );
+};
+
+TileGroup.propTypes = {
+    tile: Shapes.Tile,
+};
+
+export default TileGroup;