diff --git a/App.js b/App.js
index d31f8c0f2d939880ce6ce737cc0c71216ac88def..d0a977930b32b097a8b3d492f0f7dde98287fb84 100755
--- a/App.js
+++ b/App.js
@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
container: {
display: "flex",
paddingHorizontal: 80,
- paddingVertical: 80,
+ paddingVertical: 40,
flex: 1,
backgroundColor: "#1d1d1b"
},
@@ -36,6 +36,6 @@ const styles = StyleSheet.create({
marginRight: "auto"
},
logoContainer: {
- padding: 20
+ paddingBottom: 30
}
});
diff --git a/components/GameList.js b/components/GameList.js
index 769844b5b90b7b8de812e11304c46c5512a2eccd..b511f78e39e7f16e4f09ee41ebe62276290241fa 100644
--- a/components/GameList.js
+++ b/components/GameList.js
@@ -1,16 +1,9 @@
import React, { Component, Fragment } from "react";
-import {
- TouchableHighlight,
- Modal,
- Picker,
- Text,
- StyleSheet,
- View,
- TextInput,
- Button
-} from "react-native";
+import { Picker, Text, StyleSheet } from "react-native";
import LocationTracker from "./LocationTracker";
+import PasswordPopup from "./PasswordPopup";
+import MessagePopup from "./MessagePopup";
class GameList extends Component {
constructor(props) {
@@ -23,6 +16,9 @@ class GameList extends Component {
selectedFaction: null,
factionPassword: null,
passwordPopupVisible: false,
+ messagePopupVisible: false,
+ message: "",
+ messageTitle: "",
editForm: false,
userLocation: {
latitude: null,
@@ -39,18 +35,25 @@ class GameList extends Component {
this.getGames();
}
- setPopupVisible(visible) {
- this.setState({ passwordPopupVisible: visible });
+ setPopupVisible(popup, visible) {
+ this.setState({ [popup]: visible });
}
// Get all the games from the server and set the state to the first game
async getGames() {
- await fetch("https://tacs-testing.cf:8443/game/listgames")
- .then(response => response.json())
+ await fetch("https://tacs-testing.cf:8443/game/listgames", {
+ method: "GET",
+ headers: {
+ Accept: "application/json",
+ "Content-Type": "application/json"
+ }
+ })
+ .then(res => res.json())
.then(games => {
+ const newGames = [{ name: "- -" }, ...games];
this.setState({
- games,
- selectedGame: games[0]
+ games: newGames,
+ selectedGame: newGames[0]
});
})
.catch(error => {
@@ -107,6 +110,15 @@ class GameList extends Component {
}
}
+ handlePasswordChange = factionPassword => {
+ this.setState({ factionPassword });
+ };
+
+ handlePopupClose = () => {
+ console.log("Koitetaa settaa selected faction: " + this.state.factions[0]);
+ this.setState({ selectedFaction: this.state.factions[0] });
+ };
+ // There's lots of bad solutions here beware! (at least it should work)
joinFaction() {
fetch("https://tacs-testing.cf:8443/faction/join-faction", {
method: "PUT",
@@ -121,12 +133,32 @@ class GameList extends Component {
game: this.state.selectedGame.id
})
})
- .then(response => response.json())
.then(response => {
- console.log(response);
+ if (response.ok) {
+ console.log("Homma OK!");
+ this.setState({
+ message: `Joined the faction`,
+ messagePopupVisible: true
+ });
+ }
+ return response.json();
+ })
+ .then(response => {
+ if (response.message) {
+ this.setState({
+ message: response.message,
+ messagePopupVisible: true,
+ selectedFaction: this.state.factions[0]
+ });
+ }
})
.catch(error => {
- console.log(error);
+ this.setState({
+ message: "PERKELE : " + error.message,
+ messagePopupVisible: true,
+ selectedFaction: this.state.factions[0]
+ });
+ console.log("VIRHE: " + error);
});
}
// Toggles the tracking boolean (some thought mistake somewhere makes this kinda weird ¯\_(ツ)_/¯ )
@@ -255,54 +287,6 @@ class GameList extends Component {
clearInterval(this.intervalID);
}
render() {
- const passwordPopup = (
- <Modal
- animationType="fade"
- transparent={true}
- visible={this.state.passwordPopupVisible}
- onRequestClose={() => {
- Alert.alert("Modal has been closed.");
- }}
- >
- <View style={styles.popupContainer}>
- <View style={styles.popup}>
- <Text style={styles.popupTitle}>{`Enter the password`}</Text>
- <TextInput
- style={styles.popupInput}
- placeholder="password"
- secureTextEntry={true}
- value={this.state.factionPassword}
- onChangeText={factionPassword =>
- this.setState({ factionPassword })
- }
- />
- <View style={styles.popupBottom}>
- <View style={styles.popupButton}>
- <Button
- color="#424242"
- onPress={() => {
- this.setPopupVisible(!this.state.passwordPopupVisible);
- }}
- title="Close"
- />
- </View>
- <View style={styles.popupButton}>
- <Button
- color="#424242"
- onPress={() => {
- this.joinFaction();
- this.setPopupVisible(!this.state.passwordPopupVisible);
- this.setState({ factionPassword: "" });
- }}
- title="Submit"
- />
- </View>
- </View>
- </View>
- </View>
- </Modal>
- );
-
if (this.state.games.length > 0) {
const items = (
<Fragment>
@@ -334,7 +318,23 @@ class GameList extends Component {
</Picker>
</Fragment>
)}
- {this.state.passwordPopupVisible && passwordPopup}
+ {this.state.passwordPopupVisible && (
+ <PasswordPopup
+ handlePasswordChange={this.handlePasswordChange.bind(this)}
+ joinFaction={this.joinFaction.bind(this)}
+ setPopupVisible={this.setPopupVisible.bind(this)}
+ factionPassword={this.state.factionPassword}
+ passwordPopupVisible={this.state.passwordPopupVisible}
+ handlePopupClose={this.handlePopupClose.bind(this)}
+ />
+ )}
+ {this.state.messagePopupVisible && (
+ <MessagePopup
+ setPopupVisible={this.setPopupVisible.bind(this)}
+ message={this.state.message}
+ messagePopupVisible={this.state.messagePopupVisible}
+ />
+ )}
<LocationTracker
tracking={this.state.tracking}
handleTrackingChange={this.handleTrackingChange.bind(this)}
@@ -355,37 +355,6 @@ const styles = StyleSheet.create({
color: "#ffffff",
paddingTop: 10,
fontSize: 20
- },
- popupContainer: {
- flex: 1,
- flexDirection: "column",
- justifyContent: "center",
- alignItems: "center",
- backgroundColor: "#00000080"
- },
- popup: {
- width: 300,
- height: "auto",
- backgroundColor: "#1d1d1b",
- padding: 20
- },
- popupTitle: {
- color: "#ffffff",
- fontSize: 20,
- textAlign: "center"
- },
- popupBottom: {
- padding: 10,
- marginBottom: 30,
- flexDirection: "row"
- },
- popupButton: {
- padding: 10
- },
- popupInput: {
- margin: 20,
- padding: 5,
- backgroundColor: "#424242"
}
});
diff --git a/components/Login.js b/components/Login.js
index 6f23cb038a5775fe1cf4cd96765766eaeaf1fe58..6cc775f896b2999c2ab9c5738b46f377dc052270 100644
--- a/components/Login.js
+++ b/components/Login.js
@@ -29,6 +29,7 @@ class Login extends Component {
handleLogout = async () => {
await this.setState({ username: null, token: null });
await AsyncStorage.removeItem("token");
+ this.toggleView("login");
};
loadToken = async () => {
diff --git a/components/LoginForm.js b/components/LoginForm.js
index d6759fa2f4341562e37d1268ed859b8557615930..ddae257696a0652d7d7eaa3fef55829a622fc05d 100644
--- a/components/LoginForm.js
+++ b/components/LoginForm.js
@@ -88,7 +88,7 @@ export class LoginForm extends React.Component {
onPress={this.handleLogin}
/>
</View>
- <Text>{this.state.errorMsg}</Text>
+ <Text style={styles.tooltipText}>{this.state.errorMsg}</Text>
</View>
</View>
);
diff --git a/components/MessagePopup.js b/components/MessagePopup.js
new file mode 100644
index 0000000000000000000000000000000000000000..36bd3d212c72b03e0ae0b0f542da2ed5abcbcf7f
--- /dev/null
+++ b/components/MessagePopup.js
@@ -0,0 +1,79 @@
+import React from "react";
+import { Modal, Text, StyleSheet, View, Button } from "react-native";
+
+const MessagePopup = props => {
+ return (
+ <Modal
+ animationType="fade"
+ transparent={true}
+ visible={props.messagePopupVisible}
+ onRequestClose={() => {
+ Alert.alert("Modal has been closed.");
+ }}
+ >
+ <View style={styles.popupContainer}>
+ <View style={styles.popup}>
+ <Text style={styles.popupMessage}>{`${props.message}`}</Text>
+ <View style={styles.popupBottom}>
+ <View style={styles.popupButton}>
+ <Button
+ color="#424242"
+ onPress={() => {
+ props.setPopupVisible(
+ "messagePopupVisible",
+ !props.messagePopupVisible
+ );
+ }}
+ title="Close"
+ />
+ </View>
+ </View>
+ </View>
+ </View>
+ </Modal>
+ );
+};
+
+// <Text style={styles.popupTitle}>{`${props.messageTitle}`}</Text>
+
+export default MessagePopup;
+
+const styles = StyleSheet.create({
+ popupContainer: {
+ flex: 1,
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ backgroundColor: "#00000080"
+ },
+ popup: {
+ width: 300,
+ height: "auto",
+ backgroundColor: "#1d1d1b",
+ padding: 20
+ },
+ popupTitle: {
+ color: "#ffffff",
+ fontSize: 20,
+ textAlign: "center"
+ },
+ popupMessage: {
+ color: "#ffffff",
+ fontSize: 20,
+ textAlign: "center"
+ },
+ popupBottom: {
+ padding: 10,
+ marginBottom: 30,
+ flexDirection: "row",
+ justifyContent: "center"
+ },
+ popupButton: {
+ padding: 10
+ },
+ popupInput: {
+ margin: 20,
+ padding: 5,
+ backgroundColor: "#424242"
+ }
+});
diff --git a/components/PasswordPopup.js b/components/PasswordPopup.js
new file mode 100644
index 0000000000000000000000000000000000000000..c9e03ea3cceb1b7c9a3cd7aa3932bad104c62e6d
--- /dev/null
+++ b/components/PasswordPopup.js
@@ -0,0 +1,97 @@
+import React from "react";
+import { Modal, Text, StyleSheet, View, TextInput, Button } from "react-native";
+
+const PasswordPopup = props => {
+ return (
+ <Modal
+ animationType="fade"
+ transparent={true}
+ visible={props.passwordPopupVisible}
+ onRequestClose={() => {
+ Alert.alert("Modal has been closed.");
+ }}
+ >
+ <View style={styles.popupContainer}>
+ <View style={styles.popup}>
+ <Text style={styles.popupTitle}>{`Enter the password`}</Text>
+ <TextInput
+ autoFocus
+ style={styles.popupInput}
+ placeholder="password"
+ secureTextEntry={true}
+ value={props.factionPassword}
+ onChangeText={factionPassword =>
+ props.handlePasswordChange(factionPassword)
+ }
+ />
+ <View style={styles.popupBottom}>
+ <View style={styles.popupButton}>
+ <Button
+ color="#424242"
+ onPress={() => {
+ props.handlePasswordChange("");
+ props.handlePopupClose();
+ props.setPopupVisible(
+ "passwordPopupVisible",
+ !props.passwordPopupVisible
+ );
+ }}
+ title="Close"
+ />
+ </View>
+ <View style={styles.popupButton}>
+ <Button
+ color="#424242"
+ onPress={() => {
+ props.handlePasswordChange("");
+ props.joinFaction();
+ props.setPopupVisible(
+ "passwordPopupVisible",
+ !props.passwordPopupVisible
+ );
+ }}
+ title="Submit"
+ />
+ </View>
+ </View>
+ </View>
+ </View>
+ </Modal>
+ );
+};
+
+export default PasswordPopup;
+
+const styles = StyleSheet.create({
+ popupContainer: {
+ flex: 1,
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ backgroundColor: "#00000080"
+ },
+ popup: {
+ width: 300,
+ height: "auto",
+ backgroundColor: "#1d1d1b",
+ padding: 20
+ },
+ popupTitle: {
+ color: "#ffffff",
+ fontSize: 20,
+ textAlign: "center"
+ },
+ popupBottom: {
+ padding: 10,
+ marginBottom: 30,
+ flexDirection: "row"
+ },
+ popupButton: {
+ padding: 10
+ },
+ popupInput: {
+ margin: 20,
+ padding: 5,
+ backgroundColor: "#424242"
+ }
+});