diff --git a/src/components/EditGameForm.js b/src/components/EditGameForm.js
index c985f3ec4e40b12c0fde8ceed4ae48f53ca7a0a4..dd4e9bd08d7b4c74390a6f4877f97679edecb363 100644
--- a/src/components/EditGameForm.js
+++ b/src/components/EditGameForm.js
@@ -1,27 +1,24 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import {
- Map,
- TileLayer
-} from 'react-leaflet'
+import { Map, TileLayer } from 'react-leaflet';
-export class EditGameForm extends React.Component{
- constructor(props){
+export class EditGameForm extends React.Component {
+ constructor(props) {
super(props);
this.state = {
- gamename: "",
- description: "",
- startDate: "",
- startTime: "",
- endDate: "",
- endTime: "",
+ gamename: '',
+ description: '',
+ startDate: '',
+ startTime: '',
+ endDate: '',
+ endTime: '',
zoom: 13,
mapCenter: {
lat: 62.2416479,
lng: 25.7597186
}
- }
+ };
this.handleMapDrag = this.handleMapDrag.bind(this);
}
@@ -51,33 +48,34 @@ export class EditGameForm extends React.Component{
this.setState({
mapCenter: e.target.getCenter()
});
- }
+ };
handleMapScroll = e => {
this.setState({
zoom: e.target.getZoom()
});
- }
+ };
handleGameSave = e => {
- let startDate = this.state.startDate + "T" + this.state.startTime + ":00.000Z";
- let endDate = this.state.endDate + "T" + this.state.endTime + ":00.000Z";
+ let startDate =
+ this.state.startDate + 'T' + this.state.startTime + ':00.000Z';
+ let endDate = this.state.endDate + 'T' + this.state.endTime + ':00.000Z';
const gameObject = {
name: this.state.gamename,
desc: this.state.description,
- map: "",
+ map: '',
startdate: startDate,
enddate: endDate,
center: this.state.mapCenter
- }
+ };
e.preventDefault();
let token = sessionStorage.getItem('token');
// Send Game info to the server
- fetch('http://localhost:5000/game/edit' + this.props.gameId, {
+ fetch('http://localhost:5000/game/edit/' + this.props.gameId, {
method: 'PUT',
headers: {
Authorization: 'Bearer ' + token,
@@ -85,7 +83,8 @@ export class EditGameForm extends React.Component{
'Content-Type': 'application/json'
},
body: JSON.stringify(gameObject)
- }).then(res => res.json())
+ })
+ .then(res => res.json())
.then(result => {
alert(result.message);
this.handleView();
@@ -102,112 +101,126 @@ export class EditGameForm extends React.Component{
document.removeEventListener('keyup', this.handleEsc);
}
- getGameInfo(gameId){
+ getGameInfo(gameId) {
fetch('http://localhost:5000/game/' + gameId)
.then(response => response.json())
.then(json => this.handleGameInfo(json))
.catch(error => console.log(error));
}
- handleGameInfo(json){
+ handleGameInfo(json) {
this.setState({
gamename: json.name,
description: json.desc,
- startDate: json.startdate.substring(0,10),
- startTime: json.startdate.substring(11,16),
- endDate: json.enddate.substring(0,10),
- endTime: json.enddate.substring(11,16),
+ startDate: json.startdate.substring(0, 10),
+ startTime: json.startdate.substring(11, 16),
+ endDate: json.enddate.substring(0, 10),
+ endTime: json.enddate.substring(11, 16),
zoom: 13,
mapCenter: {
lat: json.center.lat,
lng: json.center.lng
}
- })
+ });
}
render() {
- return ReactDOM.createPortal (
- <div className='fade-main'>
- <div className='sticky'>
- <span className='close' onClick={this.handleView}>
+ return ReactDOM.createPortal(
+ <div className="fade-main">
+ <div className="sticky">
+ <span
+ id="closeEditGameFormX"
+ className="close"
+ onClick={this.handleView}
+ >
×
</span>
</div>
- <div className=''>
+ <div className="">
<form onSubmit={this.handleGameSave}>
<h1>Demo Game Creation</h1>
<br />
<input
- placeholder='Game name'
- name='gamename'
+ placeholder="Game name"
+ name="gamename"
value={this.state.gamename}
onChange={this.handleChange}
- required
+ id="editGameNameInput"
/>
<br />
<input
- placeholder='Description'
- type='text'
- name='description'
+ placeholder="Description"
+ type="text"
+ name="description"
value={this.state.description}
onChange={this.handleChange}
- required
+ id="editGameDescriptionInput"
/>
<br />
- <label className=''>Start:</label>
+ <label className="">Start:</label>
<input
- className='formDate'
- type='date'
- name='startDate'
+ className="formDate"
+ type="date"
+ name="startDate"
value={this.state.startDate}
onChange={this.handleChange}
- required
+ id="editGameDateStartInput"
/>
<input
- className='formTime'
- type='time'
- name='startTime'
+ className="formTime"
+ type="time"
+ name="startTime"
value={this.state.startTime}
onChange={this.handleChange}
- required
+ rid="editGameTimeStartInput"
/>
<br />
- <label className=''>End:</label>
+ <label className="">End:</label>
<input
- className='formDate'
- type='date'
- name='endDate'
+ className="formDate"
+ type="date"
+ name="endDate"
value={this.state.endDate}
onChange={this.handleChange}
min={this.state.startDate}
- required
+ id="editGameDateEndInput"
/>
<input
- className='formTime'
- type='time'
- name='endTime'
+ className="formTime"
+ type="time"
+ name="endTime"
value={this.state.endTime}
onChange={this.handleChange}
- required
+ id="editGameTimeEndInput"
/>
<br />
<label>Map things</label>
<br />
- <Map className='' center={[this.state.mapCenter.lat, this.state.mapCenter.lng]} zoom={this.state.zoom} style={{height: '400px', width: '400px'} } onmoveend={this.handleMapDrag} onzoomend={this.handleMapScroll}>
+ <Map
+ id="editGameCenterMap"
+ className=""
+ center={[this.state.mapCenter.lat, this.state.mapCenter.lng]}
+ zoom={this.state.zoom}
+ style={{ height: '400px', width: '400px' }}
+ onmoveend={this.handleMapDrag}
+ onzoomend={this.handleMapScroll}
+ >
<TileLayer
- attribution='Maanmittauslaitoksen kartta'
- url=' https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg'
+ attribution="Maanmittauslaitoksen kartta"
+ url=" https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"
/>
</Map>
<br />
- <button type='submit'>Save changes</button>
+ <button id="editGameSubmitButton" type="submit">
+ Save changes
+ </button>
<h2>{this.state.errorMsg}</h2>
</form>
</div>
- </div>
- ,document.getElementById('form')
+ </div>,
+ document.getElementById('form')
);
}
}
-export default EditGameForm;
\ No newline at end of file
+export default EditGameForm;
diff --git a/src/components/GameList.js b/src/components/GameList.js
index 6b68d64393a4c25713bea74fa511ff0b0f92558b..26d32824205167bf9320b097955d9d405704c488 100644
--- a/src/components/GameList.js
+++ b/src/components/GameList.js
@@ -2,13 +2,13 @@ import React, { Fragment } from 'react';
import EditGameForm from './EditGameForm';
class GameList extends React.Component {
- constructor(props){
+ constructor(props) {
super(props);
this.state = {
games: [],
selectedGame: null,
editForm: false
- }
+ };
this.toggleView = this.toggleView.bind(this);
}
@@ -17,39 +17,42 @@ class GameList extends React.Component {
this.getGames();
}
- getGames(){
+ getGames() {
fetch('http://localhost:5000/game/listgames')
- .then(response => response.json())
- .then(games => {
- this.setState({
- games: games,
- selectedGame: games !== null && games[0].id
+ .then(response => response.json())
+ .then(games => {
+ this.setState({
+ games: games,
+ selectedGame: games !== null && games[0].id
+ });
+ })
+ .catch(error => {
+ console.log(error);
});
- })
- .catch(error => {console.log(error);})
}
- handleChange = (e) =>{
+ handleChange = e => {
this.setState({
selectedGame: e.target.value
});
- }
+ };
- handleEditClick = (e) => {
- if(this.state.selectedGame === null){alert('No game selected');}
- else{
+ handleEditClick = e => {
+ if (this.state.selectedGame === null) {
+ alert('No game selected');
+ } else {
this.setState({
editForm: true
});
}
- }
+ };
- toggleView = (e) =>{
+ toggleView = e => {
this.setState({
editForm: !this.state.editForm
});
this.getGames();
- }
+ };
render() {
let items = [];
@@ -57,23 +60,32 @@ class GameList extends React.Component {
for (let i = 0; i < this.state.games.length; i++) {
const element = this.state.games[i];
items.push(
- <option key={element.id} value={element.id}>{element.name}</option>
+ <option key={element.id} value={element.id}>
+ {element.name}
+ </option>
);
}
return (
<Fragment>
<label>Game: </label>
- <select onChange={this.handleChange}>
+ <select id='changeActiveGameList' onChange={this.handleChange}>
{items}
- </select>
- {sessionStorage.getItem('token')
- && <button onClick={this.handleEditClick}>Edit game</button>}
- {(this.state.editForm && this.state.selectedGame !== null)
- && <EditGameForm gameId={this.state.selectedGame} toggleView={this.toggleView}/>}
+ </select>
+ {sessionStorage.getItem('token') && (
+ <button id='editGameButton' onClick={this.handleEditClick}>
+ Edit game
+ </button>
+ )}
+ {this.state.editForm && this.state.selectedGame !== null && (
+ <EditGameForm
+ gameId={this.state.selectedGame}
+ toggleView={this.toggleView}
+ />
+ )}
</Fragment>
);
}
}
-
-export default GameList;
\ No newline at end of file
+
+export default GameList;
diff --git a/src/components/Header.js b/src/components/Header.js
index 6eff8b4572bd8e4404d9a167fbb556756ac6bf40..6a0f788fcea295fff261cf87a6163a92889ebe45 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -7,7 +7,7 @@ import NewGameForm from './NewGameForm';
class Header extends React.Component {
state = {
- form: "", // Popup form (login, register etc.)
+ form: '', // Popup form (login, register etc.)
username: null,
token: null
};
@@ -39,24 +39,24 @@ class Header extends React.Component {
Authorization: 'Bearer ' + token
}
})
- .then(res => res.json())
- .then(
- result => {
- // if token is still valid, login user
- if (result === true) {
- this.setState({
- username: sessionStorage.getItem('name'),
- token: token
- });
- // logout user if token has expired / is invalid
- } else {
- this.handleLogout();
+ .then(res => res.json())
+ .then(
+ result => {
+ // if token is still valid, login user
+ if (result === true) {
+ this.setState({
+ username: sessionStorage.getItem('name'),
+ token: token
+ });
+ // logout user if token has expired / is invalid
+ } else {
+ this.handleLogout();
+ }
+ },
+ error => {
+ console.log(error);
}
- },
- error => {
- console.log(error);
- }
- );
+ );
}
}
@@ -65,21 +65,35 @@ class Header extends React.Component {
<div>
<div className='header'>
{!this.state.username && (
- <button onClick={() => this.toggleView('register')}>
+ <button
+ id='registerButton'
+ onClick={() => this.toggleView('register')}
+ >
register
</button>
)}
{!this.state.username && (
- <button onClick={() => this.toggleView('login')}>login</button>
+ <button id='loginButton' onClick={() => this.toggleView('login')}>
+ login
+ </button>
)}
{this.state.username && (
- <button onClick={() => this.toggleView('newgame')}>New Game</button>
+ <button
+ id='newGameButton'
+ onClick={() => this.toggleView('newgame')}
+ >
+ New Game
+ </button>
)}
{this.state.username && (
- <button onClick={this.handleLogout}>logout</button>
+ <button id='logoutButton' onClick={this.handleLogout}>
+ logout
+ </button>
)}
{this.state.username && <button>{this.state.username}</button>}
- <button onClick={this.props.handleLayerChange}>change layer</button>
+ <button id='changeLayerButton' onClick={this.props.handleLayerChange}>
+ change layer
+ </button>
<GameList />
</div>
{this.state.form === 'register' && (
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
index 2714949f5208ed579754098086939a4fe2e10798..f37999dd525befe0f4f8cf95f15090f10478b046 100644
--- a/src/components/LoginForm.js
+++ b/src/components/LoginForm.js
@@ -80,7 +80,7 @@ export class LoginForm extends React.Component {
return (
<div className='fade-main'>
<div className='sticky'>
- <span className='close' onClick={this.handleView}>
+ <span id="closeLoginFormX" className='close' onClick={this.handleView}>
×
</span>
</div>
@@ -93,7 +93,7 @@ export class LoginForm extends React.Component {
name='username'
value={this.state.username}
onChange={this.handleChange}
- required
+ id="loginUsernameInput"
/>
<br />
<input
@@ -102,14 +102,15 @@ export class LoginForm extends React.Component {
name='password'
value={this.state.password}
onChange={this.handleChange}
- required
+ id="loginPasswordInput"
/>
<br />
- <button type='submit'>login</button>
+ <button id="submitLoginButton" type='submit'>login</button>
<h2>{this.state.errorMsg}</h2>
</form>
</div>
</div>
+
);
}
}
diff --git a/src/components/NewGameForm.js b/src/components/NewGameForm.js
index 5f133377d5a4b415a394038b0442b71cc928f93b..3f83ccfa0f2cc7a87b500ffb2f938bfe39b72b41 100644
--- a/src/components/NewGameForm.js
+++ b/src/components/NewGameForm.js
@@ -1,28 +1,25 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import {
- Map,
- TileLayer
-} from 'react-leaflet'
+import { Map, TileLayer } from 'react-leaflet';
-export class NewGameForm extends React.Component{
- constructor(props){
+export class NewGameForm extends React.Component {
+ constructor(props) {
super(props);
this.state = {
- gamename: "",
- description: "",
- startDate: "",
- startTime: "",
- endDate: "",
- endTime: "",
+ gamename: '',
+ description: '',
+ startDate: '',
+ startTime: '',
+ endDate: '',
+ endTime: '',
passwords: [],
zoom: 13,
mapCenter: {
lat: 62.2416479,
lng: 25.7597186
}
- }
+ };
this.handleMapDrag = this.handleMapDrag.bind(this);
}
@@ -52,27 +49,28 @@ export class NewGameForm extends React.Component{
this.setState({
mapCenter: e.target.getCenter()
});
- }
+ };
handleMapScroll = e => {
this.setState({
zoom: e.target.getZoom()
});
- }
+ };
handleGameCreation = e => {
- let startDate = this.state.startDate + "T" + this.state.startTime + ":00.000Z";
- let endDate = this.state.endDate + "T" + this.state.endTime + ":00.000Z";
+ let startDate =
+ this.state.startDate + 'T' + this.state.startTime + ':00.000Z';
+ let endDate = this.state.endDate + 'T' + this.state.endTime + ':00.000Z';
const gameObject = {
name: this.state.gamename,
desc: this.state.description,
- map: "",
+ map: '',
startdate: startDate,
enddate: endDate,
passwords: [this.state.password],
center: this.state.mapCenter
- }
+ };
e.preventDefault();
@@ -87,7 +85,8 @@ export class NewGameForm extends React.Component{
'Content-Type': 'application/json'
},
body: JSON.stringify(gameObject)
- }).then(res => res.json())
+ })
+ .then(res => res.json())
.then(result => {
this.handleView();
})
@@ -103,86 +102,100 @@ export class NewGameForm extends React.Component{
}
render() {
- return ReactDOM.createPortal (
- <div className='fade-main'>
- <div className='sticky'>
- <span className='close' onClick={this.handleView}>
+ return ReactDOM.createPortal(
+ <div className="fade-main">
+ <div className="sticky">
+ <span
+ id="closeNewGameFormX"
+ className="close"
+ onClick={this.handleView}
+ >
×
</span>
</div>
- <div className=''>
+ <div className="">
<form onSubmit={this.handleGameCreation}>
<h1>Demo Game Creation</h1>
<br />
<input
- placeholder='Game name'
- name='gamename'
+ placeholder="Game name"
+ name="gamename"
value={this.state.gamename}
onChange={this.handleChange}
- required
+ id="newGameNameInput"
/>
<br />
<input
- placeholder='Description'
- type='text'
- name='description'
+ placeholder="Description"
+ type="text"
+ name="description"
value={this.state.description}
onChange={this.handleChange}
- required
+ id="newGameDescriptionInput"
/>
<br />
- <label className=''>Start:</label>
+ <label className="">Start:</label>
<input
- className='formDate'
- type='date'
- name='startDate'
+ className="formDate"
+ type="date"
+ name="startDate"
value={this.state.startDate}
onChange={this.handleChange}
- required
+ id="newGameDateStartInput"
/>
<input
- className='formTime'
- type='time'
- name='startTime'
+ className="formTime"
+ type="time"
+ name="startTime"
onChange={this.handleChange}
- required
+ id="newGameTimeStartInput"
/>
<br />
- <label className=''>End:</label>
+ <label className="">End:</label>
<input
- className='formDate'
- type='date'
- name='endDate'
+ className="formDate"
+ type="date"
+ name="endDate"
value={this.state.endDate}
onChange={this.handleChange}
min={this.state.startDate}
- required
+ id="newGameDateEndInput"
/>
<input
- className='formTime'
- type='time'
- name='endTime'
+ className="formTime"
+ type="time"
+ name="endTime"
onChange={this.handleChange}
- required
+ id="newGameTimeEndInput"
/>
<br />
<label>Map things</label>
<br />
- <Map className='' center={[this.state.mapCenter.lat, this.state.mapCenter.lng]} zoom={this.state.zoom} style={{height: '400px', width: '400px'} } onmoveend={this.handleMapDrag} onzoomend={this.handleMapScroll}>
+ <Map
+ id="newGameCenterMap"
+ className=""
+ center={[this.state.mapCenter.lat, this.state.mapCenter.lng]}
+ zoom={this.state.zoom}
+ style={{ height: '400px', width: '400px' }}
+ onmoveend={this.handleMapDrag}
+ onzoomend={this.handleMapScroll}
+ >
<TileLayer
- attribution='Maanmittauslaitoksen kartta'
- url=' https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg'
+ attribution="Maanmittauslaitoksen kartta"
+ url=" https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"
/>
</Map>
<br />
- <button type='submit'>Submit</button>
+ <button id="newGameSubmitButton" type="submit">
+ Submit
+ </button>
<h2>{this.state.errorMsg}</h2>
</form>
</div>
- </div>
- ,document.getElementById('form')
+ </div>,
+ document.getElementById('form')
);
}
}
-export default NewGameForm;
\ No newline at end of file
+export default NewGameForm;
diff --git a/src/components/RegisterForm.js b/src/components/RegisterForm.js
index 5358a600d5063eefbe24bff06e8fb3da05a78afb..960731a446dc6ac6fd9210f7d9b74cbe46066874 100644
--- a/src/components/RegisterForm.js
+++ b/src/components/RegisterForm.js
@@ -87,7 +87,11 @@ export class RegisterForm extends React.Component {
return (
<div className='fade-main'>
<div className='sticky'>
- <span className='close' onClick={this.handleView}>
+ <span
+ id='closeRegisterFormX'
+ className='close'
+ onClick={this.handleView}
+ >
×
</span>
</div>
@@ -100,7 +104,7 @@ export class RegisterForm extends React.Component {
name='username'
value={this.state.username}
onChange={this.handleChange}
- required
+ id='registerUsernameInput'
/>
<br />
<input
@@ -109,7 +113,7 @@ export class RegisterForm extends React.Component {
name='password'
value={this.state.password}
onChange={this.handleChange}
- required
+ id='registerPasswordInput'
/>
<br />
<input
@@ -118,10 +122,12 @@ export class RegisterForm extends React.Component {
name='password2'
value={this.state.password2}
onChange={this.handleChange}
- required
+ id='registerPasswordVerifyInput'
/>
<br />
- <button type='submit'>register</button>
+ <button id='submitRegisterButton' type='submit'>
+ register
+ </button>
<h2>{this.state.errorMsg}</h2>
</form>
</div>