From 6f3afd0317a8e549f77ad6764f6dbe4d4953b67c Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Mon, 4 Sep 2017 09:10:46 +0200
Subject: Add plus icon component

---
 src/components/map/elements/TileObject.js   | 14 +++++-----
 src/components/map/elements/TilePlusIcon.js | 40 +++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 7 deletions(-)
 create mode 100644 src/components/map/elements/TilePlusIcon.js

(limited to 'src/components/map/elements')

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;
-- 
cgit v1.2.3