.

backend/IT18256888/app.py

@@ -60,17 +60,20 @@ def get_level():
     results=[{"level":float(result)}]
     return (jsonify(results=results))
 
-# userpass = 'mysql://root:''@'
-# basedir = '127.0.0.1'
-# dbname = '/helply'
-# socket = '?unix_socket=/opt/lampp/var/mysql/mysql.sock'
-# dbname = dbname + socket
+userpass = 'mysql://root:''@'
+basedir = '127.0.0.1'
+dbname = '/helply'
+socket = '?unix_socket=/opt/lampp/var/mysql/mysql.sock'
+dbname = dbname + socket
 
 # app.config['SQLALCHEMY_DATABASE_URI'] = userpass + basedir + dbname
 # app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://sql5488870:UylH12yrME@sql5.freesqldatabase.com/sql5488870'
 # app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 
-app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://sql6506712:VUMTB3RZJi@sql6.freesqldatabase.com/sql6506712'
+# app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://sql6506712:VUMTB3RZJi@sql6.freesqldatabase.com/sql6506712'
+# app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+app.config['SQLALCHEMY_DATABASE_URI'] = userpass + basedir + dbname
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 
 #DB Connection
@@ -127,13 +130,15 @@ def add_result():
 #GET method
 @app.route('/el_result', methods = ['GET'])
 def get_articles():
-    all_results = MemoryResults.query.with_entities(MemoryResults.name, MemoryResults.time_duration, MemoryResults.result).all()
-    return all_results
-    # results = results_schema.dump(all_results)
-    # return jsonify(results)
-    # qry = 'SELECT name,time_duration,result FROM memory_results'
-    # new = jsonify(get_data(qry))
-    # return make_response(new)
+    all_results = MemoryResults.query.filter_by(game_level='elementry_level').all()
+    results = results_schema.dump(all_results)
+    return jsonify(results)
+
+@app.route('/md_result', methods = ['GET'])
+def get_md_results():
+    all_results = MemoryResults.query.filter_by(game_level='medium_level').all()
+    results = results_schema.dump(all_results)
+    return jsonify(results)
 
 
 #run the flask file

frontend/src/component/memory/ResultTable.js

 import React, {useEffect, useState} from 'react';
