WIP #37

hasan-sh · Jan 18, 2022 · c6b056c · c6b056c
1 parent 372e158
commit c6b056c
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 69 deletions.
diff --git a/index.js b/index.js
@@ -10,17 +10,17 @@ import {name as appName} from './app.json';
 
 import auth from '@react-native-firebase/auth';
 
-// auth()
-//   .signInAnonymously()
-//   .then(() => {
-//     console.log('User signed in anonymously');
-//   })
-//   .catch(error => {
-//     if (error.code === 'auth/operation-not-allowed') {
-//       console.log('Enable anonymous in your firebase console.');
-//     }
+auth()
+  .signInAnonymously()
+  .then(() => {
+    console.log('User signed in anonymously');
+  })
+  .catch(error => {
+    if (error.code === 'auth/operation-not-allowed') {
+      console.log('Enable anonymous in your firebase console.');
+    }
 
-//     console.error(error);
-//   });
+    console.error(error);
+  });
 
 AppRegistry.registerComponent(appName, () => App);
diff --git a/screens/GamesScreen.js b/screens/GamesScreen.js
@@ -8,7 +8,7 @@ import { Context } from '../state'
 import QuestionsView from '../components/QuestionView'
 import Timer from '../components/Timer'
 import { allQuestionsAnswered } from '../helpers'
-import { VIBRATE_DURATION_PATTERN } from '../constants/Questions'
+import { GAME_TYPE, VIBRATE_DURATION_PATTERN } from '../constants/Questions'
 import DisableBackButton from '../components/DisableBackButton';
 import { InterstitialAdView } from '../components/AdView'
 
@@ -25,6 +25,8 @@ function GamesScreen(props) {
       playingTeamIndex,
       winningLimit,
       canStart,
+      gameType,
+      currentPlayer,
     },
     { generateQuestions, setQuestionsStatus, setStarted, reset },
   ] = React.useContext(Context)
@@ -85,6 +87,8 @@ function GamesScreen(props) {
           mode="contained"
           theme={{ roundness: 0 }}
           onPress={() => {
+            // TODO: create a separate action gameWon(team) and reset from there.
+            // + do firebase needed logic.
             reset()
             props.navigation.pop()
           }}
@@ -159,7 +163,7 @@ function GamesScreen(props) {
         <QuestionsView
           questions={questions}
           questionsStatus={questionsStatus}
-          show={startTimer || played}
+          show={(startTimer || played) && (gameType === GAME_TYPE ? true : currentPlayer.playing)}
           played={played}
           setCheck={setQuestionsStatus}
           playingTeamIndex={playingTeamIndex}

diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
@@ -7,6 +7,7 @@ import {
   View,
   KeyboardAvoidingView,
   Keyboard,
+  SafeAreaView,
 } from 'react-native'
 
 import { List, Button, Title } from 'react-native-paper'
@@ -65,7 +66,7 @@ function HomeScreen(props) {
   }, [teams])
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <DisableBackButton disable={true} />
       <View style={styles.welcomeContainer}>
         {/* <Image source={IntroImageSrc} style={styles.welcomeImage} /> */}
@@ -106,9 +107,12 @@ function HomeScreen(props) {
                     return removeTeam(id)
                   }
                   if (exists) return setError('هذا الإسم مستخدم مسبقاً!')
-                  updateTeam({ name, id })
+                  updateTeam({ ...team, name, id })
                 }}
                 removeTeam={id => {
+                  if (gameType !== GAME_TYPE) {
+                    return setError('لا تستطيع حذف الفريق.')
+                  }
                   setAddingDisabled(false)
                   removeTeam(id)
                 }}
@@ -162,7 +166,7 @@ function HomeScreen(props) {
           </Button>
         </React.Fragment>
       )}
-    </View>
+    </SafeAreaView>
   )
 }
 

diff --git a/screens/InitialScreen.js b/screens/InitialScreen.js
@@ -1,31 +1,34 @@
 import React, { useEffect, useState } from 'react'
-import { StyleSheet, View, Text, TouchableOpacity, Alert, ScrollView } from 'react-native';
-import { ActivityIndicator, Colors, IconButton, List } from 'react-native-paper';
+import { StyleSheet, View, Text, TouchableOpacity, Alert, ScrollView, Button } from 'react-native';
+import { ActivityIndicator, Colors, Divider, IconButton, List } from 'react-native-paper';
 
 import firestore from '@react-native-firebase/firestore';
 
 import { Context } from '../state'
 import { askPlayer } from '../helpers';
