Implement wall drawing

1 files changed, 39 insertions, 0 deletions

diff --git a/src/components/map/elements/WallSegment.js b/src/components/map/elements/WallSegment.js
new file mode 100644
index 00000000..ed3627bb
--- /dev/null
+++ b/src/components/map/elements/WallSegment.js
@@ -0,0 +1,39 @@
+import React from "react";
+import {Line} from "react-konva";
+import {WALL_COLOR} from "../../../colors/index";
+import Shapes from "../../../shapes/index";
+import {TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS} from "../MapConstants";
+
+const WallSegment = ({wallSegment}) => {
+    let points;
+    if (wallSegment.isHorizontal) {
+        points = [
+            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+            (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosY * TILE_SIZE_IN_PIXELS
+        ];
+    } else {
+        points = [
+            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+            (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS,
+        ];
+    }
+
+    return (
+        <Line
+            points={points}
+            lineCap="round"
+            stroke={WALL_COLOR}
+            strokeWidth={WALL_WIDTH_IN_PIXELS}
+        />
+    )
+};
+
+WallSegment.propTypes = {
+    wallSegment: Shapes.WallSegment,
+};
+
+export default WallSegment;