Development

src/components/EditGameForm.js

@@ -21,11 +21,15 @@ export class EditGameForm extends React.Component {
       factionNameInput: "",
       factionPasswordInput: "",
       factions: [],
-      objectivePoints: []
-      //   {
-      //   objectivePointDescription: "",
-      //   objectivePointMultiplier: ""
-      // }
+      objectivePointDescriptionInput: "",
+      objectivePointMultiplierInput: "",
+      objectivePoints: [],
+      capture_time: 300,
+      confirmation_time: 60,
+      owner: 1,
+      capture: 0,
+      buttons_available: 16,
+      heartbeat_interval: 60,
     };
 
     this.handleMapDrag = this.handleMapDrag.bind(this);
@@ -63,6 +67,64 @@ export class EditGameForm extends React.Component {
         factionNameInput: "",
         factionPasswordInput: ""
       }
+    });
+  }
+
+  removeFaction(factionName){
+    this.setState(state => {
+      let factions = state.factions;
+      const index = factions.findIndex(faction => faction.factionName === factionName);
+
+      if(index !== -1){
+        factions.splice(index,1);
+      }
+      else{
+        console.log("Faction is not in the faction list");
+      }
+
+      return factions;
+    });
+  }
+
+  handleObjectivePointAdd = e => {
+    e.preventDefault();
+
+    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");
+    }
+
+    this.setState(state => {
+      let objectivePoints = state.objectivePoints;
+      objectivePoints.push({
+        objectivePointDescription: this.state.objectivePointDescriptionInput,
+        objectivePointMultiplier: this.state.objectivePointMultiplierInput
+      });
+
+      return{
+        objectivePoints: objectivePoints,
+        objectivePointDescriptionInput: "",
+        objectivePointMultiplierInput: ""
+      }
+    });
+  }
+
+  removeObjectivePoint(objectivePointId){
+    this.setState(state => {
+      let objectivePoints = state.objectivePoints;
+      const index = objectivePoints.findIndex(point => point.objectivePointDescription === objectivePointId);
+
+      if(index !== -1){
+        objectivePoints.splice(index, 1);
+      }
+      else{
+        console.log("Objective point is not in the point list");
+      }
+
+      return objectivePoints;
     })
   }
 
@@ -162,43 +224,50 @@ export class EditGameForm extends React.Component {
   }
 
   getGameInfo(gameId) {
-    fetch("http://localhost:5000/game/" + gameId)
+    fetch(`${process.env.REACT_APP_URL}/game/` + gameId)
       .then(response => response.json())
       .then(json => this.handleGameInfo(json))
       .catch(error => console.log(error));
   }
 
+  // Add selected game's data to state
   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),
