summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/map/MapConstants.js6
-rw-r--r--src/components/map/MapStage.js55
-rw-r--r--src/components/map/elements/Backdrop.js16
-rw-r--r--src/components/map/elements/MapTile.js24
-rw-r--r--src/components/map/groups/GridGroup.js28
-rw-r--r--src/components/map/groups/RoomGroup.js16
-rw-r--r--src/components/modals/Modal.js23
-rw-r--r--src/components/simulations/SimulationActionButtons.js8
-rw-r--r--src/components/simulations/SimulationAuthList.sass7
9 files changed, 166 insertions, 17 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;
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%)
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 18:24:44 +0000