diff --git a/src/components/GameView.js b/src/components/GameView.js
index d2b626cb060396bc6c6573f295a9d798126ee7cd..72e871ac1783cde9037e16562d100c2dabb42d84 100644
--- a/src/components/GameView.js
+++ b/src/components/GameView.js
@@ -10,6 +10,7 @@ import NotificationView from "./NotificationView";
export default class GameView extends React.Component {
state = {
gameInfo: null,
+ role: "", //empty, soldier, admin
form: "",
lat: 62.2416479,
lng: 25.7597186,
@@ -19,6 +20,11 @@ export default class GameView extends React.Component {
componentDidMount() {
let gameId = new URL(window.location.href).searchParams.get("id");
+ let token = sessionStorage.getItem("token");
+ let error = false;
+ // TODO: redirect to root if the game is not found
+
+ // Get game info
fetch(`${process.env.REACT_APP_API_URL}/game/${gameId}`)
.then(res => res.json())
.then(res => {
@@ -27,6 +33,34 @@ export default class GameView extends React.Component {
});
})
.catch(error => console.log(error));
+
+ // Get Role
+ fetch(`${process.env.REACT_APP_API_URL}/faction/check-faction/${gameId}`, {
+ method: "GET",
+ headers: {
+ Authorization: "Bearer " + token
+ }
+ })
+ .then(res => {
+ if (!res.ok) {
+ error = true;
+ }
+ return res.json();
+ })
+ .then(res => {
+ if (error && res.message === "You are admin for this game!") {
+ this.setState({
+ role: "admin"
+ });
+ } else if (error) {
+ return;
+ } else {
+ this.setState({
+ role: "soldier"
+ });
+ }
+ })
+ .catch();
}
render() {
@@ -40,37 +74,56 @@ export default class GameView extends React.Component {
{this.state.gameInfo !== null && (
<div>
<div>Game Name: {this.state.gameInfo.name}</div>
- <button
- id="editGameButton"
- onClick={() => this.setState({ form: "edit" })}
- >
- Edit
- </button>
- <button
- id="joinGameButton"
- onClick={() => this.setState({ form: "join" })}
- >
- Join
- </button>
+ {this.state.role === "" && (
+ <div>You don't have a role in this game</div>
+ )}
+ {this.state.role !== "" && (
+ <div>Your role in this game: {this.state.role}</div>
+ )}
+ {this.state.role === "admin" && (
+ <button
+ id="editGameButton"
+ onClick={() => this.setState({ form: "edit" })}
+ >
+ Edit
+ </button>
+ )}
+ {this.state.role === "" && (
+ <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>
+ {this.state.role !== "" && (
+ <button
+ id="notificationsButton"
+ onClick={() => this.setState({ form: "notifications" })}
+ >
+ Notifications
+ </button>
+ )}
+ {this.state.role !== "" && (
+ <TaskListButton
+ gameId={this.state.gameInfo.id}
+ role={this.state.role}
+ />
+ )}
+ {this.state.role === "soldier" && (
+ <button
+ id="leaveFactionButton"
+ onClick={() => console.log("WIP: leave faction")}
+ >
+ Leave Faction
+ </button>
+ )}
<UserMap
position={initialPosition}
zoom={this.state.zoom}
@@ -96,6 +149,7 @@ export default class GameView extends React.Component {
{this.state.form === "players" && (
<PlayerlistView
gameId={this.state.gameInfo.id}
+ role={this.state.role}
toggleView={() => this.setState({ form: "" })}
/>
)}
diff --git a/src/components/PlayerlistView.js b/src/components/PlayerlistView.js
index f14cb74415584ba1c7cfde2d23f6433b10dee013..509201d32ba195991ebb4ad4a04b180ea6b34baf 100644
--- a/src/components/PlayerlistView.js
+++ b/src/components/PlayerlistView.js
@@ -4,29 +4,18 @@ import PlayerlistFaction from "./PlayerlistFaction";
export default class PlayerlistView extends React.Component {
state = {
- factions: null,
- isAdmin: false
+ factions: null
};
componentDidMount() {
let token = sessionStorage.getItem("token");
- if (this.state.isAdmin) {
+ if (this.props.role !== "soldier") {
// 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
- }
- }
- )
+ fetch(`${process.env.REACT_APP_API_URL}/game/${this.props.gameId}`)
.then(res => res.json())
.then(res => {
- this.setState({ factions: res });
+ this.setState({ factions: res.factions });
})
.catch(error => console.log(error));
} else {
diff --git a/src/components/TaskItem.js b/src/components/TaskItem.js
index 23afd845d77ec606f4206a4cebc9ecc29cbf1fb4..b9dca50947d36503a5457c9310546180bb8769fe 100644
--- a/src/components/TaskItem.js
+++ b/src/components/TaskItem.js
@@ -99,7 +99,7 @@ class TaskItem extends React.Component {
<label>Winner: {this.props.task.taskWinner.factionName}</label>
)}
</div>
- {this.props.task.taskIsActive && (
+ {this.props.task.taskIsActive && this.props.role === "admin" && (
<button onClick={this.onEditClick}>Edit</button>
)}
{this.state.edit && (
@@ -115,9 +115,14 @@ class TaskItem extends React.Component {
<button type="submit">Save</button>
</form>
)}
- <button onClick={this.onTaskDelete} style={{ backgroundColor: "red" }}>
- Delete
- </button>
+ {this.props.role === "admin" && (
+ <button
+ onClick={this.onTaskDelete}
+ style={{ backgroundColor: "red" }}
+ >
+ Delete
+ </button>
+ )}
</div>
);
}
diff --git a/src/components/TaskList.js b/src/components/TaskList.js
index 4a2ed06738aad0b9072b6043834214e31a2d040a..ce08afc64a2f4ccfab6d1d77cd0f8594e1cce963 100644
--- a/src/components/TaskList.js
+++ b/src/components/TaskList.js
@@ -186,6 +186,7 @@ class TaskList extends React.Component {
<TaskItem
key={task.taskId}
task={task}
+ role={this.props.role}
gameId={this.props.gameId}
onSave={this.onTaskEditSave}
onDelete={this.onTaskDeletion}
@@ -196,6 +197,7 @@ class TaskList extends React.Component {
<TaskItem
key={task.taskId}
task={task}
+ role={this.props.role}
gameId={this.props.gameId}
onSave={this.onTaskEditSave}
onDelete={this.onTaskDeletion}
@@ -222,31 +224,33 @@ class TaskList extends React.Component {
return ReactDOM.createPortal(
<div className="tasklist">
<h1>Tasklist</h1>
- <form className="task-form" onSubmit={this.handleTaskCreation}>
- <label>New task</label>
- <input
- id="taskNameInput"
- type="text"
- placeholder="Task name"
- minLength="3"
- value={this.state.taskNameInput}
- onChange={e => this.setState({ taskNameInput: e.target.value })}
- />
- <textarea
- id="taskDescriptionInput"
- placeholder="Task description"
- value={this.state.taskDescriptionInput}
- onChange={e =>
- this.setState({ taskDescriptionInput: e.target.value })
- }
- />
- <select id="taskFactionSelect" onChange={this.handleFactionChange}>
- {factionlistItems}
- </select>
- <button id="newTaskSubmitButton" type="submit">
- Add new task
- </button>
- </form>
+ {this.props.role === "admin" && (
+ <form className="task-form" onSubmit={this.handleTaskCreation}>
+ <label>New task</label>
+ <input
+ id="taskNameInput"
+ type="text"
+ placeholder="Task name"
+ minLength="3"
+ value={this.state.taskNameInput}
+ onChange={e => this.setState({ taskNameInput: e.target.value })}
+ />
+ <textarea
+ id="taskDescriptionInput"
+ placeholder="Task description"
+ value={this.state.taskDescriptionInput}
+ onChange={e =>
+ this.setState({ taskDescriptionInput: e.target.value })
+ }
+ />
+ <select id="taskFactionSelect" onChange={this.handleFactionChange}>
+ {factionlistItems}
+ </select>
+ <button id="newTaskSubmitButton" type="submit">
+ Add new task
+ </button>
+ </form>
+ )}
{incompleteTasks}
<br />
<label>Completed tasks</label>
diff --git a/src/components/TaskListButton.js b/src/components/TaskListButton.js
index e15b6c38af518ce6736536315a16af853a250508..c0e5f8c1257edaaae2e062fbc8dce562538aa5c1 100644
--- a/src/components/TaskListButton.js
+++ b/src/components/TaskListButton.js
@@ -44,7 +44,9 @@ export default class TaskListButton extends React.Component {
{/* Tasks ({this.state.newTasks}) */}
Tasks
</button>
- {this.state.open && <TaskList gameId={this.props.gameId} />}
+ {this.state.open && (
+ <TaskList gameId={this.props.gameId} role={this.props.role} />
+ )}
</Fragment>
);
}