some

API/app.py

 import re
 
-import MySQLdb
+# import MySQLdb
 import mysql
 from flask import Flask, redirect, url_for, render_template, request, jsonify, make_response
 import random
@@ -22,31 +22,31 @@ app = Flask(__name__)
 def home():
     return render_template('home.html')
 
-@app.route('/register', methods =['POST'])
-def register():
-    msg = ''
-    if request.method == 'POST' and 'username' in request.form and 'password' in request.form and 'email' in request.form:
-        username = request.form['username']
-        password = request.form['password']
-        email = request.form['email']
-        cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
-        cursor.execute('SELECT * FROM user WHERE name = % s', (username,))
-        account = cursor.fetchone()
-        if account:
-            msg = 'Account already exists !'
-        elif not re.match(r'[^@]+@[^@]+\.[^@]+', email):
-            msg = 'Invalid email address !'
-        elif not re.match(r'[A-Za-z0-9]+', username):
-            msg = 'Username must contain only characters and numbers !'
-        elif not username or not password or not email:
-            msg = 'Please fill out the form !'
-        else:
-            cursor.execute('INSERT INTO accounts VALUES (NULL, % s, % s, % s)', (username, password, email,))
-            mysql.connection.commit()
-            msg = 'You have successfully registered !'
-    elif request.method == 'POST':
-        msg = 'Please fill out the form !'
-    return msg
+# @app.route('/register', methods =['POST'])
+# def register():
+#     msg = ''
+#     if request.method == 'POST' and 'username' in request.form and 'password' in request.form and 'email' in request.form:
+#         username = request.form['username']
+#         password = request.form['password']
+#         email = request.form['email']
+#         cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
+#         cursor.execute('SELECT * FROM user WHERE name = % s', (username,))
+#         account = cursor.fetchone()
+#         if account:
+#             msg = 'Account already exists !'
+#         elif not re.match(r'[^@]+@[^@]+\.[^@]+', email):
+#             msg = 'Invalid email address !'
+#         elif not re.match(r'[A-Za-z0-9]+', username):
+#             msg = 'Username must contain only characters and numbers !'
+#         elif not username or not password or not email:
+#             msg = 'Please fill out the form !'
+#         else:
+#             cursor.execute('INSERT INTO accounts VALUES (NULL, % s, % s, % s)', (username, password, email,))
+#             mysql.connection.commit()
+#             msg = 'You have successfully registered !'
+#     elif request.method == 'POST':
+#         msg = 'Please fill out the form !'
+#     return msg
 
 # Color Function Route (IT18218640)
 
@@ -170,6 +170,6 @@ def login():
     return make_response(body)
 
 if __name__ == "__main__":
-    app.run(host='192.168.8.102')
-    # app.run(host='192.168.8.100,port='5000', debug=True)
+    app.run(host='192.168.1.101')
+    # 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="rp19970520"
+        password="12345678"
     )
     return db
 

backend/IT18256888/app.py

@@ -4,6 +4,13 @@ from keras.layers import Dense,Dropout
 from keras.models import Sequential
 import keras.backend as K
 
+#creating the tables using sqlalchemy
+from flask_sqlalchemy import SQLAlchemy
+import datetime
+
+#serialize and deserialize data
+from flask_marshmallow import Marshmallow
+
 scaler_x = joblib.load('scaler_x.pkl')
 scaler_y = joblib.load('scaler_y.pkl')
 
@@ -53,4 +60,67 @@ def get_level():
     results=[{"level":float(result)}]
     return (jsonify(results=results))
 
