diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js index be1b7b35dedab72665c5c3221072c5781656b027..8040ce5920a3f990eebb6ce94081538103d2a6b7 100644 --- a/src/components/DrawTools.js +++ b/src/components/DrawTools.js @@ -246,51 +246,54 @@ class DrawTools extends Component { // The elements you draw will be added to this FeatureGroup layer, // when you hit edit button only items in this layer will be edited." <FeatureGroup> - <EditControl - position="topright" - onCreated={this._onCreated} - onEdited={this._onEdited} - onEditStart={this._onEditDeleteStart} - onEditStop={this._onEditDeleteStop} - onDeleted={this._onDeleted} - onDeleteStart={this._onEditDeleteStart} - onDeleteStop={this._onEditDeleteStop} - draw={{ - circle: { - repeatMode: false, // allows using the tool again after finishing the previous shape - shapeOptions: { - color: "#f9f10c", - opacity: 1 // affects the outline only. for some reason it wasn't at full opacity, so this is needed for more clarity - } - }, - rectangle: { - repeatMode: false - }, - polygon: { - repeatMode: true, - allowIntersection: false, // Restricts shapes to simple polygons - drawError: { - color: "#e1e100", // Color the shape will turn when intersects - message: "<strong>Oh snap!<strong> you can't draw that!" // Message that will show when intersect + {(this.props.role === "admin" || + this.props.role === "factionleader") && ( + <EditControl + position="topright" + onCreated={this._onCreated} + onEdited={this._onEdited} + onEditStart={this._onEditDeleteStart} + onEditStop={this._onEditDeleteStop} + onDeleted={this._onDeleted} + onDeleteStart={this._onEditDeleteStart} + onDeleteStop={this._onEditDeleteStop} + draw={{ + circle: { + repeatMode: false, // allows using the tool again after finishing the previous shape + shapeOptions: { + color: "#f9f10c", + opacity: 1 // affects the outline only. for some reason it wasn't at full opacity, so this is needed for more clarity + } }, - shapeOptions: { - color: "#ed2572", - opacity: 1 - } - }, - polyline: { - repeatMode: true, - shapeOptions: { - color: "#ed2572", - opacity: 1 - } - }, - marker: { - repeatMode: false - }, - circlemarker: false - }} - /> + rectangle: { + repeatMode: false + }, + polygon: { + repeatMode: true, + allowIntersection: false, // Restricts shapes to simple polygons + drawError: { + color: "#e1e100", // Color the shape will turn when intersects + message: "<strong>Oh snap!<strong> you can't draw that!" // Message that will show when intersect + }, + shapeOptions: { + color: "#ed2572", + opacity: 1 + } + }, + polyline: { + repeatMode: true, + shapeOptions: { + color: "#ed2572", + opacity: 1 + } + }, + marker: { + repeatMode: false + }, + circlemarker: false + }} + /> + )} {/* iterate through every element fetched from back-end */} {this.props.geoJSONLayer.features.map(feature => { diff --git a/src/components/GameView.js b/src/components/GameView.js index 85eab9a1152550ccc9dd5b6ece452e1a08ccae29..ed592dae6f6a033d1e2f841c16dc239fa17f68fd 100644 --- a/src/components/GameView.js +++ b/src/components/GameView.js @@ -98,7 +98,7 @@ export default class GameView extends React.Component { getSocketSignal = data => { this.setState( { - socketSignal: data + socketSignal: data // TODO: change to data }, () => { this.setState({ diff --git a/src/components/Socket.js b/src/components/Socket.js index 22940ce13df8453a1c60d20338daa7bb623b6971..8283a3904ec109554cf4da18b6c7d165360132d8 100644 --- a/src/components/Socket.js +++ b/src/components/Socket.js @@ -17,7 +17,7 @@ export default class ClientSocket extends React.Component { // initiate the socket on component mount async componentWillMount() { - // console.log("hi socket"); + console.log("hi socket"); // need to explicitly update drawings and trackings when gameID first becomes available if (this.props.gameId !== null) { await this.props.getSocketSignal("drawing-update"); @@ -47,9 +47,10 @@ export default class ClientSocket extends React.Component { // set the socket to listen gameId-thread socket.on(this.props.gameId, data => { - this.props.getSocketSignal(data); + console.log(data.type); + this.props.getSocketSignal(data.type); // check socket update type - this.setState({ update: data.type }); + this.setState({ update: data }); }); this.props.onSocketChange(socket); @@ -57,7 +58,6 @@ export default class ClientSocket extends React.Component { }; render() { - //TODO: return needed? return this.state.update; } } diff --git a/src/components/UserMap.js b/src/components/UserMap.js index 204ee181dbd9fed7e40ded5aab045029f3485f74..7b459ba579f18753770610a3764050674d66a76d 100644 --- a/src/components/UserMap.js +++ b/src/components/UserMap.js @@ -39,6 +39,7 @@ class UserMap extends Component { } componentDidUpdate(prevProps, prevState) { + console.log(prevProps.socketSignal); if (prevProps.socketSignal === "drawing-update") { this.fetchGeoJSON(); } @@ -162,15 +163,15 @@ class UserMap extends Component { url={this.props.mapUrl} /> <ZoomControl position="topright" /> - {(this.props.role === "admin" || - this.props.role === "factionleader") && ( - <DrawTools - position={this.props.position} - sendGeoJSON={this.sendGeoJSON} - geoJSONLayer={this.state.geoJSONLayer} - currentGameId={this.props.currentGameId} - /> - )} + + <DrawTools + position={this.props.position} + sendGeoJSON={this.sendGeoJSON} + geoJSONLayer={this.state.geoJSONLayer} + currentGameId={this.props.currentGameId} + role={this.props.role} + /> + {this.state.ownLat !== null && ( <Marker position={[this.state.ownLat, this.state.ownLng]}> <Popup>