Apply prettier to codebase

9 files changed, 256 insertions, 219 deletions

diff --git a/src/components/app/map/elements/Backdrop.js b/src/components/app/map/elements/Backdrop.js
index 9c01df63..57414463 100644
--- a/src/components/app/map/elements/Backdrop.js
+++ b/src/components/app/map/elements/Backdrop.js
@@ -1,16 +1,16 @@
 import React from "react";
-import {Rect} from "react-konva";
-import {BACKDROP_COLOR} from "../../../../util/colors";
-import {MAP_SIZE_IN_PIXELS} from "../MapConstants";
+import { Rect } from "react-konva";
+import { BACKDROP_COLOR } from "../../../../util/colors";
+import { MAP_SIZE_IN_PIXELS } from "../MapConstants";
 
 const Backdrop = () => (
-    <Rect
-        x={0}
-        y={0}
-        width={MAP_SIZE_IN_PIXELS}
-        height={MAP_SIZE_IN_PIXELS}
-        fill={BACKDROP_COLOR}
-    />
+  <Rect
+    x={0}
+    y={0}
+    width={MAP_SIZE_IN_PIXELS}
+    height={MAP_SIZE_IN_PIXELS}
+    fill={BACKDROP_COLOR}
+  />
 );
 
 export default Backdrop;
diff --git a/src/components/app/map/elements/GrayLayer.js b/src/components/app/map/elements/GrayLayer.js
index c5994d06..28fadd8a 100644
--- a/src/components/app/map/elements/GrayLayer.js
+++ b/src/components/app/map/elements/GrayLayer.js
@@ -1,17 +1,17 @@
 import React from "react";
-import {Rect} from "react-konva";
-import {GRAYED_OUT_AREA_COLOR} from "../../../../util/colors";
-import {MAP_SIZE_IN_PIXELS} from "../MapConstants";
+import { Rect } from "react-konva";
+import { GRAYED_OUT_AREA_COLOR } from "../../../../util/colors";
+import { MAP_SIZE_IN_PIXELS } from "../MapConstants";
 
