From aec22e47d6a6c6908786c49142a883af69314d13 Mon Sep 17 00:00:00 2001
From: Joni Laukka <joni.laukka.overflow@gmail.com>
Date: Tue, 2 Jul 2019 15:05:37 +0300
Subject: [PATCH] Factions added to game edit form
---
src/App.css | 5 +
src/components/EditGameForm.js | 85 ++++++++++++++++-
src/components/GameList.js | 43 +++++++--
src/components/JoinGameForm.js | 39 ++++++--
src/components/NewGameForm.js | 170 +++++++++++++++++----------------
5 files changed, 239 insertions(+), 103 deletions(-)
diff --git a/src/App.css b/src/App.css
index a0c99fe..5d28f68 100644
--- a/src/App.css
+++ b/src/App.css
@@ -57,6 +57,11 @@ div.fade-main {
margin: auto;
text-align: center;
background-color: rgba(0, 0, 0, 0.85);
+ color: white;
+}
+
+div.debug-form{
+
}
div.sticky {
diff --git a/src/components/EditGameForm.js b/src/components/EditGameForm.js
index c755815..59251ab 100644
--- a/src/components/EditGameForm.js
+++ b/src/components/EditGameForm.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {Fragment} from "react";
import ReactDOM from "react-dom";
import { Map, TileLayer } from "react-leaflet";
@@ -17,7 +17,13 @@ export class EditGameForm extends React.Component {
mapCenter: {
lat: 62.2416479,
lng: 25.7597186
- }
+ },
+ factionNameInput: "",
+ factionPasswordInput: "",
+ factions: [{
+ name: "Overflow",
+ password: "Wimma"
+ }]
};
this.handleMapDrag = this.handleMapDrag.bind(this);
@@ -32,6 +38,27 @@ export class EditGameForm extends React.Component {
this.setState({ [name]: value });
};
+ handleFactionAdd = e =>{
+ e.preventDefault();
+
+ if(this.state.factionNameInput === "" || this.state.factionPasswordInput === ""){
+ return alert("Faction needs a name and password");
+ }
+
+ this.setState(state => {
+ let factions = state.factions;
+ factions.push({
+ name: this.state.factionNameInput,
+ password: this.state.factionPasswordInput
+ });
+ return {
+ factions: factions,
+ factionNameInput: "",
+ factionPasswordInput: ""
+ }
+ })
+ }
+
// show/hide this form
handleView = e => {
this.props.toggleView(this.props.view);
@@ -124,7 +151,28 @@ export class EditGameForm extends React.Component {
});
}
+ removeFaction(index){
+ this.setState(state => {
+ let factions = state.factions;
+ factions.splice(index,1);
+
+ return factions;
+ });
+ }
+
render() {
+
+ let factions = [];
+ for (let i = 0; i < this.state.factions.length; i++) {
+ const faction = this.state.factions[i];
+ factions.push(
+ <Fragment>
+ <li key={i}>{faction.name} : {faction.password}</li>
+ <button onClick={() => this.removeFaction(i)}>Remove</button>
+ </Fragment>
+ );
+ }
+
return ReactDOM.createPortal(
<div className="fade-main">
<div className="sticky">
@@ -137,8 +185,12 @@ export class EditGameForm extends React.Component {
</span>
</div>
<div className="">
+
+ <form id="gameCreationForm" onSubmit={this.handleGameCreation}></form>
+ <form id="factionAddFrom" onSubmit={this.handleFactionAdd}></form>
+
<form onSubmit={this.handleGameSave}>
- <h1>Demo Game Creation</h1>
+ <h1>Demo Game Editor</h1>
<br />
<input
placeholder="Game name"
@@ -146,6 +198,8 @@ export class EditGameForm extends React.Component {
value={this.state.gamename}
onChange={this.handleChange}
id="editGameNameInput"
+ form="gameCreationForm"
+ required
/>
<br />
<input
@@ -155,6 +209,8 @@ export class EditGameForm extends React.Component {
value={this.state.description}
onChange={this.handleChange}
id="editGameDescriptionInput"
+ form="gameCreationForm"
+ required
/>
<br />
<label className="">Start:</label>
@@ -165,6 +221,8 @@ export class EditGameForm extends React.Component {
value={this.state.startDate}
onChange={this.handleChange}
id="editGameDateStartInput"
+ form="gameCreationForm"
+ required
/>
<input
className="formTime"
@@ -172,7 +230,9 @@ export class EditGameForm extends React.Component {
name="startTime"
value={this.state.startTime}
onChange={this.handleChange}
- rid="editGameTimeStartInput"
+ sid="editGameTimeStartInput"
+ form="gameCreationForm"
+ required
/>
<br />
<label className="">End:</label>
@@ -184,6 +244,8 @@ export class EditGameForm extends React.Component {
onChange={this.handleChange}
min={this.state.startDate}
id="editGameDateEndInput"
+ form="gameCreationForm"
+ required
/>
<input
className="formTime"
@@ -192,8 +254,21 @@ export class EditGameForm extends React.Component {
value={this.state.endTime}
onChange={this.handleChange}
id="editGameTimeEndInput"
+ form="gameCreationForm"
+ 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
@@ -211,7 +286,7 @@ export class EditGameForm extends React.Component {
/>
</Map>
<br />
- <button id="editGameSubmitButton" type="submit">
+ <button id="editGameSubmitButton" type="submit" form="gameCreationForm">
Save changes
</button>
<h2>{this.state.errorMsg}</h2>
diff --git a/src/components/GameList.js b/src/components/GameList.js
index 2d11775..390b70b 100644
--- a/src/components/GameList.js
+++ b/src/components/GameList.js
@@ -1,13 +1,15 @@
import React, { Fragment } from "react";
import EditGameForm from "./EditGameForm";
+import JoinGameForm from "./JoinGameForm";
class GameList extends React.Component {
constructor(props) {
super(props);
this.state = {
games: [],
- selectedGame: null,
- editForm: false
+ selectedGame: undefined,
+ editForm: false,
+ joinForm: false
};
this.toggleView = this.toggleView.bind(this);
@@ -18,12 +20,12 @@ class GameList extends React.Component {
}
getGames() {
- fetch("http://localhost:5000/game/listgames")
+ fetch(`${process.env.REACT_APP_URL}/game/listgames`)
.then(response => response.json())
.then(games => {
this.setState({
games: games,
- selectedGame: games !== null && games[0].id
+ selectedGame: games !== undefined && games[0].id
});
})
.catch(error => {
@@ -38,7 +40,7 @@ class GameList extends React.Component {
};
handleEditClick = e => {
- if (this.state.selectedGame === null) {
+ if (this.state.selectedGame === undefined) {
alert("No game selected");
} else {
this.setState({
@@ -47,6 +49,18 @@ class GameList extends React.Component {
}
};
+ handleJoinClick = e => {
+ if (this.state.selectedGame === undefined) {
+ alert("No game selected");
+ }
+ else{
+ this.setState({
+ joinForm: true,
+ editForm: false
+ });
+ }
+ }
+
toggleView = e => {
this.setState({
editForm: !this.state.editForm
@@ -73,16 +87,27 @@ class GameList extends React.Component {
{items}
</select>
{sessionStorage.getItem("token") && (
- <button id="editGameButton" onClick={this.handleEditClick}>
- Edit game
- </button>
+ <Fragment>
+ <button id="editGameButton" onClick={this.handleEditClick}>
+ Edit game
+ </button>
+ <button id="editGameButton" onClick={this.handleJoinClick}>
+ Join Game
+ </button>
+ </Fragment>
)}
- {this.state.editForm && this.state.selectedGame !== null && (
+ {this.state.editForm && this.state.selectedGame !== undefined && (
<EditGameForm
gameId={this.state.selectedGame}
toggleView={this.toggleView}
/>
)}
+ {this.state.joinForm && this.state.selectedGame !== undefined && (
+ <JoinGameForm
+ gameId={this.state.selectedGame}
+ toggleView={this.toggleView}
+ />
+ )}
</Fragment>
);
}
diff --git a/src/components/JoinGameForm.js b/src/components/JoinGameForm.js
index b620482..d7d5e6f 100644
--- a/src/components/JoinGameForm.js
+++ b/src/components/JoinGameForm.js
@@ -1,16 +1,39 @@
import React from "react";
-import ReactDOM from "react-dom"
+import ReactDOM from "react-dom";
export default class JoinGameForm extends React.Component{
+ constructor(props){
+ super(props);
+ this.state = {
+ gameJSON: undefined
+ }
+ }
+
+ componentDidMount(){
+ if(this.props.gameId === undefined){alert("game not selected")}
+ else{
+ fetch(`${process.env.REACT_APP_URL}/game/${this.props.gameId}`)
+ .then(result => result.json())
+ .then(json => {
+ this.setState({
+ gameJSON: json
+ });
+ })
+ .catch(error => console.log(error))
+ }
+ }
+
render(){
- if(this.props.game === null){return false;}
+ if(this.state.gameJSON === undefined){return false;}
- return ReactDOM.createPortal(
- <div className="fade-main">
- <label>{this.props.game.name}</label>
- <div>{this.props.game.desc}</div>
- </div>,
- document.getElementById('form')
+ return(
+ <div>
+ <form>
+ <label>Join game: {this.state.gameJSON.name}</label>
+ <div>{this.state.gameJSON.desc}</div>
+ <button onClick={() => console.log("clicked")}>Submit</button>
+ </form>
+ </div>
);
}
}
\ No newline at end of file
diff --git a/src/components/NewGameForm.js b/src/components/NewGameForm.js
index aeee892..971ad76 100644
--- a/src/components/NewGameForm.js
+++ b/src/components/NewGameForm.js
@@ -13,7 +13,6 @@ export class NewGameForm extends React.Component {
startTime: "",
endDate: "",
endTime: "",
- passwords: [],
zoom: 13,
mapCenter: {
lat: 62.2416479,
@@ -68,7 +67,6 @@ export class NewGameForm extends React.Component {
map: "",
startdate: startDate,
enddate: endDate,
- passwords: [this.state.password],
center: this.state.mapCenter
};
@@ -108,89 +106,99 @@ export class NewGameForm extends React.Component {
<span
id="closeNewGameFormX"
className="close"
- onClick={this.handleView}
- >
+ onClick={this.handleView}>
×
</span>
</div>
<div className="">
- <form onSubmit={this.handleGameCreation}>
- <h1>Demo Game Creation</h1>
- <br />
- <input
- placeholder="Game name"
- name="gamename"
- value={this.state.gamename}
- onChange={this.handleChange}
- id="newGameNameInput"
- />
- <br />
- <input
- placeholder="Description"
- type="text"
- name="description"
- value={this.state.description}
- onChange={this.handleChange}
- id="newGameDescriptionInput"
- />
- <br />
- <label className="">Start:</label>
- <input
- className="formDate"
- type="date"
- name="startDate"
- value={this.state.startDate}
- onChange={this.handleChange}
- id="newGameDateStartInput"
- />
- <input
- className="formTime"
- type="time"
- name="startTime"
- onChange={this.handleChange}
- id="newGameTimeStartInput"
- />
- <br />
- <label className="">End:</label>
- <input
- className="formDate"
- type="date"
- name="endDate"
- value={this.state.endDate}
- onChange={this.handleChange}
- min={this.state.startDate}
- id="newGameDateEndInput"
- />
- <input
- className="formTime"
- type="time"
- name="endTime"
- onChange={this.handleChange}
- id="newGameTimeEndInput"
- />
- <br />
- <label>Map things</label>
- <br />
- <Map
- id="newGameCenterMap"
- className=""
- center={[this.state.mapCenter.lat, this.state.mapCenter.lng]}
- zoom={this.state.zoom}
- 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 id="newGameSubmitButton" type="submit">
- Submit
- </button>
- <h2>{this.state.errorMsg}</h2>
- </form>
+ <form id="gameCreationForm" onSubmit={this.handleGameCreation}></form>
+ <h1>Demo Game Creation</h1>
+ <br />
+ <input
+ placeholder="Game name"
+ name="gamename"
+ value={this.state.gamename}
+ onChange={this.handleChange}
+ id="newGameNameInput"
+ form="gameCreationForm"
+ required
+ />
+ <br />
+ <input
+ placeholder="Description"
+ type="text"
+ name="description"
+ value={this.state.description}
+ onChange={this.handleChange}
+ id="newGameDescriptionInput"
+ form="gameCreationForm"
+ required
+ />
+ <br />
+ <label className="">Start:</label>
+ <input
+ className="formDate"
+ type="date"
+ name="startDate"
+ value={this.state.startDate}
+ onChange={this.handleChange}
+ id="newGameDateStartInput"
+ form="gameCreationForm"
+ required
+ />
+ <input
+ className="formTime"
+ type="time"
+ name="startTime"
+ onChange={this.handleChange}
+ id="newGameTimeStartInput"
+ form="gameCreationForm"
+ 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="newGameDateEndInput"
+ form="gameCreationForm"
+ required
+ />
+ <input
+ className="formTime"
+ type="time"
+ name="endTime"
+ onChange={this.handleChange}
+ id="newGameTimeEndInput"
+ form="gameCreationForm"
+ required
+ />
+ <br />
+ <label>Map things</label>
+ <br />
+ <Map
+ id="newGameCenterMap"
+ className=""
+ center={[this.state.mapCenter.lat, this.state.mapCenter.lng]}
+ zoom={this.state.zoom}
+ 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 id="newGameSubmitButton" type="submit" form="gameCreationForm">
+ Submit
+ </button>
+ <h2>{this.state.errorMsg}</h2>
</div>
</div>,
document.getElementById("form")
--
GitLab