Add basic react-konva rendering prototype

6 files changed, 145 insertions, 0 deletions

diff --git a/src/components/map/MapConstants.js b/src/components/map/MapConstants.js
new file mode 100644
index 00000000..74779c94
--- /dev/null
+++ b/src/components/map/MapConstants.js
@@ -0,0 +1,6 @@
+export const MAP_SIZE = 50;
+export const TILE_SIZE_IN_PIXELS = 50;
+export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS;
+
+export const GRID_LINE_WIDTH_IN_PIXELS = 2;
+export const ROOM_BORDER_WIDTH_IN_PIXELS = 5;
diff --git a/src/components/map/MapStage.js b/src/components/map/MapStage.js
new file mode 100644
index 00000000..38047064
--- /dev/null
+++ b/src/components/map/MapStage.js
@@ -0,0 +1,55 @@
+import React from "react";
+import {Group, Layer, Stage} from "react-konva";
+import jQuery from "../../util/jquery";
+import Backdrop from "./elements/Backdrop";
+import GridGroup from "./groups/GridGroup";
+import RoomGroup from "./groups/RoomGroup";
+import {MAP_SIZE_IN_PIXELS} from "./MapConstants";
+
+class MapStage extends React.Component {
+    state = {
+        width: 600,
+        height: 400
+    };
+
+    componentWillMount() {
+        this.updateDimensions();
+    }
+
+    componentDidMount() {
+        window.addEventListener("resize", this.updateDimensions.bind(this));
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener("resize", this.updateDimensions.bind(this));
+    }
+
+    updateDimensions() {
+        this.setState({width: jQuery(window).width(), height: jQuery(window).height()});
+    }
+
+    dragBoundHandler(pos) {
+        return {
+            x: pos.x > 0 ? 0 :
+                (pos.x < -MAP_SIZE_IN_PIXELS + this.state.width ? -MAP_SIZE_IN_PIXELS + this.state.width : pos.x),
+            y: pos.y > 0 ? 0 :
+                (pos.y < -MAP_SIZE_IN_PIXELS + this.state.height ? -MAP_SIZE_IN_PIXELS + this.state.height : pos.y)
+        }
+    }
+
+    render() {
+        return (
+            <Stage width={this.state.width} height={this.state.height}>
+                <Layer>
+                    <Group draggable={true} dragBoundFunc={this.dragBoundHandler.bind(this)}>
+                        <Backdrop/>
+                        <RoomGroup/>
+                        <GridGroup/>
+                    </Group>
+                </Layer>
+            </Stage>
+        )
+    }
+}
+
+export default MapStage;
diff --git a/src/components/map/elements/Backdrop.js b/src/components/map/elements/Backdrop.js
new file mode 100644
index 00000000..32e95989
--- /dev/null
+++ b/src/components/map/elements/Backdrop.js
@@ -0,0 +1,16 @@
+import React from "react";
+import {Rect} from "react-konva";
+import {BACKDROP_COLOR} from "../../../colors/index";
+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}
+    />
+);
+
+export default Backdrop;
diff --git a/src/components/map/elements/MapTile.js b/src/components/map/elements/MapTile.js
new file mode 100644
index 00000000..b0f4959d
--- /dev/null
+++ b/src/components/map/elements/MapTile.js
@@ -0,0 +1,24 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Group, Rect} from "react-konva";
+import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+const MapTile = () => (
+    <Group>
+        <Rect
+            x={this.props.tileX * TILE_SIZE_IN_PIXELS}
+            y={this.props.tileY * TILE_SIZE_IN_PIXELS}
+            width={TILE_SIZE_IN_PIXELS}
+            height={TILE_SIZE_IN_PIXELS}
+            fill={this.props.fillColor}
+        />
+    </Group>
+);
+
+MapTile.propTypes = {
+    tileX: PropTypes.number.isRequired,
+    tileY: PropTypes.number.isRequired,
+    fillColor: PropTypes.string.isRequired,
+};
+
+export default MapTile;
diff --git a/src/components/map/groups/GridGroup.js b/src/components/map/groups/GridGroup.js
new file mode 100644
index 00000000..2651bf19
--- /dev/null
+++ b/src/components/map/groups/GridGroup.js
@@ -0,0 +1,28 @@
+import React from "react";
+import {Group, Line} from "react-konva";
+import {GRID_COLOR} from "../../../colors/index";
+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 => (
+            <Line
+                points={points}
+                stroke={GRID_COLOR}
+                strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
+            />
+        ))}
+    </Group>
+);
+
+export default GridGroup;
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js
new file mode 100644
index 00000000..1a8b18d5
--- /dev/null
+++ b/src/components/map/groups/RoomGroup.js
@@ -0,0 +1,16 @@
+import React from "react";
+import {Group, Rect} from "react-konva";
+
+const RoomGroup = () => (
+    <Group>
+        <Rect
+            x={10}
+            y={10}
+            width={50}
+            height={50}
+            fill="green"
+        />
+    </Group>
+);
+
+export default RoomGroup;