diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js
index a9d70f760dff8884b05deeca7b9044bdc999c37e..3de6eddbc6bd7478d33e7b8c49daeb2885646aca 100644
--- a/src/components/DrawTools.js
+++ b/src/components/DrawTools.js
@@ -252,14 +252,14 @@ class DrawTools extends Component {
onDeleteStop={this._onEditDeleteStop}
draw={{
circle: {
- repeatMode: true, // allows using the tool again after finishing the previous shape
+ 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: true
+ repeatMode: false
},
polygon: {
repeatMode: true,
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
index dbf1c833d38183336d0d372c975699694ed5db65..792758134619f071e1f3bcea1f1a41abf4d86073 100644
--- a/src/components/LoginForm.js
+++ b/src/components/LoginForm.js
@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
export class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
- errorMsg: '',
- username: '',
- password: ''
+ errorMsg: "",
+ username: "",
+ password: ""
};
}
@@ -38,11 +38,11 @@ export class LoginForm extends React.Component {
e.preventDefault();
// Send login info to the server
- fetch(`${process.env.REACT_APP_API_URL}/user/login`, {
- method: 'POST',
+ fetch(`http://localhost:5000/user/login`, {
+ method: "POST",
headers: {
- Accept: 'application/json',
- 'Content-Type': 'application/json'
+ Accept: "application/json",
+ "Content-Type": "application/json"
},
body: JSON.stringify({
name: name,
@@ -69,47 +69,47 @@ export class LoginForm extends React.Component {
};
componentDidMount() {
- document.addEventListener('keyup', this.handleEsc);
+ document.addEventListener("keyup", this.handleEsc);
}
componentWillUnmount() {
- document.removeEventListener('keyup', this.handleEsc);
+ document.removeEventListener("keyup", this.handleEsc);
}
render() {
return (
- <div className='fade-main'>
- <div className='sticky'>
+ <div className="fade-main">
+ <div className="sticky">
<span
- id='closeLoginFormX'
- className='close'
+ id="closeLoginFormX"
+ className="close"
onClick={this.handleView}
>
×
</span>
</div>
- <div className='login'>
+ <div className="login">
<form onSubmit={this.handleLogin}>
<h1>demo login</h1>
<br />
<input
- placeholder='Enter Username'
- name='username'
+ placeholder="Enter Username"
+ name="username"
value={this.state.username}
onChange={this.handleChange}
- id='loginUsernameInput'
+ id="loginUsernameInput"
/>
<br />
<input
- placeholder='Enter password'
- type='password'
- name='password'
+ placeholder="Enter password"
+ type="password"
+ name="password"
value={this.state.password}
onChange={this.handleChange}
- id='loginPasswordInput'
+ id="loginPasswordInput"
/>
<br />
- <button id='submitLoginButton' type='submit'>
+ <button id="submitLoginButton" type="submit">
login
</button>
<h2>{this.state.errorMsg}</h2>
diff --git a/src/components/Player.js b/src/components/Player.js
new file mode 100644
index 0000000000000000000000000000000000000000..15f7a7f48c7357e815c30134bd25c7b61b5c3984
--- /dev/null
+++ b/src/components/Player.js
@@ -0,0 +1,98 @@
+import React, { Component } from "react";
+import { Marker, Popup } from "react-leaflet";
+
+class Player extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ players: null,
+ time: Date.now()
+ };
+ }
+
+ getPlayers() {
+ fetch(
+ "http://localhost:5000/tracking/players/" + this.props.currentGameId,
+ {
+ method: "GET",
+ headers: {
+ Authorization: "Bearer " + sessionStorage.getItem("token")
+ }
+ }
+ )
+ .then(res => res.json()) // no brackets over res.json() or it breaks (what)
+ .then(data => {
+ // don't do anything if data is not an array, as it breaks the map function at render
+ if (Array.isArray(data)) {
+ this.setState({
+ players: data
+ });
+ }
+ })
+ .catch(error => {
+ console.log(error);
+ });
+ }
+
+ componentDidMount() {
+ // update components every 10 seconds
+ this.interval = setInterval(
+ () => this.setState({ time: Date.now() }),
+ 10000
+ );
+ }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ // do not update component until players have been fetched and game ID is available
+ if (this.state.players === null) {
+ this.getPlayers();
+ return false;
+ } else if (this.props.currentGameId === null) {
+ return false;
+ } else {
+ return true;
+ }
+ }
+
+ componentDidUpdate() {
+ // check if game ID has changed
+ if (this.state.currentGameId !== this.props.currentGameId) {
+ this.setState({
+ currentGameId: this.props.currentGameId
+ });
+ }
+ }
+
+ componentWillUnmount() {
+ clearInterval(this.interval);
+ }
+
+ render() {
+ return (
+ <div>
+ {this.state.players !== null &&
+ this.state.players.map(player => {
+ return (
+ <Marker
+ key={Math.random()}
+ position={player.coordinates}
+ factionId={player.factionId}
+ gamepersonId={player.gamepersonId}
+ gamepersonRole={player.gamepersonRole}
+ >
+ <Popup>
+ <b>factionId:</b> {player.factionId}
+ <br />
+ <b>gamepersonId:</b> {player.gamepersonId}
+ <br />
+ <b>gamepersonRole:</b> {player.gamepersonRole}
+ </Popup>
+ </Marker>
+ );
+ })}
+ </div>
+ );
+ }
+}
+
+export default Player;
diff --git a/src/components/RegisterForm.js b/src/components/RegisterForm.js
index 56360b6f7c1565c49aa11d8ad7957ab156c35dce..3e14df125639550bcd6948bc38167c368c273929 100644
--- a/src/components/RegisterForm.js
+++ b/src/components/RegisterForm.js
@@ -1,14 +1,14 @@
-import React from 'react';
+import React from "react";
export class RegisterForm extends React.Component {
constructor(props) {
super(props);
this.state = {
- errorMsg: '',
- username: '',
- password: '',
- password2: ''
+ errorMsg: "",
+ username: "",
+ password: "",
+ password2: ""
};
}
@@ -41,14 +41,14 @@ export class RegisterForm extends React.Component {
e.preventDefault();
if (this.state.password !== this.state.password2) {
- this.handleError('Passwords do not match');
+ this.handleError("Passwords do not match");
} else {
// Send register info to the server
- fetch('http://localhost:5000/user/register', {
- method: 'POST',
+ fetch("http://localhost:5000/user/register", {
+ method: "POST",
headers: {
- Accept: 'application/json',
- 'Content-Type': 'application/json'
+ Accept: "application/json",
+ "Content-Type": "application/json"
},
body: JSON.stringify({
name: name,
@@ -76,28 +76,28 @@ export class RegisterForm extends React.Component {
};
componentDidMount() {
- document.addEventListener('keyup', this.handleEsc);
+ document.addEventListener("keyup", this.handleEsc);
}
componentWillUnmount() {
- document.removeEventListener('keyup', this.handleEsc);
+ document.removeEventListener("keyup", this.handleEsc);
}
render() {
return (
- <div className='fade-main'>
- <div className='sticky'>
- <span className='close' onClick={this.handleView}>
+ <div className="fade-main">
+ <div className="sticky">
+ <span className="close" onClick={this.handleView}>
×
</span>
</div>
- <div className='login'>
+ <div className="login">
<form onSubmit={this.handleRegister}>
<h1>register new user</h1>
<br />
<input
- placeholder='Enter Username'
- name='username'
+ placeholder="Enter Username"
+ name="username"
value={this.state.username}
onChange={this.handleChange}
autoFocus
@@ -105,24 +105,24 @@ export class RegisterForm extends React.Component {
/>
<br />
<input
- placeholder='Enter password'
- type='password'
- name='password'
+ placeholder="Enter password"
+ type="password"
+ name="password"
value={this.state.password}
onChange={this.handleChange}
required
/>
<br />
<input
- placeholder='Verify password'
- type='password'
- name='password2'
+ placeholder="Verify password"
+ type="password"
+ name="password2"
value={this.state.password2}
onChange={this.handleChange}
required
/>
<br />
- <button type='submit'>register</button>
+ <button type="submit">register</button>
<h2>{this.state.errorMsg}</h2>
</form>
</div>
diff --git a/src/components/UserMap.js b/src/components/UserMap.js
index ad20ffd4e6215faf4bb33610ac65e3b6a9460680..22dbbb66cc08c872820a108643cfc4e9e1fe6b73 100644
--- a/src/components/UserMap.js
+++ b/src/components/UserMap.js
@@ -1,6 +1,7 @@
import React, { Component } from "react";
import { Map, TileLayer, ZoomControl, Marker, Popup } from "react-leaflet";
import DrawTools from "./DrawTools.js";
+import Player from "./Player.js";
class UserMap extends Component {
constructor(props) {
@@ -111,7 +112,6 @@ class UserMap extends Component {
.catch(error => {
console.log(error);
});
- console.log(this.state.geoJSONLayer);
}
componentWillUnmount() {
@@ -190,6 +190,7 @@ class UserMap extends Component {
</Popup>
</Marker>
)}
+ <Player currentGameId={this.state.currentGameId} />
</Map>
);
}