game info view added. game edit button now needs game state 'CREATED'

src/components/GameInfoView.js

+import React from "react";
+import { Map, TileLayer } from "react-leaflet";
+
+export default class GameInfoView extends React.Component {
+  componentDidMount() {
+    document.addEventListener("keyup", this.handleEsc);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keyup", this.handleEsc);
+  }
+
+  handleEsc = e => {
+    if (e.keyCode === 27) {
+      this.props.toggleView();
+    }
+  };
+
+  render() {
+    if (this.props.gameInfo === undefined) {
+      return false;
+    }
+    return (
+      <div className="fade-main">
+        <div className="sticky">
+          <span
+            id="closeEditGameFormX"
+            className="close"
+            onClick={this.props.toggleView}
+          >
+            ×
+          </span>
+        </div>
+        <div className="">
+          <h1>Game Info</h1>
+          <p>Game name: {this.props.gameInfo.name}</p>
+          <p>Description: {this.props.gameInfo.desc}</p>
+          <p>Start date: {this.props.gameInfo.startdate}</p>
+          <p>End date: {this.props.gameInfo.enddate}</p>
+          <h2>Factions</h2>
+          <div>
+            {this.props.gameInfo.factions.map(faction => (
+              <p key={faction.factionId} style={{ color: faction.colour }}>
+                {faction.factionName}
+              </p>
+            ))}
+          </div>
+          <div>
+            <Map
+              id="gameInfoCenterMap"
+              className=""
+              center={[
+                this.props.gameInfo.center.lat,
+                this.props.gameInfo.center.lng
+              ]}
+              zoom="13"
+              maxZoom="13"
+              style={{ height: "400px", width: "400px" }}
+            >
+              <TileLayer
+                attribution="Maanmittauslaitoksen kartta"
+                url=" https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"
+              />
+            </Map>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/components/GameView.js

@@ -9,6 +9,7 @@ import NotificationView from "./NotificationView";
 import GameStateButtons from "./GameStateButtons";
 import ClientSocket from "./Socket";
 import NotificationPopup from "./NotificationPopup";
+import GameInfoView from "./GameInfoView";
 
 export default class GameView extends React.Component {
   state = {
@@ -133,14 +134,18 @@ export default class GameView extends React.Component {
             {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 === "admin" &&
+              this.state.gameInfo.state === "CREATED" && (
+                <button
+                  id="editGameButton"
+                  onClick={() => this.setState({ form: "edit" })}
+                >
+                  Edit
+                </button>
+              )}
+            <button onClick={() => this.setState({ form: "info" })}>
+              Game Info
+            </button>
             {this.state.role === "" && (
               <button
                 id="joinGameButton"
@@ -225,6 +230,12 @@ export default class GameView extends React.Component {
                 }
               />
             )}
+            {this.state.form === "info" && (
+              <GameInfoView
+                gameInfo={this.state.gameInfo}
+                toggleView={() => this.setState({ form: "" })}
+              />
+            )}
           </div>
         )}
       </div>