game levels

frontend/package.json

@@ -35,6 +35,7 @@
     "react-native-table-component": "^1.2.1",
     "react-native-tts": "^4.1.0",
     "react-native-vector-icons": "^9.0.0",
+    "react-navigation-header-buttons": "^9.0.1",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2"
   },

frontend/src/component/UI/HeaderButton.js

+import React from 'react';
+import {View, Text, StyleSheet, Platform} from 'react-native';
+import {HeaderButton} from 'react-navigation-header-buttons'
+import Icon from 'react-native-vector-icons/Ionicons';
+
+const CustomHeaderButton = (props) => {
+    return(
+        <HeaderButton
+            {...props}
+            IconComponent={Icon}
+            iconSize={23}
+            color={Platform.OS === 'android' ? 'white' : 'white'}
+        />
+    );
+}
+
+export default CustomHeaderButton;
\ No newline at end of file

frontend/src/router/router.js

@@ -40,6 +40,10 @@ import GameScreenFiveAll from '../screen/memory/elementry/GameScreenFiveAll';
 import GameScreenSix from '../screen/memory/elementry/GameScreenSix';
 import GameScreenSixAll from '../screen/memory/elementry/GameScreenSixAll';
 import GameOverScreen from '../screen/memory/GameOverScreen';
+import MemoryResult from '../screen/memory/MemoryResult';
+import GameLevel from '../screen/memory/GameLevel';
+import MediumLevelStart from '../screen/memory/MediumLevelStart';
+import AdvanceLevelStart from '../screen/memory/AdvanceLevelStart';
 
 import Sam from '../screen/sample/sam';
 import Progress from '../screen/Progress';
@@ -164,7 +168,7 @@ const AppRouter = () => {
           options={{
             title: 'Memory Games',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: Colors.primary},
+            headerStyle: {backgroundColor: Colors.primary}
           }}
         />
         <Stack.Screen
@@ -247,6 +251,46 @@ const AppRouter = () => {
             headerStyle: {backgroundColor: Colors.primary},
           }}
         />
+        <Stack.Screen
+          name='MemoryResult'
+          component={MemoryResult}
+          options={{ 
+            headerShown: true,
+            title: 'Results',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: Colors.primary},
+           }}
+        />
+        <Stack.Screen
+          name='GameLevel'
+          component={GameLevel}
+          options={{ 
+            headerShown: true,
+            title: 'Levels',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: Colors.primary},
+           }}
+        />
+        <Stack.Screen
+          name='MediumLevelStart'
+          component={MediumLevelStart}
+          options={{ 
+            headerShown: true,
+            title: 'Medium Level',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: Colors.primary},
+           }}
+        />
+        <Stack.Screen
+          name='AdvanceLevelStart'
+          component={AdvanceLevelStart}
+          options={{ 
+            headerShown: true,
+            title: 'Advance Level',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: Colors.primary},
+           }}
+        />
         <Stack.Screen
           options={{headerShown: false}}
           name="PrimaryType"

frontend/src/screen/memory/AdvanceLevelStart.js

+import React from 'react';
+import {View,Text, StyleSheet, Button} from 'react-native';
+
+const AdvanceLevelStart = () => {
+    return(
+        <View style={styles.screen}>
+            <Text>Advance Level Start</Text>
+            <Button title='Start' onPress={()=>{}} />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10
+    }
+});
+
+export default AdvanceLevelStart;
\ No newline at end of file

frontend/src/screen/memory/GameLevel.js

+import { Center, Column, Row } from 'native-base';
+import React from 'react';
+import {Text, View, StyleSheet, Button} from 'react-native';
+
+const GameLevel = ({navigation}) => {
+    return (
+        <View style={styles.screen} >
+            <View style={styles.levelWrapper}>
+                <View style={styles.levelContainer}>
+                    <Button style={styles.btn} title='Elementry' onPress={()=>{navigation.navigate('StartGameScreen')}} />
+                    <Button style={styles.btn} title='Medium' onPress={()=>{navigation.navigate('MediumLevelStart')}} />
+                    <Button style={styles.btn} title='Advance' onPress={()=>{navigation.navigate('AdvanceLevelStart')}} />
+                </View>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 30
+    },
+    levelContainer: {
+        maxWidth: '100%',
+        height: '60%',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: 30
+    },
+    levelWrapper: {
+        width: '100%',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    btn: {
+        maxWidth: '100%',
+        height: 30
+    }
+});
+
+export default GameLevel;
+

frontend/src/screen/memory/GameList.js

 import { NavigationContainer } from '@react-navigation/native';
 import { Center } from 'native-base';
-import React from 'react';
+import React, {useLayoutEffect} from 'react';
 import {View, Text, StyleSheet, FlatList, TouchableOpacity} from 'react-native';
 import CategoryItem from '../../component/memory/CategoryItem';
 import { CATEGORIES } from '../../memory/data/dummy-data';
 
+import {HeaderButtons, Item} from 'react-navigation-header-buttons';
+import HeaderButton from '../../component/UI/HeaderButton';
+
 const GameList = ({navigation}) => {
     const renderItem = (itemData) =>{
         return(
@@ -12,10 +15,27 @@ const GameList = ({navigation}) => {
                 id={itemData.item.id}
                 title={itemData.item.title}
                 image={itemData.item.url} 
-                onSelectGame={()=>{navigation.navigate("StartGameScreen")}}
+                onSelectGame={()=>{navigation.navigate("GameLevel")}}
             />
         );
     }
+
+    useLayoutEffect(()=>{
+        navigation.setOptions({
+            headerRight: ()=>(
+                <HeaderButtons
+                HeaderButtonComponent={HeaderButton}
+              >
+                <Item
+                  title='Flag'
+                  iconName='flag'
+                  onPress={()=>{navigation.navigate('MemoryResult')}}
+                />
+              </HeaderButtons>
+            )
+        });
+    },[navigation]);
+
     return(
         <View style={styles.screen}>
             <FlatList

frontend/src/screen/memory/MediumLevelStart.js

+import React from 'react';
+import {Text, View, StyleSheet, Button} from 'react-native';
+
+const MediumLevelStart = () => {
+    return(
+        <View style={styles.screen}>
+            <Text>Medium Level</Text>
+            <Button title='Start' onPress={()=>{}}/>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1
+    }
+});
+
+export default MediumLevelStart;

frontend/src/screen/memory/MemoryResult.js

+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+
+const MemoryResult = () => {
+    return(
+        <View style={styles.screen}>
+            <Text>Result Screen</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        padding: 10
+    }
+});
+
+export default MemoryResult;
\ No newline at end of file