Skip to content

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

It18256888

parent f183a4f7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4151 additions and 16433 deletions
backend/IT18256888/.~lock.Dyslexia.csv# 0 → 100644
View file @ ff0e7c1c
,teran,teran-HP-Notebook,06.02.2022 16:36,file:///home/teran/.config/libreoffice/4;
\ No newline at end of file
backend/IT18256888/Dyslexic_SM_FFNN.ipynb 0 → 100644
View file @ ff0e7c1c
This source diff could not be displayed because it is too large. You can view the blob instead.
backend/IT18256888/app.py
View file @ ff0e7c1c
......@@ -46,6 +46,11 @@ def get_level():
test_data=[Q1,Q2,Q3,Q4,Q5,Q6,TD]
print(test_data)
return "terra"
model = load_dyslexia_model()
result=model.predict([test_data])
result=scaler_y.inverse_transform(result)[0][0]
results=[{"level":float(result)}]
return (jsonify(results=results))
app.run(host='0.0.0.0',port=5000)
backend/IT18256888/model-569.model/keras_metadata.pb 0 → 100644
View file @ ff0e7c1c
This diff is collapsed.
frontend/App.js
View file @ ff0e7c1c
......@@ -16,13 +16,26 @@ LogBox.ignoreAllLogs(); //Ignore all log notifications
// import Home from "./src/screen/Home";
// import Login from "./src/screen/auth/Login"
// import Register from "./src/screen/auth/Register"
import {createStore, combineReducers} from 'redux';
import {Provider} from 'react-redux';
import memoryReducer from './src/store/reducers/memory';
import timeReducer from './src/store/reducers/memory'
import AppRouter from "./src/router/router"
const rootReducer = combineReducers({
memory: memoryReducer,
time: timeReducer
});
const store = createStore(rootReducer);
function App() {
return (
<AppRouter/>
<Provider store={store}>
<AppRouter/>
</Provider>
);
}
......
frontend/package-lock.json
View file @ ff0e7c1c
This diff is collapsed.
frontend/package.json
View file @ ff0e7c1c
......@@ -10,6 +10,7 @@
"lint": "eslint ."
},
"dependencies": {
"@react-native-community/netinfo": "^7.1.7",
"@react-navigation/drawer": "^6.1.8",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
......@@ -18,6 +19,7 @@
"react": "17.0.2",
"react-native": "0.66.2",
"react-native-audio-record": "^0.2.2",
"react-native-countdown-component": "^2.7.1",
"react-native-elements": "^3.4.2",
"react-native-fontawesome": "^7.0.0",
"react-native-gesture-handler": "^1.10.3",
......@@ -26,8 +28,10 @@
"react-native-reanimated": "^2.2.4",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.9.0",
"react-native-table-component": "^1.2.2",
"react-native-vector-icons": "^9.0.0"
"react-native-table-component": "^1.2.1",
"react-native-vector-icons": "^9.0.0",
"react-redux": "^7.2.6",
"redux": "^4.1.2"
},
"devDependencies": {
"@babel/core": "^7.12.9",
......
frontend/src/component/memory/CategoryItem.js 0 → 100644
View file @ ff0e7c1c
import React from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
ImageBackground,
TouchableNativeFeedback,
Platform
} from 'react-native';
const CategoryItem = (props) => {
return(
<View style={styles.gameItem}>
<TouchableOpacity onPress={props.onSelectGame}>
<View>
<View style={{ ...styles.gameItemRow, ...styles.gameItemHeader }}>
<ImageBackground
style={styles.bgImage}
source={{ uri: props.image }}
>
<View style={styles.titleContainer}>
<Text style={styles.title} numberOfLines={1}>{props.title}</Text>
</View>
</ImageBackground>
</View>
</View>
<View style={{ ...styles.gameItemRow, ...styles.gameItemDetails }}>
<Text>Game {props.id}</Text>
<Text>Click here to play the Game</Text>
</View>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
gameItem : {
height: 200,
width: '100%',
backgroundColor: '#ccc',
marginVertical: 10,
borderRadius: 10,
overflow: 'hidden'
},
gameItemRow: {
flexDirection: 'row'
},
gameItemHeader: {
height: '90%'
},
gameItemDetails: {
height: '10%',
paddingHorizontal: 10,
justifyContent: 'space-between',
alignItems: 'center'
},
bgImage: {
height: '100%',
width: '100%',
justifyContent: 'flex-end'
},
title: {
color: 'white',
fontFamily: 'open-sans-bold',
fontSize: 18,
textAlign: 'center',
},
titleContainer: {
padding: 10,
backgroundColor: 'rgba(0,0,0,0.5)'
}
});
export default CategoryItem;
\ No newline at end of file
frontend/src/component/memory/Header.js 0 → 100644
View file @ ff0e7c1c
import React from 'react';
import {View, Text, StyleSheet, StatusBar, SafeAreaView} from 'react-native';
import Colors from '../../constants/Colors';
const Header = (props) => {
return (
<View style={StyleSheet.header}>
<Text style={styles.headerTitle}>Show Time</Text>
</View>
);
}
const styles = StyleSheet.create({
header: {
width: '100%',
height: 90,
paddingTop: 36,
backgroundColor: Colors.primary,
justifyContent: 'center',
alignItems: 'center'
},
headerTitle: {
color: 'white',
fontSize: 18
}
});
export default Header;
frontend/src/component/memory/TimeTracker.js 0 → 100644
View file @ ff0e7c1c
import React from 'react';
import {Text, View} from 'react-native';
const TimeTracker = () => {
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]);
}
export default TimeTracker;
\ No newline at end of file
frontend/src/constants/Colors.js 0 → 100644
View file @ ff0e7c1c
export default {
primary: '#f7287b',
secondary: '#c717fc'
}
\ No newline at end of file
frontend/src/memory/data/dummy-data.js 0 → 100644
View file @ ff0e7c1c
import Category from "../models/category";
export const CATEGORIES = [
new Category('1', 'Memo', 'https://cdn.pixabay.com/photo/2014/09/21/21/31/flowers-455591_960_720.jpg'),
new Category('2', 'Inorder', 'https://cdn.pixabay.com/photo/2019/02/22/19/03/numbers-4014181_960_720.jpg'),
new Category('3', 'Shapes', 'https://cdn.pixabay.com/photo/2018/08/22/12/38/color-3623523_960_720.jpg'),
new Category('4', 'Memo', 'https://cdn.pixabay.com/photo/2014/09/21/21/31/flowers-455591_960_720.jpg'),
]
\ No newline at end of file
frontend/src/memory/models/category.js 0 → 100644
View file @ ff0e7c1c
class Category{
constructor(id, title, url){
this.id = id,
this.title = title,
this.url = url
}
}
export default Category;
\ No newline at end of file
frontend/src/router/router.js
View file @ ff0e7c1c
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Colors from '../constants/Colors'
import Home from '../screen/Home';
import Home from '../screen/home';
import Start from '../screen/Start';
import Register from '../screen/auth/Register';
import Login from '../screen/auth/Login';
import Splash from '../screen/splash/Splash';
import Splash from '../screen/splash/splash';
import Color from '../screen/Color';
import Blue from '../screen/activity/Blue';
import Read from '../screen/Read';
......@@ -15,6 +16,21 @@ import ReadActivity2 from '../screen/activity/readActivity2'
import ColorResult from '../screen/result/ColorResult';;
import PrimaryType from '../screen/activity/PrimaryType'
import SecondaryType from '../screen/activity/SecondaryType'
import GameList from '../screen/memory/GameList';
import StartGameScreen from '../screen/memory/StartGameScreen'
import GameScreenOne from '../screen/memory/elementry/GameScreenOne';
import GameScreenOneAll from '../screen/memory/elementry/GameScreenOneAll';
import GameScreenTwo from '../screen/memory/elementry/GameScreenTwo';
import GameScreenTwoAll from '../screen/memory/elementry/GameScreenTwoAll';
import GameScreenThree from '../screen/memory/elementry/GameScreenThree';
import GameScreenThreeAll from '../screen/memory/elementry/GameScreenThreeAll';
import GameScreenFour from '../screen/memory/elementry/GameScreenFour';
import GameScreenFourAll from '../screen/memory/elementry/GameScreenFourAll'
import 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 GameOverScreen from '../screen/memory/GameOverScreen';
const Stack = createNativeStackNavigator();
......@@ -77,6 +93,95 @@ const AppRouter = () => {
name="ColorResult"
component={ColorResult}
/>
<Stack.Screen
name="GameList"
component={GameList}
options={{
title: 'Memory Games',
headerTintColor: 'white',
headerStyle: { backgroundColor: Colors.primary },
}}
/>
<Stack.Screen
name="StartGameScreen"
component={StartGameScreen}
options={{
headerShown: true,
title: 'Game Start',
headerTintColor: 'white',
headerStyle: { backgroundColor: Colors.primary },
}}
/>
<Stack.Screen
options={{headerShown: false}}
name="GameScreenOne"
component={GameScreenOne}
/>
<Stack.Screen
options={{headerShown: false}}
name="GameScreenOneAll"
component={GameScreenOneAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="GameScreenTwo"
component={GameScreenTwo}
/>
<Stack.Screen
options={{headerShown: false}}
name="GameScreenTwoAll"
component={GameScreenTwoAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="GameScreenThree"
component={GameScreenThree}
/>
<Stack.Screen
options={{headerShown: false}}
name="GameScreenThreeAll"
component={GameScreenThreeAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="GameScreenFour"
component={GameScreenFour}
/>
<Stack.Screen
options={{headerShown: false}}
name="GameScreenFourAll"
component={GameScreenFourAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="GameScreenFive"
component={GameScreenFive}
/>
<Stack.Screen
options={{headerShown: false}}
name="GameScreenFiveAll"
component={GameScreenFiveAll}
/>
<Stack.Screen
options={{headerShown: false}}
name="GameScreenSix"
component={GameScreenSix}
/>
<Stack.Screen
options={{headerShown: false}}
name="GameScreenSixAll"
component={GameScreenSixAll}
/>
<Stack.Screen
name="GameOverScreen"
component={GameOverScreen}
options={{
headerShown: true ,
title: 'Game Over',
headerTintColor: 'white',
headerStyle: { backgroundColor: Colors.primary },
}}
/>
<Stack.Screen
options={{headerShown: false}}
name="PrimaryType"
......
frontend/src/screen/Start.js
View file @ ff0e7c1c
......@@ -4,7 +4,7 @@ import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator, DrawerItem } from "@react-navigation/drawer";
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Home from "./Home";
import Home from "./home";
import profile from "./profile";
import report from "./report";
......
frontend/src/screen/home.js
View file @ ff0e7c1c
......@@ -42,38 +42,46 @@ export default function Home({ navigation }){
style={styles.image}
source={require('../assets/color/background.png')}
resizeMode="contain"></Image>
<ImageButton path="Progress" title="Progress Check" />
<ImageButton path="GameList" title="Memory Activities" />
</View>
<View style={styles.imageView}>
<Image
style={styles.image}
source={require('../assets/color/background.png')}
resizeMode="contain"></Image>
<ImageButton path="Progress" title="Check" />
<ImageButton path="Progress" title="Progress Check" />
</View>
{/* <View style={styles.imageView}>
<Image
style={styles.image}
source={require('../assets/color/background.png')}
resizeMode="contain"></Image>
<ImageButton path="Progress" title="Check" />
</View> */}
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
imageContainer: {
flexDirection: 'row',
marginTop: 70,
},
imageView: {
width: 180,
height: 300,
// borderWidth:1,
// borderColor: "#000",
marginHorizontal: 15,
borderRadius: 50,
},
image: {
width: '100%',
height: '100%',
borderRadius: 50,
},
});
\ No newline at end of file
imageContainer:{
flexDirection: "row",
marginTop: 70,
},
imageView: {
width: 180,
height: 300,
// borderWidth:1,
// borderColor: "#000",
marginHorizontal: 15,
borderRadius: 50
},
image: {
width: "100%",
height: "100%",
borderRadius: 50
},
})
frontend/src/screen/memory/GameList.js 0 → 100644
View file @ ff0e7c1c
import { NavigationContainer } from '@react-navigation/native';
import { Center } from 'native-base';
import React from 'react';
import {View, Text, StyleSheet, FlatList, TouchableOpacity} from 'react-native';
import CategoryItem from '../../component/memory/CategoryItem';
import { CATEGORIES } from '../../memory/data/dummy-data';
const GameList = ({navigation}) => {
const renderItem = (itemData) =>{
return(
<CategoryItem
id={itemData.item.id}
title={itemData.item.title}
image={itemData.item.url}
onSelectGame={()=>{navigation.navigate("StartGameScreen")}}
/>
);
}
return(
<View style={styles.screen}>
<FlatList
data={CATEGORIES}
renderItem={renderItem}
keyExtractor={(item,index) => item.id}
style={{ width: '100%' }}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: '#faf1d0'
},
gameItem: {
flex: 1,
margin: 15,
height: 200,
backgroundColor: 'tomato',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width:0, height:2},
shadowRadius: 10,
elevation: 8
},
gameTitle:{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
fontSize: 18
},
gameText:{
fontSize: 18,
fontWeight: 'bold'
}
});
export default GameList;
\ No newline at end of file
frontend/src/screen/memory/GameOverScreen.js 0 → 100644
View file @ ff0e7c1c
import React, { useState, useEffect} from 'react';
import {View, Text, StyleSheet, Button, Image} from 'react-native';
import Colors from '../../constants/Colors';
import { useDispatch, useSelector } from 'react-redux';
import * as memoryActions from '../../store/actions/memory';
const GameOverScreen = ({navigation}) => {
const dispatch = useDispatch();
const passedData = useSelector(state=>state.memory.memoryData);
const passedTime = useSelector(state=>state.time.screenTime);
console.log(passedData);
console.log(passedTime);
let totalTime = 0;
for (const key in passedTime){
totalTime += passedTime[key];
}
const avgTime = totalTime/Object.keys(passedTime).length;
console.log(avgTime);
const seconds = ((avgTime % 60000) / 1000).toFixed(1);
console.log(seconds);
const [data, setData] = useState([]);
const [loading, setIsLoading] = useState(true);
let disorderLevel;
let resultText;
const gameData = {
q1: passedData.q1,
q2: passedData.q2,
q3: passedData.q3,
q4: passedData.q4,
q5: passedData.q5,
q6: passedData.q6,
time: seconds
}
const sendData = () => {
fetch(`http://192.168.8.170:5000/get_level?q1=${encodeURIComponent(gameData.q1)}&q2=${encodeURIComponent(gameData.q2)}&q3=${encodeURIComponent(gameData.q3)}&q4=${encodeURIComponent(gameData.q4)}&q5=${encodeURIComponent(gameData.q5)}&q6=${encodeURIComponent(gameData.q6)}&time=${encodeURIComponent(gameData.time)}`,{
method: 'GET'
})
.then(resp => resp.json())
.then(data=>{
setData(data.results[0].level)
setIsLoading(false)
})
.catch(err=>console.log(err));
}
if(data>=3.0){
disorderLevel = 'High'
}else if (data>=1.5) {
disorderLevel = 'Medium'
} else {
disorderLevel = 'low'
}
if(!loading){
resultText=(
<Text style={styles.resultText}>
<Text>Child's disorder level is </Text> <Text style={styles.highlight}>{disorderLevel}</Text>
</Text>
);
}
return(
<View style={styles.screen}>
<Text style={styles.titleText}>Successfully Completed!</Text>
<View style={styles.imageContainer}>
<Image
fadeDuration={1000}
source={require('../../memory/images/assets/success.png')}
style={styles.image}
/>
</View>
<Button title='Play Again' onPress={()=>{navigation.navigate('GameList'); setIsLoading(false); dispatch(memoryActions.clearData());}}/>
<Button title='Finish' onPress={()=>{sendData()}}/>
<View style={styles.resultContainer}>
{/* <Text style={styles.resultText}>{!loading ? `Child's disorder level is ${disorderLevel}` : ''}</Text> */}
{resultText}
</View>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 10
},
imageContainer: {
width: '80%',
height: 300,
borderColor: 'black',
borderWidth: 2,
borderRadius: 200,
overflow: 'hidden',
marginVertical: 30
},
image : {
width: '100%',
height: '100%'
},
titleText:{
fontSize: 24,
fontWeight: 'bold'
},
highlight: {
color : Colors.primary,
fontWeight: 'bold'
},
resultContainer: {
width: '80%',
marginHorizontal: 20,
marginVertical: 40
},
resultText: {
textAlign: 'center',
fontSize: 18
}
});
export default GameOverScreen;
\ No newline at end of file
frontend/src/screen/memory/StartGameScreen.js 0 → 100644
View file @ ff0e7c1c
import React from 'react';
import {Text, View, StyleSheet, Button} from 'react-native';
const StartGameScreen = ({navigation}) => {
return(
<View style={styles.screen}>
<Text>Start Game Screen</Text>
<Button title='Start' onPress={()=>{navigation.navigate("GameScreenOne")}}/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
export default StartGameScreen;
\ No newline at end of file
frontend/src/screen/memory/elementry/GameScreenFive.js 0 → 100644
View file @ ff0e7c1c
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import CountDown from 'react-native-countdown-component';
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={5}
// 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/elementry/GameScreenFiveAll.js 0 → 100644
View file @ ff0e7c1c
import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'
const GameScreenFiveAll = ({navigation}) => {
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]);
return(
<View style={styles.screen}>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/5/el-fish8.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/5/el-fish2.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/5/el-fish3.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/5/el-fish4.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/5/el-fish5.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/5/el-fish6.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/5/el-fish7.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 1})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/5/el-fish1-main.jpg')}/>
</TouchableOpacity>
</View>
</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/elementry/GameScreenFour.js 0 → 100644
View file @ ff0e7c1c
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import CountDown from 'react-native-countdown-component';
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={5}
// 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/elementry/GameScreenFourAll.js 0 → 100644
View file @ ff0e7c1c
import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'
const GameScreenFourAll = ({navigation}) => {
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]);
return(
<View style={styles.screen}>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/4/el-car8.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/4/el-car2.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/4/el-car3.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/4/el-car4.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/4/el-car5.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/4/el-car6.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 1})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/4/el-car1-main.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/4/el-car7.jpg')}/>
</TouchableOpacity>
</View>
</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/elementry/GameScreenOne.js 0 → 100644
View file @ ff0e7c1c
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';
const GameScreenOne = ({navigation}) => {
// useEffect(()=>{
// const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
// return () => backHandler.remove()
// },[]);
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={5}
// 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/elementry/GameScreenOneAll.js 0 → 100644
View file @ ff0e7c1c
import React,{useEffect, useState} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'
const GameScreenOneAll = ({navigation}) => {
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]);
return(
<View style={styles.screen}>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/1/el1.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/1/el2.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/1/el4.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/1/el5.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/1/el6.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 1})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/1/elmain.jpeg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/1/el7.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/1/el3.jpg')}/>
</TouchableOpacity>
</View>
</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 GameScreenOneAll;
\ No newline at end of file
frontend/src/screen/memory/elementry/GameScreenSix.js 0 → 100644
View file @ ff0e7c1c
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import CountDown from 'react-native-countdown-component';
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={5}
// 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/elementry/GameScreenSixAll.js 0 → 100644
View file @ ff0e7c1c
import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory';
const GameScreenSixAll = ({navigation}) => {
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]);
return(
<View style={styles.screen}>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/6/el-kite6.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/6/el-kite2.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/6/el-kite3.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/6/el-kite4.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/6/el-kite5.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 1})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/6/el-kite1-main.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/6/el-kite7.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/6/el-kite8.jpg')}/>
</TouchableOpacity>
</View>
</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/elementry/GameScreenThree.js 0 → 100644
View file @ ff0e7c1c
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import CountDown from 'react-native-countdown-component';
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={5}
// 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/elementry/GameScreenThreeAll.js 0 → 100644
View file @ ff0e7c1c
import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory';
const GameScreenThreeAll = ({navigation}) => {
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]);
return(
<View style={styles.screen}>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/3/el-flo8.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/3/el-flo2.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 1})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/3/el-flo1-main.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/3/el-flo3.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/3/el-flo4.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/3/el-flo5.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/3/el-flo6.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/3/el-flo7.jpg')}/>
</TouchableOpacity>
</View>
</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/elementry/GameScreenTwo.js 0 → 100644
View file @ ff0e7c1c
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import CountDown from 'react-native-countdown-component';
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={5}
// 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/elementry/GameScreenTwoAll.js 0 → 100644
View file @ ff0e7c1c
import { NavigationContainer } from '@react-navigation/native';
import React, {useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'
const GameScreenTwoAll = ({navigation}) => {
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]);
return(
<View style={styles.screen}>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/2/el-ball8.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/2/el-ball2.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/2/el-ball3.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 1})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/2/el-ball1-main.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/2/el-ball4.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/2/el-ball5.jpg')}/>
</TouchableOpacity>
</View>
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/2/el-ball6.jpg')}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
<Image style={styles.image} source={require('../../../memory/images/elementry/2/el-ball7.jpg')}/>
</TouchableOpacity>
</View>
</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/store/actions/memory.js 0 → 100644
View file @ ff0e7c1c
export const SET_ANSWERS = 'SET_ANSWERS';
export const SET_TIME = 'SET_TIME';
export const CLEAR_DATA = 'CLEAR_DATA';
export const setAnswers = (data) => {
return {type: SET_ANSWERS, data: data}
}
export const setTime = (time) => {
return {type: SET_TIME, time: time}
}
export const clearData = () => {
return {type: CLEAR_DATA}
}
\ No newline at end of file
frontend/src/store/reducers/memory.js 0 → 100644
View file @ ff0e7c1c
import { CLEAR_DATA, SET_ANSWERS, SET_TIME } from "../actions/memory";
const initialState = {
memoryData: {},
screenTime: {}
}
const memoryReducer = (state=initialState, action) => {
switch(action.type){
case SET_ANSWERS:
const addedAnswer = action.data;
const question = addedAnswer.question;
const answer = addedAnswer.answer;
return {
...state,
memoryData: {...state.memoryData, [question]:answer }
}
case SET_TIME:
const trackedTimes = action.time;
const timeKey = trackedTimes.question;
const time = trackedTimes.time;
return {
...state,
screenTime: {...state.screenTime, [timeKey]: time}
}
case CLEAR_DATA:
return{
...state,
memoryData: {},
screenTime: {}
}
default:
return state
}
}
export default memoryReducer;
\ 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