Added game sign in menus

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