-import {View, StyleSheet, ScrollView} from 'react-native';
+import {View, StyleSheet, ScrollView, Text, FlatList} from 'react-native';
 import {
   Table,
   TableWrapper,
@@ -14,11 +14,16 @@ import {color} from 'react-native-reanimated';
 import endpoint from '../../constants/endpoint';
 import axios from 'axios';
 
-export default function TableList() {
-  const [tableData, setTableData] = useState({
-    tableHead: [],
-    data: [],
-  });
+export default function ResultTable(props) {
+  // const [tableData, setTableData] = useState({
+  //   tableHead: [],
+  //   data: [],
+  // });
+  // const [loading, setIsLoading] = useState(true);
+
+  console.log(props.level);
+
+  const [data, setData] = useState([]);
   const [loading, setIsLoading] = useState(true);
 
 //   useEffect(() => {
@@ -47,19 +52,27 @@ export default function TableList() {
 //       });
 //   }
 
-//   useEffect(() => {
-//     // getResult(userId);
-//   }, []);
+const renderData = (item) => {
+  return(
+    <View style={styles.cartItem} >
+        <View style={styles.tr}>
+            <Text style={styles.td}>{item.name}</Text>
+            <Text style={styles.td}>{item.time_duration}</Text>
+            <Text style={styles.td}>{item.result}</Text>
+        </View>
+    </View>
+  );
+}
+
 const loadData = () => {
-    axios(`${endpoint}/el_result`,{
+    fetch(`${endpoint}/${props.level}`,{
         method: 'GET'
     })
+    .then(resp=>resp.json())
     .then(result => {
         console.log('terra',result.data);
-        // setTableData({
-        //   tableHead: ['Name', 'Time Duration', 'Level'],
-        //   data: result.data
-        // });
+          setData(result)
+          setIsLoading(false)
       })
     .catch(error => console.log(error))
 }
@@ -68,25 +81,24 @@ useEffect(()=>{
     loadData();
 },[]);
 
+
   return (
     <ScrollView>
       <View style={styles.container}>
-        <Table borderStyle={{borderWidth: 3, borderColor: '#fff'}}>
-          <Row
-            data={tableData.tableHead}
-            flexArr={[ 1, 1.4, 1.3]}
-            style={styles.head}
-            textStyle={styles.text}
-          />
-          <TableWrapper style={styles.wrapper}>
-            <Rows
-              data={tableData.data}
-              flexArr={[1, 1.4, 1.3]}
-              style={styles.row}
-              textStyle={styles.text}
+        <View style={styles.theadWrapper}>
+          <Text style={styles.thead }>Name</Text>
+          <Text style={styles.thead }>Time Duration</Text>
+          <Text style={styles.thead }>Result</Text>
+        </View>
+        <FlatList 
+            data={data} 
+            renderItem = {({item})=>{
+                return renderData(item)
+            }}
+            onRefresh={()=> loadData()}
+            refreshing = {loading}
+            keyExtractor={item=>`${item.id}`}
         />
-          </TableWrapper>
-        </Table>
       </View>
     </ScrollView>
   );
@@ -96,8 +108,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 0,
     paddingTop: 40,
-    paddingLeft: 60,
-    paddingRight: 60,
+    paddingHorizontal: 20,
     marginTop: 0,
   },
   head: {height: 60, backgroundColor: 'green'},
@@ -108,4 +119,31 @@ const styles = StyleSheet.create({
   title: {flex: 1},
   row: {height: 40},
   text: {textAlign: 'center', fontSize: 20, color: 'black'},
+  theadWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: 'green'
+  },
+  thead: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    color: 'white',
+    paddingVertical: 10,
+    paddingHorizontal: 10
+  },
+  tr: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: '#33cc00',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderBottomColor: 'black',
+    marginBottom: 2
+  },
+  td: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: 'white'
+  }
 });

frontend/src/router/router.js

@@ -65,6 +65,7 @@ import AdvanceGameScreenSix from '../screen/memory/advance/AdvanceGameScreenSix'
 import AdvanceGameScreenSixAll from '../screen/memory/advance/AdvanceGameScreenSixAll';
 import GameOverScreen from '../screen/memory/GameOverScreen';
 import MemoryResult from '../screen/memory/Results/ElementryResults';
+import MediumResults from '../screen/memory/Results/MediumResults';
 import GameLevel from '../screen/memory/GameLevel';
 import MediumLevelStart from '../screen/memory/MediumLevelStart';
 import AdvanceLevelStart from '../screen/memory/AdvanceLevelStart';
@@ -310,6 +311,16 @@ const AppRouter = () => {
             headerStyle: {backgroundColor: '#5fcf93'},
           }}
         />
+        <Stack.Screen
+          name="MediumResults"
+          component={MediumResults}
+          options={{
+            headerShown: true,
+            title: 'Results',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: '#5fcf93'},
+          }}
+        />
         <Stack.Screen
           name="GameLevel"
           component={GameLevel}

frontend/src/screen/memory/ResultCategory.js

