diff --git a/src/App.css b/src/App.css
index 7d7f9508468c0da993d1991880bbf8fde6c93677..d09ddd38e9af220ac7f8af30cf562952e241034e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,6 +2,8 @@ body {
margin: 0;
padding: 0;
overflow: hidden;
+ background-color: #1d1d1b;
+ color: #ffffff;
}
.hidden {
@@ -197,3 +199,18 @@ div.login button:hover {
text-shadow: none;
font-weight: normal;
}
+
+.gamecard {
+ border: 5px solid #647828;
+ border-radius: 20px;
+ padding: 10px;
+ margin: 10px;
+ background-color: #859b28;
+ color: #ffffff;
+}
+
+.gamelist {
+ background-color: #1d1d1b;
+ max-width: 500px;
+ padding: 10px;
+}
diff --git a/src/App.js b/src/App.js
index bc70879b202ce038916eaa8964e1c8355f6a6bf5..165c758c0a4786cb0e5c4f77f0b134352375f236 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,9 @@
import React, { Component, Fragment } from "react";
import "../node_modules/leaflet-draw/dist/leaflet.draw.css";
import "./App.css";
-import UserMap from "./components/UserMap";
-import Header from "./components/Header";
import {
BrowserRouter as Router,
Route,
- Link,
Switch,
Redirect
} from "react-router-dom";
@@ -136,14 +133,6 @@ class App extends Component {
);
};
- gameView = () => {
- return <GameView />;
- };
-
- gameSelection = () => {
- return <GameSelection />;
- };
-
render() {
const initialPosition = [this.state.lat, this.state.lng];
return (
@@ -162,8 +151,19 @@ class App extends Component {
{this.state.logged && (
<Switch>
- <Route path="/game" component={this.gameView} />
- <Route exact path="/" component={this.gameSelection} />
+ <Route
+ path="/game"
+ component={() => {
+ return <GameView />;
+ }}
+ />
+ <Route
+ exact
+ path="/"
+ component={() => {
+ return <GameSelection />;
+ }}
+ />
{/* Redirect from any other path to root */}
<Redirect from="*" to="/" />
</Switch>
diff --git a/src/components/GameCard.js b/src/components/GameCard.js
new file mode 100644
index 0000000000000000000000000000000000000000..6cb651662501e66f3c0e609498de701b09904a02
--- /dev/null
+++ b/src/components/GameCard.js
@@ -0,0 +1,71 @@
+import React from "react";
+import { EditGameForm } from "./EditGameForm";
+import { BrowserRouter as Router, Link } from "react-router-dom";
+
+export default class GameCard extends React.Component {
+ state = {
+ editForm: false,
+ gameInfo: {}
+ };
+
+ // Get game info
+ componentDidMount() {
+ fetch(`${process.env.REACT_APP_API_URL}/game/${this.props.gameId}`)
+ .then(res => {
+ if (res.ok) {
+ return res.json();
+ }
+ })
+ .then(res => {
+ this.setState({
+ gameInfo: {
+ id: res.id,
+ name: res.name,
+ desc: res.desc,
+ state: res.state,
+ startdate: res.startdate,
+ enddate: res.enddate
+ }
+ });
+ })
+ .catch(error => console.log(error));
+ }
+
+ render() {
+ if (this.state.gameInfo.id === undefined) {
+ return false;
+ }
+
+ return (
+ <div className="gamecard">
+ <label>Name: {this.state.gameInfo.name}</label>
+ <br />
+ <label>Description: {this.state.gameInfo.desc}</label>
+ <br />
+ <label>
+ Date: {this.state.gameInfo.startdate} - {this.state.gameInfo.enddate}
+ </label>
+ <br />
+ <label>State: {this.state.gameInfo.state}</label>
+ <br />
+ <Link
+ to={{ pathname: "/game", search: "?id=" + this.state.gameInfo.id }}
+ >
+ <button type="button">Select</button>
+ </Link>
+ <button
+ id="editGameButton"
+ onClick={() => this.setState({ editForm: true })}
+ >
+ Edit
+ </button>
+ {this.state.editForm && (
+ <EditGameForm
+ gameId={this.state.gameInfo.id}
+ toggleView={() => this.setState({ editForm: false })}
+ />
+ )}
+ </div>
+ );
+ }
+}
diff --git a/src/components/GameList.js b/src/components/GameList.js
index f3fc6d3c71a350b960302f428ed66df3271a8e87..5525a95df6d63cf4c8117df649f0e0276209aa57 100644
--- a/src/components/GameList.js
+++ b/src/components/GameList.js
@@ -1,16 +1,12 @@
import React, { Fragment } from "react";
-import EditGameForm from "./EditGameForm";
+import GameCard from "./GameCard";
class GameList extends React.Component {
constructor(props) {
super(props);
this.state = {
- games: [],
- selectedGame: null,
- editForm: false
+ games: []
};
-
- this.toggleView = this.toggleView.bind(this);
}
componentDidMount() {
@@ -33,64 +29,20 @@ class GameList extends React.Component {
});
}
- handleChange = e => {
- this.setState(
- {
- selectedGame: e.target.value
- },
- () => {
- // taking the changed gameID to UserMap.js (GameList.js -> Header.js -> App.js -> UserMap.js)
- this.props.handleGameChange(this.state.selectedGame);
- }
- );
- };
-
- handleEditClick = e => {
- if (this.state.selectedGame === null) {
- alert("No game selected");
- } else {
- this.setState({
- editForm: true
- });
- }
- };
-
- toggleView = e => {
- this.setState({
- editForm: !this.state.editForm
- });
- this.getGames();
- };
-
render() {
- let items = [];
-
- 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>
+ let gamelistItems = this.state.games.map(game => {
+ return (
+ <GameCard
+ key={game.id}
+ gameId={game.id}
+ onEditSave={() => this.getGames()}
+ />
);
- }
+ });
return (
<Fragment>
- <label>Game: </label>
- <select id="changeActiveGameList" onChange={this.handleChange}>
- {items}
- </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}
- />
- )}
+ <div className="gamelist">{gamelistItems}</div>
</Fragment>
);
}
diff --git a/src/components/GameSelection.js b/src/components/GameSelection.js
index 281f405257ab46ff809b3dbf687ad01b029acb1e..bef2d4f4f0fd9db7593310c8bf499aaca8cc1116 100644
--- a/src/components/GameSelection.js
+++ b/src/components/GameSelection.js
@@ -1,37 +1,31 @@
import React from "react";
import GameList from "./GameList";
-import {
- BrowserRouter as Router,
- Route,
- Link,
- Switch,
- Redirect
-} from "react-router-dom";
+import NewGameForm from "./NewGameForm";
export default class GameSelection extends React.Component {
state = {
- currentGameId: ""
- };
-
- handleGameChange = gameId => {
- this.setState({
- currentGameId: gameId
- });
- };
-
- handleGameSelection = () => {
- console.log(this.state.currentGameId);
+ newGameForm: false
};
render() {
return (
<div>
- <GameList handleGameChange={this.handleGameChange} />
- <Link
- to={{ pathname: "/game", search: "?id=" + this.state.currentGameId }}
+ <label>Games</label>
+ <br />
+ <button
+ id="newGameButton"
+ onClick={() => this.setState({ newGameForm: true })}
>
- <button type="button">Select</button>
- </Link>
+ New Game
+ </button>
+ {this.state.newGameForm && (
+ <NewGameForm
+ view=""
+ handleState={this.handleState}
+ toggleView={() => this.setState({ newGameForm: false })}
+ />
+ )}
+ <GameList />
</div>
);
}
diff --git a/src/components/Header.js b/src/components/Header.js
index 0663cc382019e1aa00f9757a98b4fe5fb1a5508f..f941d3d6fc83ce7c1cead32a09a5ebead50670da 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,17 +1,9 @@
-import React from 'react';
-
-import LoginForm from './LoginForm';
-import RegisterForm from './RegisterForm';
-import GameList from './GameList';
-import NewGameForm from './NewGameForm';
+import React from "react";
+import GameList from "./GameList";
class Header extends React.Component {
- constructor(props) {
- super(props);
- }
-
state = {
- form: '', // Popup form (login, register etc.)
+ form: "", // Popup form (login, register etc.)
username: null,
token: null
};
@@ -24,23 +16,23 @@ class Header extends React.Component {
};
handleState = data => {
- sessionStorage.setItem('name', data.name);
- sessionStorage.setItem('token', data.token);
+ sessionStorage.setItem("name", data.name);
+ sessionStorage.setItem("token", data.token);
this.setState({ username: data.name, token: data.token });
};
handleLogout = () => {
this.setState({ username: null, token: null });
- sessionStorage.removeItem('token');
+ sessionStorage.removeItem("token");
};
// verifies the token (if it exists) on element mount with backend server
componentDidMount() {
- let token = sessionStorage.getItem('token');
+ let token = sessionStorage.getItem("token");
if (token) {
fetch(`${process.env.REACT_APP_API_URL}/user/verify`, {
headers: {
- Authorization: 'Bearer ' + token
+ Authorization: "Bearer " + token
}
})
.then(res => res.json())
@@ -49,7 +41,7 @@ class Header extends React.Component {
// if token is still valid, login user
if (result === true) {
this.setState({
- username: sessionStorage.getItem('name'),
+ username: sessionStorage.getItem("name"),
token: token
});
// logout user if token has expired / is invalid
@@ -67,60 +59,31 @@ class Header extends React.Component {
render() {
return (
<div>
- <div className='header'>
+ <div className="header">
{!this.state.username && (
<button
- id='registerButton'
- onClick={() => this.toggleView('register')}
+ id="registerButton"
+ onClick={() => this.toggleView("register")}
>
register
</button>
)}
{!this.state.username && (
- <button id='loginButton' onClick={() => this.toggleView('login')}>
+ <button id="loginButton" onClick={() => this.toggleView("login")}>
login
</button>
)}
{this.state.username && (
- <button
- id='newGameButton'
- onClick={() => this.toggleView('newgame')}
- >
- New Game
- </button>
- )}
- {this.state.username && (
- <button id='logoutButton' onClick={this.handleLogout}>
+ <button id="logoutButton" onClick={this.handleLogout}>
logout
</button>
)}
{this.state.username && <button>{this.state.username}</button>}
- <button id='changeLayerButton' onClick={this.props.handleLayerChange}>
+ <button id="changeLayerButton" onClick={this.props.handleLayerChange}>
change layer
</button>
<GameList handleGameChange={this.props.handleGameChange} />
</div>
- {this.state.form === 'register' && (
- <RegisterForm
- view=''
- handleState={this.handleState}
- toggleView={this.toggleView}
- />
- )}
- {this.state.form === 'login' && (
- <LoginForm
- view=''
- handleState={this.handleState}
- toggleView={this.toggleView}
- />
- )}
- {this.state.form === 'newgame' && (
- <NewGameForm
- view=''
- handleState={this.handleState}
- toggleView={this.toggleView}
- />
- )}
</div>
);
}