From f9b996ea84c83c53d92984a24c3965d132ff2b9b Mon Sep 17 00:00:00 2001
From: Joni Laukka <joni.laukka.overflow@gmail.com>
Date: Tue, 9 Jul 2019 16:00:06 +0300
Subject: [PATCH] Game sidebar wip
---
src/components/EditGameForm.js | 367 +++++++++++++++++++++------------
src/components/GameList.js | 21 +-
src/components/GameSidebar.js | 31 +++
src/components/Header.js | 25 ++-
src/components/LoginForm.js | 2 +-
src/components/NewGameForm.js | 24 ++-
6 files changed, 313 insertions(+), 157 deletions(-)
create mode 100644 src/components/GameSidebar.js
diff --git a/src/components/EditGameForm.js b/src/components/EditGameForm.js
index 2011b94..2489575 100644
--- a/src/components/EditGameForm.js
+++ b/src/components/EditGameForm.js
@@ -1,4 +1,4 @@
-import React, {Fragment} from "react";
+import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import { Map, TileLayer } from "react-leaflet";
@@ -19,14 +19,14 @@ export class EditGameForm extends React.Component {
lat: 62.2416479,
lng: 25.7597186
},
- factionNameInput: "", // >= 2 chars
+ factionNameInput: "", // >= 2 chars
factionPasswordInput: "", // >= 3 chars
factions: [],
objectivePointDescriptionInput: "", // >= 7
- objectivePointMultiplierInput: "", // number
+ objectivePointMultiplierInput: "", // number
objectivePoints: [],
capture_time: 300,
- confirmation_time: 60,
+ confirmation_time: 60
};
this.handleMapDrag = this.handleMapDrag.bind(this);
@@ -41,15 +41,24 @@ export class EditGameForm extends React.Component {
this.setState({ [name]: value });
};
- handleFactionAdd = e =>{
+ handleFactionAdd = e => {
e.preventDefault();
-
- if(this.state.factionNameInput === "" || this.state.factionPasswordInput === ""){
+
+ if (
+ this.state.factionNameInput === "" ||
+ this.state.factionPasswordInput === ""
+ ) {
return alert("Faction needs a name and password");
}
- if(this.state.factions.findIndex(faction => faction.factionName === this.state.factionNameInput) !== -1){
- return alert("Faction " + this.state.factionNameInput + " already exists");
+ if (
+ this.state.factions.findIndex(
+ faction => faction.factionName === this.state.factionNameInput
+ ) !== -1
+ ) {
+ return alert(
+ "Faction " + this.state.factionNameInput + " already exists"
+ );
}
this.setState(state => {
@@ -63,19 +72,20 @@ export class EditGameForm extends React.Component {
factions: factions,
factionNameInput: "",
factionPasswordInput: ""
- }
+ };
});
- }
+ };
- removeFaction(factionName){
+ removeFaction(factionName) {
this.setState(state => {
let factions = state.factions;
- const index = factions.findIndex(faction => faction.factionName === factionName);
+ const index = factions.findIndex(
+ faction => faction.factionName === factionName
+ );
- if(index !== -1){
- factions.splice(index,1);
- }
- else{
+ if (index !== -1) {
+ factions.splice(index, 1);
+ } else {
console.log("Faction is not in the faction list");
}
@@ -86,69 +96,86 @@ export class EditGameForm extends React.Component {
handleObjectivePointAdd = e => {
e.preventDefault();
- if(this.state.objectivePointDescriptionInput === "" || this.state.objectivePointMultiplierInput === ""){
+ if (
+ this.state.objectivePointDescriptionInput === "" ||
+ this.state.objectivePointMultiplierInput === ""
+ ) {
return alert("Capture point needs an ID and multiplier");
}
- if(this.state.objectivePoints.findIndex(point => point.objectivePointDescription === this.state.objectivePointDescriptionInput) !== -1){
- return alert("Capture point " + this.state.objectivePointDescriptionInput + " already exists");
+ if (
+ this.state.objectivePoints.findIndex(
+ point =>
+ point.objectivePointDescription ===
+ this.state.objectivePointDescriptionInput
+ ) !== -1
+ ) {
+ return alert(
+ "Capture point " +
+ this.state.objectivePointDescriptionInput +
+ " already exists"
+ );
}
this.setState(state => {
let objectivePoints = state.objectivePoints;
objectivePoints.push({
objectivePointDescription: this.state.objectivePointDescriptionInput,
- objectivePointMultiplier: parseFloat(this.state.objectivePointMultiplierInput)
+ objectivePointMultiplier: parseFloat(
+ this.state.objectivePointMultiplierInput
+ )
});
- return{
+ return {
objectivePoints: objectivePoints,
objectivePointDescriptionInput: "",
objectivePointMultiplierInput: ""
- }
+ };
});
- }
+ };
- removeObjectivePoint(objectivePointId){
+ removeObjectivePoint(objectivePointId) {
this.setState(state => {
let objectivePoints = state.objectivePoints;
- const index = objectivePoints.findIndex(point => point.objectivePointDescription === objectivePointId);
+ const index = objectivePoints.findIndex(
+ point => point.objectivePointDescription === objectivePointId
+ );
- if(index !== -1){
+ if (index !== -1) {
objectivePoints.splice(index, 1);
- }
- else{
+ } else {
console.log("Objective point is not in the point list");
}
return objectivePoints;
- })
+ });
}
- handleGameDeletion = e =>{
+ handleGameDeletion = e => {
e.preventDefault();
let token = sessionStorage.getItem("token");
- if(window.confirm("Are you sure you want to delete this game")){
+ if (window.confirm("Are you sure you want to delete this game")) {
alert("Game deleted");
- fetch(`${process.env.REACT_APP_URL}/game/${this.props.gameId}`,{
- method: "DELETE",
- headers: {
- Authorization: "Bearer " + token,
- Accept: "application/json",
- "Content-Type": "application/json"
- },
- })
- .then(result => result.json())
- .then(result => {
- console.log(result);
- this.handleView();
- })
- .catch(error => console.log(error));
+ fetch(
+ `${process.env.REACT_APP_API_URL}/game/delete/${this.props.gameId}`,
+ {
+ method: "DELETE",
+ headers: {
+ Authorization: "Bearer " + token
+ }
+ }
+ )
+ .then(result => result.json())
+ .then(result => {
+ console.log(result);
+ this.handleView();
+ })
+ .catch(error => console.log(error));
}
- }
+ };
// show/hide this form
handleView = e => {
@@ -177,13 +204,14 @@ export class EditGameForm extends React.Component {
handleGameSave = e => {
e.preventDefault();
- let startDate = this.state.startDate + "T" + this.state.startTime + ":00.000Z";
+ let startDate =
+ this.state.startDate + "T" + this.state.startTime + ":00.000Z";
let endDate = this.state.endDate + "T" + this.state.endTime + ":00.000Z";
let objectivePoints = this.state.objectivePoints;
// objective points are not allowed if the game has no factions
- if(this.state.factions.length === 0){
+ if (this.state.factions.length === 0) {
objectivePoints = [];
}
@@ -199,19 +227,18 @@ export class EditGameForm extends React.Component {
objective_points: objectivePoints
};
-
// Add node settings to the game if the game has objective points
- if(objectivePoints.length > 0){
+ if (objectivePoints.length > 0) {
gameObject.nodesettings = {
- node_settings:{
+ node_settings: {
capture_time: this.state.capture_time,
confirmation_time: this.state.confirmation_time,
owner: 0,
capture: 0,
buttons_available: 16,
- heartbeat_interval: 60,
+ heartbeat_interval: 60
}
- }
+ };
}
let token = sessionStorage.getItem("token");
@@ -229,7 +256,7 @@ export class EditGameForm extends React.Component {
.then(res => res.json())
.then(result => {
alert(result.message);
- if(result.code === 200){
+ if (result.code === 200) {
this.handleView();
}
})
@@ -246,7 +273,7 @@ export class EditGameForm extends React.Component {
}
getGameInfo(gameId) {
- fetch(`${process.env.REACT_APP_URL}/game/` + gameId)
+ fetch(`${process.env.REACT_APP_API_URL}/game/` + gameId)
.then(response => response.json())
.then(json => this.setGameInfoToState(json))
.catch(error => console.log(error));
@@ -254,65 +281,83 @@ export class EditGameForm extends React.Component {
setGameInfoToState(json) {
let token = sessionStorage.getItem("token");
-
- // Get factions and passwordds
- fetch(`${process.env.REACT_APP_URL}/game/get-factions/${this.props.gameId}`,{
- method: "GET",
- headers: {
- Authorization: "Bearer " + token
- }
- })
- .then(result => result.json())
- .then(result => {
- let factions = result.map(faction => {
- return {
- factionName: faction.factionName,
- factionPassword: faction.factionPassword,
- multiplier: 1
- }
- });
- // Remove objective point's id from the object
- let objectivePoints = json.objective_points.map(point => {
- return {
- objectivePointDescription: point.objectivePointDescription,
- objectivePointMultiplier: point.objectivePointMultiplier
+ // Get factions and passwordds
+ fetch(
+ `${process.env.REACT_APP_API_URL}/game/get-factions/${this.props.gameId}`,
+ {
+ method: "GET",
+ headers: {
+ Authorization: "Bearer " + token
}
+ }
+ )
+ .then(result => result.json())
+ .then(result => {
+ let factions = result.map(faction => {
+ return {
+ factionName: faction.factionName,
+ factionPassword: faction.factionPassword,
+ multiplier: 1
+ };
+ });
+
+ // Remove objective point's id from the object
+ let objectivePoints = json.objective_points.map(point => {
+ return {
+ objectivePointDescription: point.objectivePointDescription,
+ objectivePointMultiplier: point.objectivePointMultiplier
+ };
+ });
+
+ // get node settings if the settings exists in the game
+ let nodesettings =
+ json.nodesettings !== null &&
+ json.nodesettings.node_settings !== undefined
+ ? json.nodesettings.node_settings
+ : undefined;
+
+ 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),
+ mapCenter: {
+ lat: json.center.lat,
+ lng: json.center.lng
+ },
+ factions: factions,
+ objectivePoints: objectivePoints,
+ capture_time:
+ nodesettings !== undefined
+ ? json.nodesettings.node_settings.capture_time
+ : this.state.capture_time,
+ confirmation_time:
+ nodesettings !== undefined
+ ? json.nodesettings.node_settings.confirmation_time
+ : this.state.confirmation_time
+ });
})
-
- // get node settings if the settings exists in the game
- let nodesettings = (json.nodesettings !== null && json.nodesettings.node_settings !== undefined)
- ? json.nodesettings.node_settings : undefined;
-
- 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),
- mapCenter: {
- lat: json.center.lat,
- lng: json.center.lng
- },
- factions: factions,
- objectivePoints: objectivePoints,
- capture_time: nodesettings !== undefined ? json.nodesettings.node_settings.capture_time : this.state.capture_time,
- confirmation_time: nodesettings !== undefined ? json.nodesettings.node_settings.confirmation_time : this.state.confirmation_time
- });
- })
- .catch(error => console.log(error));
+ .catch(error => console.log(error));
}
render() {
-
let factions = [];
for (let i = 0; i < this.state.factions.length; i++) {
const faction = this.state.factions[i];
factions.push(
<li key={faction.factionName}>
- <div >{faction.factionName} : {faction.factionPassword}</div>
- <button type="button" onClick={() => this.removeFaction(faction.factionName)}>Remove</button>
+ <div>
+ {faction.factionName} : {faction.factionPassword}
+ </div>
+ <button
+ type="button"
+ onClick={() => this.removeFaction(faction.factionName)}
+ >
+ Remove
+ </button>
</li>
);
}
@@ -322,10 +367,19 @@ export class EditGameForm extends React.Component {
const point = this.state.objectivePoints[i];
objectivePoints.push(
<li key={point.objectivePointDescription}>
- <div>{point.objectivePointDescription} : {point.objectivePointMultiplier}</div>
- <button type="button" onClick={() => this.removeObjectivePoint(point.objectivePointDescription)}>Remove</button>
+ <div>
+ {point.objectivePointDescription} : {point.objectivePointMultiplier}
+ </div>
+ <button
+ type="button"
+ onClick={() =>
+ this.removeObjectivePoint(point.objectivePointDescription)
+ }
+ >
+ Remove
+ </button>
</li>
- )
+ );
}
return ReactDOM.createPortal(
@@ -340,11 +394,13 @@ export class EditGameForm extends React.Component {
</span>
</div>
<div className="">
-
- <form id="gameEditForm" onSubmit={this.handleGameSave}></form>
- <form id="factionAddFrom" onSubmit={this.handleFactionAdd}></form>
- <form id="gameDeletionForm" onSubmit={this.handleGameDeletion}></form>
- <form id="objectivePointAddFrom" onSubmit={this.handleObjectivePointAdd}></form>
+ <form id="gameEditForm" onSubmit={this.handleGameSave} />
+ <form id="factionAddFrom" onSubmit={this.handleFactionAdd} />
+ <form id="gameDeletionForm" onSubmit={this.handleGameDeletion} />
+ <form
+ id="objectivePointAddFrom"
+ onSubmit={this.handleObjectivePointAdd}
+ />
<h1>Demo Game Editor</h1>
<br />
@@ -418,31 +474,74 @@ export class EditGameForm extends React.Component {
<label>Factions</label>
<br />
- <input name="factionNameInput" value={this.state.factionNameInput} minLength="2" onChange={this.handleChange} placeholder="Add new faction" form="factionAddFrom"></input>
- <input name="factionPasswordInput" value={this.state.factionPasswordInput} minLength="3" onChange={this.handleChange} placeholder="Faction password" form="factionAddFrom"></input>
- <button type="submit" form="factionAddFrom">Add</button>
- <ul>
- {factions}
- </ul>
+ <input
+ name="factionNameInput"
+ value={this.state.factionNameInput}
+ minLength="2"
+ onChange={this.handleChange}
+ placeholder="Add new faction"
+ form="factionAddFrom"
+ />
+ <input
+ name="factionPasswordInput"
+ value={this.state.factionPasswordInput}
+ minLength="3"
+ onChange={this.handleChange}
+ placeholder="Faction password"
+ form="factionAddFrom"
+ />
+ <button type="submit" form="factionAddFrom">
+ Add
+ </button>
+ <ul>{factions}</ul>
<br />
<br />
<label>Objective points</label>
<br />
- <input name="objectivePointDescriptionInput" type="number" value={this.state.objectivePointDescriptionInput} onChange={this.handleChange} placeholder="Objective point id" min="1000000" form="objectivePointAddFrom"></input>
- <input name="objectivePointMultiplierInput" type="number" value={this.state.objectivePointMultiplierInput} onChange={this.handleChange} placeholder="Objective point multiplier" form="objectivePointAddFrom"></input>
- <button type="submit" form="objectivePointAddFrom">Add</button>
- <ul>
- {objectivePoints}
- </ul>
+ <input
+ name="objectivePointDescriptionInput"
+ type="number"
+ value={this.state.objectivePointDescriptionInput}
+ onChange={this.handleChange}
+ placeholder="Objective point id"
+ min="1000000"
+ form="objectivePointAddFrom"
+ />
+ <input
+ name="objectivePointMultiplierInput"
+ type="number"
+ value={this.state.objectivePointMultiplierInput}
+ onChange={this.handleChange}
+ placeholder="Objective point multiplier"
+ form="objectivePointAddFrom"
+ />
+ <button type="submit" form="objectivePointAddFrom">
+ Add
+ </button>
+ <ul>{objectivePoints}</ul>
<br />
<br />
<label>Node things (set if objective points are in the game)</label>
<br />
<br />
- <label className="" form="gameEditForm">Capture time:</label>
- <input name="capture_time" type="number" value={this.state.capture_time} form="gameEditForm" onChange={this.handleChange}></input>
+ <label className="" form="gameEditForm">
+ Capture time:
+ </label>
+ <input
+ name="capture_time"
+ type="number"
+ value={this.state.capture_time}
+ form="gameEditForm"
+ onChange={this.handleChange}
+ />
<label className="">Confimation time:</label>
- <input name="confirmation_time" type="number" value={this.state.confirmation_time} form="gameEditForm" onChange={this.handleChange}></input>
+ <input
+ name="confirmation_time"
+ type="number"
+ value={this.state.confirmation_time}
+ form="gameEditForm"
+ onChange={this.handleChange}
+ />
<br />
<br />
<label>Map things</label>
@@ -457,13 +556,17 @@ export class EditGameForm extends React.Component {
onmoveend={this.handleMapDrag}
onzoomend={this.handleMapScroll}
>
- <TileLayer
- attribution="Maanmittauslaitoksen kartta"
- url=" https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"
- />
+ <TileLayer
+ attribution="Maanmittauslaitoksen kartta"
+ url=" https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"
+ />
</Map>
<br />
- <button style={{backgroundColor: "red"}} type="submit" form="gameDeletionForm">
+ <button
+ style={{ backgroundColor: "red" }}
+ type="submit"
+ form="gameDeletionForm"
+ >
Delete
</button>
<button id="editGameSubmitButton" type="submit" form="gameEditForm">
diff --git a/src/components/GameList.js b/src/components/GameList.js
index 39fa691..a0c35af 100644
--- a/src/components/GameList.js
+++ b/src/components/GameList.js
@@ -20,13 +20,21 @@ class GameList extends React.Component {
}
getGames() {
- fetch(`${process.env.REACT_APP_URL}/game/listgames`)
+ fetch(`${process.env.REACT_APP_API_URL}/game/listgames`)
.then(response => response.json())
.then(games => {
- let selectedGame = this.state.selectedGame !== undefined ? this.state.selectedGame : undefined;
+ let selectedGame =
+ this.state.selectedGame !== undefined
+ ? this.state.selectedGame
+ : undefined;
this.setState({
games: games,
- selectedGame: selectedGame !== undefined ? selectedGame : games !== undefined ? games[0].id : undefined
+ selectedGame:
+ selectedGame !== undefined
+ ? selectedGame
+ : games !== undefined
+ ? games[0].id
+ : undefined
});
})
.catch(error => {
@@ -53,14 +61,13 @@ class GameList extends React.Component {
handleJoinClick = e => {
if (this.state.selectedGame === undefined) {
alert("No game selected");
- }
- else{
+ } else {
this.setState({
joinForm: true,
editForm: false
});
}
- }
+ };
toggleView = e => {
this.setState({
@@ -93,7 +100,7 @@ class GameList extends React.Component {
Edit game
</button>
<button id="editGameButton" onClick={this.handleJoinClick}>
- Join Game
+ Join Game
</button>
</Fragment>
)}
diff --git a/src/components/GameSidebar.js b/src/components/GameSidebar.js
new file mode 100644
index 0000000..0e955c2
--- /dev/null
+++ b/src/components/GameSidebar.js
@@ -0,0 +1,31 @@
+import React from "react";
+import NewGameForm from "./NewGameForm";
+import GameList from "./GameList";
+
+export default class GameSidebar extends React.Component {
+ state = {
+ form: ""
+ };
+
+ toggleView = view => {
+ this.setState({
+ form: view
+ });
+ };
+
+ render() {
+ return (
+ <div className="game-sidebar">
+ <GameList />
+ {this.props.loggedIn && (
+ <button id="newGameButton" onClick={() => this.toggleView("newgame")}>
+ New Game
+ </button>
+ )}
+ {this.state.form === "newgame" && (
+ <NewGameForm view="" toggleView={this.toggleView} />
+ )}
+ </div>
+ );
+ }
+}
diff --git a/src/components/Header.js b/src/components/Header.js
index 8b64035..eadccd7 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -4,12 +4,14 @@ import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";
import GameList from "./GameList";
import NewGameForm from "./NewGameForm";
+import GameSidebar from "./GameSidebar";
class Header extends React.Component {
state = {
form: "", // Popup form (login, register etc.)
username: null,
- token: null
+ token: null,
+ sidebar: false
};
// toggles the login/register view
@@ -34,7 +36,7 @@ class Header extends React.Component {
componentDidMount() {
let token = sessionStorage.getItem("token");
if (token) {
- fetch(`${process.env.REACT_APP_URL}/user/verify`, {
+ fetch(`${process.env.REACT_APP_API_URL}/user/verify`, {
headers: {
Authorization: "Bearer " + token
}
@@ -77,14 +79,14 @@ class Header extends React.Component {
login
</button>
)}
- {this.state.username && (
+ {/* {this.state.username && (
<button
id="newGameButton"
onClick={() => this.toggleView("newgame")}
>
New Game
</button>
- )}
+ )} */}
{this.state.username && (
<button id="logoutButton" onClick={this.handleLogout}>
logout
@@ -94,7 +96,16 @@ class Header extends React.Component {
<button id="changeLayerButton" onClick={this.props.handleLayerChange}>
change layer
</button>
- <GameList />
+ {/* <GameList /> */}
+ <button
+ id="sidebarButton"
+ onClick={() => this.setState({ sidebar: !this.state.sidebar })}
+ >
+ Tools
+ </button>
+ {this.state.sidebar && (
+ <GameSidebar loggedIn={this.state.username ? true : false} />
+ )}
</div>
{this.state.form === "register" && (
<RegisterForm
@@ -110,13 +121,13 @@ class Header extends React.Component {
toggleView={this.toggleView}
/>
)}
- {this.state.form === "newgame" && (
+ {/* {this.state.form === "newgame" && (
<NewGameForm
view=""
handleState={this.handleState}
toggleView={this.toggleView}
/>
- )}
+ )} */}
</div>
);
}
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
index 3c559b0..30aef1e 100644
--- a/src/components/LoginForm.js
+++ b/src/components/LoginForm.js
@@ -38,7 +38,7 @@ export class LoginForm extends React.Component {
e.preventDefault();
// Send login info to the server
- fetch(`${process.env.REACT_APP_URL}/user/login`, {
+ fetch(`${process.env.REACT_APP_API_URL}/user/login`, {
method: "POST",
headers: {
Accept: "application/json",
diff --git a/src/components/NewGameForm.js b/src/components/NewGameForm.js
index 2ceb257..b16c989 100644
--- a/src/components/NewGameForm.js
+++ b/src/components/NewGameForm.js
@@ -86,10 +86,9 @@ export class NewGameForm extends React.Component {
})
.then(res => res.json())
.then(result => {
- if(result.code){
+ if (result.code) {
alert(result.message);
- }
- else{
+ } else {
alert(`Game ${this.state.gamename} added`);
this.handleView();
}
@@ -112,12 +111,13 @@ export class NewGameForm extends React.Component {
<span
id="closeNewGameFormX"
className="close"
- onClick={this.handleView}>
+ onClick={this.handleView}
+ >
×
</span>
</div>
<div className="">
- <form id="gameCreationForm" onSubmit={this.handleGameCreation}></form>
+ <form id="gameCreationForm" onSubmit={this.handleGameCreation} />
<h1>Demo Game Creation</h1>
<br />
<input
@@ -195,13 +195,17 @@ export class NewGameForm extends React.Component {
onmoveend={this.handleMapDrag}
onzoomend={this.handleMapScroll}
>
- <TileLayer
- attribution="Maanmittauslaitoksen kartta"
- url=" https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"
- />
+ <TileLayer
+ attribution="Maanmittauslaitoksen kartta"
+ url=" https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"
+ />
</Map>
<br />
- <button id="newGameSubmitButton" type="submit" form="gameCreationForm">
+ <button
+ id="newGameSubmitButton"
+ type="submit"
+ form="gameCreationForm"
+ >
Submit
</button>
<h2>{this.state.errorMsg}</h2>
--
GitLab