Added game sign in menus

App.js

@@ -9,14 +9,15 @@ import {
     ScrollView,
     TextInput,
     TouchableHighlight,
-    View
+    View,
+    Modal
 } from 'react-native';
 
 import RunInfo from './components/run-info';
 import RunInfoNumeric from './components/run-info-num';
 
 import MapView from 'react-native-maps';
-import NewButton from "./components/new-button";
+import WalkButton from "./components/new-button";
 import JoinButton from "./components/join-button";
 import CapturedArea from "./components/captured-area";
 import RoomInput from "./components/room-input";
@@ -49,7 +50,10 @@ export default class App extends Component<Props> {
                 ]
             });
         }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 10});
+
         this.state = {
+            username: "",
+            gameNumber: "",
             walkMarkers: [],
             captures: [
                 new CapturedArea("fanded", [
@@ -69,6 +73,9 @@ export default class App extends Component<Props> {
             watchID 
         };
     }
+    setGameNumber(user, number){
+        this.setState({username: user, gameNumber: number})
+    }
 
     componentWillUnmount() {
         navigator.geolocation.stopWatch(this.state.watchID);
@@ -106,21 +113,23 @@ export default class App extends Component<Props> {
                     )
                     }
                 </MapView>
-                <RoomInput/>
+                <Text style={styles.gameNumber}>
+                    {"name: " + this.state.username + "\ngame: " + this.state.gameNumber}
+                
+                </Text>
+
+                <RoomInput 
+                    ref={instance => this.roomInputModal = instance}
+                    join={(user, number) => this.setGameNumber(user, number)}/>
                 <View style={styles.menu}>
                 
-                    <View style={styles.new}>
-                        <NewButton erase={() => {this.setState({walkMarkers: []})}}/>
+                    <View style={styles.walk}>
+                        <WalkButton erase={() => {this.setState({walkMarkers: []})}}/>
                     </View>
 
                     <View style={styles.infoWrapper}>
-                    
-                        <JoinButton join={() => {}}/>
-                        <JoinButton join={() => {}}/>
-                        <JoinButton join={() => {}}/>
-                        <JoinButton join={() => {}}/>
-                    
-                        
+                        <JoinButton 
+                            modal={() => this.roomInputModal.setModalVisible(true)}/>
                     </View>
                 </View>
            </View>
@@ -130,10 +139,6 @@ export default class App extends Component<Props> {
 
 const styles = StyleSheet.create({
     infoWrapper: {
-        // position: 'absolute',
-        // left: 0,
-        // bottom: 0,
-        // right: 0,
         paddingVertical: 0,
         flexDirection: 'row',
         flex: 1
@@ -147,7 +152,7 @@ const styles = StyleSheet.create({
         flexDirection: 'column',
         flex: 1
     },
-    new: {
+    walk: {
         // position: 'absolute',
         // left: 0,
         // bottom: 60,
@@ -156,9 +161,18 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         flex: 1
     },
+    modal:{
+        backgroundColor: 'white',
+        margin: 0, // This is the important style you need to set
+        alignItems: undefined,
+        justifyContent: undefined,
+    },
     map: {
         ...StyleSheet.absoluteFillObject
     },
+    gameNumber:{
+        fontSize: 30,
+    },
 
   container: {
     flex: 1,

components/join-button.js

@@ -11,7 +11,7 @@ import {
 export default class JoinButton extends Component {
     constructor(props) {
         super(props);
-        this.join = this.props.join;
+        this.modal = this.props.modal;
         this.state = { value: this.props.value};
     }
 
@@ -23,13 +23,14 @@ export default class JoinButton extends Component {
         return (
             <View style ={[sharedStyles.runInfoWrapper, {flex: 1}]}>
             <TouchableHighlight
-                onPress=  {() => this.join()}
+                onPress=  {() => this.modal()}
                 // style={sharedStyles.new}
             >
-                <Text style={{fontSize: 25, textAlign: 'center'}}>Join</Text>
+                <Text style={{fontSize: 25, textAlign: 'center'}}>Join Room</Text>
             </TouchableHighlight>
             </View>
 
         )
     }
 }
+

components/new-button.js

@@ -8,7 +8,7 @@ import {
     View
 } from 'react-native';
 
-export default class NewButton extends Component {
+export default class WalkButton extends Component {
     constructor(props) {
         super(props);
         this.erase = this.props.erase;
@@ -26,7 +26,7 @@ export default class NewButton extends Component {
                 onPress=  {() => this.erase()}
                 // style={sharedStyles.new}
             >
-                                        <Text style={{
+                    <Text style={{
                         paddingVertical: 10,
                         fontSize: 30, 
                         backgroundColor: 'rgba(0,255,0,0.5)',

components/room-input.js

@@ -1,9 +1,24 @@
 import React, {Component} from 'react';
-import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';
+import {
+  Modal, 
+  Text, 
+  TouchableHighlight, 
+  View,
+  Alert, 
+  StyleSheet,
+  TextInput
+} from 'react-native';
 
-class RoomInput extends Component {
+export default class RoomInput extends Component {
+  constructor(props) {
+    super(props);
+    this.join = this.props.join;;
+
+  }
   state = {
     modalVisible: false,
+    gameText: "",
+    userText: ""
   };
 
   setModalVisible(visible) {
@@ -12,35 +27,53 @@ class RoomInput extends Component {
 
   render() {
     return (
-      <View style={{marginTop: 22}}>
+      <View>
         <Modal
-          animationType="slide"
-          transparent={false}
-          visible={this.state.modalVisible}
+            visible={this.state.modalVisible}
           onRequestClose={() => {
             Alert.alert('Modal has been closed.');
-          }}>
-          <View style={{marginTop: 22}}>
+          }}
+          style={styles.modal}>
             <View>
-              <Text>Hello World!</Text>
+              <Text>Enter Game ID:</Text>
+              <TextInput
+                style={styles.textInput}
+                placeholder="Username"
+                onChangeText={(text) => this.setState({userText: text})}
+              />
+              <TextInput
+                style={styles.textInput}
+                placeholder="Game No."
+                onChangeText={(texta) => this.setState({gameText: texta})}
+              />
+              
+
+              <TouchableHighlight
+                onPress={() => {
+                  this.join(this.state.userText, this.state.gameText);
+                  this.setModalVisible(!this.state.modalVisible)
+                }}>
+                <Text>Join</Text>
+              </TouchableHighlight>
 
               <TouchableHighlight
                 onPress={() => {
                   this.setModalVisible(!this.state.modalVisible);
                 }}>
-                <Text>Hide Modal</Text>W
+                <Text>Cancel</Text>
               </TouchableHighlight>
-            </View>
-          </View>
-        </Modal>
 
-        <TouchableHighlight
-          onPress={() => {
-            this.setModalVisible(true);
-          }}>
-          <Text>Show Modal</Text>
-        </TouchableHighlight>
+            </View>
+        </Modal>       
       </View>
     );
   }
-}
+}
+const styles = StyleSheet.create({
+  modal: {
+    backgroundColor: 'white',
+    margin: 15, 
+    alignItems: undefined,
+    justifyContent: undefined,
+  }
+})