Skip to content

21_22-J 38
21_22-J 38
Commit 65a11176 authored by Neranga K.T.'s avatar Neranga K.T.
Browse files
Options

Merge branch 'it18256888' into 'master' 

It18256888

See merge request !179
parents 74018e38 d9bea943
Hide whitespace changes
Inline Side-by-side
Showing with 2351 additions and 15607 deletions
backend/IT18256888/app.py
View file @ 65a11176
...@@ -124,5 +124,5 @@ def add_result(): ...@@ -124,5 +124,5 @@ def add_result():
#run the flask file #run the flask file
if __name__ == "__main__": if __name__ == "__main__":
# app.run(debug=True) # app.run(debug=True)
app.run(host='192.168.8.101') # app.run(host='192.168.8.101')
# app.run(host='0.0.0.0', port=5000, debug=True) app.run(host='0.0.0.0', port=5000)
frontend/package-lock.json
View file @ 65a11176
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend/package.json
View file @ 65a11176
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
"react-native-table-component": "^1.2.1", "react-native-table-component": "^1.2.1",
"react-native-tts": "^4.1.0", "react-native-tts": "^4.1.0",
"react-native-vector-icons": "^9.0.0", "react-native-vector-icons": "^9.0.0",
"react-navigation-header-buttons": "^9.0.1",
"react-redux": "^7.2.6", "react-redux": "^7.2.6",
"redux": "^4.1.2" "redux": "^4.1.2"
}, },
......
frontend/src/component/UI/HeaderButton.js 0 → 100644
View file @ 65a11176
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/constants/Countdown.js
View file @ 65a11176
export default { export default {
elementry: 5, elementry: 7,
average: 3, medium: 5,
hard: 3 advance: 2
} }
\ No newline at end of file
frontend/src/constants/Levels.js
View file @ 65a11176
export default { export default {
elementry: 'elementry_level', elementry: 'elementry_level',
level2: 'level_two', medium: 'medium_level',
level3: 'level_three' advance: 'advance_level'
} }
\ No newline at end of file
frontend/src/memory/data/medium-level.js 0 → 100644
View file @ 65a11176
import Gamedataone from '../models/gamedataone';
export const SCREEN1 = [
new Gamedataone(1, 'q1', 0, require('../../memory/images/medium/1/bird2.jpg')),
new Gamedataone(2, 'q1', 0, require('../../memory/images/medium/1/bird3.jpg')),
new Gamedataone(3, 'q1', 0, require('../../memory/images/medium/1/bird4.jpg')),
new Gamedataone(4, 'q1', 0, require('../../memory/images/medium/1/bird5.jpg')),
new Gamedataone(5, 'q1', 0, require('../../memory/images/medium/1/bird6.jpg')),
new Gamedataone(6, 'q1', 1, require('../../memory/images/medium/1/bird-main.jpg')),
new Gamedataone(7, 'q1', 0, require('../../memory/images/medium/1/bird7.jpg')),
new Gamedataone(8, 'q1', 0, require('../../memory/images/medium/1/bird8.jpg')),
];
export const SCREEN2 = [
new Gamedataone(1, 'q2', 0, require('../../memory/images/medium/2/bike2.jpg')),
new Gamedataone(2, 'q2', 0, require('../../memory/images/medium/2/bike3.jpg')),
new Gamedataone(3, 'q2', 0, require('../../memory/images/medium/2/bike4.jpg')),
new Gamedataone(4, 'q2', 1, require('../../memory/images/medium/2/bike-main.jpg')),
new Gamedataone(5, 'q2', 0, require('../../memory/images/medium/2/bike5.jpg')),
new Gamedataone(6, 'q2', 0, require('../../memory/images/medium/2/bike6.jpg')),
new Gamedataone(7, 'q2', 0, require('../../memory/images/medium/2/bike7.jpg')),
new Gamedataone(8, 'q2', 0, require('../../memory/images/medium/2/bike8.jpg')),
];
export const SCREEN3 = [
new Gamedataone(1, 'q3', 0, require('../../memory/images/medium/3/sh2.jpg')),
new Gamedataone(2, 'q3', 0, require('../../memory/images/medium/3/sh3.jpg')),
new Gamedataone(3, 'q3', 1, require('../../memory/images/medium/3/sh-main.jpg')),
new Gamedataone(4, 'q3', 0, require('../../memory/images/medium/3/sh5.jpg')),
new Gamedataone(5, 'q3', 0, require('../../memory/images/medium/3/sh6.jpg')),
new Gamedataone(6, 'q3', 0, require('../../memory/images/medium/3/sh7.jpg')),
new Gamedataone(7, 'q3', 0, require('../../memory/images/medium/3/sh8.jpg')),
new Gamedataone(8, 'q3', 0, require('../../memory/images/medium/3/sh4.jpg')),
];
export const SCREEN4 = [
new Gamedataone(1, 'q4', 0, require('../../memory/images/medium/4/bal2.jpg')),
new Gamedataone(2, 'q4', 0, require('../../memory/images/medium/4/bal3.jpg')),
new Gamedataone(3, 'q4', 0, require('../../memory/images/medium/4/bal4.jpg')),
new Gamedataone(4, 'q4', 0, require('../../memory/images/medium/4/bal5.jpg')),
new Gamedataone(5, 'q4', 0, require('../../memory/images/medium/4/bal6.jpg')),
new Gamedataone(6, 'q4', 0, require('../../memory/images/medium/4/bal7.jpg')),
new Gamedataone(7, 'q4', 1, require('../../memory/images/medium/4/bal-main.jpg')),
new Gamedataone(8, 'q4', 0, require('../../memory/images/medium/4/bal8.jpg')),
];
export const SCREEN5 = [
new Gamedataone(1, 'q5', 0, require('../../memory/images/medium/5/an2.jpg')),
new Gamedataone(2, 'q5', 0, require('../../memory/images/medium/5/an3.jpg')),
new Gamedataone(3, 'q5', 0, require('../../memory/images/medium/5/an4.jpg')),
new Gamedataone(4, 'q5', 0, require('../../memory/images/medium/5/an5.jpg')),
new Gamedataone(5, 'q5', 0, require('../../memory/images/medium/5/an6.jpg')),
new Gamedataone(6, 'q5', 1, require('../../memory/images/medium/5/an-main.jpg')),
new Gamedataone(7, 'q5', 0, require('../../memory/images/medium/5/an7.jpg')),
new Gamedataone(8, 'q5', 0, require('../../memory/images/medium/5/an8.jpg')),
];
export const SCREEN6 = [
new Gamedataone(1, 'q6', 0, require('../../memory/images/medium/6/arrow2.jpg')),
new Gamedataone(2, 'q6', 0, require('../../memory/images/medium/6/arrow3.jpg')),
new Gamedataone(3, 'q6', 0, require('../../memory/images/medium/6/arrow4.jpg')),
new Gamedataone(4, 'q6', 0, require('../../memory/images/medium/6/arrow5.jpg')),
new Gamedataone(5, 'q6', 0, require('../../memory/images/medium/6/arrow6.jpg')),
new Gamedataone(6, 'q6', 1, require('../../memory/images/medium/6/arrow-main.jpg')),
new Gamedataone(7, 'q6', 0, require('../../memory/images/medium/6/arrow7.jpg')),
new Gamedataone(8, 'q6', 0, require('../../memory/images/medium/6/arrow8.jpg')),
];
\ No newline at end of file
frontend/src/router/router.js
View file @ 65a11176
...@@ -39,7 +39,35 @@ import GameScreenFive from '../screen/memory/elementry/GameScreenFive'; ...@@ -39,7 +39,35 @@ 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 GameScreenSix from '../screen/memory/elementry/GameScreenSix';
import GameScreenSixAll from '../screen/memory/elementry/GameScreenSixAll'; import GameScreenSixAll from '../screen/memory/elementry/GameScreenSixAll';
import MediumGameScreenOne from '../screen/memory/medium/MediumGameScreenOne';
import MediumGameScreenOneAll from '../screen/memory/medium/MediumGameScreenOneAll';
import MediumGameScreenTwo from '../screen/memory/medium/MediumGameScreenTwo';
import MediumGameScreenTwoAll from '../screen/memory/medium/MediumGameScreenTwoAll';
import MediumGameScreenThree from '../screen/memory/medium/MediumGameScreenThree';
import MediumGameScreenThreeAll from '../screen/memory/medium/MediumGameScreenThreeAll';
import MediumGameScreenFour from '../screen/memory/medium/MediumGameScreenFour';
import MediumGameScreenFourAll from '../screen/memory/medium/MediumGameScreenFourAll';
import MediumGameScreenFive from '../screen/memory/medium/MediumGameScreenFive';
import MediumGameScreenFiveAll from '../screen/memory/medium/MediumGameScreenFiveAll';
import MediumGameScreenSix from '../screen/memory/medium/MediumGameScreenSix';
import MediumGameScreenSixAll from '../screen/memory/medium/MediumGameScreenSixAll';
import AdvanceGameScreenOne from '../screen/memory/advance/AdvanceGameScreenOne';
import AdvanceGameScreenOneAll from '../screen/memory/advance/AdvanceGameScreenOneAll';
import AdvanceGameScreenTwo from '../screen/memory/advance/AdvanceGameScreenTwo';
import AdvanceGameScreenTwoAll from '../screen/memory/advance/AdvanceGameScreenTwoAll';
import AdvanceGameScreenThree from '../screen/memory/advance/AdvanceGameScreenThree';
import AdvanceGameScreenThreeAll from '../screen/memory/advance/AdvanceGameScreenThreeAll';
import AdvanceGameScreenFour from '../screen/memory/advance/AdvanceGameScreenFour';
import AdvanceGameScreenFourAll from '../screen/memory/advance/AdvanceGameScreenFourAll';
import AdvanceGameScreenFive from '../screen/memory/advance/AdvanceGameScreenFive';
import AdvanceGameScreenFiveAll from '../screen/memory/advance/AdvanceGameScreenFiveAll';
import AdvanceGameScreenSix from '../screen/memory/advance/AdvanceGameScreenSix';
import AdvanceGameScreenSixAll from '../screen/memory/advance/AdvanceGameScreenSixAll';
import GameOverScreen from '../screen/memory/GameOverScreen'; 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 Sam from '../screen/sample/sam';
import Progress from '../screen/Progress'; import Progress from '../screen/Progress';
...@@ -164,7 +192,7 @@ const AppRouter = () => { ...@@ -164,7 +192,7 @@ const AppRouter = () => {
options={{ options={{
title: 'Memory Games', title: 'Memory Games',
headerTintColor: 'white', headerTintColor: 'white',
headerStyle: {backgroundColor: Colors.primary}, headerStyle: {backgroundColor: Colors.primary}
}} }}
/> />
<Stack.Screen <Stack.Screen
...@@ -247,6 +275,166 @@ const AppRouter = () => { ...@@ -247,6 +275,166 @@ const AppRouter = () => {
headerStyle: {backgroundColor: Colors.primary}, 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="MediumGameScreenOne"
component={MediumGameScreenOne}
/>
<Stack.Screen
options={{headerShown: false}}
name="MediumGameScreenOneAll"
component={MediumGameScreenOneAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="MediumGameScreenTwo"
component={MediumGameScreenTwo}
/>
<Stack.Screen
options={{headerShown: false}}
name="MediumGameScreenTwoAll"
component={MediumGameScreenTwoAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="MediumGameScreenThree"
component={MediumGameScreenThree}
/>
<Stack.Screen
options={{headerShown: false}}
name="MediumGameScreenThreeAll"
component={MediumGameScreenThreeAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="MediumGameScreenFour"
component={MediumGameScreenFour}
/>
<Stack.Screen
options={{headerShown: false}}
name="MediumGameScreenFourAll"
component={MediumGameScreenFourAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="MediumGameScreenFive"
component={MediumGameScreenFive}
/>
<Stack.Screen
options={{headerShown: false}}
name="MediumGameScreenFiveAll"
component={MediumGameScreenFiveAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="MediumGameScreenSix"
component={MediumGameScreenSix}
/>
<Stack.Screen
options={{headerShown: false}}
name="MediumGameScreenSixAll"
component={MediumGameScreenSixAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="AdvanceGameScreenOne"
component={AdvanceGameScreenOne}
/>
<Stack.Screen
options={{headerShown: false}}
name="AdvanceGameScreenOneAll"
component={AdvanceGameScreenOneAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="AdvanceGameScreenTwo"
component={AdvanceGameScreenTwo}
/>
<Stack.Screen
options={{headerShown: false}}
name="AdvanceGameScreenTwoAll"
component={AdvanceGameScreenTwoAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="AdvanceGameScreenThree"
component={AdvanceGameScreenThree}
/>
<Stack.Screen
options={{headerShown: false}}
name="AdvanceGameScreenThreeAll"
component={AdvanceGameScreenThreeAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="AdvanceGameScreenFour"
component={AdvanceGameScreenFour}
/>
<Stack.Screen
options={{headerShown: false}}
name="AdvanceGameScreenFourAll"
component={AdvanceGameScreenFourAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="AdvanceGameScreenFive"
component={AdvanceGameScreenFive}
/>
<Stack.Screen
options={{headerShown: false}}
name="AdvanceGameScreenFiveAll"
component={AdvanceGameScreenFiveAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="AdvanceGameScreenSix"
component={AdvanceGameScreenSix}
/>
<Stack.Screen
options={{headerShown: false}}
name="AdvanceGameScreenSixAll"
component={AdvanceGameScreenSixAll}
/>
<Stack.Screen <Stack.Screen
options={{headerShown: false}} options={{headerShown: false}}
name="PrimaryType" name="PrimaryType"
......
frontend/src/screen/memory/AdvanceLevelStart.js 0 → 100644
View file @ 65a11176
import React from 'react';
import {View,Text, StyleSheet, Button} from 'react-native';
const AdvanceLevelStart = ({navigation}) => {
return(
<View style={styles.screen}>
<Text>Advance Level Start</Text>
<Button title='Start' onPress={()=>{navigation.navigate('AdvanceGameScreenOne')}} />
</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 0 → 100644
View file @ 65a11176
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
View file @ 65a11176
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import { Center } from 'native-base'; import { Center } from 'native-base';
import React from 'react'; import React, {useLayoutEffect} from 'react';
import {View, Text, StyleSheet, FlatList, TouchableOpacity} from 'react-native'; import {View, Text, StyleSheet, FlatList, TouchableOpacity} from 'react-native';
import CategoryItem from '../../component/memory/CategoryItem'; import CategoryItem from '../../component/memory/CategoryItem';
import { CATEGORIES } from '../../memory/data/dummy-data'; 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 GameList = ({navigation}) => {
const renderItem = (itemData) =>{ const renderItem = (itemData) =>{
return( return(
...@@ -12,10 +15,27 @@ const GameList = ({navigation}) => { ...@@ -12,10 +15,27 @@ const GameList = ({navigation}) => {
id={itemData.item.id} id={itemData.item.id}
title={itemData.item.title} title={itemData.item.title}
image={itemData.item.url} 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( return(
<View style={styles.screen}> <View style={styles.screen}>
<FlatList <FlatList
......
frontend/src/screen/memory/MediumLevelStart.js 0 → 100644
View file @ 65a11176
import React from 'react';
import {Text, View, StyleSheet, Button} from 'react-native';
const MediumLevelStart = ({navigation}) => {
return(
<View style={styles.screen}>
<Text>Medium Level</Text>
<Button title='Start' onPress={()=>{navigation.navigate('MediumGameScreenOne')}}/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1
}
});
export default MediumLevelStart;
frontend/src/screen/memory/MemoryResult.js 0 → 100644
View file @ 65a11176
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
frontend/src/screen/memory/advance/AdvanceGameScreenFive.js 0 → 100755
View file @ 65a11176
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';
const AdvanceGameScreenFive = ({navigation}) => {
return(
<View style={styles.sreen}>
<Text></Text>
<View style={styles.imageContainer}>
<Image
source={require('../../../memory/images/elementry/5/el-fish1-main.jpg')}
style={styles.image}
/>
</View>
<CountDown
size={40}
until={Countdown.advance}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('AdvanceGameScreenFiveAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['S']}
timeLabels={{s: 'Seconds'}}
style={styles.counter}
/>
<Text style={styles.imageText}>Fish - මාළුවා</Text>
</View>
);
}
const styles = StyleSheet.create({
sreen: {
flex:1,
padding: 10,
alignItems: 'center',
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
overflow: 'hidden',
marginTop: 30,
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
image: {
width: '100%',
height: '100%'
},
imageText: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 30
},
counter: {
marginTop: 30
}
});
export default AdvanceGameScreenFive;
\ No newline at end of file
frontend/src/screen/memory/advance/AdvanceGameScreenFiveAll.js 0 → 100755
View file @ 65a11176
import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'
import { SCREEN5 } from '../../../memory/data/elementry-level';
let gameData = SCREEN5.sort((item)=>Math.random(item.id)-0.5);
const AdvanceGameScreenFiveAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN5.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch();
const [time, setTime] = useState(0);
const [timerOn, setTimeOn] = useState(true);
useEffect(()=>{
let interval = null;
if(timerOn){
interval = setInterval(()=>{
setTime(prevTime=> prevTime + 20)
},10)
}else{
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerOn]);
const renderImageItem = (itemData) => {
return(
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('AdvanceGameScreenSix')}}>
<Image style={styles.image} source={itemData.item.source}/>
</TouchableOpacity>
)
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: 'center',
},
imageItem: {
width: '48%',
height: 165,
margin: 5,
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8,
overflow: 'hidden'
},
imageContainer: {
flexDirection: 'row',
width: '100%'
},
image: {
width: '100%',
height: '100%'
}
});
export default AdvanceGameScreenFiveAll;
\ No newline at end of file
frontend/src/screen/memory/advance/AdvanceGameScreenFour.js 0 → 100755
View file @ 65a11176
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';
const AdvanceGameScreenFour = ({navigation}) => {
return(
<View style={styles.sreen}>
<Text></Text>
<View style={styles.imageContainer}>
<Image
source={require('../../../memory/images/elementry/4/el-car1-main.jpg')}
style={styles.image}
/>
</View>
<Text style={styles.imageText}>Car - කාරය</Text>
<CountDown
size={40}
until={Countdown.advance}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('AdvanceGameScreenFourAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['S']}
timeLabels={{s: 'Seconds'}}
style={styles.counter}
/>
</View>
);
}
const styles = StyleSheet.create({
sreen: {
flex:1,
padding: 10,
alignItems: 'center',
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
overflow: 'hidden',
marginTop: 30,
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
image: {
width: '100%',
height: '100%'
},
imageText: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 30
},
counter: {
marginTop: 30
}
});
export default AdvanceGameScreenFour;
\ No newline at end of file
frontend/src/screen/memory/advance/AdvanceGameScreenFourAll.js 0 → 100755
View file @ 65a11176
import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'
import { SCREEN4 } from '../../../memory/data/elementry-level';
let gameData = SCREEN4.sort((item)=>Math.random(item.id)-0.5);
const AdvanceGameScreenFourAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN4.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch();
const [time, setTime] = useState(0);
const [timerOn, setTimeOn] = useState(true);
useEffect(()=>{
let interval = null;
if(timerOn){
interval = setInterval(()=>{
setTime(prevTime=> prevTime + 20)
},10)
}else{
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerOn]);
const renderImageItem = (itemData) => {
return(
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('AdvanceGameScreenFive')}}>
<Image style={styles.image} source={itemData.item.source}/>
</TouchableOpacity>
)
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: 'center'
},
imageItem: {
width: '48%',
height: 165,
margin: 5,
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8,
overflow: 'hidden'
},
imageContainer: {
flexDirection: 'row',
width: '100%'
},
image: {
width: '100%',
height: '100%'
}
});
export default AdvanceGameScreenFourAll;
\ No newline at end of file
frontend/src/screen/memory/advance/AdvanceGameScreenOne.js 0 → 100755
View file @ 65a11176
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';
import Countdown from '../../../constants/Countdown';
const AdvanceGameScreenOne = ({navigation}) => {
// useEffect(()=>{
// const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
// return () => backHandler.remove()
// },[]);
const dispatch = useDispatch();
useEffect(()=>{
dispatch(memoryActions.setGameLevel(Levels.advance))
})
return(
<View style={styles.sreen}>
<Text></Text>
<View style={styles.imageContainer}>
<Image
source={require('../../../memory/images/elementry/1/elmain.jpeg')}
style={styles.image}
/>
</View>
<Text style={styles.imageText}>Pencil - පැන්සල</Text>
<CountDown
size={40}
until={Countdown.advance}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('AdvanceGameScreenOneAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['S']}
timeLabels={{s: 'Seconds'}}
style={styles.counter}
/>
</View>
);
}
const styles = StyleSheet.create({
sreen: {
flex:1,
padding: 10,
alignItems: 'center',
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
overflow: 'hidden',
marginTop: 30,
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
image: {
width: '100%',
height: '100%'
},
imageText: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 30
},
counter: {
marginTop: 30
}
});
export default AdvanceGameScreenOne;
\ No newline at end of file
frontend/src/screen/memory/advance/AdvanceGameScreenOneAll.js 0 → 100755
View file @ 65a11176
import React,{useEffect, useState} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import * as memoryActions from '../../../store/actions/memory';
import { SCREEN1 } from '../../../memory/data/elementry-level';
let gameData = SCREEN1.sort((item)=>Math.random(item.id)-0.5);
const AdvanceGameScreenOneAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN1.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch();
const [time, setTime] = useState(0);
const [timerOn, setTimeOn] = useState(true);
useEffect(()=>{
let interval = null;
if(timerOn){
interval = setInterval(()=>{
setTime(prevTime=> prevTime + 20)
},10)
}else{
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerOn]);
const renderImageItem = (itemData) => {
return(
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = [];navigation.navigate('AdvanceGameScreenTwo')}}>
<Image style={styles.image} source={itemData.item.source}/>
</TouchableOpacity>
)
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
},
imageItem: {
width: '48%',
height: 165,
margin: 5,
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8,
overflow: 'hidden'
},
imageContainer: {
flexDirection: 'row',
width: '100%'
},
image: {
width: '100%',
height: '100%'
}
});
export default AdvanceGameScreenOneAll;
\ No newline at end of file
frontend/src/screen/memory/advance/AdvanceGameScreenSix.js 0 → 100755
View file @ 65a11176
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';
const AdvanceGameScreenSix = ({navigation}) => {
return(
<View style={styles.sreen}>
<Text></Text>
<View style={styles.imageContainer}>
<Image
source={require('../../../memory/images/elementry/6/el-kite1-main.jpg')}
style={styles.image}
/>
</View>
<Text style={styles.imageText}>Pencil - පැන්සල</Text>
<CountDown
size={40}
until={Countdown.advance}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('AdvanceGameScreenSixAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['S']}
timeLabels={{s: 'Seconds'}}
style={styles.counter}
/>
</View>
);
}
const styles = StyleSheet.create({
sreen: {
flex:1,
padding: 10,
alignItems: 'center',
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
overflow: 'hidden',
marginTop: 30,
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
image: {
width: '100%',
height: '100%'
},
imageText: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 30
},
counter: {
marginTop: 30
}
});
export default AdvanceGameScreenSix;
\ No newline at end of file
frontend/src/screen/memory/advance/AdvanceGameScreenSixAll.js 0 → 100755
View file @ 65a11176
import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory';
import { SCREEN6 } from '../../../memory/data/elementry-level';
let gameData = SCREEN6.sort((item)=>Math.random(item.id)-0.5);
const AdvanceGameScreenSixAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN6.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch();
const [time, setTime] = useState(0);
const [timerOn, setTimeOn] = useState(true);
useEffect(()=>{
let interval = null;
if(timerOn){
interval = setInterval(()=>{
setTime(prevTime=> prevTime + 20)
},10)
}else{
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerOn]);
const renderImageItem = (itemData) => {
return(
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameOverScreen')}}>
<Image style={styles.image} source={itemData.item.source}/>
</TouchableOpacity>
)
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: 'center'
},
imageItem: {
width: '48%',
height: 165,
margin: 5,
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8,
overflow: 'hidden'
},
imageContainer: {
flexDirection: 'row',
width: '100%'
},
image: {
width: '100%',
height: '100%'
}
});
export default AdvanceGameScreenSixAll;
\ No newline at end of file
frontend/src/screen/memory/advance/AdvanceGameScreenThree.js 0 → 100755
View file @ 65a11176
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';
const AdvanceGameScreenThree = ({navigation}) => {
return(
<View style={styles.sreen}>
<Text></Text>
<View style={styles.imageContainer}>
<Image
source={require('../../../memory/images/elementry/3/el-flo1-main.jpg')}
style={styles.image}
/>
</View>
<Text style={styles.imageText}>Flower - මල</Text>
<CountDown
size={40}
until={Countdown.advance}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('AdvanceGameScreenThreeAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['S']}
timeLabels={{s: 'Seconds'}}
style={styles.counter}
/>
</View>
);
}
const styles = StyleSheet.create({
sreen: {
flex:1,
padding: 10,
alignItems: 'center',
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
overflow: 'hidden',
marginTop: 30,
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
image: {
width: '100%',
height: '100%'
},
imageText: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 30
},
counter: {
marginTop: 30
}
});
export default AdvanceGameScreenThree;
\ No newline at end of file
frontend/src/screen/memory/advance/AdvanceGameScreenThreeAll.js 0 → 100755
View file @ 65a11176
import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory';
import { SCREEN3 } from '../../../memory/data/elementry-level';
let gameData = SCREEN3.sort((item)=>Math.random(item.id)-0.5);
const AdvanceGameScreenThreeAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN3.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch();
const [time, setTime] = useState(0);
const [timerOn, setTimeOn] = useState(true);
useEffect(()=>{
let interval = null;
if(timerOn){
interval = setInterval(()=>{
setTime(prevTime=> prevTime + 20)
},10)
}else{
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerOn]);
const renderImageItem = (itemData) => {
return(
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('AdvanceGameScreenFour')}}>
<Image style={styles.image} source={itemData.item.source}/>
</TouchableOpacity>
)
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: 'center'
},
imageItem: {
width: '48%',
height: 165,
margin: 5,
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8,
overflow: 'hidden'
},
imageContainer: {
flexDirection: 'row',
width: '100%'
},
image: {
width: '100%',
height: '100%'
}
});
export default AdvanceGameScreenThreeAll;
\ No newline at end of file
frontend/src/screen/memory/advance/AdvanceGameScreenTwo.js 0 → 100755
View file @ 65a11176
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';
const AdvanceGameScreenTwo = ({navigation}) => {
return(
<View style={styles.sreen}>
<Text></Text>
<View style={styles.imageContainer}>
<Image
source={require('../../../memory/images/elementry/2/el-ball1-main.jpg')}
style={styles.image}
/>
</View>
<Text style={styles.imageText}>Ball - බෝලය</Text>
<CountDown
size={40}
until={Countdown.advance}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('AdvanceGameScreenTwoAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['S']}
timeLabels={{s: 'Seconds'}}
style={styles.counter}
/>
</View>
);
}
const styles = StyleSheet.create({
sreen: {
flex:1,
padding: 10,
alignItems: 'center',
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
overflow: 'hidden',
marginTop: 30,
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
image: {
width: '100%',
height: '100%'
},
imageText: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 30
},
counter: {
marginTop: 30
}
});
export default AdvanceGameScreenTwo;
\ No newline at end of file
frontend/src/screen/memory/advance/AdvanceGameScreenTwoAll.js 0 → 100755
View file @ 65a11176
import { NavigationContainer } from '@react-navigation/native';
import React, {useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity,FlatList} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'
import { SCREEN2 } from '../../../memory/data/elementry-level';
let gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
const AdvanceGameScreenTwoAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch();
const [time, setTime] = useState(0);
const [timerOn, setTimeOn] = useState(true);
useEffect(()=>{
let interval = null;
if(timerOn){
interval = setInterval(()=>{
setTime(prevTime=> prevTime + 20)
},10)
}else{
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerOn]);
const renderImageItem = (itemData) => {
return(
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('AdvanceGameScreenThree')}}>
<Image style={styles.image} source={itemData.item.source}/>
</TouchableOpacity>
)
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: 'center',
},
imageItem: {
width: '48%',
height: 165,
margin: 5,
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8,
overflow: 'hidden'
},
imageContainer: {
flexDirection: 'row',
width: '100%'
},
image: {
width: '100%',
height: '100%'
}
});
export default AdvanceGameScreenTwoAll;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenFive.js 0 → 100755
View file @ 65a11176
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';
const MediumGameScreenFive = ({navigation}) => {
return(
<View style={styles.sreen}>
<Text></Text>
<View style={styles.imageContainer}>
<Image
source={require('../../../memory/images/medium/5/an-main.jpg')}
style={styles.image}
/>
</View>
<CountDown
size={40}
until={Countdown.medium}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('MediumGameScreenFiveAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['S']}
timeLabels={{s: 'Seconds'}}
style={styles.counter}
/>
<Text style={styles.imageText}>Fish - මාළුවා</Text>
</View>
);
}
const styles = StyleSheet.create({
sreen: {
flex:1,
padding: 10,
alignItems: 'center',
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
overflow: 'hidden',
marginTop: 30,
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
image: {
width: '100%',
height: '100%'
},
imageText: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 30
},
counter: {
marginTop: 30
}
});
export default MediumGameScreenFive;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenFiveAll.js 0 → 100755
View file @ 65a11176
import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'
import { SCREEN5 } from '../../../memory/data/medium-level';
let gameData = SCREEN5.sort((item)=>Math.random(item.id)-0.5);
const MediumGameScreenFiveAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN5.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch();
const [time, setTime] = useState(0);
const [timerOn, setTimeOn] = useState(true);
useEffect(()=>{
let interval = null;
if(timerOn){
interval = setInterval(()=>{
setTime(prevTime=> prevTime + 20)
},10)
}else{
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerOn]);
const renderImageItem = (itemData) => {
return(
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('MediumGameScreenSix')}}>
<Image style={styles.image} source={itemData.item.source}/>
</TouchableOpacity>
)
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: 'center',
},
imageItem: {
width: '48%',
height: 165,
margin: 5,
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8,
overflow: 'hidden'
},
imageContainer: {
flexDirection: 'row',
width: '100%'
},
image: {
width: '100%',
height: '100%'
}
});
export default MediumGameScreenFiveAll;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenFour.js 0 → 100755
View file @ 65a11176
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';
const MediumGameScreenFour = ({navigation}) => {
return(
<View style={styles.sreen}>
<Text></Text>
<View style={styles.imageContainer}>
<Image
source={require('../../../memory/images/medium/4/bal-main.jpg')}
style={styles.image}
/>
</View>
<Text style={styles.imageText}>Car - කාරය</Text>
<CountDown
size={40}
until={Countdown.medium}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('MediumGameScreenFourAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['S']}
timeLabels={{s: 'Seconds'}}
style={styles.counter}
/>
</View>
);
}
const styles = StyleSheet.create({
sreen: {
flex:1,
padding: 10,
alignItems: 'center',
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
overflow: 'hidden',
marginTop: 30,
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
image: {
width: '100%',
height: '100%'
},
imageText: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 30
},
counter: {
marginTop: 30
}
});
export default MediumGameScreenFour;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenFourAll.js 0 → 100755
View file @ 65a11176
import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'
import { SCREEN4 } from '../../../memory/data/medium-level';
let gameData = SCREEN4.sort((item)=>Math.random(item.id)-0.5);
const MediumGameScreenFourAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN4.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch();
const [time, setTime] = useState(0);
const [timerOn, setTimeOn] = useState(true);
useEffect(()=>{
let interval = null;
if(timerOn){
interval = setInterval(()=>{
setTime(prevTime=> prevTime + 20)
},10)
}else{
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerOn]);
const renderImageItem = (itemData) => {
return(
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('MediumGameScreenFive')}}>
<Image style={styles.image} source={itemData.item.source}/>
</TouchableOpacity>
)
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: 'center'
},
imageItem: {
width: '48%',
height: 165,
margin: 5,
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8,
overflow: 'hidden'
},
imageContainer: {
flexDirection: 'row',
width: '100%'
},
image: {
width: '100%',
height: '100%'
}
});
export default MediumGameScreenFourAll;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenOne.js 0 → 100755
View file @ 65a11176
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';
import Countdown from '../../../constants/Countdown';
const MediumGameScreenOne = ({navigation}) => {
// useEffect(()=>{
// const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
// return () => backHandler.remove()
// },[]);
const dispatch = useDispatch();
useEffect(()=>{
dispatch(memoryActions.setGameLevel(Levels.medium))
})
return(
<View style={styles.sreen}>
<Text></Text>
<View style={styles.imageContainer}>
<Image
source={require('../../../memory/images/medium/1/bird-main.jpg')}
style={styles.image}
/>
</View>
<Text style={styles.imageText}>Pencil - පැන්සල</Text>
<CountDown
size={40}
until={Countdown.medium}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('MediumGameScreenOneAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['S']}
timeLabels={{s: 'Seconds'}}
style={styles.counter}
/>
</View>
);
}
const styles = StyleSheet.create({
sreen: {
flex:1,
padding: 10,
alignItems: 'center',
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
overflow: 'hidden',
marginTop: 30,
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
image: {
width: '100%',
height: '100%'
},
imageText: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 30
},
counter: {
marginTop: 30
}
});
export default MediumGameScreenOne;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenOneAll.js 0 → 100755
View file @ 65a11176
import React,{useEffect, useState} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import * as memoryActions from '../../../store/actions/memory';
import { SCREEN1 } from '../../../memory/data/medium-level';
let gameData = SCREEN1.sort((item)=>Math.random(item.id)-0.5);
const MediumGameScreenOneAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN1.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch();
const [time, setTime] = useState(0);
const [timerOn, setTimeOn] = useState(true);
useEffect(()=>{
let interval = null;
if(timerOn){
interval = setInterval(()=>{
setTime(prevTime=> prevTime + 20)
},10)
}else{
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerOn]);
const renderImageItem = (itemData) => {
return(
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = [];navigation.navigate('MediumGameScreenTwo')}}>
<Image style={styles.image} source={itemData.item.source}/>
</TouchableOpacity>
)
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
},
imageItem: {
width: '48%',
height: 165,
margin: 5,
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8,
overflow: 'hidden'
},
imageContainer: {
flexDirection: 'row',
width: '100%'
},
image: {
width: '100%',
height: '100%'
}
});
export default MediumGameScreenOneAll;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenSix.js 0 → 100755
View file @ 65a11176
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';
const MediumGameScreenSix = ({navigation}) => {
return(
<View style={styles.sreen}>
<Text></Text>
<View style={styles.imageContainer}>
<Image
source={require('../../../memory/images/medium/6/arrow-main.jpg')}
style={styles.image}
/>
</View>
<Text style={styles.imageText}>Pencil - පැන්සල</Text>
<CountDown
size={40}
until={Countdown.medium}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('MediumGameScreenSixAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['S']}
timeLabels={{s: 'Seconds'}}
style={styles.counter}
/>
</View>
);
}
const styles = StyleSheet.create({
sreen: {
flex:1,
padding: 10,
alignItems: 'center',
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
overflow: 'hidden',
marginTop: 30,
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
image: {
width: '100%',
height: '100%'
},
imageText: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 30
},
counter: {
marginTop: 30
}
});
export default MediumGameScreenSix;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenSixAll.js 0 → 100755
View file @ 65a11176
import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory';
import { SCREEN6 } from '../../../memory/data/medium-level';
let gameData = SCREEN6.sort((item)=>Math.random(item.id)-0.5);
const MediumGameScreenSixAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN6.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch();
const [time, setTime] = useState(0);
const [timerOn, setTimeOn] = useState(true);
useEffect(()=>{
let interval = null;
if(timerOn){
interval = setInterval(()=>{
setTime(prevTime=> prevTime + 20)
},10)
}else{
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerOn]);
const renderImageItem = (itemData) => {
return(
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameOverScreen')}}>
<Image style={styles.image} source={itemData.item.source}/>
</TouchableOpacity>
)
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: 'center'
},
imageItem: {
width: '48%',
height: 165,
margin: 5,
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8,
overflow: 'hidden'
},
imageContainer: {
flexDirection: 'row',
width: '100%'
},
image: {
width: '100%',
height: '100%'
}
});
export default MediumGameScreenSixAll;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenThree.js 0 → 100755
View file @ 65a11176
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';
const MediumGameScreenThree = ({navigation}) => {
return(
<View style={styles.sreen}>
<Text></Text>
<View style={styles.imageContainer}>
<Image
source={require('../../../memory/images/medium/3/sh-main.jpg')}
style={styles.image}
/>
</View>
<Text style={styles.imageText}>Flower - මල</Text>
<CountDown
size={40}
until={Countdown.medium}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('MediumGameScreenThreeAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['S']}
timeLabels={{s: 'Seconds'}}
style={styles.counter}
/>
</View>
);
}
const styles = StyleSheet.create({
sreen: {
flex:1,
padding: 10,
alignItems: 'center',
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
overflow: 'hidden',
marginTop: 30,
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
image: {
width: '100%',
height: '100%'
},
imageText: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 30
},
counter: {
marginTop: 30
}
});
export default MediumGameScreenThree;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenThreeAll.js 0 → 100755
View file @ 65a11176
import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory';
import { SCREEN3 } from '../../../memory/data/medium-level';
let gameData = SCREEN3.sort((item)=>Math.random(item.id)-0.5);
const MediumGameScreenThreeAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN3.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch();
const [time, setTime] = useState(0);
const [timerOn, setTimeOn] = useState(true);
useEffect(()=>{
let interval = null;
if(timerOn){
interval = setInterval(()=>{
setTime(prevTime=> prevTime + 20)
},10)
}else{
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerOn]);
const renderImageItem = (itemData) => {
return(
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('MediumGameScreenFour')}}>
<Image style={styles.image} source={itemData.item.source}/>
</TouchableOpacity>
)
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: 'center'
},
imageItem: {
width: '48%',
height: 165,
margin: 5,
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8,
overflow: 'hidden'
},
imageContainer: {
flexDirection: 'row',
width: '100%'
},
image: {
width: '100%',
height: '100%'
}
});
export default MediumGameScreenThreeAll;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenTwo.js 0 → 100755
View file @ 65a11176
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';
const MediumGameScreenTwo = ({navigation}) => {
return(
<View style={styles.sreen}>
<Text></Text>
<View style={styles.imageContainer}>
<Image
source={require('../../../memory/images/medium/2/bike-main.jpg')}
style={styles.image}
/>
</View>
<Text style={styles.imageText}>Ball - බෝලය</Text>
<CountDown
size={40}
until={Countdown.medium}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('MediumGameScreenTwoAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['S']}
timeLabels={{s: 'Seconds'}}
style={styles.counter}
/>
</View>
);
}
const styles = StyleSheet.create({
sreen: {
flex:1,
padding: 10,
alignItems: 'center',
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
overflow: 'hidden',
marginTop: 30,
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
image: {
width: '100%',
height: '100%'
},
imageText: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 30
},
counter: {
marginTop: 30
}
});
export default MediumGameScreenTwo;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenTwoAll.js 0 → 100755
View file @ 65a11176
import { NavigationContainer } from '@react-navigation/native';
import React, {useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity,FlatList} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'
import { SCREEN2 } from '../../../memory/data/medium-level';
let gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
const MediumGameScreenTwoAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch();
const [time, setTime] = useState(0);
const [timerOn, setTimeOn] = useState(true);
useEffect(()=>{
let interval = null;
if(timerOn){
interval = setInterval(()=>{
setTime(prevTime=> prevTime + 20)
},10)
}else{
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerOn]);
const renderImageItem = (itemData) => {
return(
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('MediumGameScreenThree')}}>
<Image style={styles.image} source={itemData.item.source}/>
</TouchableOpacity>
)
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: 'center',
},
imageItem: {
width: '48%',
height: 165,
margin: 5,
borderWidth: 1,
borderColor: 'black',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8,
overflow: 'hidden'
},
imageContainer: {
flexDirection: 'row',
width: '100%'
},
image: {
width: '100%',
height: '100%'
}
});
export default MediumGameScreenTwoAll;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment