From 975c5689b7f90cf88af1a4d396e1b9aa40fab949 Mon Sep 17 00:00:00 2001
From: Joni Laukka <jonilaukka@hotmail.com>
Date: Mon, 15 Jul 2019 21:08:49 +0300
Subject: [PATCH] Game state buttons wip
---
src/components/GameStateButtons.js | 76 ++++++++++++++++++++++++++++++
src/components/GameView.js | 5 +-
2 files changed, 80 insertions(+), 1 deletion(-)
create mode 100644 src/components/GameStateButtons.js
diff --git a/src/components/GameStateButtons.js b/src/components/GameStateButtons.js
new file mode 100644
index 0000000..08340e5
--- /dev/null
+++ b/src/components/GameStateButtons.js
@@ -0,0 +1,76 @@
+import React, { Fragment } from "react";
+
+export default class GameStateButtons extends React.Component {
+ state = {
+ gameState: this.props.gameState // CREATED,STARTED,PAUSED,ENDED,ONGOING
+ };
+
+ handleStart = e => {
+ let token = sessionStorage.getItem("token");
+ fetch(
+ `${process.env.REACT_APP_API_URL}/game/edit-state/${this.props.gameId}`,
+ {
+ method: "PUT",
+ headers: {
+ Authorization: "Bearer " + token,
+ Accept: "application/json",
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify({
+ id: this.props.gameId,
+ state: "STARTED"
+ })
+ }
+ )
+ .then(res => {
+ if (res.ok) {
+ return res.json();
+ } else {
+ throw Error(res.statusText);
+ }
+ })
+ .then(res => {
+ alert(`Game state changed to "STARTED"`);
+ this.setState({ gameState: "STARTED" });
+ })
+ .catch(error => console.log(error));
+ };
+
+ handlePause = e => {
+ this.setState({ gameState: "PAUSED" });
+ };
+
+ handleStop = e => {
+ this.setState({ gameState: "STOPPED" });
+ };
+
+ render() {
+ if (this.state.gameState === "CREATED") {
+ return <button onClick={this.handleStart}>Start</button>;
+ }
+
+ if (this.state.gameState === "STARTED") {
+ return (
+ <Fragment>
+ <button onClick={this.handlePause}>Pause</button>
+ <button onClick={this.handleStop}>Stop</button>
+ </Fragment>
+ );
+ }
+
+ if (this.state.gameState === "PAUSED") {
+ return (
+ <Fragment>
+ <button onClick={this.handleStart}>Continue</button>
+ <button onClick={this.handleStop}>Stop</button>
+ </Fragment>
+ );
+ }
+
+ if (this.state.gameState === "STOPPED") {
+ return "The game has ended";
+ }
+
+ return false;
+ }
+}
diff --git a/src/components/GameView.js b/src/components/GameView.js
index 04f12f6..d5e0ea0 100644
--- a/src/components/GameView.js
+++ b/src/components/GameView.js
@@ -6,6 +6,7 @@ import EditGameForm from "./EditGameForm";
import JoinGameForm from "./JoinGameForm";
import PlayerlistView from "./PlayerlistView";
import NotificationView from "./NotificationView";
+import GameStateButtons from "./GameStateButtons";
export default class GameView extends React.Component {
state = {
@@ -22,7 +23,6 @@ export default class GameView extends React.Component {
let gameId = new URL(window.location.href).searchParams.get("id");
let token = sessionStorage.getItem("token");
- console.log(gameId);
fetch(`${process.env.REACT_APP_API_URL}/game/${gameId}`)
.then(res => {
if (!res.ok) {
@@ -142,6 +142,9 @@ export default class GameView extends React.Component {
Leave Faction
</button>
)}
+ {this.state.role === "admin" && (
+ <GameStateButtons gameState={this.state.gameInfo.state} />
+ )}
<UserMap
position={initialPosition}
zoom={this.state.zoom}
--
GitLab