Add plus icon component

5 files changed, 60 insertions, 9 deletions

diff --git a/src/components/map/MapConstants.js b/src/components/map/MapConstants.js
index 69fdb419..c8a9810b 100644
--- a/src/components/map/MapConstants.js
+++ b/src/components/map/MapConstants.js
@@ -8,5 +8,6 @@ export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXE
 export const GRID_LINE_WIDTH_IN_PIXELS = 2;
 export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8;
 export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 12;
+export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10;
 
 export const MAP_MOVE_PIXELS_PER_EVENT = 20;
diff --git a/src/components/map/elements/TileObject.js b/src/components/map/elements/TileObject.js
index 1517ef97..b1d3315e 100644
--- a/src/components/map/elements/TileObject.js
+++ b/src/components/map/elements/TileObject.js
@@ -1,24 +1,24 @@
 import PropTypes from "prop-types";
 import React from "react";
 import {Rect} from "react-konva";
-import {OBJECT_BORDER_COLOR, ROOM_DEFAULT_COLOR} from "../../../colors/index";
-import Shapes from "../../../shapes/index";
+import {OBJECT_BORDER_COLOR} from "../../../colors/index";
 import {OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
 
-const TileObject = ({tile, color}) => (
+const TileObject = ({positionX, positionY, color}) => (
     <Rect
-        x={tile.positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
-        y={tile.positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
+        x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
+        y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
         width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
         height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
-        fill={ROOM_DEFAULT_COLOR}
+        fill={color}
         stroke={OBJECT_BORDER_COLOR}
         strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS}
     />
 );
 
 TileObject.propTypes = {
-    tile: Shapes.Tile,
+    positionX: PropTypes.number.isRequired,
+    positionY: PropTypes.number.isRequired,
     color: PropTypes.string.isRequired,
 };
 
diff --git a/src/components/map/elements/TilePlusIcon.js b/src/components/map/elements/TilePlusIcon.js
new file mode 100644
index 00000000..3cc3178c
--- /dev/null
+++ b/src/components/map/elements/TilePlusIcon.js
@@ -0,0 +1,40 @@
+import React from "react";
+import {Group, Line} from "react-konva";
+import {TILE_PLUS_COLOR} from "../../../colors/index";
+import Shapes from "../../../shapes/index";
+import {TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+const TilePlusIcon = ({positionX, positionY}) => {
+    const linePoints = [
+        [
+            (positionX + 0.5) * TILE_SIZE_IN_PIXELS,
+            positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS,
+            (positionX + 0.5) * TILE_SIZE_IN_PIXELS,
+            (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
+        ],
+        [
+            positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS,
+            (positionY + 0.5) * TILE_SIZE_IN_PIXELS,
+            (positionX + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
+            (positionY + 0.5) * TILE_SIZE_IN_PIXELS,
+        ],
+    ];
+    return (
+        <Group>
+            {linePoints.map(points => (
+                <Line
+                    points={points}
+                    lineCap="round"
+                    stroke={TILE_PLUS_COLOR}
+                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS}
+                />
+            ))}
+        </Group>
+    )
+};
+
+TilePlusIcon.propTypes = {
+    wallSegment: Shapes.WallSegment,
+};
+
+export default TilePlusIcon;
diff --git a/src/components/map/groups/RackGroup.js b/src/components/map/groups/RackGroup.js
index 9bc28331..9583b234 100644
--- a/src/components/map/groups/RackGroup.js
+++ b/src/components/map/groups/RackGroup.js
@@ -6,7 +6,7 @@ import TileObject from "../elements/TileObject";
 
 const RackGroup = ({tile}) => (
     <Group>
-        <TileObject tile={tile} color={RACK_BACKGROUND_COLOR}/>
+        <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR}/>
     </Group>
 );
 
diff --git a/src/components/map/layers/HoverTileLayerComponent.js b/src/components/map/layers/HoverTileLayerComponent.js
index a4d9446a..bd07596a 100644
--- a/src/components/map/layers/HoverTileLayerComponent.js
+++ b/src/components/map/layers/HoverTileLayerComponent.js
@@ -1,9 +1,19 @@
+import PropTypes from "prop-types";
 import React from 'react';
 import {Layer} from "react-konva";
 import HoverTile from "../elements/HoverTile";
 import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
 
 class HoverTileLayerComponent extends React.Component {
+    static propTypes = {
+        mouseX: PropTypes.number.isRequired,
+        mouseY: PropTypes.number.isRequired,
+        mainGroupX: PropTypes.number.isRequired,
+        mainGroupY: PropTypes.number.isRequired,
+        onClick: PropTypes.func.isRequired,
+        containsRack: PropTypes.bool,
+    };
+
     state = {
         positionX: -1,
         positionY: -1,
@@ -34,7 +44,7 @@ class HoverTileLayerComponent extends React.Component {
         const pixelY = positionY * TILE_SIZE_IN_PIXELS + this.props.mainGroupY;
 
         return (
-            <Layer>
+            <Layer opacity={0.4}>
                 <HoverTile
                     pixelX={pixelX} pixelY={pixelY}
                     isValid={this.state.validity} onClick={() => this.props.onClick(positionX, positionY)}