Notifications + small updates

• Notifikaatit
• Socket päivitys
• Kartan piirtotyökalut rooleittain
• Liittyminen ja lähteminen päivittää roolinäkymän
• Salasanat piilossa

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>
+    );
+  }
+}