From 65219bf592aa5c1d12d2912e4046cc40a79eb591 Mon Sep 17 00:00:00 2001
From: Joni Laukka <jonilaukka@hotmail.com>
Date: Thu, 11 Jul 2019 22:14:17 +0300
Subject: [PATCH] Map added to game view
---
src/App.js | 56 ++++++++++++++++++--------------------
src/components/GameView.js | 25 +++++++++++++++--
2 files changed, 49 insertions(+), 32 deletions(-)
diff --git a/src/App.js b/src/App.js
index 165c758..2c4bf88 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,12 +18,9 @@ class App extends Component {
// set initial state
this.state = {
- lat: 62.2416479,
- lng: 25.7597186,
- zoom: 13,
- mapUrl: "https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg",
currentGameId: null,
- logged: false
+ logged: false,
+ authenticateComplete: false
};
this.handleLayerChange = this.handleLayerChange.bind(this);
@@ -85,7 +82,12 @@ class App extends Component {
error => {
console.log(error);
}
- );
+ )
+ .then(() => {
+ this.setState({
+ authenticateComplete: true
+ });
+ });
}
}
@@ -134,17 +136,33 @@ class App extends Component {
};
render() {
- const initialPosition = [this.state.lat, this.state.lng];
+ // TODO: think better solution to wait for authenticator
+ if (!this.state.authenticateComplete) {
+ return false;
+ }
+
return (
<Router>
<div>
+ {/* Debug Sign out button ------------------------ */}
+ {this.state.logged && (
+ <button
+ onClick={() => {
+ sessionStorage.setItem("token", "");
+ this.setState({ logged: false });
+ }}
+ >
+ Sign out
+ </button>
+ )}
+ {/* Debug End ----------------------- */}
+
{!this.state.logged && (
<Switch>
<Route exact path="/replay" component={this.replay} />
<Route exact path="/register" component={this.registerForm} />
<Route exact path="/" component={this.loginForm} />
{/* Redirect from any other path to root */}
- {/* TODO: disable this if login state has not been set yet */}
<Redirect from="*" to="/" />
</Switch>
)}
@@ -168,28 +186,6 @@ class App extends Component {
<Redirect from="*" to="/" />
</Switch>
)}
-
- {/* Debug ------------------------ */}
- {this.state.logged && (
- <button
- onClick={() => {
- sessionStorage.setItem("token", "");
- this.setState({ logged: false });
- }}
- >
- Sign out
- </button>
- )}
- {/* <UserMap
- position={initialPosition}
- zoom={this.state.zoom}
- mapUrl={this.state.mapUrl}
- currentGameId={this.state.currentGameId}
- />
- <Header
- handleLayerChange={this.handleLayerChange}
- handleGameChange={this.handleGameChange}
- /> */}
</div>
</Router>
);
diff --git a/src/components/GameView.js b/src/components/GameView.js
index 94e27ed..7fb7062 100644
--- a/src/components/GameView.js
+++ b/src/components/GameView.js
@@ -1,8 +1,13 @@
import React from "react";
+import UserMap from "./UserMap";
export default class GameView extends React.Component {
state = {
- gameId: null
+ gameId: null,
+ lat: 62.2416479,
+ lng: 25.7597186,
+ zoom: 13,
+ mapUrl: "https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"
};
componentDidMount() {
@@ -13,6 +18,22 @@ export default class GameView extends React.Component {
}
render() {
- return <div>{this.state.gameId}</div>;
+ if (this.state.gameId === null) {
+ return false;
+ }
+
+ const initialPosition = [this.state.lat, this.state.lng];
+
+ return (
+ <div>
+ <div>{this.state.gameId}</div>
+ <UserMap
+ position={initialPosition}
+ zoom={this.state.zoom}
+ mapUrl={this.state.mapUrl}
+ currentGameId={this.state.currentGameId}
+ />
+ </div>
+ );
}
}
--
GitLab