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
Expand all 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():
#run the flask file
if __name__ == "__main__":
# app.run(debug=True)
app.run(host='192.168.8.101')
# app.run(host='0.0.0.0', port=5000, debug=True)
# app.run(host='192.168.8.101')
app.run(host='0.0.0.0', port=5000)
frontend/package-lock.json
View file @ 65a11176
This diff is collapsed.
frontend/package.json
View file @ 65a11176
......@@ -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 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 {
elementry: 5,
average: 3,
hard: 3
elementry: 7,
medium: 5,
advance: 2
}
\ No newline at end of file
frontend/src/constants/Levels.js
View file @ 65a11176
export default {
elementry: 'elementry_level',
level2: 'level_two',
level3: 'level_three'
medium: 'medium_level',
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';
import GameScreenFiveAll from '../screen/memory/elementry/GameScreenFiveAll';
import GameScreenSix from '../screen/memory/elementry/GameScreenSix';
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 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 +192,7 @@ const AppRouter = () => {
options={{
title: 'Memory Games',
headerTintColor: 'white',
headerStyle: {backgroundColor: Colors.primary},
headerStyle: {backgroundColor: Colors.primary}
}}
/>
<Stack.Screen
......@@ -247,6 +275,166 @@ 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="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
options={{headerShown: false}}
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 { 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 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