diff --git a/src/App.css b/src/App.css
index 5d28f685932aaa91f4196c2882a57faf3c261a54..ebe9b5980034d9060d3f1ad14411c457077a3e3d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -58,10 +58,7 @@ div.fade-main {
text-align: center;
background-color: rgba(0, 0, 0, 0.85);
color: white;
-}
-
-div.debug-form{
-
+ overflow: scroll;
}
div.sticky {
diff --git a/src/components/EditGameForm.js b/src/components/EditGameForm.js
index dc911015dc9bfee8f3444e1e33296bcc50b66f73..2011b945c2a8127d74534742f7bc91a674ca3d09 100644
--- a/src/components/EditGameForm.js
+++ b/src/components/EditGameForm.js
@@ -7,6 +7,7 @@ export class EditGameForm extends React.Component {
super(props);
this.state = {
+ zoom: 13,
gamename: "",
description: "",
startDate: "",
@@ -18,18 +19,14 @@ export class EditGameForm extends React.Component {
lat: 62.2416479,
lng: 25.7597186
},
- factionNameInput: "",
- factionPasswordInput: "",
+ factionNameInput: "", // >= 2 chars
+ factionPasswordInput: "", // >= 3 chars
factions: [],
- objectivePointDescriptionInput: "",
- objectivePointMultiplierInput: "",
+ objectivePointDescriptionInput: "", // >= 7
+ objectivePointMultiplierInput: "", // number
objectivePoints: [],
capture_time: 300,
confirmation_time: 60,
- owner: 1,
- capture: 0,
- buttons_available: 16,
- heartbeat_interval: 60,
};
this.handleMapDrag = this.handleMapDrag.bind(this);
@@ -101,7 +98,7 @@ export class EditGameForm extends React.Component {
let objectivePoints = state.objectivePoints;
objectivePoints.push({
objectivePointDescription: this.state.objectivePointDescriptionInput,
- objectivePointMultiplier: this.state.objectivePointMultiplierInput
+ objectivePointMultiplier: parseFloat(this.state.objectivePointMultiplierInput)
});
return{
@@ -178,10 +175,20 @@ export class EditGameForm extends React.Component {
};
handleGameSave = e => {
+ e.preventDefault();
+
let startDate = this.state.startDate + "T" + this.state.startTime + ":00.000Z";
let endDate = this.state.endDate + "T" + this.state.endTime + ":00.000Z";
- const gameObject = {
+ let objectivePoints = this.state.objectivePoints;
+
+ // objective points are not allowed if the game has no factions
+ if(this.state.factions.length === 0){
+ objectivePoints = [];
+ }
+
+ // Object the form sends to server
+ let gameObject = {
name: this.state.gamename,
desc: this.state.description,
map: "",
@@ -189,10 +196,23 @@ export class EditGameForm extends React.Component {
enddate: endDate,
center: this.state.mapCenter,
factions: this.state.factions,
- objective_points: this.state.objectivePoints
+ objective_points: objectivePoints
};
- e.preventDefault();
+
+ // Add node settings to the game if the game has objective points
+ if(objectivePoints.length > 0){
+ gameObject.nodesettings = {
+ node_settings:{
+ capture_time: this.state.capture_time,
+ confirmation_time: this.state.confirmation_time,
+ owner: 0,
+ capture: 0,
+ buttons_available: 16,
+ heartbeat_interval: 60,
+ }
+ }
+ }
let token = sessionStorage.getItem("token");
@@ -209,7 +229,9 @@ export class EditGameForm extends React.Component {
.then(res => res.json())
.then(result => {
alert(result.message);
- this.handleView();
+ if(result.code === 200){
+ this.handleView();
+ }
})
.catch(error => console.log("Error: ", error));
};
@@ -226,15 +248,14 @@ export class EditGameForm extends React.Component {
getGameInfo(gameId) {
fetch(`${process.env.REACT_APP_URL}/game/` + gameId)
.then(response => response.json())
- .then(json => this.handleGameInfo(json))
+ .then(json => this.setGameInfoToState(json))
.catch(error => console.log(error));
}
- // Add selected game's data to state
- handleGameInfo(json) {
+ setGameInfoToState(json) {
let token = sessionStorage.getItem("token");
- // Get factions
+ // Get factions and passwordds
fetch(`${process.env.REACT_APP_URL}/game/get-factions/${this.props.gameId}`,{
method: "GET",
headers: {
@@ -243,15 +264,26 @@ export class EditGameForm extends React.Component {
})
.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,
@@ -264,7 +296,9 @@ export class EditGameForm extends React.Component {
lng: json.center.lng
},
factions: factions,
- objectivePoints: json.objective_points
+ 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));
@@ -384,8 +418,8 @@ export class EditGameForm extends React.Component {
<label>Factions</label>
<br />
- <input name="factionNameInput" value={this.state.factionNameInput} onChange={this.handleChange} placeholder="Add new faction" form="factionAddFrom"></input>
- <input name="factionPasswordInput" value={this.state.factionPasswordInput} onChange={this.handleChange} placeholder="Faction password" form="factionAddFrom"></input>
+ <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}
@@ -394,7 +428,7 @@ export class EditGameForm extends React.Component {
<br />
<label>Objective points</label>
<br />
- <input name="objectivePointDescriptionInput" type="number" value={this.state.objectivePointDescriptionInput} onChange={this.handleChange} placeholder="Objective point id" form="objectivePointAddFrom"></input>
+ <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>
@@ -402,19 +436,13 @@ export class EditGameForm extends React.Component {
</ul>
<br />
<br />
- <label>Node things</label>
+ <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="">Confimation time:</label>
<input name="confirmation_time" type="number" value={this.state.confirmation_time} form="gameEditForm" onChange={this.handleChange}></input>
- <label className="">Owner:</label>
- <input name="owner" type="number" value={this.state.owner} form="gameEditForm" onChange={this.handleChange}></input>
- <label className="">Buttons available:</label>
- <input name="buttons_available" type="number" value={this.state.buttons_available} form="gameEditForm" onChange={this.handleChange}></input>
- <label className="">Heartbeat interval:</label>
- <input name="heartbeat_interval" type="number" value={this.state.heartbeat_interval} form="gameEditForm" onChange={this.handleChange}></input>
<br />
<br />
<label>Map things</label>
@@ -423,10 +451,11 @@ export class EditGameForm extends React.Component {
id="editGameCenterMap"
className=""
center={[this.state.mapCenter.lat, this.state.mapCenter.lng]}
- zoom="13"
+ zoom={this.state.zoom}
+ maxZoom="13"
style={{ height: "400px", width: "400px" }}
onmoveend={this.handleMapDrag}
- // onzoomend={this.handleMapScroll}
+ onzoomend={this.handleMapScroll}
>
<TileLayer
attribution="Maanmittauslaitoksen kartta"