-const GrayLayer = ({onClick}) => (
-    <Rect
-        x={0}
-        y={0}
-        width={MAP_SIZE_IN_PIXELS}
-        height={MAP_SIZE_IN_PIXELS}
-        fill={GRAYED_OUT_AREA_COLOR}
-        onClick={onClick}
-    />
+const GrayLayer = ({ onClick }) => (
+  <Rect
+    x={0}
+    y={0}
+    width={MAP_SIZE_IN_PIXELS}
+    height={MAP_SIZE_IN_PIXELS}
+    fill={GRAYED_OUT_AREA_COLOR}
+    onClick={onClick}
+  />
 );
 
 export default GrayLayer;
diff --git a/src/components/app/map/elements/HoverTile.js b/src/components/app/map/elements/HoverTile.js
index fc12cbdd..42e6547c 100644
--- a/src/components/app/map/elements/HoverTile.js
+++ b/src/components/app/map/elements/HoverTile.js
@@ -1,27 +1,30 @@
 import PropTypes from "prop-types";
 import React from "react";
-import {Rect} from "react-konva";
-import {ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR} from "../../../../util/colors";
-import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import { Rect } from "react-konva";
+import {
+  ROOM_HOVER_INVALID_COLOR,
+  ROOM_HOVER_VALID_COLOR
+} from "../../../../util/colors";
+import { TILE_SIZE_IN_PIXELS } from "../MapConstants";
 
-const HoverTile = ({pixelX, pixelY, isValid, scale, onClick}) => (
-    <Rect
-        x={pixelX}
-        y={pixelY}
-        scaleX={scale}
-        scaleY={scale}
-        width={TILE_SIZE_IN_PIXELS}
-        height={TILE_SIZE_IN_PIXELS}
-        fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
-        onClick={onClick}
-    />
+const HoverTile = ({ pixelX, pixelY, isValid, scale, onClick }) => (
+  <Rect
+    x={pixelX}
+    y={pixelY}
+    scaleX={scale}
+    scaleY={scale}
+    width={TILE_SIZE_IN_PIXELS}
+    height={TILE_SIZE_IN_PIXELS}
+    fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
+    onClick={onClick}
+  />
 );
 
 HoverTile.propTypes = {
-    pixelX: PropTypes.number.isRequired,
-    pixelY: PropTypes.number.isRequired,
-    isValid: PropTypes.bool.isRequired,
-    onClick: PropTypes.func.isRequired,
+  pixelX: PropTypes.number.isRequired,
+  pixelY: PropTypes.number.isRequired,
+  isValid: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired
 };
 
 export default HoverTile;
diff --git a/src/components/app/map/elements/ImageComponent.js b/src/components/app/map/elements/ImageComponent.js
index 486296ea..cf41ddfe 100644
--- a/src/components/app/map/elements/ImageComponent.js
+++ b/src/components/app/map/elements/ImageComponent.js
@@ -1,48 +1,48 @@
 import PropTypes from "prop-types";
 import React from "react";
-import {Image} from "react-konva";
+import { Image } from "react-konva";
 
 class ImageComponent extends React.Component {
-    static imageCaches = {};
-    static propTypes = {
-        src: PropTypes.string.isRequired,
-        x: PropTypes.number.isRequired,
-        y: PropTypes.number.isRequired,
-        width: PropTypes.number.isRequired,
-        height: PropTypes.number.isRequired,
-        opacity: PropTypes.number.isRequired,
-    };
-
-    state = {
-        image: null
-    };
+  static imageCaches = {};
+  static propTypes = {
+    src: PropTypes.string.isRequired,
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    opacity: PropTypes.number.isRequired
+  };
 
-    componentDidMount() {
-        if (ImageComponent.imageCaches[this.props.src]) {
-            this.setState({image: ImageComponent.imageCaches[this.props.src]});
-            return;
-        }
+  state = {
+    image: null
+  };
 
-        const image = new window.Image();
-        image.src = this.props.src;
-        image.onload = () => {
-            this.setState({image});
-            ImageComponent.imageCaches[this.props.src] = image;
-        }
+  componentDidMount() {
+    if (ImageComponent.imageCaches[this.props.src]) {
+      this.setState({ image: ImageComponent.imageCaches[this.props.src] });
+      return;
     }
 
-    render() {
-        return (
-            <Image
-                image={this.state.image}
-                x={this.props.x}
-                y={this.props.y}
-                width={this.props.width}
-                height={this.props.height}
-                opacity={this.props.opacity}
-            />
-        )
-    }
+    const image = new window.Image();
+    image.src = this.props.src;
+    image.onload = () => {
+      this.setState({ image });
+      ImageComponent.imageCaches[this.props.src] = image;
+    };
+  }
+
+  render() {
+    return (
+      <Image
+        image={this.state.image}
+        x={this.props.x}
+        y={this.props.y}
+        width={this.props.width}
+        height={this.props.height}
+        opacity={this.props.opacity}
+      />
+    );
+  }
 }
 
 export default ImageComponent;
diff --git a/src/components/app/map/elements/RackFillBar.js b/src/components/app/map/elements/RackFillBar.js
index 3a8a1137..43701d97 100644
--- a/src/components/app/map/elements/RackFillBar.js
+++ b/src/components/app/map/elements/RackFillBar.js
@@ -1,67 +1,89 @@
 import PropTypes from "prop-types";
 import React from "react";
-import {Group, Rect} from "react-konva";
+import { Group, Rect } from "react-konva";
 import {
-    RACK_ENERGY_BAR_BACKGROUND_COLOR,
-    RACK_ENERGY_BAR_FILL_COLOR,
-    RACK_SPACE_BAR_BACKGROUND_COLOR,
-    RACK_SPACE_BAR_FILL_COLOR
+  RACK_ENERGY_BAR_BACKGROUND_COLOR,
+  RACK_ENERGY_BAR_FILL_COLOR,
+  RACK_SPACE_BAR_BACKGROUND_COLOR,
+  RACK_SPACE_BAR_FILL_COLOR
 } from "../../../../util/colors";
 import {
-    OBJECT_BORDER_WIDTH_IN_PIXELS,
-    OBJECT_MARGIN_IN_PIXELS,
-    RACK_FILL_ICON_OPACITY,
-    RACK_FILL_ICON_WIDTH,
-    TILE_SIZE_IN_PIXELS
+  OBJECT_BORDER_WIDTH_IN_PIXELS,
+  OBJECT_MARGIN_IN_PIXELS,
+  RACK_FILL_ICON_OPACITY,
+  RACK_FILL_ICON_WIDTH,
+  TILE_SIZE_IN_PIXELS
 } from "../MapConstants";
 import ImageComponent from "./ImageComponent";
 
-const RackFillBar = ({positionX, positionY, type, fillFraction}) => {
-    const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2;
-    const x = positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS
-        + (type === "space" ? halfOfObjectBorderWidth :
-            0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS));
-    const startY = positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS + halfOfObjectBorderWidth;
-    const width = 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - halfOfObjectBorderWidth;
-    const fullHeight = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 - OBJECT_BORDER_WIDTH_IN_PIXELS;
+const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
+  const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2;
+  const x =
+    positionX * TILE_SIZE_IN_PIXELS +
+    OBJECT_MARGIN_IN_PIXELS +
+    (type === "space"
+      ? halfOfObjectBorderWidth
+      : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS));
+  const startY =
+    positionY * TILE_SIZE_IN_PIXELS +
+    OBJECT_MARGIN_IN_PIXELS +
+    halfOfObjectBorderWidth;
+  const width =
+    0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) -
+    halfOfObjectBorderWidth;
+  const fullHeight =
+    TILE_SIZE_IN_PIXELS -
+    OBJECT_MARGIN_IN_PIXELS * 2 -
+    OBJECT_BORDER_WIDTH_IN_PIXELS;
 
-    const fractionHeight = fillFraction * fullHeight;
-    const fractionY = (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS - halfOfObjectBorderWidth
-        - fractionHeight;
+  const fractionHeight = fillFraction * fullHeight;
+  const fractionY =
+    (positionY + 1) * TILE_SIZE_IN_PIXELS -
+    OBJECT_MARGIN_IN_PIXELS -
+    halfOfObjectBorderWidth -
+    fractionHeight;
 
-    return (
-        <Group>
-            <Rect
-                x={x}
-                y={startY}
-                width={width}
-                height={fullHeight}
-                fill={type === "space" ? RACK_SPACE_BAR_BACKGROUND_COLOR : RACK_ENERGY_BAR_BACKGROUND_COLOR}
-            />
-            <Rect
-                x={x}
-                y={fractionY}
-                width={width}
-                height={fractionHeight}
-                fill={type === "space" ? RACK_SPACE_BAR_FILL_COLOR : RACK_ENERGY_BAR_FILL_COLOR}
-            />
-            <ImageComponent
-                src={"/img/topology/rack-" + type + "-icon.png"}
-                x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
-                y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
-                width={RACK_FILL_ICON_WIDTH}
-                height={RACK_FILL_ICON_WIDTH}
-                opacity={RACK_FILL_ICON_OPACITY}
-            />
-        </Group>
-    );
+  return (
+    <Group>
+      <Rect
+        x={x}
+        y={startY}
+        width={width}
+        height={fullHeight}
+        fill={
+          type === "space"
+            ? RACK_SPACE_BAR_BACKGROUND_COLOR
+            : RACK_ENERGY_BAR_BACKGROUND_COLOR
+        }
+      />
+      <Rect
+        x={x}
+        y={fractionY}
+        width={width}
+        height={fractionHeight}
+        fill={
+          type === "space"
+            ? RACK_SPACE_BAR_FILL_COLOR
+            : RACK_ENERGY_BAR_FILL_COLOR
+        }
+      />
+      <ImageComponent
+        src={"/img/topology/rack-" + type + "-icon.png"}
+        x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
+        y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
+        width={RACK_FILL_ICON_WIDTH}
+        height={RACK_FILL_ICON_WIDTH}
+        opacity={RACK_FILL_ICON_OPACITY}
+      />
+    </Group>
+  );
 };
 
 RackFillBar.propTypes = {
-    positionX: PropTypes.number.isRequired,
-    positionY: PropTypes.number.isRequired,
-    type: PropTypes.string.isRequired,
-    fillFraction: PropTypes.number.isRequired,
+  positionX: PropTypes.number.isRequired,
+  positionY: PropTypes.number.isRequired,
+  type: PropTypes.string.isRequired,
+  fillFraction: PropTypes.number.isRequired
 };
 
 export default RackFillBar;
diff --git a/src/components/app/map/elements/RoomTile.js b/src/components/app/map/elements/RoomTile.js
index 11948a7a..71c3bf15 100644
--- a/src/components/app/map/elements/RoomTile.js
+++ b/src/components/app/map/elements/RoomTile.js
@@ -1,20 +1,20 @@
 import React from "react";
-import {Rect} from "react-konva";
+import { Rect } from "react-konva";
 import Shapes from "../../../../shapes/index";
-import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import { TILE_SIZE_IN_PIXELS } from "../MapConstants";
 
-const RoomTile = ({tile, color}) => (
-    <Rect
-        x={tile.positionX * TILE_SIZE_IN_PIXELS}
-        y={tile.positionY * TILE_SIZE_IN_PIXELS}
-        width={TILE_SIZE_IN_PIXELS}
-        height={TILE_SIZE_IN_PIXELS}
-        fill={color}
-    />
+const RoomTile = ({ tile, color }) => (
+  <Rect
+    x={tile.positionX * TILE_SIZE_IN_PIXELS}
+    y={tile.positionY * TILE_SIZE_IN_PIXELS}
+    width={TILE_SIZE_IN_PIXELS}
+    height={TILE_SIZE_IN_PIXELS}
+    fill={color}
+  />
 );
 
 RoomTile.propTypes = {
-    tile: Shapes.Tile,
+  tile: Shapes.Tile
 };
 
 export default RoomTile;
diff --git a/src/components/app/map/elements/TileObject.js b/src/components/app/map/elements/TileObject.js
index 73bfddba..c1b631db 100644
--- a/src/components/app/map/elements/TileObject.js
+++ b/src/components/app/map/elements/TileObject.js
@@ -1,25 +1,29 @@
 import PropTypes from "prop-types";
 import React from "react";
-import {Rect} from "react-konva";
-import {OBJECT_BORDER_COLOR} from "../../../../util/colors";
-import {OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import { Rect } from "react-konva";
+import { OBJECT_BORDER_COLOR } from "../../../../util/colors";
+import {
+  OBJECT_BORDER_WIDTH_IN_PIXELS,
+  OBJECT_MARGIN_IN_PIXELS,
+  TILE_SIZE_IN_PIXELS
+} from "../MapConstants";
 
-const TileObject = ({positionX, positionY, color}) => (
-    <Rect
-        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={color}
-        stroke={OBJECT_BORDER_COLOR}
-        strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS}
-    />
+const TileObject = ({ positionX, positionY, color }) => (
+  <Rect
+    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={color}
+    stroke={OBJECT_BORDER_COLOR}
+    strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS}
+  />
 );
 
 TileObject.propTypes = {
-    positionX: PropTypes.number.isRequired,
-    positionY: PropTypes.number.isRequired,
-    color: PropTypes.string.isRequired,
+  positionX: PropTypes.number.isRequired,
+  positionY: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired
 };
 
 export default TileObject;
diff --git a/src/components/app/map/elements/TilePlusIcon.js b/src/components/app/map/elements/TilePlusIcon.js
index b96bf0f5..06377152 100644
--- a/src/components/app/map/elements/TilePlusIcon.js
+++ b/src/components/app/map/elements/TilePlusIcon.js
@@ -1,44 +1,52 @@
 import PropTypes from "prop-types";
 import React from "react";
-import {Group, Line} from "react-konva";
-import {TILE_PLUS_COLOR} from "../../../../util/colors";
-import {TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import { Group, Line } from "react-konva";
+import { TILE_PLUS_COLOR } from "../../../../util/colors";
+import {
+  TILE_PLUS_MARGIN_IN_PIXELS,
+  TILE_PLUS_WIDTH_IN_PIXELS,
+  TILE_SIZE_IN_PIXELS
+} from "../MapConstants";
 
-const TilePlusIcon = ({pixelX, pixelY, mapScale}) => {
-    const linePoints = [
-        [
-            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
-            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelY + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
-        ],
-        [
-            pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
-            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
-            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-        ],
-    ];
-    return (
-        <Group>
-            {linePoints.map((points, index) => (
-                <Line
-                    key={index}
-                    points={points}
-                    lineCap="round"
-                    stroke={TILE_PLUS_COLOR}
-                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
-                    listening={false}
-                />
-            ))}
-        </Group>
-    )
+const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => {
+  const linePoints = [
+    [
+      pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+      pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+      pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+      pixelY +
+        TILE_SIZE_IN_PIXELS * mapScale -
+        TILE_PLUS_MARGIN_IN_PIXELS * mapScale
+    ],
+    [
+      pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+      pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+      pixelX +
+        TILE_SIZE_IN_PIXELS * mapScale -
+        TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+      pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale
+    ]
+  ];
+  return (
+    <Group>
+      {linePoints.map((points, index) => (
+        <Line
+          key={index}
+          points={points}
+          lineCap="round"
+          stroke={TILE_PLUS_COLOR}
+          strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
+          listening={false}
+        />
+      ))}
+    </Group>
+  );
 };
 
 TilePlusIcon.propTypes = {
-    pixelX: PropTypes.number,
-    pixelY: PropTypes.number,
-    mapScale: PropTypes.number,
+  pixelX: PropTypes.number,
+  pixelY: PropTypes.number,
+  mapScale: PropTypes.number
 };
 
 export default TilePlusIcon;
diff --git a/src/components/app/map/elements/WallSegment.js b/src/components/app/map/elements/WallSegment.js
index 14efd3fc..c5011656 100644
--- a/src/components/app/map/elements/WallSegment.js
+++ b/src/components/app/map/elements/WallSegment.js
@@ -1,39 +1,39 @@
 import React from "react";
-import {Line} from "react-konva";
+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";
+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,
-        ];
-    }
+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}
-        />
-    )
+  return (
+    <Line
+      points={points}
+      lineCap="round"
+      stroke={WALL_COLOR}
+      strokeWidth={WALL_WIDTH_IN_PIXELS}
+    />
+  );
 };
 
 WallSegment.propTypes = {
-    wallSegment: Shapes.WallSegment,
+  wallSegment: Shapes.WallSegment
 };
 
 export default WallSegment;