-      mapCenter: {
-        lat: json.center.lat,
-        lng: json.center.lng
-      },
-      factions: json.factions,
-      objectivePoints: json.objective_points
-    });
-  }
-
-  removeFaction(factionName){
-    this.setState(state => {
-      let factions = state.factions;
-      const index = factions.findIndex(faction => faction.factionName === factionName);
-
-      if(index !== -1){
-        factions.splice(index,1);
-      }
-      else{
-        console.log("Faction is not in the faction list");
+    let token = sessionStorage.getItem("token");
+    
+    // Get factions
+    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
+        }
+      })
 
-      return factions;
-    });
+      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: json.objective_points
+      });
+    })
+    .catch(error => console.log(error));
   }
 
   render() {
@@ -207,13 +276,24 @@ export class EditGameForm extends React.Component {
     for (let i = 0; i < this.state.factions.length; i++) {
       const faction = this.state.factions[i];
       factions.push(
-        <Fragment>
-          <li key={faction.factionName}>{faction.factionName} : {faction.factionPassword}</li>
+        <li key={faction.factionName}>
+          <div >{faction.factionName} : {faction.factionPassword}</div>
           <button type="button" onClick={() => this.removeFaction(faction.factionName)}>Remove</button>
-        </Fragment>
+        </li>
       );
     }
 
+    let objectivePoints = [];
+    for (let i = 0; i < this.state.objectivePoints.length; i++) {
+      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>
+        </li>
+      )
+    }
+
     return ReactDOM.createPortal(
       <div className="fade-main">
         <div className="sticky">
@@ -230,112 +310,137 @@ export class EditGameForm extends React.Component {
           <form id="gameEditForm" onSubmit={this.handleGameSave}></form>
           <form id="factionAddFrom" onSubmit={this.handleFactionAdd}></form>
           <form id="gameDeletionForm" onSubmit={this.handleGameDeletion}></form>
-          
-          <form onSubmit={this.handleGameSave}>
-            <h1>Demo Game Editor</h1>
-            <br />
-            <input
-              placeholder="Game name"
-              name="gamename"
-              value={this.state.gamename}
-              onChange={this.handleChange}
-              id="editGameNameInput"
-              form="gameEditForm"
-              required
-            />
-            <br />
-            <input
-              placeholder="Description"
-              type="text"
-              name="description"
-              value={this.state.description}
-              onChange={this.handleChange}
-              id="editGameDescriptionInput"
-              form="gameEditForm"
-              required
-            />
-            <br />
-            <label className="">Start:</label>
-            <input
-              className="formDate"
-              type="date"
-              name="startDate"
-              value={this.state.startDate}
-              onChange={this.handleChange}
-              id="editGameDateStartInput"
-              form="gameEditForm"
-              required
-            />
-            <input
-              className="formTime"
-              type="time"
-              name="startTime"
-              value={this.state.startTime}
-              onChange={this.handleChange}
-              sid="editGameTimeStartInput"
-              form="gameEditForm"
-              required
-            />
-            <br />
-            <label className="">End:</label>
-            <input
-              className="formDate"
-              type="date"
-              name="endDate"
-              value={this.state.endDate}
-              onChange={this.handleChange}
-              min={this.state.startDate}
-              id="editGameDateEndInput"
-              form="gameEditForm"
-              required
-            />
-            <input
-              className="formTime"
-              type="time"
-              name="endTime"
-              value={this.state.endTime}
-              onChange={this.handleChange}
-              id="editGameTimeEndInput"
-              form="gameEditForm"
-              required
-            />
-            <br />
-            <br />
-
-            <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>
-            <button type="submit" form="factionAddFrom">Add</button>
-            <ul>
-              {factions}
-            </ul>
-
-            <label>Map things</label>
-            <br />
-            <Map
-              id="editGameCenterMap"
-              className=""
-              center={[this.state.mapCenter.lat, this.state.mapCenter.lng]}
-              zoom="13"
-              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"
-              />
-            </Map>
-            <br />
-            <button style={{backgroundColor: "red"}} type="submit" form="gameDeletionForm">
-              Delete
-            </button>
-            <button id="editGameSubmitButton" type="submit" form="gameEditForm">
-              Save changes
-            </button>
-            <h2>{this.state.errorMsg}</h2>
-          </form>
+          <form id="objectivePointAddFrom" onSubmit={this.handleObjectivePointAdd}></form>
+
+          <h1>Demo Game Editor</h1>
+          <br />
+          <input
+            placeholder="Game name"
+            name="gamename"
+            value={this.state.gamename}
+            onChange={this.handleChange}
+            id="editGameNameInput"
+            form="gameEditForm"
+            required
+          />
+          <br />
+          <input
+            placeholder="Description"
+            type="text"
+            name="description"
+            value={this.state.description}
+            onChange={this.handleChange}
+            id="editGameDescriptionInput"
+            form="gameEditForm"
+            required
+          />
+          <br />
+          <label className="">Start:</label>
+          <input
+            className="formDate"
+            type="date"
+            name="startDate"
+            value={this.state.startDate}
+            onChange={this.handleChange}
+            id="editGameDateStartInput"
+            form="gameEditForm"
+            required
+          />
+          <input
+            className="formTime"
+            type="time"
+            name="startTime"
+            value={this.state.startTime}
+            onChange={this.handleChange}
+            sid="editGameTimeStartInput"
+            form="gameEditForm"
+            required
+          />
+          <br />
+          <label className="">End:</label>
+          <input
+            className="formDate"
+            type="date"
+            name="endDate"
+            value={this.state.endDate}
+            onChange={this.handleChange}
+            min={this.state.startDate}
+            id="editGameDateEndInput"
+            form="gameEditForm"
+            required
+          />
+          <input
+            className="formTime"
+            type="time"
+            name="endTime"
+            value={this.state.endTime}
+            onChange={this.handleChange}
+            id="editGameTimeEndInput"
+            form="gameEditForm"
+            required
+          />
+          <br />
+          <br />
+
+          <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>
+          <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" 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>
+          <br />
+          <br />
+          <label>Node things</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>
+          <br />
+          <Map
+            id="editGameCenterMap"
+            className=""
+            center={[this.state.mapCenter.lat, this.state.mapCenter.lng]}
+            zoom="13"
+            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"
+          />
+          </Map>
+          <br />
+          <button style={{backgroundColor: "red"}} type="submit" form="gameDeletionForm">
+            Delete
+          </button>
+          <button id="editGameSubmitButton" type="submit" form="gameEditForm">
+            Save changes
+          </button>
+          <h2>{this.state.errorMsg}</h2>
         </div>
       </div>,
       document.getElementById("form")