+import { GAME_TYPE } from '../constants/Questions';
 
 export default function InitialScreen({ navigation }) {
     const [
         { currentPlayer, gameType, matchId },
         { setGameType, playWith, reset },
     ] = React.useContext(Context)
-    const [loading, setLoading] = useState(true)
+    const [loading, setLoading] = useState(gameType === GAME_TYPE)
     const [players, setPlayers] = useState(null)
     console.log(gameType)
 
+    useEffect(() => setLoading(gameType === GAME_TYPE), [gameType])
     useEffect(() => {
         askPlayer('chooseType', agreed => {
+            console.log('route, ', navigation.state.routeName)
             if (!agreed) {
                 reset(); 
                 navigation.navigate('Landing');
                 return;
             }
             setGameType('online') 
+            setLoading(false)
         })
-
     }, []);
 
     // TODO: maybe add the following only when gameType is online (i.e. players dont get notified)!
@@ -36,8 +39,8 @@ export default function InitialScreen({ navigation }) {
                 .where('id', '!=', currentPlayer.id)
                 .onSnapshot(documentSnapshot => {
                     console.log('User data: ', documentSnapshot.docs);
+                    // list all other online users.
                     setPlayers(documentSnapshot.docs);
-                    setLoading(false)
 
                     documentSnapshot.forEach(ss => {
                         console.log('all players')
@@ -47,8 +50,11 @@ export default function InitialScreen({ navigation }) {
                                 if (!agreed) {
                                     ss.ref.update({ calling: null }).then(() => console.log('I decline others call!'));
                                     setGameType('local')
+                                    setLoading(false)
                                     return;
                                 }
+                                // Current player accepted the invitation
+                                // most logic is in the playWith action.
                                 reset();
                                 setGameType('online')
                                 navigation.navigate('Landing');
@@ -62,47 +68,65 @@ export default function InitialScreen({ navigation }) {
         }
     }, [currentPlayer]);
 
-    useEffect(() => {
-        if (matchId) {
-            console.log('MATCH_ONLINE: subscribing...', matchId.split('_'))
-            const [id1, id2] = matchId.split('_')
-            const subscriber = firestore()
-            .doc(`matches/${matchId}`)
-            .onSnapshot(snapshot => {
-                const data = snapshot.data()
-                console.log(data, snapshot.id)
-                if (!data) return;
-            });
+    // useEffect(() => {
+    //     if (matchId) {
+    //         console.log('MATCH_ONLINE: subscribing...', matchId.split('_'))
+    //         const [id1, id2] = matchId.split('_')
+    //         const subscriber = firestore()
+    //         .doc(`matches/${matchId}`)
+    //         .onSnapshot(snapshot => {
+    //             const data = snapshot.data()
+    //             console.log(data, snapshot.id)
+    //             if (!data) return;
+    //         });
 
-            return subscriber;
-        }
-    }, [matchId])
+    //         return subscriber;
+    //     }
+    // }, [matchId])
 
 
 
     return (
-        // <ScrollView contentContainerStyle={{ justifyContent: 'center', flex: 1 }}>
         <>
+        <ScrollView contentContainerStyle={{ flex: 1 }}>
             {loading && <ActivityIndicator animating={true} color={Colors.blue700} />}
-            {players && (
-                players.map((ss, i) => {
-                    const doc = ss.data()
-                    doc.ref = ss.ref
-                    return <List.Item
-                        key={i}
-                        onPress={() => {
-                            console.log('calling list')
-                            alert(`calling ${doc.name}`)
-                            setLoading(true)
-                            playWith(doc)
-                        }}
-                        title={doc.name}
-                        // description="Item description" // TODO: add whether they're online or not!
-                        left={props => <List.Icon {...props} icon="phone" />}
-                    />
-                })
+            {gameType === 'online' && players && (
+                    players.map((ss, i) => {
+                        const doc = ss.data()
+                        doc.ref = ss.ref
+                        return <View key={i}>
+                            <List.Item
+                                // key={i}
+                                onPress={() => {
+                                    console.log('calling list')
+                                    alert(`calling ${doc.name}`)
+                                    setLoading(true)
+                                    playWith(doc)
+                                }}
+                                title={doc.name}
+                                // description="Item description" // TODO: add whether they're online or not!
+                                left={props => <List.Icon {...props} icon="phone" />}
+                            />
+                            <Divider  style={{ color: 'black', height: 2, width: '100%' }} />
+                        </View>
+                    })
             )}
+        </ScrollView>
+          <Button
+            title="العب على الجهاز (محلّي)"
+            icon="account"
+            mode="contained"
+            theme={{ roundness: 0 }}
+            onPress={() => {
+                reset()
+                navigation.navigate('Landing')
+            }}
+            style={{
+              alignSelf: 'stretch',
+              marginTop: 5,
+              padding: 5,
+            }}
+          />
         </>
-        // </ScrollView>
     )
 }
diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js
@@ -1,14 +1,16 @@
 import React, { useContext } from 'react'
 import { View, Text } from 'react-native'
-import { Picker } from '@react-native-community/picker'
-import { Divider } from 'react-native-paper'
+import { Picker } from '@react-native-picker/picker'
+// import { Picker } from '@react-native-community/picker'
+import { Divider, IconButton } from 'react-native-paper'
 import { Context } from '../state'
 import { InterstitialAdView } from '../components/AdView'
+import { GAME_TYPE } from '../constants/Questions'
 
-const SettingsScreen = () => {
+const SettingsScreen = ({ navigation }) => {
   const [
-    { time, questionLimit, winningLimit },
-    { setTime, setQuestionLimit, setWinningLimit },
+    { time, questionLimit, winningLimit, gameType },
+    { setTime, setQuestionLimit, setWinningLimit, setGameType },
   ] = useContext(Context);
 
   return (
@@ -81,6 +83,35 @@ const SettingsScreen = () => {
           <Picker.Item label="25 نقطة" value={25} />
         </Picker>
       </View>
+      <Divider style={{ color: 'black', height: 2, width: '100%' }} />
+
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <Text style={{ flexGrow: 1 }}>العب أونلاين</Text>
+        <Picker
+          selectedValue={gameType}
+          style={{ height: 50, width: 200 }}
+          onValueChange={itemValue => {
+            setGameType(itemValue)
+            if (itemValue !== GAME_TYPE) {
+              navigation.navigate('Initial')
+            }
+          }}
+        >
+          <Picker.Item label="محلي" value={'local'} />
+          <Picker.Item label="أونلاين" value={'online'} />
+        </Picker>
+        {/* <IconButton
+            icon={{ source: 'network-outline', direction: 'rtl' }}
+            style={{ padding: 0, margin: 0}}
+            color='gray'
+          /> */}
+      </View>
     </View>
   )
 }