Skip to content
Snippets Groups Projects
Commit b63d889f authored by Joni Laukka's avatar Joni Laukka
Browse files

Game sidebar buttons added to gameview, join game form added, playerlist added

parent bc398cd0
No related branches found
No related tags found
2 merge requests!31Development,!28Routing
Hide whitespace changes
Inline Side-by-side
src/components/GameSidebar.js
+ 1
− 13
View file @ b63d889f
...@@ -14,18 +14,6 @@ export default class GameSidebar extends React.Component { ...@@ -14,18 +14,6 @@ export default class GameSidebar extends React.Component {
}; };
render() { render() {
return ( return false;
<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>
);
} }
} }
src/components/GameView.js
+ 85
− 17
View file @ b63d889f
...@@ -2,10 +2,15 @@ import React from "react"; ...@@ -2,10 +2,15 @@ import React from "react";
import UserMap from "./UserMap"; import UserMap from "./UserMap";
import TaskListButton from "./TaskListButton"; import TaskListButton from "./TaskListButton";
import { BrowserRouter as Router, Link } from "react-router-dom"; import { BrowserRouter as Router, Link } from "react-router-dom";
import EditGameForm from "./EditGameForm";
import JoinGameForm from "./JoinGameForm";
import PlayerlistView from "./PlayerlistView";
import NotificationView from "./NotificationView";
export default class GameView extends React.Component { export default class GameView extends React.Component {
state = { state = {
gameId: null, gameInfo: null,
form: "",
lat: 62.2416479, lat: 62.2416479,
lng: 25.7597186, lng: 25.7597186,
zoom: 13, zoom: 13,
...@@ -13,32 +18,95 @@ export default class GameView extends React.Component { ...@@ -13,32 +18,95 @@ export default class GameView extends React.Component {
}; };
componentDidMount() { componentDidMount() {
let id = new URL(window.location.href).searchParams.get("id"); let gameId = new URL(window.location.href).searchParams.get("id");
this.setState({ fetch(`${process.env.REACT_APP_API_URL}/game/${gameId}`)
gameId: id .then(res => res.json())
}); .then(res => {
this.setState({
gameInfo: res
});
})
.catch(error => console.log(error));
} }
render() { render() {
if (this.state.gameId === null) {
return false;
}
const initialPosition = [this.state.lat, this.state.lng]; const initialPosition = [this.state.lat, this.state.lng];
return ( return (
<div> <div>
<div>{this.state.gameId}</div>
<Link to="/"> <Link to="/">
<button>Game selection</button> <button>Game selection</button>
</Link> </Link>
<TaskListButton gameId={this.state.gameId} /> {this.state.gameInfo !== null && (
<UserMap <div>
position={initialPosition} <div>Game Name: {this.state.gameInfo.name}</div>
zoom={this.state.zoom} <button
mapUrl={this.state.mapUrl} id="editGameButton"
currentGameId={this.state.currentGameId} onClick={() => this.setState({ form: "edit" })}
/> >
Edit
</button>
<button
id="joinGameButton"
onClick={() => this.setState({ form: "join" })}
>
Join
</button>
<button
id="showPlayersButton"
onClick={() => this.setState({ form: "players" })}
>
Players
</button>
<button
id="notificationsButton"
onClick={() => this.setState({ form: "notifications" })}
>
Notifications
</button>
<TaskListButton gameId={this.state.gameInfo.id} />
<button
id="leaveFactionButton"
onClick={() => console.log("WIP: leave faction")}
>
Leave Faction
</button>
<UserMap
position={initialPosition}
zoom={this.state.zoom}
mapUrl={this.state.mapUrl}
currentGameId={this.state.gameInfo.id}
/>
{this.state.form === "edit" && (
<EditGameForm
gameId={this.state.gameInfo.id}
toggleView={() => this.setState({ form: "" })}
onEditSave={() => {
this.getGameInfo();
}}
/>
)}
{this.state.form === "join" && (
<JoinGameForm
gameId={this.state.gameInfo.id}
toggleView={() => this.setState({ form: "" })}
onJoin={() => console.log("joinde")}
/>
)}
{this.state.form === "players" && (
<PlayerlistView
gameId={this.state.gameInfo.id}
toggleView={() => this.setState({ form: "" })}
/>
)}
{this.state.form === "notifications" && (
<NotificationView
gameId={this.state.gameInfo.id}
toggleView={() => this.setState({ form: "" })}
/>
)}
</div>
)}
</div> </div>
); );
} }
......
src/components/JoinGameForm.js
+ 109
− 10
View file @ b63d889f
import React from "react"; import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
export default class JoinGameForm extends React.Component { export default class JoinGameForm extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
gameJSON: undefined gameJSON: undefined,
selectedFactionId: "",
factionPasswordInput: "", //>= 3 chars
errorMessage: ""
}; };
} }
// Get game info
//TODO: from props
componentDidMount() { componentDidMount() {
if (this.props.gameId === undefined) { if (this.props.gameId === undefined) {
alert("game not selected"); alert("game not selected");
...@@ -16,26 +23,118 @@ export default class JoinGameForm extends React.Component { ...@@ -16,26 +23,118 @@ export default class JoinGameForm extends React.Component {
.then(result => result.json()) .then(result => result.json())
.then(json => { .then(json => {
this.setState({ this.setState({
gameJSON: json gameJSON: json,
selectedFactionId:
json.factions.length > 0 ? json.factions[0].factionId : ""
}); });
}) })
.catch(error => console.log(error)); .catch(error => console.log(error));
} }
} }
handleView = e => {
this.props.toggleView(this.props.view);
};
handleGameJoin = e => {
e.preventDefault();
let token = sessionStorage.getItem("token");
let error = false;
fetch(
`${process.env.REACT_APP_API_URL}/faction/join-faction/${
this.state.gameJSON.id
}`,
{
method: "PUT",
headers: {
Authorization: "Bearer " + token,
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify({
factionPassword: this.state.factionPasswordInput,
factionId: this.state.selectedFactionId,
game: this.state.gameJSON.id
})
}
)
.then(res => {
if (!res.ok) {
error = true;
}
return res.json();
})
.then(result => {
if (!error) {
alert("Joined faction " + result.faction.factionName);
this.props.onJoin();
this.handleView();
} else {
alert(result.message);
}
})
.catch(error => console.log(error));
};
render() { render() {
if (this.state.gameJSON === undefined) { if (this.state.gameJSON === undefined) {
return false; return false;
} }
return ( let factionItems = this.state.gameJSON.factions.map(faction => (
<div> <option key={faction.factionId} value={faction.factionId}>
<form> {faction.factionName}
<label>Join game: {this.state.gameJSON.name}</label> </option>
<div>{this.state.gameJSON.desc}</div> ));
<button onClick={() => console.log("clicked")}>Submit</button>
</form> return ReactDOM.createPortal(
</div> <div className="fade-main">
<div className="sticky">
<span
id="closeNewGameFormX"
className="close"
onClick={this.handleView}
>
×
</span>
</div>
<div className="">
<form onSubmit={this.handleGameJoin}>
<h1>Join game: {this.state.gameJSON.name}</h1>
<h2>Description: {this.state.gameJSON.desc}</h2>
<select
onChange={e =>
this.setState({ selectedFactionId: e.target.value })
}
>
{factionItems}
</select>
<input
id="factionPasswordInput"
value={this.state.factionPasswordInput}
onChange={e =>
this.setState({ factionPasswordInput: e.target.value })
}
placeholder="Password"
minLength="3"
required
/>
<button id="joinGameSubmitButton" type="submit">
Submit
</button>
<h2>{this.state.errorMsg}</h2>
</form>
</div>
</div>,
document.getElementById("form")
); );
} }
} }
JoinGameForm.propTypes = {
gameId: PropTypes.string,
toggleView: PropTypes.func,
onJoin: PropTypes.func
};
src/components/NotificationView.js 0 → 100644
+ 7
− 0
View file @ b63d889f
import React from "react";
export default class NotificationView extends React.Component {
render() {
return false;
}
}
src/components/PlayerlistFaction.js 0 → 100644
+ 44
− 0
View file @ b63d889f
import React from "react";
export default class PlayerlistFaction extends React.Component {
state = {
factionMembers: null
};
// get faction members
componentDidMount() {
fetch(
`${process.env.REACT_APP_API_URL}/faction/get-faction-members/${
this.props.faction.factionId
}`
)
.then(res => res.json())
.then(res => {
this.setState({ factionMembers: res });
})
.catch(error => console.log(error));
}
render() {
if (this.state.factionMembers === null) {
return false;
}
let members = this.state.factionMembers.map(member => {
return (
<div key={member.gamepersonId}>
{member.person.name} : {member.role}
</div>
);
});
return (
<div>
<br />
<div>{this.props.faction.factionName}</div>
<br />
<div>{members}</div>
</div>
);
}
}
src/components/PlayerlistView.js 0 → 100644
+ 68
− 0
View file @ b63d889f
import React from "react";
import PropTypes from "prop-types";
import PlayerlistFaction from "./PlayerlistFaction";
export default class PlayerlistView extends React.Component {
state = {
factions: null,
isAdmin: false
};
componentDidMount() {
let token = sessionStorage.getItem("token");
if (this.state.isAdmin) {
// get all factions in the game
fetch(
`${process.env.REACT_APP_API_URL}/game/get-factions/${
this.props.gameId
}`,
{
method: "GET",
headers: {
Authorization: "Bearer " + token
}
}
)
.then(res => res.json())
.then(res => {
this.setState({ factions: res });
})
.catch(error => console.log(error));
} else {
// get player's faction
fetch(
`${process.env.REACT_APP_API_URL}/faction/check-faction/${
this.props.gameId
}`,
{
method: "GET",
headers: {
Authorization: "Bearer " + token
}
}
)
.then(res => res.json())
.then(res => {
this.setState({ factions: [res] });
})
.catch(error => console.log(error));
}
}
render() {
if (this.state.factions === null) {
return false;
}
let factionlistItems = this.state.factions.map(faction => {
return <PlayerlistFaction faction={faction} />;
});
return <div className="fade-main">{factionlistItems}</div>;
}
}
PlayerlistView.propTypes = {
gameId: PropTypes.string
};
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment