Skip to content

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

Merge branch 'it18256888' into 'master' 

It18256888

See merge request !135
parents f183a4f7 ff0e7c1c
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 @ 528c0698
,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 @ 528c0698
This source diff could not be displayed because it is too large. You can view the blob instead.
backend/IT18256888/app.py
View file @ 528c0698
......@@ -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 @ 528c0698
This diff is collapsed.
frontend/App.js
View file @ 528c0698
......@@ -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 @ 528c0698
This diff is collapsed.
frontend/package.json
View file @ 528c0698
......@@ -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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
export default {
primary: '#f7287b',
secondary: '#c717fc'
}
\ No newline at end of file
frontend/src/memory/data/dummy-data.js 0 → 100644
View file @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
......@@ -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 @ 528c0698
......@@ -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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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 @ 528c0698
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