-app.run(host='0.0.0.0',port=5000)
+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_TRACK_MODIFICATIONS'] = False
+
+#DB Connection
+
+db = SQLAlchemy(app)
+#crate a object of marshmallow
+ma = Marshmallow(app)
+
+#creating the table
+class MemoryResults(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String(20))
+    age = db.Column(db.String(10))
+    game_level = db.Column(db.String(50))
+    time_duration = db.Column(db.Float())
+    result = db.Column(db.String(20))
+    date = db.Column(db.DateTime, default = datetime.datetime.now)
+
+    def __init__(self, name, age, game_level, time_duration, result):
+        self.name = name
+        self.age = age
+        self.game_level = game_level
+        self.time_duration = time_duration
+        self.result = result
+
+#for serializing and deserializing , create the schema
+#create Results schema
+class ResultsSchema(ma.Schema):
+    class Meta:
+        fields = ('id', 'name', 'age', 'game_level', 'time_duration', 'result', 'date') # fields to serialize 
+
+result_schema = ResultsSchema()               
+results_schema = ResultsSchema(many=True)
+
+#add results => POST method
+@app.route('/add', methods = ['POST'])
+def add_result():
+    # title = request.json['title']
+    # body = request.json['body']
+    name = request.json['name']
+    age = request.json['age']
+    game_level = request.json['game_level']
+    time_duration = request.json['time_duration']
+    result = request.json['result']
+
+    #object of class table
+    results = MemoryResults(name, age, game_level, time_duration, result)
+    #add to the db
+    db.session.add(results)
+    #commit to the db
+    db.session.commit()
+    return result_schema.jsonify(results)
+
+#run the flask file
+if __name__ == "__main__":
+    # app.run(debug=True)
+    app.run(host='0.0.0.0', port=5000, debug=True)

frontend/App.js

@@ -20,12 +20,14 @@ import {createStore, combineReducers} from 'redux';
 import {Provider} from 'react-redux';
 import memoryReducer from './src/store/reducers/memory';
 import timeReducer from './src/store/reducers/memory'
+import userReducer from './src/store/reducers/login';
 
 import AppRouter from "./src/router/router"
 
 const rootReducer = combineReducers({
   memory: memoryReducer,
-  time: timeReducer
+  time: timeReducer,
+  users: userReducer
 });
 
 const store = createStore(rootReducer);

frontend/src/assets/read/data/ReadData.js

+const ImagePaths = {
+  roundOne: require('../image/round1.jpeg'),
+  roundTwo: require('../image/round2.png'),
+  summery: require('../image/ReadHeaderImg4.webp'),
+  robot1: require('../image/robot1.png'),
+  robot2: require('../image/activity-2-rob.png'),
+};
+export default ImagePaths;

frontend/src/component/buttonView.js

