From 8f5e6d1e73f16e3cdd523f961d06e4b4eb5a8cef Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 25 Aug 2017 21:10:40 +0200
Subject: Implement wall drawing

---
 src/components/map/MapConstants.js         | 10 ++++----
 src/components/map/elements/WallSegment.js | 39 ++++++++++++++++++++++++++++++
 src/components/map/groups/RoomGroup.js     |  5 ++++
 3 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 src/components/map/elements/WallSegment.js

(limited to 'src/components/map')

diff --git a/src/components/map/MapConstants.js b/src/components/map/MapConstants.js
index 3c613da3..7e26ad81 100644
--- a/src/components/map/MapConstants.js
+++ b/src/components/map/MapConstants.js
@@ -1,10 +1,10 @@
 export const MAP_SIZE = 50;
-export const TILE_SIZE_IN_PIXELS = 50;
+export const TILE_SIZE_IN_PIXELS = 100;
 export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS;
 
-export const OBJECT_MARGIN_IN_PIXELS = 5;
-export const OBJECT_SIZE_IN_PIXELS = 40;
+export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5;
+export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2;
 
 export const GRID_LINE_WIDTH_IN_PIXELS = 2;
-export const ROOM_BORDER_WIDTH_IN_PIXELS = 5;
-export const OBJECT_BORDER_WIDTH_IN_PIXELS = 5;
+export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 7;
+export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10;
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;
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js
index 28240d77..5f349e3c 100644
--- a/src/components/map/groups/RoomGroup.js
+++ b/src/components/map/groups/RoomGroup.js
@@ -1,6 +1,8 @@
 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";
 import TileGroup from "./TileGroup";
 
 const RoomGroup = ({room}) => (
@@ -8,6 +10,9 @@ const RoomGroup = ({room}) => (
         {room.tiles.map(tile => (
             <TileGroup key={tile.id} tile={tile}/>
         ))}
+        {deriveWallLocations(room).map((wallSegment, index) => (
+            <WallSegment key={index} wallSegment={wallSegment}/>
+        ))}
     </Group>
 );
 
-- 
cgit v1.2.3