diff --git a/App.js b/App.js
index 22f1e9a98653f5ff788596f96470abb44b1a3ae1..9cdcbee4e58fdcbd388504b8c36e7247a2422e0a 100755
--- a/App.js
+++ b/App.js
@@ -1,5 +1,5 @@
import React, { Component } from "react";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, View, Image } from "react-native";
import Login from "./components/Login";
@@ -8,6 +8,13 @@ export default class App extends Component {
return (
<View style={styles.container}>
<View style={{ flex: 1, flexDirection: "column" }}>
+ <View style={styles.logoContainer}>
+ <Image
+ resizeMode="stretch"
+ style={styles.logo}
+ source={require("./images/tacs-logo-neg.png")}
+ />
+ </View>
<Login />
</View>
</View>
@@ -21,6 +28,13 @@ const styles = StyleSheet.create({
paddingHorizontal: 80,
paddingVertical: 80,
flex: 1,
- backgroundColor: "#F5FCFF"
+ backgroundColor: "#1d1d1b"
+ },
+ logo: {
+ marginLeft: "auto",
+ marginRight: "auto"
+ },
+ logoContainer: {
+ padding: 20
}
});
diff --git a/components/GameList.js b/components/GameList.js
index 5c13c42064298c2b812a7a75246c5f2e6f993fe6..4436a389d9a5c01e9ecff5b721381c13d392e48d 100644
--- a/components/GameList.js
+++ b/components/GameList.js
@@ -58,6 +58,28 @@ class GameList extends Component {
});
await this.getFactions();
}
+
+ getFactionMembers() {
+ fetch(`https://tacs-testing.cf:8443/game/${this.state.selectedGame.id}`, {
+ method: "GET",
+ headers: {
+ Accept: "application/json",
+ "Content-Type": "application/json"
+ }
+ })
+ .then(res => res.json())
+ .then(gameInfo => {
+ let newFactions = [{ factionName: "- -" }, ...gameInfo.factions];
+ this.setState({
+ factions: newFactions,
+ selectedFaction: newFactions[0]
+ });
+ })
+ .catch(error => {
+ console.log(error);
+ });
+ }
+
// Get all the factions from the server
getFactions() {
fetch(`https://tacs-testing.cf:8443/game/${this.state.selectedGame.id}`, {
@@ -207,9 +229,13 @@ class GameList extends Component {
timeout: 30000,
maximumAge: 0
};
- navigator.geolocation.getCurrentPosition(
+ navigator.geolocation.watchPosition(
position => {
- console.log("Position : " + position);
+ console.log(
+ "Positio päivittyi: " +
+ position.coords.latitude +
+ position.coords.longitude
+ );
this.setState({
userLocation: {
latitude: position.coords.latitude,
@@ -253,6 +279,7 @@ class GameList extends Component {
<View style={styles.popupBottom}>
<View style={styles.popupButton}>
<Button
+ color="#424242"
onPress={() => {
this.joinFaction();
this.setPopupVisible(!this.state.passwordPopupVisible);
@@ -262,6 +289,7 @@ class GameList extends Component {
</View>
<View style={styles.popupButton}>
<Button
+ color="#424242"
onPress={() => {
this.setPopupVisible(!this.state.passwordPopupVisible);
}}
@@ -319,9 +347,11 @@ class GameList extends Component {
const styles = StyleSheet.create({
picker: {
+ color: "#ffffff",
paddingBottom: 30
},
pickerTitle: {
+ color: "#ffffff",
paddingTop: 10,
fontSize: 20
},
@@ -335,10 +365,11 @@ const styles = StyleSheet.create({
popup: {
width: 300,
height: "auto",
- backgroundColor: "#fff",
+ backgroundColor: "#1d1d1b",
padding: 20
},
popupTitle: {
+ color: "#ffffff",
fontSize: 20,
textAlign: "center"
},
@@ -353,7 +384,7 @@ const styles = StyleSheet.create({
popupInput: {
margin: 20,
padding: 5,
- backgroundColor: "#e0e0e0"
+ backgroundColor: "#424242"
}
});
diff --git a/components/LocationTracker.js b/components/LocationTracker.js
index f40a7708f56f3860fcf087abdecd525a24cf7941..d5490c6315a7c0ce658d187b8388f7835378fbbc 100644
--- a/components/LocationTracker.js
+++ b/components/LocationTracker.js
@@ -7,6 +7,8 @@ const LocationTracker = props => {
<Text style={styles.titleText}>Tracking:</Text>
<View style={styles.switchContainer}>
<Switch
+ thumbColor="#556023"
+ trackColor={{ false: "#424242", true: "#859b28" }}
style={styles.switch}
value={props.tracking}
onValueChange={props.handleTrackingChange}
@@ -28,6 +30,7 @@ const styles = StyleSheet.create({
},
titleText: {
fontSize: 40,
+ color: "#ffffff",
fontWeight: "bold",
textAlign: "center"
}
diff --git a/components/Login.js b/components/Login.js
index 33179f4837c063cfbcbf5e65836a56333b9dc388..0449e863110b33e0df21780b5e1ef68933f974ab 100644
--- a/components/Login.js
+++ b/components/Login.js
@@ -1,5 +1,5 @@
import React, { Component, Fragment } from "react";
-import { View, Button, StyleSheet, AsyncStorage } from "react-native";
+import { View, Button, StyleSheet, AsyncStorage, Image } from "react-native";
import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";
@@ -71,26 +71,35 @@ class Login extends Component {
<View className="container">
<View className="navigation">
{!this.state.username && (
- <Button
- id="loginButton"
- onPress={() => this.toggleView("login")}
- title="Login"
- />
+ <View style={styles.buttonContainer}>
+ <Button
+ color="#424242"
+ id="loginButton"
+ onPress={() => this.toggleView("login")}
+ title="Login"
+ />
+ </View>
)}
{!this.state.username && (
- <Button
- id="registerButton"
- onPress={() => this.toggleView("register")}
- title="Register"
- />
+ <View style={styles.buttonContainer}>
+ <Button
+ color="#424242"
+ id="registerButton"
+ onPress={() => this.toggleView("register")}
+ title="Register"
+ />
+ </View>
)}
{this.state.username && (
<Fragment>
- <Button
- id="logoutButton"
- onPress={this.handleLogout.bind(this)}
- title="Logout"
- />
+ <View style={styles.buttonContainer}>
+ <Button
+ color="#424242"
+ id="logoutButton"
+ onPress={this.handleLogout.bind(this)}
+ title="Logout"
+ />
+ </View>
<GameList token={this.state.token} />
</Fragment>
)}
@@ -115,7 +124,14 @@ class Login extends Component {
}
const styles = StyleSheet.create({
- container: {}
+ buttonContainer: {
+ padding: 5
+ },
+ logo: {
+ alignContent: "center",
+ alignItems: "center",
+ justifyContent: "center"
+ }
});
export default Login;
diff --git a/components/LoginForm.js b/components/LoginForm.js
index e8129d23fc5184678abad37eac7b1a61e5d1a501..15877c419f19d1f1144be1fe2452d15f5b84c6ba 100644
--- a/components/LoginForm.js
+++ b/components/LoginForm.js
@@ -63,7 +63,6 @@ export class LoginForm extends React.Component {
<View className="sticky">
<Text
id="closeLoginFormX"
- className="close"
style={styles.close}
onPress={this.handleView}
>
@@ -71,8 +70,9 @@ export class LoginForm extends React.Component {
</Text>
</View>
<View className="login">
- <Text>Login</Text>
+ <Text style={styles.tooltipText}>Login</Text>
<TextInput
+ style={styles.textInput}
placeholder="Enter Username"
value={this.state.username}
onChangeText={username => this.setState({ username })}
@@ -81,6 +81,7 @@ export class LoginForm extends React.Component {
required
/>
<TextInput
+ style={styles.textInput}
placeholder="Enter password"
secureTextEntry={true}
value={this.state.password}
@@ -88,11 +89,14 @@ export class LoginForm extends React.Component {
id="loginPasswordInput"
required
/>
- <Button
- id="submitLoginButton"
- title="Submit"
- onPress={this.handleLogin}
- />
+ <View style={styles.buttonContainer}>
+ <Button
+ color="#424242"
+ id="submitLoginButton"
+ title="Submit"
+ onPress={this.handleLogin}
+ />
+ </View>
<Text>{this.state.errorMsg}</Text>
</View>
</View>
@@ -102,8 +106,23 @@ export class LoginForm extends React.Component {
const styles = StyleSheet.create({
close: {
+ marginTop: 10,
+ marginLeft: 100,
+ marginRight: 100,
+ alignContent: "center",
fontSize: 40,
- textAlign: "center"
+ textAlign: "center",
+ backgroundColor: "#424242"
+ },
+ textInput: {
+ backgroundColor: "#424242",
+ margin: 5
+ },
+ tooltipText: {
+ color: "#ffffff"
+ },
+ buttonContainer: {
+ padding: 5
}
});
diff --git a/components/RegisterForm.js b/components/RegisterForm.js
index f9b0fb1ffa1c0c899093fb4616cfadf797750935..b7e83e289abb3d6bb07451ca179dcc78de51a445 100644
--- a/components/RegisterForm.js
+++ b/components/RegisterForm.js
@@ -74,17 +74,14 @@ export class RegisterForm extends React.Component {
return (
<View className="fade-main">
<View className="sticky">
- <Text
- className="close"
- onPress={this.handleView}
- style={styles.close}
- >
+ <Text onPress={this.handleView} style={styles.close}>
×
</Text>
</View>
<View className="login">
- <Text>Register New User</Text>
+ <Text style={styles.tooltipText}>Register New User</Text>
<TextInput
+ style={styles.textInput}
placeholder="Enter Username"
value={this.state.username}
onChangeText={username => this.setState({ username })}
@@ -92,6 +89,7 @@ export class RegisterForm extends React.Component {
required
/>
<TextInput
+ style={styles.textInput}
placeholder="Enter password"
secureTextEntry={true}
value={this.state.password}
@@ -99,14 +97,21 @@ export class RegisterForm extends React.Component {
required
/>
<TextInput
+ style={styles.textInput}
placeholder="Verify password"
secureTextEntry={true}
value={this.state.password2}
onChangeText={password2 => this.setState({ password2 })}
required
/>
- <Button title="Submit" onPress={this.handleRegister} />
- <Text>{this.state.errorMsg}</Text>
+ <View style={styles.buttonContainer}>
+ <Button
+ color="#424242"
+ title="Submit"
+ onPress={this.handleRegister}
+ />
+ </View>
+ <Text style={styles.tooltipText}>{this.state.errorMsg}</Text>
</View>
</View>
);
@@ -115,8 +120,23 @@ export class RegisterForm extends React.Component {
const styles = StyleSheet.create({
close: {
+ marginTop: 10,
+ marginLeft: 100,
+ marginRight: 100,
+ alignContent: "center",
fontSize: 40,
- textAlign: "center"
+ textAlign: "center",
+ backgroundColor: "#424242"
+ },
+ textInput: {
+ backgroundColor: "#424242",
+ margin: 5
+ },
+ tooltipText: {
+ color: "#ffffff"
+ },
+ buttonContainer: {
+ padding: 5
}
});
diff --git a/images/tacs-logo-neg.png b/images/tacs-logo-neg.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0940e2dead5354bb113b0edef6e1d22a99671ae
Binary files /dev/null and b/images/tacs-logo-neg.png differ