Implement room creation

1 files changed, 27 insertions, 4 deletions

diff --git a/src/components/map/MapStage.js b/src/components/map/MapStage.js
index 644b4c54..541df1d6 100644
--- a/src/components/map/MapStage.js
+++ b/src/components/map/MapStage.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {Group, Layer, Stage} from "react-konva";
 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";
@@ -10,7 +11,11 @@ import {MAP_SIZE_IN_PIXELS} from "./MapConstants";
 class MapStage extends React.Component {
     state = {
         width: 600,
-        height: 400
+        height: 400,
+        x: 0,
+        y: 0,
+        mouseX: 0,
+        mouseY: 0
     };
 
     componentWillMount() {
@@ -29,18 +34,30 @@ class MapStage extends React.Component {
         this.setState({width: jQuery(window).width(), height: jQuery(window).height() - NAVBAR_HEIGHT});
     }
 
+    updateMousePosition() {
+        const mousePos = this.stage.getStage().getPointerPosition();
+        this.setState({mouseX: mousePos.x, mouseY: mousePos.y});
+    }
+
     dragBoundFunc(pos) {
-        return {
+        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)
-        }
+        };
+
+        this.setState(updatedPosition);
+
+        return updatedPosition;
     }
 
     render() {
         return (
-            <Stage width={this.state.width} height={this.state.height}>
+            <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/>
@@ -48,6 +65,12 @@ class MapStage extends React.Component {
                         <GridGroup/>
                     </Group>
                 </Layer>
+                <HoverTileLayer
+                    mainGroupX={this.state.x}
+                    mainGroupY={this.state.y}
+                    mouseX={this.state.mouseX}
+                    mouseY={this.state.mouseY}
+                />
             </Stage>
         )
     }