Skip to content
Snippets Groups Projects
Commit 1ad11a59 authored by Joni Laukka's avatar Joni Laukka
Browse files

Game selection added, code refactoring

parent fa96de73
No related branches found
No related tags found
2 merge requests!31Development,!28Routing
Hide whitespace changes
Inline Side-by-side
src/App.css
+ 17
− 0
View file @ 1ad11a59
......@@ -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;
}
src/App.js
+ 13
− 13
View file @ 1ad11a59
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>
......
src/components/GameCard.js 0 → 100644
+ 71
− 0
View file @ 1ad11a59
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>
);
}
}
src/components/GameList.js
+ 11
− 59
View file @ 1ad11a59
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>
);
}
......
src/components/GameSelection.js
+ 17
− 23
View file @ 1ad11a59
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>
);
}
......
src/components/Header.js
+ 15
− 52
View file @ 1ad11a59
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>
);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment