1 files changed, 41 insertions, 0 deletions
diff --git a/frontend/src/components/app/map/groups/GridGroup.js b/frontend/src/components/app/map/groups/GridGroup.js
new file mode 100644
index 00000000..bbb1eb68
--- /dev/null
+++ b/frontend/src/components/app/map/groups/GridGroup.js
@@ -0,0 +1,41 @@
+import React from "react";
+import { Group, Line } from "react-konva";
+import { GRID_COLOR } from "../../../../util/colors";
+import {
+  GRID_LINE_WIDTH_IN_PIXELS,
+  MAP_SIZE,
+  MAP_SIZE_IN_PIXELS,
+  TILE_SIZE_IN_PIXELS
+} from "../MapConstants";
+
+const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i);
+const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
+  0,
+  index * TILE_SIZE_IN_PIXELS,
+  MAP_SIZE_IN_PIXELS,
+  index * TILE_SIZE_IN_PIXELS
+]);
+const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
+  index * TILE_SIZE_IN_PIXELS,
+  0,
+  index * TILE_SIZE_IN_PIXELS,
+  MAP_SIZE_IN_PIXELS
+]);
+
+const GridGroup = () => (
+  <Group>
+    {HORIZONTAL_POINT_PAIRS.concat(
+      VERTICAL_POINT_PAIRS
+    ).map((points, index) => (
+      <Line
+        key={index}
+        points={points}
+        stroke={GRID_COLOR}
+        strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
+        listening={false}
+      />
+    ))}
+  </Group>
+);
+
+export default GridGroup;