content: // @flow
  import React from 'react';
  import { Layer, Rect, Stage, Group, Line } from 'react-konva';
  import './commandLine.css';
  
  export type CellBorder = {
      show: boolean,
      color: string
  };
  
  export type Cell = {
      x: number,
      y: number,
      size: number,
      show: boolean,
      borderTop: CellBorder,
      borderBottom: CellBorder,
      borderLeft: CellBorder,
      borderRight: CellBorder
  };
  
  function getBorderTop(cell: Cell) {
      if (!cell || !cell.borderTop || !cell.borderTop.show) {
          return null;
      }
      const { size, x, y } = cell;
      const gridX = x * size;
      const gridY = y * size;
      return <Line stroke={cell.borderTop.color} points={[gridX, gridY, gridX + size, gridY]} strokeWidth={1} />;
  }
  
  function getBorderBottom(cell: Cell) {
      if (!cell || !cell.borderBottom || !cell.borderBottom.show) {
          return null;
      }
      const { size, x, y } = cell;
      const gridX = x * size;
      const gridY = y * size;
      return <Line stroke={cell.borderBottom.color} points={[gridX, gridY + size, gridX + size, gridY + size]} strokeWidth={1} />;
  }
  
  function getBorderLeft(cell: Cell) {
      if (!cell || !cell.borderLeft || !cell.borderLeft.show) {
          return null;
      }
      const { size, x, y } = cell;
      const gridX = x * size;
      const gridY = y * size;
      return <Line stroke={cell.borderLeft.color} points={[gridX, gridY, gridX, gridY + size]} strokeWidth={1} />;
  }
  
  function getBorderRight(cell: Cell) {
      if (!cell || !cell.borderRight || !cell.borderRight.show) {
          return null;
      }
      const { size, x, y } = cell;
      const gridX = x * size;
      const gridY = y * size;
      return <Line stroke={cell.borderRight.color} points={[gridX + size, gridY, gridX + size, gridY + size]} strokeWidth={1} />;
  }
  
  function getCells(cellSize: number, cells: Array<Cell>) {
      return (
          <Group>
              {cells
                  .map((cell) => {
                      const {
                          x, y, size, show
                      } = cell;
                      if (!show) {
                          return null;
                      }
                      return (
                          <Group key={`${x},${y}`}>
                              <Rect gridX={x} gridY={y} x={x * size} y={y * size} width={size} height={size} fill="#BAB7B6" />
                              {getBorderTop(cell)}
                              {getBorderBottom(cell)}
                              {getBorderLeft(cell)}
                              {getBorderRight(cell)}
                          </Group>
                      );
                  })
                  .filter(c => c)}
          </Group>
      );
  }
  
  function getCurrentLocation(currentLocationX: number, currentLocationY: number, cellSize: number) {
      return (
          <Rect
              key="currentLocation"
              gridX={currentLocationX}
              gridY={currentLocationY}
              x={((currentLocationX * cellSize) + cellSize) / 2 / 2}
              y={((currentLocationY * cellSize) + cellSize) / 2 / 2}
              width={cellSize / 2}
              height={cellSize / 2}
              fill="blue"
          />
      );
  }
  
  export default class Map extends React.Component<*> {
      render() {
          const {
              showMap, gridHeight, gridWidth, cellSize, cells, currentLocationX, currentLocationY
          } = this.props;
          if (!showMap) {
              return null;
          }
  
          return (
              <div style={{ margin: '30px' }}>
                  <Stage className="border" width={cellSize * gridWidth} height={cellSize * gridHeight}>
                      <Layer>
                          <Group>
                              {getCells(cellSize, cells)}
                              {getCurrentLocation(currentLocationX, currentLocationY, cellSize)}
                          </Group>
                      </Layer>
                  </Stage>
              </div>
          );
      }
  }
  