Implement wall drawing

3 files changed, 49 insertions, 5 deletions

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>
 );