Implement room creation

4 files changed, 57 insertions, 28 deletions

diff --git a/src/components/map/groups/DatacenterGroup.js b/src/components/map/groups/DatacenterGroup.js
index 2f4dc2eb..0830ac4e 100644
--- a/src/components/map/groups/DatacenterGroup.js
+++ b/src/components/map/groups/DatacenterGroup.js
@@ -12,8 +12,8 @@ const DatacenterGroup = ({datacenter, interactionLevel}) => {
     if (interactionLevel.mode === "BUILDING") {
         return (
             <Group>
-                {datacenter.rooms.map(room => (
-                    <RoomContainer key={room.id} room={room}/>
+                {datacenter.roomIds.map(roomId => (
+                    <RoomContainer key={roomId} roomId={roomId}/>
                 ))}
             </Group>
         );
@@ -21,14 +21,14 @@ const DatacenterGroup = ({datacenter, interactionLevel}) => {
 
     return (
         <Group>
-            {datacenter.rooms
-                .filter(room => room.id !== interactionLevel.roomId)
-                .map(room => <RoomContainer key={room.id} room={room}/>)
+            {datacenter.roomIds
+                .filter(roomId => roomId !== interactionLevel.roomId)
+                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)
             }
             {interactionLevel.mode === "ROOM" ? <GrayContainer/> : null}
-            {datacenter.rooms
-                .filter(room => room.id === interactionLevel.roomId)
-                .map(room => <RoomContainer key={room.id} room={room}/>)
+            {datacenter.roomIds
+                .filter(roomId => roomId === interactionLevel.roomId)
+                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)
             }
         </Group>
     );
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js
index b6c285e9..85d3c7c9 100644
--- a/src/components/map/groups/RoomGroup.js
+++ b/src/components/map/groups/RoomGroup.js
@@ -2,35 +2,40 @@ import React from "react";
 import {Group} from "react-konva";
 import GrayContainer from "../../../containers/map/GrayContainer";
 import TileContainer from "../../../containers/map/TileContainer";
+import WallContainer from "../../../containers/map/WallContainer";
 import Shapes from "../../../shapes/index";
-import {deriveWallLocations} from "../../../util/tile-calculations";
-import WallSegment from "../elements/WallSegment";
 
-const RoomGroup = ({room, interactionLevel, onClick}) => {
+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}
-        >
+        <Group onClick={onClick}>
             {(() => {
                 if (interactionLevel.mode === "OBJECT" && interactionLevel.roomId === room.id) {
                     return [
-                        room.tiles
-                            .filter(tile => tile.id !== interactionLevel.tileId)
-                            .map(tile => <TileContainer key={tile.id} tile={tile}/>),
+                        room.tileIds
+                            .filter(tileId => tileId !== interactionLevel.tileId)
+                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
                         <GrayContainer key={-1}/>,
-                        room.tiles
-                            .filter(tile => tile.id === interactionLevel.tileId)
-                            .map(tile => <TileContainer key={tile.id} tile={tile}/>)
+                        room.tileIds
+                            .filter(tileId => tileId === interactionLevel.tileId)
+                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>)
                     ];
                 } else {
-                    return room.tiles.map(tile => (
-                        <TileContainer key={tile.id} tile={tile}/>
+                    return room.tileIds.map(tileId => (
+                        <TileContainer key={tileId} tileId={tileId}/>
                     ));
                 }
             })()}
-            {deriveWallLocations(room).map((wallSegment, index) => (
-                <WallSegment key={index} wallSegment={wallSegment}/>
-            ))}
+            <WallContainer roomId={room.id}/>
         </Group>
     );
 };
diff --git a/src/components/map/groups/TileGroup.js b/src/components/map/groups/TileGroup.js
index 5920a2b6..8fbdeb31 100644
--- a/src/components/map/groups/TileGroup.js
+++ b/src/components/map/groups/TileGroup.js
@@ -1,10 +1,11 @@
+import PropTypes from "prop-types";
 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, onClick}) => {
+const TileGroup = ({tile, newTile, onClick}) => {
     let tileObject;
     switch (tile.objectType) {
         case "RACK":
@@ -16,9 +17,9 @@ const TileGroup = ({tile, onClick}) => {
 
     return (
         <Group
-            onClick={onClick}
+            onClick={() => onClick(tile)}
         >
-            <RoomTile tile={tile}/>
+            <RoomTile tile={tile} newTile={newTile}/>
             {tileObject}
         </Group>
     );
@@ -26,6 +27,7 @@ const TileGroup = ({tile, onClick}) => {
 
 TileGroup.propTypes = {
     tile: Shapes.Tile,
+    newTile: PropTypes.bool,
 };
 
 export default TileGroup;
diff --git a/src/components/map/groups/WallGroup.js b/src/components/map/groups/WallGroup.js
new file mode 100644
index 00000000..f21d91a5
--- /dev/null
+++ b/src/components/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;