Skip to content

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

medium level

parent 2637097d
Hide whitespace changes
Inline Side-by-side
Showing with 2023 additions and 7 deletions
frontend/src/constants/Countdown.js
View file @ 0340c9e8
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 @ 0340c9e8
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/router/router.js
View file @ 0340c9e8
......@@ -36,6 +36,18 @@ 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 GameOverScreen from '../screen/memory/GameOverScreen';
import MemoryResult from '../screen/memory/MemoryResult';
import GameLevel from '../screen/memory/GameLevel';
......@@ -271,6 +283,66 @@ const AppRouter = () => {
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}}
......
frontend/src/screen/memory/MediumLevelStart.js
View file @ 0340c9e8
import React from 'react';
import {Text, View, StyleSheet, Button} from 'react-native';
const MediumLevelStart = () => {
const MediumLevelStart = ({navigation}) => {
return(
<View style={styles.screen}>
<Text>Medium Level</Text>
<Button title='Start' onPress={()=>{}}/>
<Button title='Start' onPress={()=>{navigation.navigate('MediumGameScreenOne')}}/>
</View>
);
}
......
frontend/src/screen/memory/advance/GameScreenFive.js 0 → 100755
View file @ 0340c9e8
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 GameScreenFive = ({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.elementry}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('GameScreenFiveAll')}
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 GameScreenFive;
\ No newline at end of file
frontend/src/screen/memory/advance/GameScreenFiveAll.js 0 → 100755
View file @ 0340c9e8
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 GameScreenFiveAll = ({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('GameScreenSix')}}>
<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 GameScreenFiveAll;
\ No newline at end of file
frontend/src/screen/memory/advance/GameScreenFour.js 0 → 100755
View file @ 0340c9e8
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 GameScreenFour = ({navigation}) => {
useEffect(()=>{
setTimeout( () => {
navigation.navigate('GameScreenFourAll');
}, 5000 );
});
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.elementry}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('GameScreenFourAll')}
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 GameScreenFour;
\ No newline at end of file
frontend/src/screen/memory/advance/GameScreenFourAll.js 0 → 100755
View file @ 0340c9e8
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 GameScreenFourAll = ({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('GameScreenFive')}}>
<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 GameScreenFourAll;
\ No newline at end of file
frontend/src/screen/memory/advance/GameScreenOne.js 0 → 100755
View file @ 0340c9e8
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 GameScreenOne = ({navigation}) => {
// useEffect(()=>{
// const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
// return () => backHandler.remove()
// },[]);
const dispatch = useDispatch();
useEffect(()=>{
dispatch(memoryActions.setGameLevel(Levels.elementry))
})
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.elementry}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('GameScreenOneAll')}
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 GameScreenOne;
\ No newline at end of file
frontend/src/screen/memory/advance/GameScreenOneAll.js 0 → 100755
View file @ 0340c9e8
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 GameScreenOneAll = ({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('GameScreenTwo')}}>
<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 GameScreenOneAll;
\ No newline at end of file
frontend/src/screen/memory/advance/GameScreenSix.js 0 → 100755
View file @ 0340c9e8
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 GameScreenSix = ({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.elementry}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('GameScreenSixAll')}
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 GameScreenSix;
\ No newline at end of file
frontend/src/screen/memory/advance/GameScreenSixAll.js 0 → 100755
View file @ 0340c9e8
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 GameScreenSixAll = ({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 GameScreenSixAll;
\ No newline at end of file
frontend/src/screen/memory/advance/GameScreenThree.js 0 → 100755
View file @ 0340c9e8
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 GameScreenThree = ({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.elementry}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('GameScreenThreeAll')}
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 GameScreenThree;
\ No newline at end of file
frontend/src/screen/memory/advance/GameScreenThreeAll.js 0 → 100755
View file @ 0340c9e8
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 GameScreenThreeAll = ({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('GameScreenFour')}}>
<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 GameScreenThreeAll;
\ No newline at end of file
frontend/src/screen/memory/advance/GameScreenTwo.js 0 → 100755
View file @ 0340c9e8
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 GameScreenTwo = ({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.elementry}
// onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('GameScreenTwoAll')}
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 GameScreenTwo;
\ No newline at end of file
frontend/src/screen/memory/advance/GameScreenTwoAll.js 0 → 100755
View file @ 0340c9e8
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 GameScreenTwoAll = ({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('GameScreenThree')}}>
<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 GameScreenTwoAll;
\ No newline at end of file
frontend/src/screen/memory/medium/MediumGameScreenFive.js 0 → 100755
View file @ 0340c9e8
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/elementry/5/el-fish1-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 @ 0340c9e8
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 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 @ 0340c9e8
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/elementry/4/el-car1-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 @ 0340c9e8
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 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 @ 0340c9e8
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/elementry/1/elmain.jpeg')}
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 @ 0340c9e8
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 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 @ 0340c9e8
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/elementry/6/el-kite1-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 @ 0340c9e8
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 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 @ 0340c9e8
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/elementry/3/el-flo1-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 @ 0340c9e8
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 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 @ 0340c9e8
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/elementry/2/el-ball1-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 @ 0340c9e8
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 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