changes

API/app.py

@@ -170,6 +170,6 @@ def login():
     return make_response(body)
 
 if __name__ == "__main__":
-    app.run(host='192.168.1.101')
+    app.run(host='192.168.8.100')
     # app.run(host='192.168.8.102')
     # app.run(debug=True)
\ No newline at end of file

API/db/dbConnection.py

@@ -12,7 +12,7 @@ def create_con():
         database="helply",
         host="127.0.0.1",
         user="root",
-        password="12345678"
+        password="rp19970520"
     )
     return db
 

frontend/package.json

@@ -20,6 +20,8 @@
     "react": "17.0.2",
     "react-native": "0.66.2",
     "react-native-audio-record": "^0.2.2",
+    "react-native-awesome-alerts": "^1.5.2",
+    "react-native-countdown-circle-timer": "^3.0.9",
     "react-native-countdown-component": "^2.7.1",
     "react-native-elements": "^3.4.2",
     "react-native-fontawesome": "^7.0.0",

frontend/src/component/colorActivity.js

@@ -10,7 +10,7 @@ export default function ColorActivity(props){
     const navigation = useNavigation();
 
     return(
-        <TouchableOpacity onPress={()=> {navigation.navigate("Blue", {color})}}
+        <TouchableOpacity onPress={()=> {navigation.navigate("Blue2", {color})}}
         style={{
             borderWidth: 5, 
             borderColor: color, 

frontend/src/constants/Colors.js

 export default {
     primary: '#f7287b',
-    secondary: '#c717fc'
+    secondary: '#1DCE92'
 }
\ No newline at end of file

frontend/src/router/router.js

@@ -7,9 +7,10 @@ import Home from '../screen/home';
 import Start from '../screen/Start';
 import Register from '../screen/auth/Register';
 import Login from '../screen/auth/Login';
-import Splash from '../screen/splash/splash';
+import Splash from '../screen/splash/Splash';
 import Color from '../screen/Color';
 import Blue from '../screen/activity/Blue';
+import Blue2 from '../screen/activity/Blue2';
 import Read from '../screen/Read';
 import ReadActivity from '../screen/reading/ReadActivity';
 import ColorResult from '../screen/result/ColorResult';
@@ -63,7 +64,11 @@ const AppRouter = () => {
           component={Start}
         />
         <Stack.Screen
-          options={{headerShown: false}}
+          options={{
+            title: 'Color Activity',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: Colors.secondary},
+          }}
           name="Color"
           component={Color}
         />
@@ -72,6 +77,11 @@ const AppRouter = () => {
           name="Blue"
           component={Blue}
         />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="Blue2"
+          component={Blue2}
+        />
         <Stack.Screen
           options={{
             title: 'Read Activity',

frontend/src/screen/Color.js

@@ -25,14 +25,14 @@ export default function Color() {
         <SafeAreaView>
             <ScrollView>
 
-                <View>
+                {/* <View>
                     <View>
                         <ImageBackground source={require("../assets/color/background.png")}
                             style={styles.image}>
                             <Text style={styles.title}>Color Activity</Text>
                         </ImageBackground>
                     </View>
-                </View>
+                </View> */}
 
                 <View style={{ marginTop: 40 }}>
                     <TouchableOpacity onPress={() => { navigation.navigate("PrimaryType", { title: 'Primary Activities', id: 1 }) }}

frontend/src/screen/activity/Blue2.js

+import { useNavigation } from "@react-navigation/native";
+import Orientation from 'react-native-orientation-locker';
+import React, { useEffect, useState } from "react";
+import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native';
+import axios from "axios";
+import CountDown from 'react-native-countdown-component';
+import client from "../client/Client";
+import Voice from '@react-native-voice/voice';
+
+
+
+import BackButton from "../../component/BackButton"
+
+export default function Blue2(color) {
+
+    const navigation = useNavigation();
+    const backColor = color.route.params.color;
+
+    React.useEffect(() => {
+
+        StatusBar.setHidden(true);
+
+        const unsubscribe = navigation.addListener("focus", () => {
+
+            Orientation.unlockAllOrientations();
+            Orientation.lockToLandscape();
+        });
+
+        return unsubscribe;
+
+    }, [navigation]);
+
+    useEffect(() => {
+        Voice.onSpeechStart = onSpeechStartHandler;
+        Voice.onSpeechEnd = onSpeechEndHandler;
+        Voice.onSpeechResults = onSpeechResultsHandler;
+        Voice.onSpeechPartialResults = onSpeechPartialResults;
+
+        // console.log(backColor);
+
+        return () => {
+            Voice.destroy().then(Voice.removeAllListeners);
+        };
+    }, []);
+
+    const onSpeechStartHandler = e => {
+        // console.log('start handler =>> ', e);
+    };
+
+    const onSpeechEndHandler = e => {
+        // console.log('end handler =>> ', e);
+    };
+
+    const onSpeechResultsHandler = e => {
+
+        // console.log('result handler =>> ', e);
+
+        // setTimeout(() => {
+        //     alert("Please Pronouce Color");
+        //   }, 3000);
+
+        const value = e.value;
+
+        if(value.includes(backColor) == true){
+
+            console.log('Your Answer is Correct');
+
+            showAlert = () => {
+                this.setState({
+                  showAlert: true
+                });
+              };
+
+        }else{
+
+
+            console.log('Your Answer is Incorrect', value);
+
+        }
+        
+
+    };
+
+    const onSpeechPartialResults = e => {
+        // console.log('onSpeechPartialResults: ', e);
+
+        // const value = e.value;
+
+        // console.log(value.length)
+        // setPartialResults(e.value);
+      };
+
+      const onFinishCD = () => {
+        Alert.alert('Countdown Finished...');
+      }
+     
+      const onPressCD = () => {
+        Alert.alert('Countdown Component Pressed...');
+      }  
+
+    const startRecording = async () => {
+
+
+
+        try {
+            await Voice.start('en-US');
+        } catch (error) {
+            console.log('error =>> ', error);
+        }
+    };
+
+    const stopRecording = async () => {
+        try {
+            await Voice.stop();
+        } catch (error) {
+            console.log(error);
+        }
+    };
+
+    return (
+        <SafeAreaView>
+            <View style={{ flexDirection: "column" }}>
+                <ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
+
+                    <View>
+
+                        <View style={styles.textBody}>
+                            <Text style={styles.text}>Say the name of this color?</Text>
+                        </View>
+
+                        <Image style={styles.robo} source={require("../../assets/game/robo.png")}></Image>
+
+                    </View>
+
+                    <View>
+
+                        <Image style={styles.blackboard} source={require("../../assets/game/blackboard.png")}></Image>
+
+                        <View style={{ width: 180, height: 180, backgroundColor: backColor, marginTop: -370, marginLeft: 455, borderRadius: 100 }}>
+                        </View>
+
+                    </View>
+
+                    <View style={{ marginTop: 10 }}>
+                        <BackButton path="Color" />
+                    </View>
+
+                    <View style={{ flexDirection: "row", marginLeft: 420, marginTop: -50 }}>
+
+                        <View style={{}}>
+                            <TouchableOpacity onPress={startRecording}
+                                style={{ width: "30%", height: "40%", borderRadius: 50 }}>
+                                <Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -190 }} />
+                            </TouchableOpacity>
+                        </View>
+
+                        <View style={{ marginLeft: -100 }}>
+                            <TouchableOpacity onPress={() => { }}
+                                style={{ width: "60%", height: "40%", borderRadius: 50 }}>
+                                <Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ flex: .9, marginLeft: -90 }} />
+                            </TouchableOpacity>
+                        </View>
+
+                    </View>
+
+                </ImageBackground>
+            </View>
+        </SafeAreaView>
+
+    )
+
+}
+
+const styles = StyleSheet.create({
+    body: {
+        flex: 1,
+    },
+    image: {
+        width: "100%",
+        height: "100%",
+    },
+    blackboard: {
+        marginTop: -420,
+        marginLeft: 240,
+        width: "70%",
+        height: 500,
+    },
+    robo: {
+        marginTop: -70,
+        marginLeft: -5,
+        width: 150,
+        height: 200,
+    },
+    textBody: {
+        marginTop: 150,
+        marginLeft: 95,
+        backgroundColor: "#1DCE92",
+        width: 200,
+        borderRadius: 50,
+        padding: 5,
+    },
+    text: {
+        fontSize: 25,
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: "white",
+        textAlign: 'center',
+        fontWeight: 'bold'
+    },
+    button: {
+        padding: 10,
+        marginRight: 50,
+        color: "#000000",
+        marginLeft: 50,
+    }
+
+})
\ No newline at end of file

frontend/src/screen/client/Client.js

@@ -2,6 +2,6 @@ import axios from 'axios';
 
 // export default axios.create({ baseURL: 'http://192.168.8.102:5000/', timeout: 15000, });
 export default axios.create({
-  baseURL: 'http://192.168.1.100:5000/',
+  baseURL: 'http://192.168.8.100:5000/',
   timeout: 15000,
 });