@@ -26,7 +26,9 @@ const ResultCategory = ({navigation}) => {
         <ScrollView>
             <View style={{ marginBottom: 20 }}>
                     <View style={styles.gameItemRow}>
-                        <ImageBackground source={{ uri: 'https://cdn.pixabay.com/photo/2014/09/21/21/31/flowers-455591_960_720.jpg' }}
+                        <ImageBackground 
+                            source={{ uri: 'https://cdn.pixabay.com/photo/2014/09/21/21/31/flowers-455591_960_720.jpg' }}
+                            //source={require('../../memory/images/assets/ReadHeaderImg45.jpg')}
                             style={styles.image}>
                             {/* <Text style={styles.title}>Play Memo</Text> */}
                             <View style={styles.titleContainer}>
@@ -37,14 +39,14 @@ const ResultCategory = ({navigation}) => {
             </View>
             <View style={styles.screen} >
                 <MainButton styles={styles.elementryBtn} onPress={()=>{navigation.navigate('ElementryResults')}}>
-                <Icon name="unlock-alt" type="font-awesome" size={36} color="white" />     Elementry 
+                    Elementry Level
                 </MainButton>
-                <MainButton styles={styles.mediumBtn} onPress={()=>{}}>
+                <MainButton styles={styles.mediumBtn} onPress={()=>{navigation.navigate('MediumResults')}}>
                 {/* navigation.navigate('MediumLevelStart') */}
-                <Icon name="unlock-alt" type="font-awesome" size={36} color="white" />     Medium
+                  Medium Level
                 </MainButton>
                 <MainButton styles={styles.advanceBtn} onPress={()=>{}}>
-                <Icon name="lock" type="font-awesome" size={36} color="white" />     Advance
+                  Advance Level
                 </MainButton>
             </View>
         </ScrollView>

frontend/src/screen/memory/Results/ElementryResults.js

@@ -95,7 +95,9 @@ export default function ElementryResults() {
           </View>
           <View style={styles.imageContainer}>
             {/* <View > */}
-            <ResultTable/>
+            <ResultTable
+              level = 'el_result'
+            />
             {/* </View> */}
           </View>
           <View>

frontend/src/screen/memory/Results/MediumResults.js

+// import React from 'react';
+// import {View, Text, StyleSheet} from 'react-native';
+
+// const MemoryResult = () => {
+//     return(
+//         <View style={styles.screen}>
+            
+//         </View>
+//     );
+// }
+
+// const styles = StyleSheet.create({
+//     screen: {
+//         flex: 1,
+//         padding: 10
+//     }
+// });
+
+// export default MemoryResult;
+
+import React, {useEffect, useState} from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Pressable,
+  ImageBackground,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+  StatusBar,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+
+import Orientation from 'react-native-orientation-locker';
+import {useNavigation} from '@react-navigation/native';
+// import BackButton from '../../../component/BackButton';
+
+// import TableList from '../../component/reading/TableList';
+import ResultTable from '../../../component/memory/ResultTable';
+import { ImagePaths } from '../../../assets/read/data/ReadData';
+
+import {
+  Table,
+  TableWrapper,
+  Row,
+  Rows,
+  Col,
+} from 'react-native-table-component';
+
+export default function MediumResults() {
+  const navigation = useNavigation();
+
+  React.useEffect(() => {
+    StatusBar.setHidden(true);
+
+    // getColorResult();
+
+    const unsubscribe = navigation.addListener('focus', () => {
+      // The screen is focused
+      // Call any action
+      Orientation.unlockAllOrientations();
+      Orientation.lockToPortrait();
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  return (
+    // <SafeAreaView>
+    //   <ScrollView>
+    //     <View style={{flexDirection: 'column'}}>
+    //       <ImageBackground
+    //         style={styles.image}
+    //         source={ImagePaths.backgroundBasic}>
+    //         {/* <View><BackButton path="Color" /></View> */}
+    //         {/* <View style={styles.container}>
+    //           <Image
+    //             style={styles.logo}
+    //             source={require('../../../assets/result/title.png')}
+    //           />
+    //         </View> */}
+    //         <View style={styles.imageContainer}>{/* <TableList /> */}</View>
+    //       </ImageBackground>
+    //     </View>
+    //   </ScrollView>
+    // </SafeAreaView>
+    <SafeAreaView>
+      <View style={{flexDirection: 'column'}}>
+        <ImageBackground
+          style={styles.image}
+          source={ImagePaths.resultBackground}>
+          <View style={styles.textBody}>
+            <Text style={styles.text}>Your Results</Text>
+          </View>
+          <View style={styles.imageContainer}>
+            {/* <View > */}
+            <ResultTable
+              level = 'md_result'
+            />
+            {/* </View> */}
+          </View>
+          <View>
+            <Image style={styles.temp} source={ImagePaths.chart}></Image>
+          </View>
+        </ImageBackground>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  container: {
+    // backgroundColor : '#fff',
+    marginTop: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logo: {
+    marginTop: 80,
+    width: '30%',
+    height: '30%',
+  },
+  imageContainer: {
+    flexDirection: 'row',
+    marginTop: 1,
+  },
+  textBody: {
+    marginTop: 10,
+    marginLeft: 90,
+    // backgroundColor: '#00008B',
+    width: 220,
+    borderRadius: 50,
+    padding: 5,
+  },
+  text: {
+    fontSize: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: 'black',
+    borderRadius: 10,
+    backgroundColor: 'rgba(2, 202, 106, 0.17)',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  temp: {
+    marginTop: 100,
+    marginLeft: 80,
+    // backgroundColor: '#00008B',
+    width: 220,
+    height: 200,
+    borderRadius: 50,
+    padding: 5,
+  },
+});
+

frontend/src/screen/memory/elementry/GameScreenFive.js

@@ -2,9 +2,20 @@ import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
 import Countdown from '../../../constants/Countdown';
+import Tts from 'react-native-tts';
 
 const GameScreenFive = ({navigation}) => {
 
+    useEffect(()=>{
+        Tts.speak('Fish', {
+            androidParams: {
+              KEY_PARAM_PAN: 0.6,
+              KEY_PARAM_VOLUME: 0.6,
+              KEY_PARAM_STREAM: 'STREAM_MUSIC',
+            },
+          });
+    });
+    
         return(
             <View style={styles.sreen}>
                 <Text></Text>

frontend/src/screen/memory/elementry/GameScreenFour.js

@@ -2,9 +2,20 @@ import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
 import Countdown from '../../../constants/Countdown';
+import Tts from 'react-native-tts';
 
 const GameScreenFour = ({navigation}) => {
 
+    useEffect(()=>{
+        Tts.speak('Car', {
+            androidParams: {
+              KEY_PARAM_PAN: 0.6,
+              KEY_PARAM_VOLUME: 0.6,
+              KEY_PARAM_STREAM: 'STREAM_MUSIC',
+            },
+          });
+    });
+    
         return(
             <View style={styles.sreen}>
                 <Text></Text>

frontend/src/screen/memory/elementry/GameScreenOne.js

@@ -6,6 +6,7 @@ import {useDispatch} from 'react-redux';
 import * as memoryActions from '../../../store/actions/memory';
 import Levels from '../../../constants/Levels';
 import Countdown from '../../../constants/Countdown';
+import Tts from 'react-native-tts';
 
 const GameScreenOne = ({navigation}) => {
 
@@ -17,6 +18,13 @@ const GameScreenOne = ({navigation}) => {
     const dispatch = useDispatch();
 
     useEffect(()=>{
+        Tts.speak('Pencil', {
+            androidParams: {
+              KEY_PARAM_PAN: 0.6,
+              KEY_PARAM_VOLUME: 0.6,
+              KEY_PARAM_STREAM: 'STREAM_MUSIC',
+            },
+          });
         dispatch(memoryActions.setGameLevel(Levels.elementry))
     })
 

frontend/src/screen/memory/elementry/GameScreenSix.js

@@ -2,9 +2,21 @@ import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
 import Countdown from '../../../constants/Countdown';
+import Tts from 'react-native-tts';
 
 const GameScreenSix = ({navigation}) => {
     
+
+    useEffect(()=>{
+        Tts.speak('Kite', {
+            androidParams: {
+              KEY_PARAM_PAN: 0.6,
+              KEY_PARAM_VOLUME: 0.6,
+              KEY_PARAM_STREAM: 'STREAM_MUSIC',
+            },
+          });
+    });
+
         return(
             <View style={styles.sreen}>
                 <Text></Text>

frontend/src/screen/memory/elementry/GameScreenThree.js

@@ -2,9 +2,20 @@ import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
 import Countdown from '../../../constants/Countdown';
+import Tts from 'react-native-tts';
 
 const GameScreenThree = ({navigation}) => {
 
+    useEffect(()=>{
+        Tts.speak('Flower', {
+            androidParams: {
+              KEY_PARAM_PAN: 0.6,
+              KEY_PARAM_VOLUME: 0.6,
+              KEY_PARAM_STREAM: 'STREAM_MUSIC',
+            },
+          });
+    });
+    
         return(
             <View style={styles.sreen}>
                 <Text></Text>

frontend/src/screen/memory/elementry/GameScreenTwo.js

@@ -2,9 +2,20 @@ import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
 import Countdown from '../../../constants/Countdown';
+import Tts from 'react-native-tts';
 
 const GameScreenTwo = ({navigation}) => {
     
+    useEffect(()=>{
+        Tts.speak('Ball', {
+            androidParams: {
+              KEY_PARAM_PAN: 0.6,
+              KEY_PARAM_VOLUME: 0.6,
+              KEY_PARAM_STREAM: 'STREAM_MUSIC',
+            },
+          });
+    });
+
         return(
             <View style={styles.sreen}>
                 <Text></Text>

frontend/src/screen/memory/medium/MediumGameScreenFive.js

@@ -2,9 +2,20 @@ import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
 import Countdown from '../../../constants/Countdown';
+import Tts from 'react-native-tts';
 
 const MediumGameScreenFive = ({navigation}) => {
 
+    useEffect(()=>{
+        Tts.speak('Shadow of Horse', {
+            androidParams: {
+              KEY_PARAM_PAN: 1,
+              KEY_PARAM_VOLUME: 0.6,
+              KEY_PARAM_STREAM: 'STREAM_MUSIC',
+            },
+          });
+    });
+    
         return(
             <View style={styles.sreen}>
                 <Text></Text>
@@ -28,7 +39,7 @@ const MediumGameScreenFive = ({navigation}) => {
                     timeLabels={{s: 'Seconds'}}
                     style={styles.counter}
                 />
-                <Text style={styles.imageText}>Fish - මාළුවා</Text>
+                {/* <Text style={styles.imageText}>Fish - මාළුවා</Text> */}
             </View>
         );
     }

frontend/src/screen/memory/medium/MediumGameScreenFour.js

@@ -2,9 +2,20 @@ import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
 import Countdown from '../../../constants/Countdown';
+import Tts from 'react-native-tts';
 
 const MediumGameScreenFour = ({navigation}) => {
 
+    useEffect(()=>{
+        Tts.speak('A boy with a balloon', {
+            androidParams: {
+              KEY_PARAM_PAN: 1,
+              KEY_PARAM_VOLUME: 0.6,
+              KEY_PARAM_STREAM: 'STREAM_MUSIC',
+            },
+          });
+    });
+    
         return(
             <View style={styles.sreen}>
                 <Text></Text>

frontend/src/screen/memory/medium/MediumGameScreenOne.js

@@ -6,6 +6,7 @@ import {useDispatch} from 'react-redux';
 import * as memoryActions from '../../../store/actions/memory';
 import Levels from '../../../constants/Levels';
 import Countdown from '../../../constants/Countdown';
+import Tts from 'react-native-tts';
 
 const MediumGameScreenOne = ({navigation}) => {
 
@@ -17,7 +18,14 @@ const MediumGameScreenOne = ({navigation}) => {
     const dispatch = useDispatch();
 
     useEffect(()=>{
-        dispatch(memoryActions.setGameLevel(Levels.medium))
+        dispatch(memoryActions.setGameLevel(Levels.medium));
+        Tts.speak('Birds', {
+            androidParams: {
+              KEY_PARAM_PAN: 1,
+              KEY_PARAM_VOLUME: 0.6,
+              KEY_PARAM_STREAM: 'STREAM_MUSIC',
+            },
+          });
     })
 
     return(

frontend/src/screen/memory/medium/MediumGameScreenSix.js

@@ -2,9 +2,20 @@ import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
 import Countdown from '../../../constants/Countdown';
+import Tts from 'react-native-tts';
 
 const MediumGameScreenSix = ({navigation}) => {
 
+    useEffect(()=>{
+        Tts.speak('Arrow', {
+            androidParams: {
+              KEY_PARAM_PAN: 1,
+              KEY_PARAM_VOLUME: 0.6,
+              KEY_PARAM_STREAM: 'STREAM_MUSIC',
+            },
+          });
+    });
+    
         return(
             <View style={styles.sreen}>
                 <Text></Text>

frontend/src/screen/memory/medium/MediumGameScreenThree.js

@@ -2,9 +2,20 @@ import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
 import Countdown from '../../../constants/Countdown';
+import Tts from 'react-native-tts';
 
 const MediumGameScreenThree = ({navigation}) => {
 
+    useEffect(()=>{
+        Tts.speak('Circle and Rectangle', {
+            androidParams: {
+              KEY_PARAM_PAN: 1,
+              KEY_PARAM_VOLUME: 0.6,
+              KEY_PARAM_STREAM: 'STREAM_MUSIC',
+            },
+          });
+    });
+    
         return(
             <View style={styles.sreen}>
                 <Text></Text>

frontend/src/screen/memory/medium/MediumGameScreenTwo.js

@@ -2,9 +2,20 @@ import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
 import Countdown from '../../../constants/Countdown';
+import Tts from 'react-native-tts';
 
 const MediumGameScreenTwo = ({navigation}) => {
 
+    useEffect(()=>{
+        Tts.speak('A boy with a bicycle', {
+            androidParams: {
+              KEY_PARAM_PAN: 1,
+              KEY_PARAM_VOLUME: 0.6,
+              KEY_PARAM_STREAM: 'STREAM_MUSIC',
+            },
+          });
+    });
+    
         return(
             <View style={styles.sreen}>
                 <Text></Text>
@@ -14,7 +25,7 @@ const MediumGameScreenTwo = ({navigation}) => {
                         style={styles.image}
                     />
                 </View>
-                <Text style={styles.imageText}>Boy with a bicycle</Text>
+                <Text style={styles.imageText}>A boy with a bicycle</Text>
                 <CountDown
                     size={40}
                     until={Countdown.medium}