Convert map movement to keyboard-based navigation

2 files changed, 52 insertions, 24 deletions

diff --git a/src/components/map/MapConstants.js b/src/components/map/MapConstants.js
index eca8e516..69fdb419 100644
--- a/src/components/map/MapConstants.js
+++ b/src/components/map/MapConstants.js
@@ -8,3 +8,5 @@ export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXE
 export const GRID_LINE_WIDTH_IN_PIXELS = 2;
 export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8;
 export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 12;
+
+export const MAP_MOVE_PIXELS_PER_EVENT = 20;
diff --git a/src/components/map/MapStage.js b/src/components/map/MapStage.js
index 541df1d6..f3f38917 100644
--- a/src/components/map/MapStage.js
+++ b/src/components/map/MapStage.js
@@ -1,12 +1,13 @@
 import React from "react";
 import {Group, Layer, Stage} from "react-konva";
+import {Shortcuts} from "react-shortcuts";
 import DatacenterContainer from "../../containers/map/DatacenterContainer";
 import HoverTileLayer from "../../containers/map/layers/HoverTileLayer";
 import jQuery from "../../util/jquery";
 import {NAVBAR_HEIGHT} from "../navigation/Navbar";
 import Backdrop from "./elements/Backdrop";
 import GridGroup from "./groups/GridGroup";
-import {MAP_SIZE_IN_PIXELS} from "./MapConstants";
+import {MAP_MOVE_PIXELS_PER_EVENT, MAP_SIZE_IN_PIXELS} from "./MapConstants";
 
 class MapStage extends React.Component {
     state = {
@@ -39,12 +40,33 @@ class MapStage extends React.Component {
         this.setState({mouseX: mousePos.x, mouseY: mousePos.y});
     }
 
-    dragBoundFunc(pos) {
+    handleShortcuts(action) {
+        switch (action) {
+            case "MOVE_LEFT":
+                this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0);
+                break;
+            case "MOVE_RIGHT":
+                this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0);
+                break;
+            case "MOVE_UP":
+                this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT);
+                break;
+            case "MOVE_DOWN":
+                this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT);
+                break;
+            default:
+                break;
+        }
+    }
+
+    moveWithDelta(deltaX, deltaY) {
         const updatedPosition = {
-            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)
+            x: this.state.x + deltaX > 0 ? 0 :
+                (this.state.x + deltaX < -MAP_SIZE_IN_PIXELS + this.state.width
+                    ? -MAP_SIZE_IN_PIXELS + this.state.width : this.state.x + deltaX),
+            y: this.state.y + deltaY > 0 ? 0 :
+                (this.state.y + deltaY < -MAP_SIZE_IN_PIXELS + this.state.height
+                    ? -MAP_SIZE_IN_PIXELS + this.state.height : this.state.y + deltaY)
         };
 
         this.setState(updatedPosition);
@@ -54,24 +76,28 @@ class MapStage extends React.Component {
 
     render() {
         return (
-            <Stage ref={(stage) => {this.stage = stage;}}
-                   width={this.state.width}
-                   height={this.state.height}
-                   onMouseMove={this.updateMousePosition.bind(this)}>
-                <Layer>
-                    <Group draggable={true} dragBoundFunc={this.dragBoundFunc.bind(this)}>
-                        <Backdrop/>
-                        <DatacenterContainer/>
-                        <GridGroup/>
-                    </Group>
-                </Layer>
-                <HoverTileLayer
-                    mainGroupX={this.state.x}
-                    mainGroupY={this.state.y}
-                    mouseX={this.state.mouseX}
-                    mouseY={this.state.mouseY}
-                />
-            </Stage>
+            <Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
+                <Stage
+                    ref={(stage) => {this.stage = stage;}}
+                    width={this.state.width}
+                    height={this.state.height}
+                    onMouseMove={this.updateMousePosition.bind(this)}
+                >
+                    <Layer>
+                        <Group x={this.state.x} y={this.state.y}>
+                            <Backdrop/>
+                            <DatacenterContainer/>
+                            <GridGroup/>
+                        </Group>
+                    </Layer>
+                    <HoverTileLayer
+                        mainGroupX={this.state.x}
+                        mainGroupY={this.state.y}
+                        mouseX={this.state.mouseX}
+                        mouseY={this.state.mouseY}
+                    />
+                </Stage>
+            </Shortcuts>
         )
     }
 }