src/components/app/map/elements/WallSegment.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import React from "react";
import { Line } from "react-konva";
import Shapes from "../../../../shapes/index";
import { WALL_COLOR } from "../../../../util/colors";
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;