From 1b6545fa653df44b019f6676faed39880999b2bf Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Mon, 21 Aug 2017 12:08:41 +0200
Subject: Add basic react-konva rendering prototype

---
 src/components/map/MapConstants.js                 |  6 +++
 src/components/map/MapStage.js                     | 55 ++++++++++++++++++++++
 src/components/map/elements/Backdrop.js            | 16 +++++++
 src/components/map/elements/MapTile.js             | 24 ++++++++++
 src/components/map/groups/GridGroup.js             | 28 +++++++++++
 src/components/map/groups/RoomGroup.js             | 16 +++++++
 src/components/modals/Modal.js                     | 23 ++++-----
 .../simulations/SimulationActionButtons.js         |  8 ++--
 src/components/simulations/SimulationAuthList.sass |  7 ++-
 9 files changed, 166 insertions(+), 17 deletions(-)
 create mode 100644 src/components/map/MapConstants.js
 create mode 100644 src/components/map/MapStage.js
 create mode 100644 src/components/map/elements/Backdrop.js
 create mode 100644 src/components/map/elements/MapTile.js
 create mode 100644 src/components/map/groups/GridGroup.js
 create mode 100644 src/components/map/groups/RoomGroup.js

(limited to 'src/components')

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;
diff --git a/src/components/modals/Modal.js b/src/components/modals/Modal.js
index 06273a46..193746b3 100644
--- a/src/components/modals/Modal.js
+++ b/src/components/modals/Modal.js
@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import React from "react";
+import jQuery from "../../util/jquery";
 
 class Modal extends React.Component {
     static propTypes = {
@@ -33,15 +34,15 @@ class Modal extends React.Component {
         this.openOrCloseModal();
 
         // Trigger auto-focus
-        window["$"]("#" + this.id).on("shown.bs.modal", function () {
-            window["$"](this).find("input").first().focus();
-        });
-
-        window["$"]("#" + this.id).on("hide.bs.modal", () => {
-            if (this.visible) {
-                this.props.onCancel();
-            }
-        });
+        jQuery("#" + this.id)
+            .on("shown.bs.modal", function () {
+                jQuery(this).find("input").first().focus();
+            })
+            .on("hide.bs.modal", () => {
+                if (this.visible) {
+                    this.props.onCancel();
+                }
+            });
     }
 
     componentDidUpdate() {
@@ -66,11 +67,11 @@ class Modal extends React.Component {
     }
 
     openModal() {
-        window["$"]("#" + this.id).modal("show");
+        jQuery("#" + this.id).modal("show");
     }
 
     closeModal() {
-        window["$"]("#" + this.id).modal("hide");
+        jQuery("#" + this.id).modal("hide");
     }
 
     openOrCloseModal() {
diff --git a/src/components/simulations/SimulationActionButtons.js b/src/components/simulations/SimulationActionButtons.js
index d48b4bcf..1731b9be 100644
--- a/src/components/simulations/SimulationActionButtons.js
+++ b/src/components/simulations/SimulationActionButtons.js
@@ -1,11 +1,12 @@
 import PropTypes from "prop-types";
 import React from 'react';
+import {Link} from "react-router-dom";
 
-const SimulationActionButtons = ({simulationId, onOpen, onViewUsers, onDelete}) => (
+const SimulationActionButtons = ({simulationId, onViewUsers, onDelete}) => (
     <div className="simulation-icons">
-        <div className="open" title="Open this simulation" onClick={() => onOpen(simulationId)}>
+        <Link to={"/simulations/" + simulationId} className="open" title="Open this simulation">
             <span className="fa fa-play"/>
-        </div>
+        </Link>
         <div className="users" title="View and edit collaborators on this simulation"
              onClick={() => onViewUsers(simulationId)}>
             <span className="fa fa-users"/>
@@ -18,7 +19,6 @@ const SimulationActionButtons = ({simulationId, onOpen, onViewUsers, onDelete})
 
 SimulationActionButtons.propTypes = {
     simulationId: PropTypes.number.isRequired,
-    onOpen: PropTypes.func,
     onViewUsers: PropTypes.func,
     onDelete: PropTypes.func,
 };
diff --git a/src/components/simulations/SimulationAuthList.sass b/src/components/simulations/SimulationAuthList.sass
index 10334c9f..58683446 100644
--- a/src/components/simulations/SimulationAuthList.sass
+++ b/src/components/simulations/SimulationAuthList.sass
@@ -57,8 +57,8 @@
 .simulation-row .simulation-icons
   text-align: right
 
-.simulation-row .simulation-icons div
-  display: inline
+.simulation-row .simulation-icons div, .simulation-row .simulation-icons a
+  display: inline-block
   position: relative
   top: 4px
   width: 30px
@@ -79,6 +79,9 @@
     $icon-color: #0c60bf
     background: $icon-color
 
+    span
+      left: 1px
+
     &:hover
       background: lighten($icon-color, 10%)
 
-- 
cgit v1.2.3