@@ -33,7 +33,7 @@ export default function ColorActivity(props) {
       <View style={[{flexDirection: 'row'}]}>
         <View style={styles.cardImage}>
           <Image
-            source={require('../assets/read/backboard3.jpeg')}
+            source={require('../assets/read/image/backboard3.jpeg')}
             style={{width: 100, height: 100, borderRadius: 20}}></Image>
         </View>
 

frontend/src/component/reading/ReadCategory.js

+import React, {useEffect} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ImageBackground,
+  TouchableNativeFeedback,
+  Platform,
+} from 'react-native';
+
+const ReadCategory = props => {
+  const {title, image, id, color, onSelectGame, path} = props;
+  return (
+    <View style={styles.gameItem}>
+      <TouchableOpacity onPress={onSelectGame}>
+        <View>
+          {/* <View style={{...styles.gameItemRow, ...styles.gameItemHeader}}> */}
+            <ImageBackground style={styles.bgImage} source={image}>
+              <View style={styles.titleContainer}>
+                <Text style={styles.title} numberOfLines={1}>
+                  {title}
+                </Text>
+              </View>
+            </ImageBackground>
+          {/* </View> */}
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  gameItem: {
+    
+    height: 300,
+    width: '100%',
+    backgroundColor: '#ccc',
+    marginVertical: 10,
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+
+  gameItemHeader: {
+    height: '90%',
+  },
+  gameItemRow: {
+    flexDirection: 'row',
+    backgroundColor: 'green',
+  },
+  gameItemDetails: {
+    height: '10%',
+    paddingHorizontal: 10,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  bgImage: {
+    
+    height: '100%',
+    width: '100%',
+    justifyContent: 'flex-end',
+  },
+  title: {
+    color: 'white',
+    fontFamily: 'open-sans-bold',
+    fontSize: 20,
+    textAlign: 'center',
+  },
+  titleContainer: {
+    padding: 10,
+    backgroundColor: 'rgba(0,0,0,0.7)',
+  },
+});
+
+export default ReadCategory;

frontend/src/constants/Levels.js

+export default {
+    elementry: 'elementry_level',
+    level2: 'level_two',
+    level3: 'level_three'
+}
\ No newline at end of file

frontend/src/data/dummy-data.js

+import Users from '../model/Users';
+
+export const USERS = [
+    new Users(
+        '1',
+        'teran@helply.com',
+        '12345678',
+        'teran'
+    ),
+    new Users(
+        '2',
+        'rusiru@helply.com',
+        '12345678',
+        'rusiru'
+    ),
+    new Users(
+        '3',
+        'madawa@helply.com',
+        '12345678',
+        'madawa'
+    ),
+    new Users(
+        '4',
+        'navodh@helply.com',
+        '12345678',
+        'navodh'
+    ),
+]
\ No newline at end of file

frontend/src/model/Users.js

+class Users {
+    constructor(uid,email, password, name){
+        this.uid = uid,
+        this.email = email,
+        this.password = password,
+        this.name = name
+    }
+}
+
+export default Users;
\ No newline at end of file

frontend/src/router/router.js

 import React from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import Colors from '../constants/Colors'
+import Colors from '../constants/Colors';
 
 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 Read from '../screen/Read';
-import ReadActivity from '../screen/activity/readActivity';
-import ReadActivity2 from '../screen/activity/readActivity2'
-import ColorResult from '../screen/result/ColorResult';;
-import PrimaryType from '../screen/activity/PrimaryType'
-import SecondaryType from '../screen/activity/SecondaryType'
+import ReadActivity from '../screen/reading/ReadActivity';
+import ColorResult from '../screen/result/ColorResult';
+import PrimaryType from '../screen/activity/PrimaryType';
+import SecondaryType from '../screen/activity/SecondaryType';
 import GameList from '../screen/memory/GameList';
-import StartGameScreen from '../screen/memory/StartGameScreen'
+import StartGameScreen from '../screen/memory/StartGameScreen';
 import GameScreenOne from '../screen/memory/elementry/GameScreenOne';
 import GameScreenOneAll from '../screen/memory/elementry/GameScreenOneAll';
 import GameScreenTwo from '../screen/memory/elementry/GameScreenTwo';
@@ -25,11 +24,11 @@ import GameScreenTwoAll from '../screen/memory/elementry/GameScreenTwoAll';
 import GameScreenThree from '../screen/memory/elementry/GameScreenThree';
 import GameScreenThreeAll from '../screen/memory/elementry/GameScreenThreeAll';
 import GameScreenFour from '../screen/memory/elementry/GameScreenFour';
-import GameScreenFourAll from '../screen/memory/elementry/GameScreenFourAll'
+import GameScreenFourAll from '../screen/memory/elementry/GameScreenFourAll';
 import GameScreenFive from '../screen/memory/elementry/GameScreenFive';
-import GameScreenFiveAll from '../screen/memory/elementry/GameScreenFiveAll'
+import GameScreenFiveAll from '../screen/memory/elementry/GameScreenFiveAll';
 import GameScreenSix from '../screen/memory/elementry/GameScreenSix';
-import GameScreenSixAll from '../screen/memory/elementry/GameScreenSixAll'
+import GameScreenSixAll from '../screen/memory/elementry/GameScreenSixAll';
 import GameOverScreen from '../screen/memory/GameOverScreen';
 
 const Stack = createNativeStackNavigator();
@@ -74,7 +73,11 @@ const AppRouter = () => {
           component={Blue}
         />
         <Stack.Screen
-          options={{headerShown: false}}
+          options={{
+            title: 'Read Activity',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: Colors.secondary},
+          }}
           name="Read"
           component={Read}
         />
@@ -83,11 +86,6 @@ const AppRouter = () => {
           name="ReadActivity"
           component={ReadActivity}
         />
-        <Stack.Screen
-          options={{headerShown: false}}
-          name="ReadActivity2"
-          component={ReadActivity2}
-        />
         <Stack.Screen
           options={{headerShown: false}}
           name="ColorResult"
@@ -99,7 +97,7 @@ const AppRouter = () => {
           options={{
             title: 'Memory Games',
             headerTintColor: 'white',
-            headerStyle: { backgroundColor: Colors.primary },
+            headerStyle: {backgroundColor: Colors.primary},
           }}
         />
         <Stack.Screen
@@ -109,7 +107,7 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Game Start',
             headerTintColor: 'white',
-            headerStyle: { backgroundColor: Colors.primary },
+            headerStyle: {backgroundColor: Colors.primary},
           }}
         />
         <Stack.Screen
@@ -175,12 +173,12 @@ const AppRouter = () => {
         <Stack.Screen
           name="GameOverScreen"
           component={GameOverScreen}
-          options={{ 
-            headerShown: true ,
+          options={{
+            headerShown: true,
             title: 'Game Over',
             headerTintColor: 'white',
-            headerStyle: { backgroundColor: Colors.primary },
-           }}
+            headerStyle: {backgroundColor: Colors.primary},
+          }}
         />
         <Stack.Screen
           options={{headerShown: false}}

frontend/src/screen/Read.js

@@ -15,9 +15,12 @@ import {
   Animated,
   Easing,
   NativeModules,
+  TouchableOpacity,
 } from 'react-native';
 import ImageButton from '../component/ImageButton';
 import ButtonView from '../component/buttonView';
+import ReadCategory from '../component/reading/ReadCategory';
+import ImagePaths from '../assets/read/data/ReadData';
 
 const webUrel = 'http://127.0.0.1:5000/reading';
 
@@ -52,35 +55,55 @@ export default function Read() {
   return (
     <SafeAreaView>
       <ScrollView>
-        <View>
-          <View>
-            <ImageBackground
-              source={require('../assets/read/background3.jpeg')}
-              style={styles.image}>
-              <Text style={styles.title}>Read Activity</Text>
-            </ImageBackground>
-          </View>
-        </View>
-
-        {/* {activity.map((data, index) => {
-          return <ButtonView title={data.round} color="#00008B" />;
-        })} */}
-
-        <ButtonView
-          title="First Round"
-          color="#00008B"
-          path="ReadActivity"></ButtonView>
-        <ButtonView
-          title="Second Round"
-          color="#00008B"
-          path="ReadActivity2"></ButtonView>
-        {/* <ButtonView title="Third Round" color="#00008B"></ButtonView> */}
+        {/* <View style={styles.screenHeader}>
+          <ImageBackground
+            source={require('../assets/read/image/ReadHeaderImg3.jpeg')}
+            style={styles.image}>
+            <Text style={styles.title}>Read Activity</Text>
+          </ImageBackground>
+        </View> */}
+        <TouchableOpacity style={styles.screen}>
+          <ReadCategory
+            id={1}
+            title={'First Round'}
+            image={ImagePaths.roundOne}
+            onSelectGame={() => {
+              navigation.navigate('ReadActivity');
+            }}
+          />
+          <ReadCategory
+            id={1}
+            title={'Second Round'}
+            image={ImagePaths.roundTwo}
+            onSelectGame={() => {
+              navigation.navigate('ReadActivity');
+            }}
+          />
+          <ReadCategory
+            id={1}
+            title={'Result & Summery'}
+            image={ImagePaths.summery}
+            onSelectGame={() => {
+              navigation.navigate('ReadActivity');
+            }}
+          />
+        </TouchableOpacity>
       </ScrollView>
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
+  screenHeader: {
+    height:200
+  },
+  screen: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+    backgroundColor: '#ffff',
+  },
   imageContainer: {
     flexDirection: 'row',
     marginTop: 70,

frontend/src/screen/activity/readActivity.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,
-} from 'react-native';
-
-export default function ReadActivity() {
-  const navigation = useNavigation();
-
-  React.useEffect(() => {
-    const unsubscribe = navigation.addListener('focus', () => {
-      // The screen is focused
-      // Call any action
-      Orientation.unlockAllOrientations();
-      Orientation.lockToLandscape();
-    });
-
-    return unsubscribe;
-  }, [navigation]);
-
-  return (
-    <SafeAreaView>
-      <View style={{flexDirection: 'column'}}>
-        <ImageBackground
-          style={styles.image}
-          source={require('../../assets/read/background2.jpeg')}>
-          <View>
-            <View style={styles.textBody}>
-              <Text style={styles.text}>Pronounce this Word!</Text>
-            </View>
-
-            <Image
-              style={styles.robo}
-              source={require('../../assets/read/activity-2-rob.png')}></Image>
-          </View>
-
-          <View>
-            <Image
-              style={styles.blackboard}
-              source={require('../../assets/read/reading.png')}></Image>
-          </View>
-
-          <View style={{flexDirection: 'row', marginLeft: 580, marginTop: -30}}>
-            <Button style={styles.button} title="Start" />
-          </View>
-        </ImageBackground>
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  body: {
-    flex: 1,
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-  },
-  box: {
-    width: 180,
-    height: 180,
-    // borderColor: "#000000",
-    backgroundColor: 'blue',
-    marginTop: -370,
-    marginLeft: 455,
-    borderRadius: 100,
-  },
-  aa: {
-    marginTop: -120,
-  },
-  blackboard: {
-    marginTop: -320,
-    marginLeft: 240,
-    width: '50%',
-    height: 300,
-  },
-  robo: {
-    marginTop: -70,
-    marginLeft: -5,
-    width: 150,
-    height: 200,
-  },
-  textBody: {
-    marginTop: 150,
-    marginLeft: 95,
-    backgroundColor: '#00008B',
-    width: 150,
-    borderRadius: 50,
-    padding: 5,
-  },
-  text: {
-    fontSize: 25,
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: 'white',
-    textAlign: 'center',
-    fontWeight: 'bold',
-  },
-  button: {
-    padding: 10,
-    marginRight: 50,
-    color: '#000000',
-  },
-});

frontend/src/screen/client/Client.js

 import axios from 'axios';
 
-export default axios.create({ baseURL: 'http://192.168.8.102:5000/',timeout: 15000, });
\ No newline at end of file
+// export default axios.create({ baseURL: 'http://192.168.8.102:5000/', timeout: 15000, });
+export default axios.create({
+  baseURL: 'http://192.168.1.100:5000/',
+  timeout: 15000,
+});

frontend/src/screen/home.js

@@ -31,7 +31,7 @@ export default function Home({ navigation }){
             <View style={styles.imageView}>
               <Image
                 style={styles.image}
-                source={require('../assets/read/background4.jpg')}
+                source={require('../assets/read/image/background4.jpg')}
                 resizeMode="contain"></Image>
               <ImageButton path="Read" title="Read Activity" />
             </View>

frontend/src/screen/memory/GameOverScreen.js

@@ -8,10 +8,13 @@ const GameOverScreen = ({navigation}) => {
 
     const dispatch = useDispatch();
 
+    const passedLevel = useSelector(state=>state.memory.gameLevel);
     const passedData = useSelector(state=>state.memory.memoryData);
     const passedTime = useSelector(state=>state.time.screenTime);
+
     console.log(passedData);
     console.log(passedTime);
+    console.log(passedLevel);
 
     let totalTime = 0;
 
@@ -27,9 +30,10 @@ const GameOverScreen = ({navigation}) => {
     console.log(seconds);
 
     const [data, setData] = useState([]);
+    // const [level, setLevel] = useState('');
     const [loading, setIsLoading] = useState(true);
-    let disorderLevel;
 
+    let disorderLevel;
     let resultText;
 
     const gameData = {
@@ -48,6 +52,7 @@ const GameOverScreen = ({navigation}) => {
         })
         .then(resp => resp.json())
         .then(data=>{
+            console.log('level :', data.results[0].level);
             setData(data.results[0].level)
             setIsLoading(false)
         })
@@ -62,7 +67,26 @@ const GameOverScreen = ({navigation}) => {
         disorderLevel = 'low'
     }
 
+    const insertData = () => {
+         fetch('http://192.168.8.170:5000/add', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                name: 'child 1',
+                age: '5',
+                game_level: passedLevel,
+                time_duration: seconds,
+                result: disorderLevel
+            })
+        })
+        .then(resp => resp.json())
+        .catch(error => console.log(error))
+    }
+
     if(!loading){
+        insertData();
         resultText=(
         <Text style={styles.resultText}>
             <Text>Child's disorder level is </Text> <Text style={styles.highlight}>{disorderLevel}</Text>

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

@@ -2,6 +2,9 @@ import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image, BackHandler} from 'react-native';
 import Header from '../../../component/memory/Header';
 import CountDown from 'react-native-countdown-component';
+import {useDispatch} from 'react-redux';
+import * as memoryActions from '../../../store/actions/memory';
+import Levels from '../../../constants/Levels';
 
 const GameScreenOne = ({navigation}) => {
 
@@ -10,6 +13,12 @@ const GameScreenOne = ({navigation}) => {
     //     return () => backHandler.remove()
     // },[]);
 
+    const dispatch = useDispatch();
+
+    useEffect(()=>{
+        dispatch(memoryActions.setGameLevel(Levels.elementry))
+    })
+
     return(
         <View style={styles.sreen}>
             <Text></Text>

frontend/src/screen/activity/readActivity2.js → frontend/src/screen/reading/ReadActivity.js

@@ -13,7 +13,7 @@ import {
   Image,
 } from 'react-native';
 
-export default function ReadActivity2() {
+export default function ReadActivity() {
   const navigation = useNavigation();
 
   // React.useEffect(() => {
@@ -32,12 +32,12 @@ export default function ReadActivity2() {
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
-          source={require('../../assets/read/activity-2-backg.jpeg')}>
+          source={require('../../assets/read/image/activity-2-backg.jpeg')}>
           <View style={styles.imageContainer}>
             <View style={styles.imageView}>
               <View style={styles.robo}>
                 <Image
-                  source={require('../../assets/read/activity-2-rob.png')}></Image>
+                  source={require('../../assets/read/image/activity-2-rob.png')}></Image>
               </View>
             </View>
             <View style={styles.textBody}>
@@ -55,12 +55,11 @@ export default function ReadActivity2() {
           <View>
             <Image
               style={styles.blackboard}
-              source={require('../../assets/read/backboard3.png')}></Image>
+              source={require('../../assets/read/image/backboard3.png')}></Image>
           </View>
-
-          {/* <View style={{flexDirection: 'row', marginTop: 120}}>
+          <View style={{flexDirection: 'row', marginTop: 120}}>
             <Button style={styles.button} title="Start" />
-          </View> */}
+          </View>
         </ImageBackground>
       </View>
     </SafeAreaView>
@@ -121,10 +120,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     color: '#00008B',
+    borderRadius:10,
+    backgroundColor: 'rgba(0,0,0,0.2)',
     textAlign: 'center',
     fontWeight: 'bold',
   },
-  
+
   button: {
     padding: 10,
     marginLeft: 5,

frontend/src/store/actions/login.js

+export const USER_LOGIN = 'USER_LOGIN';
+
+export const userLogin = (user) => {
+    return {type: USER_LOGIN, user: user}
+}
\ No newline at end of file

frontend/src/store/actions/memory.js

 export const SET_ANSWERS = 'SET_ANSWERS';
 export const SET_TIME = 'SET_TIME';
 export const CLEAR_DATA = 'CLEAR_DATA';
+export const SET_GAME_LEVEL = 'SET_GAME_LEVEL';
+
+export const setGameLevel = (level) => {
+    return {type: SET_GAME_LEVEL, level: level}
+}
 
 export const setAnswers = (data) => {
     return {type: SET_ANSWERS, data: data}

frontend/src/store/reducers/login.js

+import {USER_LOGIN} from '../actions/login';
+import { USERS } from '../../data/dummy-data';
+
+const initialState = {
+    users : USERS,
+    loggedInUser: {}
+}
+
+const userReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case USER_LOGIN:
+            return{
+                ...state,
+                loggedInUser: action.user
+            }
+        default:
+            return state;
+    }
+    return state;
+}
+
+export default userReducer;
\ No newline at end of file

frontend/src/store/reducers/memory.js

-import { CLEAR_DATA, SET_ANSWERS, SET_TIME } from "../actions/memory";
+import { CLEAR_DATA, SET_ANSWERS, SET_GAME_LEVEL, SET_TIME } from "../actions/memory";
 
 const initialState = {
+    gameLevel: null,
     memoryData: {},
     screenTime: {}
 }
 
 const memoryReducer = (state=initialState, action) => {
     switch(action.type){
+        case SET_GAME_LEVEL:
+            const level = action.level;
+
+            return{
+                ...state,
+                gameLevel: level
+            }
+            
         case SET_ANSWERS:
             const addedAnswer = action.data;
             const question = addedAnswer.question;
@@ -31,7 +40,8 @@ const memoryReducer = (state=initialState, action) => {
             return{
                 ...state,
                 memoryData: {},
-                screenTime: {}
+                screenTime: {},
+                gameLevel: null
             }
 
         default: