diff --git a/src/components/EditGameForm.js b/src/components/EditGameForm.js index 8981d28274d6f3859bc8d274c9d296b7c4f27d18..65b5d7f38bb7f1664401f316f2808cf909eff421 100644 --- a/src/components/EditGameForm.js +++ b/src/components/EditGameForm.js @@ -532,6 +532,7 @@ export default class EditGameForm extends React.Component { minLength="3" onChange={this.handleChange} placeholder="Faction password" + type="password" form="factionAddFrom" /> <div diff --git a/src/components/GameView.js b/src/components/GameView.js index f6b075e95769824d10b2212a142e0d88d6718dee..85eab9a1152550ccc9dd5b6ece452e1a08ccae29 100644 --- a/src/components/GameView.js +++ b/src/components/GameView.js @@ -27,32 +27,12 @@ export default class GameView extends React.Component { componentDidMount() { let gameId = new URL(window.location.href).searchParams.get("id"); this.getGameInfo(gameId); + this.getPlayerRole(gameId); } - getGameInfo(gameId) { + getPlayerRole(gameId) { let token = sessionStorage.getItem("token"); - fetch(`${process.env.REACT_APP_API_URL}/game/${gameId}`) - .then(res => { - if (!res.ok) { - throw Error(); - } - }) - .catch(error => { - alert("Game not found"); - window.document.location.href = "/"; - }); - - // Get game info - fetch(`${process.env.REACT_APP_API_URL}/game/${gameId}`) - .then(res => res.json()) - .then(res => { - this.setState({ - gameInfo: res - }); - }) - .catch(error => console.log(error)); - // Get Role fetch(`${process.env.REACT_APP_API_URL}/faction/check-faction/${gameId}`, { method: "GET", headers: { @@ -66,6 +46,26 @@ export default class GameView extends React.Component { .catch(error => console.log(error)); } + getGameInfo(gameId) { + fetch(`${process.env.REACT_APP_API_URL}/game/${gameId}`) + .then(res => { + if (!res.ok) { + throw Error(); + } else { + return res.json(); + } + }) + .then(res => { + this.setState({ + gameInfo: res + }); + }) + .catch(error => { + alert("Game not found"); + window.document.location.href = "/"; + }); + } + handleLeaveFaction = e => { if (window.confirm("Are you sure you want to leave your faction?")) { let token = sessionStorage.getItem("token"); @@ -87,6 +87,7 @@ export default class GameView extends React.Component { }) .then(res => { alert(res.message); + this.getPlayerRole(this.state.gameInfo.id); }) .catch(error => console.log(error)); } @@ -197,10 +198,10 @@ export default class GameView extends React.Component { mapUrl={this.state.mapUrl} currentGameId={this.state.gameInfo.id} socketSignal={this.state.socketSignal} + role={this.state.role} > <NotificationPopup socketSignal={this.state.socketSignal} /> </UserMap> - {this.state.form === "edit" && ( <EditGameForm gameId={this.state.gameInfo.id} @@ -212,7 +213,7 @@ export default class GameView extends React.Component { <JoinGameForm gameId={this.state.gameInfo.id} toggleView={() => this.setState({ form: "" })} - onJoin={() => console.log("joined")} + onJoin={() => this.getPlayerRole(this.state.gameInfo.id)} /> )} {this.state.form === "players" && ( diff --git a/src/components/JoinGameForm.js b/src/components/JoinGameForm.js index ddeaeeee719abd567368dafab948ccfb271393e9..35841c043a890f8ed4450590afe7740fb00c7028 100644 --- a/src/components/JoinGameForm.js +++ b/src/components/JoinGameForm.js @@ -14,7 +14,7 @@ export default class JoinGameForm extends React.Component { } // Get game info - //TODO: from props + //TODO: gameinfo from props componentDidMount() { if (this.props.gameId === undefined) { alert("game not selected"); @@ -118,6 +118,7 @@ export default class JoinGameForm extends React.Component { onChange={e => this.setState({ factionPasswordInput: e.target.value }) } + type="password" placeholder="Password" minLength="3" required diff --git a/src/components/TaskList.js b/src/components/TaskList.js index 250cc92cf5257ed96ab1641228634d2bde003bd5..1b8e1374f85cb8c81b6212368e370e9c1495c3cf 100644 --- a/src/components/TaskList.js +++ b/src/components/TaskList.js @@ -6,8 +6,8 @@ class TaskList extends React.Component { constructor(props) { super(props); this.state = { - taskNameInput: "", // >= 3 - taskDescriptionInput: "", // no limits + taskNameInput: "", // 3-31 chars + taskDescriptionInput: "", // 0-255 tasks: [], selectedFactionId: "" }; @@ -211,6 +211,7 @@ class TaskList extends React.Component { type="text" placeholder="Task name" minLength="3" + maxLength="31" value={this.state.taskNameInput} onChange={e => this.setState({ taskNameInput: e.target.value })} /> @@ -218,6 +219,7 @@ class TaskList extends React.Component { id="taskDescriptionInput" placeholder="Task description" value={this.state.taskDescriptionInput} + maxLength="255" onChange={e => this.setState({ taskDescriptionInput: e.target.value }) } diff --git a/src/components/UserMap.js b/src/components/UserMap.js index 2a3397abd4bc3fbcb1280eef6820906541cc35d4..204ee181dbd9fed7e40ded5aab045029f3485f74 100644 --- a/src/components/UserMap.js +++ b/src/components/UserMap.js @@ -149,41 +149,42 @@ class UserMap extends Component { render() { return ( - <div> - <Map - className="map" - center={this.props.position} - zoom={this.props.zoom} - minZoom="7" - maxZoom="17" - zoomControl={false} - > - <TileLayer - attribution='© <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>' - url={this.props.mapUrl} - /> - <ZoomControl position="topright" /> + <Map + className="map" + center={this.props.position} + zoom={this.props.zoom} + minZoom="7" + maxZoom="17" + zoomControl={false} + > + <TileLayer + attribution='© <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>' + url={this.props.mapUrl} + /> + <ZoomControl position="topright" /> + {(this.props.role === "admin" || + this.props.role === "factionleader") && ( <DrawTools position={this.props.position} sendGeoJSON={this.sendGeoJSON} geoJSONLayer={this.state.geoJSONLayer} currentGameId={this.props.currentGameId} /> - {this.state.ownLat !== null && ( - <Marker position={[this.state.ownLat, this.state.ownLng]}> - <Popup> - User's real position. - <br /> - </Popup> - </Marker> - )} - <Player - currentGameId={this.props.currentGameId} - socketSignal={this.props.socketSignal} - /> - </Map> + )} + {this.state.ownLat !== null && ( + <Marker position={[this.state.ownLat, this.state.ownLng]}> + <Popup> + User's real position. + <br /> + </Popup> + </Marker> + )} + <Player + currentGameId={this.props.currentGameId} + socketSignal={this.props.socketSignal} + /> {this.props.children} - </div> + </Map> ); } }