Skip to content

21_22-J 38
21_22-J 38
Commit a84dab60 authored by Lihinikaduwa D.N.R. 's avatar Lihinikaduwa D.N.R.
Browse files
Options

Merge branch 'master' of http://gitlab.sliit.lk/21_22-j-38/21_22j-38 into it18257632

parents eef3fe0a e9e4bfe5
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1003 additions and 529 deletions
.idea/inspectionProfiles/Project_Default.xml
View file @ a84dab60
...@@ -14,6 +14,8 @@ ...@@ -14,6 +14,8 @@
<option name="ignoredIdentifiers"> <option name="ignoredIdentifiers">
<list> <list>
<option value="tensorflow.keras" /> <option value="tensorflow.keras" />
<option value="backend.IT18256888.app.flask_marshmallow" />
<option value="backend.IT18256888.app.*" />
</list> </list>
</option> </option>
</inspection_tool> </inspection_tool>
......
API/app.py
View file @ a84dab60
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
from flask import Flask, redirect, url_for, render_template, request, jsonify, make_response from flask import Flask, redirect, url_for, render_template, request, jsonify, make_response
import random import random
import os import os
from API.model.colorModel import get_color_activities1, get_color_activities2, get_color_activity_result from API.model.colorModel import get_color_activities1, get_color_activities2, get_color_activity_result, \
save_color_session_details
from API.model.readModel import get_reading_activities, save_activity_details, save_session_details from API.model.readModel import get_reading_activities, save_activity_details, save_session_details
from API.model.userModel import getUser, saveUserSession, logoutUser from API.model.userModel import getUser, saveUserSession, logoutUser
from API.model.colorModel import get_color_activities1, get_color_activities2, get_color_activity_result, storeResult from API.model.colorModel import get_color_activities1, get_color_activities2, get_color_activity_result, storeResult
...@@ -19,27 +20,32 @@ app = Flask(__name__) ...@@ -19,27 +20,32 @@ app = Flask(__name__)
def home(): def home():
return render_template('home.html') return render_template('home.html')
#=================================================================================
# Color Function Route (IT18218640) # Color Function Route (IT18218640)
# Get Color activities 1 route
# Get Color activities route
@app.route("/getColorActivities1") @app.route("/getColorActivities1")
def getColorActivities1(): def getColorActivities1():
return get_color_activities1() return get_color_activities1()
# Get Color activities 2 route
@app.route("/getColorActivities2") @app.route("/getColorActivities2")
def getColorActivities2(): def getColorActivities2():
return get_color_activities2() return get_color_activities2()
# Get Color result route
@app.route("/getColorActivitiesResult") @app.route("/getColorActivitiesResult")
def getColorActivitiesResult(): def getColorActivitiesResult():
req = request.get_json()
userId = req['userId']
# print("data_dic") # print("data_dic")
return get_color_activity_result()
result = get_color_activity_result(userId)
return result
# Predict route
@app.route("/predict", methods=["POST"]) @app.route("/predict", methods=["POST"])
def predict(): def predict():
data = request.get_json() data = request.get_json()
...@@ -102,18 +108,32 @@ def predict(): ...@@ -102,18 +108,32 @@ def predict():
# return jsonify("print") # return jsonify("print")
# return "Print" # return "Print"
@app.route("/colorSession", methods=['POST'])
def color_session():
req = request.get_json()
userId = req['userId']
token = save_color_session_details(userId, 1)
data = {
"token": token,
"message": "Success",
"status": 200
}
body = jsonify(data)
return make_response(body)
# Store activity details route
@app.route("/store", methods=["POST"]) @app.route("/store", methods=["POST"])
def store(): def store():
req = request.get_json() req = request.get_json()
value = req['value'] value = req['value']
date = req['date'] date = req['date']
token = req['token']
result = "Good" result = "Good"
time = "2S" time = "2S"
userId = 1 userId = 1
try: try:
response = storeResult(date, result, userId, time, value) response = storeResult(date, result, userId, time, value, token)
print(response) print(response)
body = jsonify(value) body = jsonify(value)
return make_response(body) return make_response(body)
...@@ -121,6 +141,7 @@ def store(): ...@@ -121,6 +141,7 @@ def store():
print(e) print(e)
return e return e
#=================================================================================
# Read Function Route (IT) # Read Function Route (IT)
# Login # Login
...@@ -150,7 +171,6 @@ def login(): ...@@ -150,7 +171,6 @@ def login():
body = jsonify(data) body = jsonify(data)
return make_response(body) return make_response(body)
@app.route("/logout", methods=['POST']) @app.route("/logout", methods=['POST'])
def logout(): def logout():
req = request.get_json() req = request.get_json()
...@@ -163,7 +183,6 @@ def logout(): ...@@ -163,7 +183,6 @@ def logout():
body = jsonify(response) body = jsonify(response)
return make_response(body) return make_response(body)
@app.route("/readingSession", methods=['POST']) @app.route("/readingSession", methods=['POST'])
def reading_session(): def reading_session():
req = request.get_json() req = request.get_json()
...@@ -195,6 +214,5 @@ def reading(readingToken): ...@@ -195,6 +214,5 @@ def reading(readingToken):
body = jsonify(response) body = jsonify(response)
return make_response(body) return make_response(body)
if __name__ == "__main__": if __name__ == "__main__":
app.run(host='192.168.1.100') app.run(host='192.168.8.100')
API/db/dbConnection.py
View file @ a84dab60
...@@ -12,7 +12,7 @@ def create_con(): ...@@ -12,7 +12,7 @@ def create_con():
database="helply", database="helply",
host="127.0.0.1", host="127.0.0.1",
user="root", user="root",
password="12345678" password="rp19970520"
) )
return db return db
......
API/model/colorModel.py
View file @ a84dab60
from flask import jsonify from flask import jsonify
from API.db.dbConnection import get_all_data, insert_data_json, insert_data, insert, get_data
from API.util.util import getUUID
from API.db.dbConnection import get_all_data, insert_data_json, insert_data, insert # get color activity 1 fun
def get_color_activities1(): def get_color_activities1():
data_dic = [] data_dic = []
...@@ -23,6 +23,7 @@ def get_color_activities1(): ...@@ -23,6 +23,7 @@ def get_color_activities1():
return jsonify(data_dic) return jsonify(data_dic)
# get color activity 2 fun
def get_color_activities2(): def get_color_activities2():
data_dic = [] data_dic = []
...@@ -43,12 +44,13 @@ def get_color_activities2(): ...@@ -43,12 +44,13 @@ def get_color_activities2():
return jsonify(data_dic) return jsonify(data_dic)
def storeResult(date, result, userId, time, value): # store color activity result fun
def storeResult(date, result, userId, time, value, token):
try: try:
qry = 'INSERT INTO coloractivityresult (idColorActivityResult, date, result, userId, time, value) VALUES (NULL, %s, %s, %s, %s, %s)' qry = 'INSERT INTO coloractivityresult (idColorActivityResult, date, result, userId, time, value, token) VALUES (NULL, %s, %s, %s, %s, %s, %s)'
args = (date, result, userId, time, value) args = (date, result, userId, time, value, token)
response = insert(qry, args) response = insert(qry, args)
return response return response
...@@ -57,23 +59,31 @@ def storeResult(date, result, userId, time, value): ...@@ -57,23 +59,31 @@ def storeResult(date, result, userId, time, value):
print(e) print(e)
return e return e
def get_color_activity_result(): # get color activity result fun
def get_color_activity_result(userId):
data_dic = [] data_dic = []
qry = 'SELECT * FROM coloractivityresult' qry = 'SELECT * FROM `coloractivityresult` WHERE email = "{}"'.format(userId)
result = get_all_data(qry) result = get_data(qry)
for row in result: for row in result:
ob = { ob = {
"idColorActivityResult": row[0], "idColorActivityResult": row[0],
"idcolorActivities": row[1], "date": row[1],
"date": row[2], "result": row[2],
"time": row[3], "time": row[3],
"result": row[4], "value": row[4],
} }
data_dic.append(ob) data_dic.append(ob)
return jsonify(data_dic) return jsonify(data_dic)
# store color activity session fun
def save_color_session_details(userId, status):
token = getUUID()
qry = 'INSERT INTO colorsession (id,userId,token,status) VALUES (NULL, %s, %s, %s)'
args = (userId, token, status)
insert(qry, args)
return token
\ No newline at end of file
backend/IT18256888/app.py
View file @ a84dab60
...@@ -60,13 +60,14 @@ def get_level(): ...@@ -60,13 +60,14 @@ def get_level():
results=[{"level":float(result)}] results=[{"level":float(result)}]
return (jsonify(results=results)) return (jsonify(results=results))
userpass = 'mysql://root:''@' # userpass = 'mysql://root:''@'
basedir = '127.0.0.1' # basedir = '127.0.0.1'
dbname = '/helply' # dbname = '/helply'
socket = '?unix_socket=/opt/lampp/var/mysql/mysql.sock' # socket = '?unix_socket=/opt/lampp/var/mysql/mysql.sock'
dbname = dbname + socket # dbname = dbname + socket
app.config['SQLALCHEMY_DATABASE_URI'] = userpass + basedir + dbname # app.config['SQLALCHEMY_DATABASE_URI'] = userpass + basedir + dbname
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://sql5488870:UylH12yrME@sql5.freesqldatabase.com/sql5488870'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
#DB Connection #DB Connection
...@@ -123,4 +124,5 @@ def add_result(): ...@@ -123,4 +124,5 @@ def add_result():
#run the flask file #run the flask file
if __name__ == "__main__": if __name__ == "__main__":
# app.run(debug=True) # app.run(debug=True)
app.run(host='0.0.0.0', port=5000, debug=True) app.run(host='192.168.8.101')
# app.run(host='0.0.0.0', port=5000, debug=True)
frontend/package-lock.json
View file @ a84dab60
This diff is collapsed.
frontend/src/component/TableList.js
View file @ a84dab60
import React from 'react'; import React, { useEffect, useState } from 'react';
import { View, StyleSheet, ScrollView } from 'react-native'; import { View, StyleSheet, ScrollView } from 'react-native';
import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component'; import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component';
import client from '../screen/client/Client';
const userId = 1;
const CONTENT = { const CONTENT = {
tableHead: ['Date', 'Time', 'Name', 'Result'], tableHead: ['Date', 'Time', 'Name', 'Result'],
tableData: [ tableData: [
...@@ -17,6 +21,35 @@ const CONTENT = { ...@@ -17,6 +21,35 @@ const CONTENT = {
}; };
export default function App() { export default function App() {
function getResult(userId) {
var data = {
userId: userId,
user: "userId",
}
data = JSON.stringify(data);
console.log(data);
client.post('getColorActivitiesResult', data, {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
}).then((response) => {
console.log(response.data);
}).catch(err => {
console.log(err);
});
}
useEffect(() => {
getResult(userId);
}, []);
return ( return (
<ScrollView> <ScrollView>
...@@ -26,14 +59,14 @@ export default function App() { ...@@ -26,14 +59,14 @@ export default function App() {
data={CONTENT.tableHead} data={CONTENT.tableHead}
flexArr={[1, 1, 1, 1]} flexArr={[1, 1, 1, 1]}
style={styles.head} style={styles.head}
textStyle={styles.text} // textStyle={styles.text}
/> />
<TableWrapper style={styles.wrapper}> <TableWrapper style={styles.wrapper}>
<Rows <Rows
data={CONTENT.tableData} data={CONTENT.tableData}
flexArr={[1, 1, 1, 1]} flexArr={[1, 1, 1, 1]}
style={styles.row} style={styles.row}
textStyle={styles.text} // textStyle={styles.text}
/> />
</TableWrapper> </TableWrapper>
</Table> </Table>
...@@ -45,9 +78,9 @@ export default function App() { ...@@ -45,9 +78,9 @@ export default function App() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { flex: 0, paddingTop: 20, paddingLeft: 60, paddingRight: 60, marginTop: 0, }, container: { flex: 0, paddingTop: 20, paddingLeft: 60, paddingRight: 60, marginTop: 0, },
head: { height: 60,}, head: { height: 60, },
wrapper: { flexDirection: 'row' }, wrapper: { flexDirection: 'row' },
title: { flex: 1, }, title: { flex: 1, },
row: { height: 40 }, row: { height: 40 },
text: { textAlign: 'center', fontSize: 20, color: '#fff', fontFamily: 'Menlo' }, // text: { textAlign: 'center', fontSize: 20, color: '#fff', },
}); });
\ No newline at end of file
frontend/src/constants/Countdown.js 0 → 100644
View file @ a84dab60
export default {
elementry: 5,
average: 3,
hard: 3
}
\ No newline at end of file
frontend/src/constants/endpoint.js 0 → 100644
View file @ a84dab60
export default api = 'http://192.168.8.170:5000'
\ No newline at end of file
frontend/src/memory/data/elementry-level.js 0 → 100644
View file @ a84dab60
import Gamedataone from '../models/gamedataone';
export const SCREEN1 = [
new Gamedataone(1, 'q1', 0, require('../../memory/images/elementry/1/el1.jpg')),
new Gamedataone(2, 'q1', 0, require('../../memory/images/elementry/1/el2.jpg')),
new Gamedataone(3, 'q1', 0, require('../../memory/images/elementry/1/el4.jpg')),
new Gamedataone(4, 'q1', 0, require('../../memory/images/elementry/1/el5.jpg')),
new Gamedataone(5, 'q1', 0, require('../../memory/images/elementry/1/el6.jpg')),
new Gamedataone(6, 'q1', 1, require('../../memory/images/elementry/1/elmain.jpeg')),
new Gamedataone(7, 'q1', 0, require('../../memory/images/elementry/1/el7.jpg')),
new Gamedataone(8, 'q1', 0, require('../../memory/images/elementry/1/el3.jpg')),
];
export const SCREEN2 = [
new Gamedataone(1, 'q2', 0, require('../../memory/images/elementry/2/el-ball8.jpg')),
new Gamedataone(2, 'q2', 0, require('../../memory/images/elementry/2/el-ball2.jpg')),
new Gamedataone(3, 'q2', 0, require('../../memory/images/elementry/2/el-ball3.jpg')),
new Gamedataone(4, 'q2', 1, require('../../memory/images/elementry/2/el-ball1-main.jpg')),
new Gamedataone(5, 'q2', 0, require('../../memory/images/elementry/2/el-ball4.jpg')),
new Gamedataone(6, 'q2', 0, require('../../memory/images/elementry/2/el-ball5.jpg')),
new Gamedataone(7, 'q2', 0, require('../../memory/images/elementry/2/el-ball6.jpg')),
new Gamedataone(8, 'q2', 0, require('../../memory/images/elementry/2/el-ball7.jpg')),
];
export const SCREEN3 = [
new Gamedataone(1, 'q3', 0, require('../../memory/images/elementry/3/el-flo8.jpg')),
new Gamedataone(2, 'q3', 0, require('../../memory/images/elementry/3/el-flo2.jpg')),
new Gamedataone(3, 'q3', 1, require('../../memory/images/elementry/3/el-flo1-main.jpg')),
new Gamedataone(4, 'q3', 0, require('../../memory/images/elementry/3/el-flo3.jpg')),
new Gamedataone(5, 'q3', 0, require('../../memory/images/elementry/3/el-flo4.jpg')),
new Gamedataone(6, 'q3', 0, require('../../memory/images/elementry/3/el-flo5.jpg')),
new Gamedataone(7, 'q3', 0, require('../../memory/images/elementry/3/el-flo6.jpg')),
new Gamedataone(8, 'q3', 0, require('../../memory/images/elementry/3/el-flo7.jpg')),
];
export const SCREEN4 = [
new Gamedataone(1, 'q4', 0, require('../../memory/images/elementry/4/el-car8.jpg')),
new Gamedataone(2, 'q4', 0, require('../../memory/images/elementry/4/el-car2.jpg')),
new Gamedataone(3, 'q4', 0, require('../../memory/images/elementry/4/el-car3.jpg')),
new Gamedataone(4, 'q4', 0, require('../../memory/images/elementry/4/el-car4.jpg')),
new Gamedataone(5, 'q4', 0, require('../../memory/images/elementry/4/el-car5.jpg')),
new Gamedataone(6, 'q4', 0, require('../../memory/images/elementry/4/el-car6.jpg')),
new Gamedataone(7, 'q4', 1, require('../../memory/images/elementry/4/el-car1-main.jpg')),
new Gamedataone(8, 'q4', 0, require('../../memory/images/elementry/4/el-car7.jpg')),
];
export const SCREEN5 = [
new Gamedataone(1, 'q5', 0, require('../../memory/images/elementry/5/el-fish8.jpg')),
new Gamedataone(2, 'q5', 0, require('../../memory/images/elementry/5/el-fish2.jpg')),
new Gamedataone(3, 'q5', 0, require('../../memory/images/elementry/5/el-fish3.jpg')),
new Gamedataone(4, 'q5', 0, require('../../memory/images/elementry/5/el-fish4.jpg')),
new Gamedataone(5, 'q5', 0, require('../../memory/images/elementry/5/el-fish5.jpg')),
new Gamedataone(6, 'q5', 0, require('../../memory/images/elementry/5/el-fish6.jpg')),
new Gamedataone(7, 'q5', 0, require('../../memory/images/elementry/5/el-fish7.jpg')),
new Gamedataone(8, 'q5', 1, require('../../memory/images/elementry/5/el-fish1-main.jpg')),
];
export const SCREEN6 = [
new Gamedataone(1, 'q6', 0, require('../../memory/images/elementry/6/el-kite6.jpg')),
new Gamedataone(2, 'q6', 0, require('../../memory/images/elementry/6/el-kite2.jpg')),
new Gamedataone(3, 'q6', 0, require('../../memory/images/elementry/6/el-kite3.jpg')),
new Gamedataone(4, 'q6', 0, require('../../memory/images/elementry/6/el-kite4.jpg')),
new Gamedataone(5, 'q6', 0, require('../../memory/images/elementry/6/el-kite5.jpg')),
new Gamedataone(6, 'q6', 1, require('../../memory/images/elementry/6/el-kite1-main.jpg')),
new Gamedataone(7, 'q6', 0, require('../../memory/images/elementry/6/el-kite7.jpg')),
new Gamedataone(8, 'q6', 0, require('../../memory/images/elementry/6/el-kite8.jpg')),
];
\ No newline at end of file
frontend/src/memory/models/gamedataone.js 0 → 100644
View file @ a84dab60
class Gamedataone{
constructor(id, question, answer, source){
this.id = id,
this.question = question,
this.answer = answer,
this.source = source
}
}
export default Gamedataone;
\ No newline at end of file
frontend/src/router/router.js
View file @ a84dab60
...@@ -7,7 +7,7 @@ import Home from '../screen/home'; ...@@ -7,7 +7,7 @@ import Home from '../screen/home';
import Start from '../screen/Start'; import Start from '../screen/Start';
import Register from '../screen/auth/Register'; import Register from '../screen/auth/Register';
import Login from '../screen/auth/Login'; import Login from '../screen/auth/Login';
import Splash from '../screen/splash/Splash'; import Splash from '../screen/splash/splash';
import Color from '../screen/Color'; import Color from '../screen/Color';
import Blue from '../screen/activity/Blue'; import Blue from '../screen/activity/Blue';
import Blue2 from '../screen/activity/Blue2'; import Blue2 from '../screen/activity/Blue2';
......
frontend/src/screen/Color.js
View file @ a84dab60
...@@ -5,7 +5,8 @@ import Orientation from 'react-native-orientation-locker'; ...@@ -5,7 +5,8 @@ import Orientation from 'react-native-orientation-locker';
import { StyleSheet, TouchableOpacity, View, Text, Pressable, SafeAreaView, ScrollView, Image, ImageBackground, Dimensions, Animated, Easing, NativeModules } from 'react-native'; import { StyleSheet, TouchableOpacity, View, Text, Pressable, SafeAreaView, ScrollView, Image, ImageBackground, Dimensions, Animated, Easing, NativeModules } from 'react-native';
import ImageButton from "../component/ImageButton"; import ImageButton from "../component/ImageButton";
import ColorActivity from "../component/colorActivity"; import ColorActivity from "../component/colorActivity";
import Client from "./client/Client"; import client from "./client/Client";
import AsyncStorage from '@react-native-async-storage/async-storage';
export default function Color() { export default function Color() {
...@@ -20,6 +21,36 @@ export default function Color() { ...@@ -20,6 +21,36 @@ export default function Color() {
return unsubscribe; return unsubscribe;
}, [navigation]); }, [navigation]);
const getColorSession = () => {
const data = {
userId: 1,
};
client.post('colorSession', JSON.stringify(data), {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
})
.then(res => {
console.log(res.data);
if (res.status == 200) {
// console.log(res.data);
const colorToken = res.data.token;
try {
AsyncStorage.setItem('colorToken', colorToken);
console.log(colorToken)
} catch (error) {
console.log(error);
}
navigation.navigate("PrimaryType", { title: 'Primary Activities', id: 1 })
}
})
.catch(error => {
console.log(error);
});
};
return ( return (
<SafeAreaView> <SafeAreaView>
...@@ -35,7 +66,7 @@ export default function Color() { ...@@ -35,7 +66,7 @@ export default function Color() {
</View> */} </View> */}
<View style={{ marginTop: 40 }}> <View style={{ marginTop: 40 }}>
<TouchableOpacity onPress={() => { navigation.navigate("PrimaryType", { title: 'Primary Activities', id: 1 }) }} <TouchableOpacity onPress={() => { getColorSession(); }}
style={styles.card}> style={styles.card}>
<View style={[{ flexDirection: "row" }]}> <View style={[{ flexDirection: "row" }]}>
...@@ -46,16 +77,31 @@ export default function Color() { ...@@ -46,16 +77,31 @@ export default function Color() {
</View> </View>
<View style={{ flex: 0.6 }}> <View style={{ flex: 0.6 }}>
{/* <Text style={styles.cardDescription}>{id}</Text> */}
<Text style={styles.cardTitle}>Primary</Text> <Text style={styles.cardTitle}>Primary</Text>
</View>
</View>
</TouchableOpacity>
{/* <TouchableOpacity onPress={() => { navigation.navigate("PrimaryType", { title: 'Primary Activities', id: 1 }) }}
style={styles.card}>
<View style={[{ flexDirection: "row" }]}>
<View style={styles.cardImage}>
<Image source={require("../assets/type/navo1.png")}
style={{ width: 200, height: 200, borderRadius: 30 }}></Image>
</View> </View>
<View style={{ flex: 0.6 }}>
<Text style={styles.cardTitle}>Primary</Text>
</View>
</View> </View>
</TouchableOpacity> </TouchableOpacity> */}
</View> </View>
<View style={{ marginTop: 20 }}> <View style={{ marginTop: 20 }}>
...@@ -80,6 +126,7 @@ export default function Color() { ...@@ -80,6 +126,7 @@ export default function Color() {
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{ marginTop: 20, marginBottom: 40 }}> <View style={{ marginTop: 20, marginBottom: 40 }}>
<TouchableOpacity onPress={() => { navigation.navigate("ColorResult") }} <TouchableOpacity onPress={() => { navigation.navigate("ColorResult") }}
style={styles.card3}> style={styles.card3}>
...@@ -104,10 +151,6 @@ export default function Color() { ...@@ -104,10 +151,6 @@ export default function Color() {
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{/* {datas.map((data, index) =>{
return(<ColorActivity key={index} title={data.name} image={data.image} id={data.idcolorActivities} des={data.des} color={data.color}/>)
})} */}
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
) )
......
frontend/src/screen/Read.js
View file @ a84dab60
import {useNavigation} from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import axios from 'axios'; import axios from 'axios';
import Orientation from 'react-native-orientation-locker'; import Orientation from 'react-native-orientation-locker';
import React, {useState, useEffect} from 'react'; import React, { useState, useEffect } from 'react';
import { import {
StyleSheet, StyleSheet,
View, View,
...@@ -20,7 +20,7 @@ import { ...@@ -20,7 +20,7 @@ import {
import ImageButton from '../component/ImageButton'; import ImageButton from '../component/ImageButton';
import ButtonView from '../component/buttonView'; import ButtonView from '../component/buttonView';
import ReadCategory from '../component/reading/ReadCategory'; import ReadCategory from '../component/reading/ReadCategory';
import {ImagePaths} from '../assets/read/data/ReadData'; import { ImagePaths } from '../assets/read/data/ReadData';
export default function Read() { export default function Read() {
const [activity, setActivity] = useState([]); const [activity, setActivity] = useState([]);
......
frontend/src/screen/activity/Black.js
View file @ a84dab60
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import Orientation from 'react-native-orientation-locker'; import Orientation from 'react-native-orientation-locker';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native'; import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, Modal, ImageBackground, Button, Image, StatusBar } from 'react-native';
import axios from "axios"; import axios from "axios";
import {mainColor} from '../../assets/color/color'; import { mainColor } from '../../assets/color/color';
import {secondColor} from '../../assets/color/color'; import { secondColor } from '../../assets/color/color';
import CountDown from 'react-native-countdown-component'; import CountDown from 'react-native-countdown-component';
import client from "../client/Client"; import client from "../client/Client";
import Voice from '@react-native-voice/voice'; import Voice from '@react-native-voice/voice';
...@@ -14,6 +14,8 @@ import BackButton from "../../component/BackButton" ...@@ -14,6 +14,8 @@ import BackButton from "../../component/BackButton"
export default function Black() { export default function Black() {
const [modalVisible, setModalVisible] = useState(false);
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
...@@ -130,7 +132,7 @@ export default function Black() { ...@@ -130,7 +132,7 @@ export default function Black() {
const startRecording = async () => { const startRecording = async () => {
setModalVisible(true);
try { try {
await Voice.start('en-US'); await Voice.start('en-US');
...@@ -149,6 +151,39 @@ export default function Black() { ...@@ -149,6 +151,39 @@ export default function Black() {
return ( return (
<SafeAreaView> <SafeAreaView>
<View>
<Modal
animationType="slide"
transparent={true}
hidden={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<CountDown
size={40}
until={3}
onFinish={() => setModalVisible(false)}
// onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }}
digitTxtStyle={{ color: 'black' }}
timeLabelStyle={{ color: 'red', fontWeight: 'bold' }}
separatorStyle={{ color: 'black' }}
timeToShow={['S']}
timeLabels={{ s: 'Seconds' }}
style={styles.counter}
/>
</View>
</View>
</Modal>
</View>
<View style={{ flexDirection: "column" }}> <View style={{ flexDirection: "column" }}>
<ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}> <ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
...@@ -242,6 +277,32 @@ const styles = StyleSheet.create({ ...@@ -242,6 +277,32 @@ const styles = StyleSheet.create({
marginRight: 50, marginRight: 50,
color: "#000000", color: "#000000",
marginLeft: 50, marginLeft: 50,
} }, centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: -90,
marginLeft: -100
},
modalView: {
marginRight: 20,
backgroundColor: "#00000000",
borderRadius: 20,
padding: 35,
alignItems: "center",
// shadowColor: "#000",
// shadowOffset: {
// width: 0,
// height: 2
// },
// shadowOpacity: 0.25,
// shadowRadius: 4,
// elevation: 5
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
}) })
\ No newline at end of file
frontend/src/screen/activity/Blue2.js
View file @ a84dab60
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import Orientation from 'react-native-orientation-locker'; import Orientation from 'react-native-orientation-locker';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native'; import { Text, TouchableOpacity, StyleSheet, View, Modal, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native';
import axios from "axios"; import axios from "axios";
import {mainColor} from '../../assets/color/color'; import { mainColor } from '../../assets/color/color';
import {secondColor} from '../../assets/color/color'; import { secondColor } from '../../assets/color/color';
import CountDown from 'react-native-countdown-component'; import CountDown from 'react-native-countdown-component';
import client from "../client/Client"; import client from "../client/Client";
import Voice from '@react-native-voice/voice'; import Voice from '@react-native-voice/voice';
import Tts from 'react-native-tts'; import Tts from 'react-native-tts';
import BackButton from "../../component/BackButton" import BackButton from "../../component/BackButton"
export default function Blue2() { export default function Blue2() {
const [modalVisible, setModalVisible] = useState(false);
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
...@@ -62,7 +62,7 @@ export default function Blue2() { ...@@ -62,7 +62,7 @@ export default function Blue2() {
const value = e.value; const value = e.value;
if(value.includes(secondColor[4]) == true){ if (value.includes(secondColor[4]) == true) {
console.log('Your Answer is Correct'); console.log('Your Answer is Correct');
...@@ -74,7 +74,7 @@ export default function Blue2() { ...@@ -74,7 +74,7 @@ export default function Blue2() {
}); });
}; };
}else{ } else {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
...@@ -131,7 +131,7 @@ export default function Blue2() { ...@@ -131,7 +131,7 @@ export default function Blue2() {
const startRecording = async () => { const startRecording = async () => {
setModalVisible(true);
try { try {
await Voice.start('en-US'); await Voice.start('en-US');
...@@ -150,6 +150,39 @@ export default function Blue2() { ...@@ -150,6 +150,39 @@ export default function Blue2() {
return ( return (
<SafeAreaView> <SafeAreaView>
<View>
<Modal
animationType="slide"
transparent={true}
hidden={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<CountDown
size={40}
until={3}
onFinish={() => setModalVisible(false)}
// onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }}
digitTxtStyle={{ color: 'black' }}
timeLabelStyle={{ color: 'red', fontWeight: 'bold' }}
separatorStyle={{ color: 'black' }}
timeToShow={['S']}
timeLabels={{ s: 'Seconds' }}
style={styles.counter}
/>
</View>
</View>
</Modal>
</View>
<View style={{ flexDirection: "column" }}> <View style={{ flexDirection: "column" }}>
<ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}> <ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
...@@ -243,6 +276,24 @@ const styles = StyleSheet.create({ ...@@ -243,6 +276,24 @@ const styles = StyleSheet.create({
marginRight: 50, marginRight: 50,
color: "#000000", color: "#000000",
marginLeft: 50, marginLeft: 50,
} }, centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: -90,
marginLeft: -100
},
modalView: {
marginRight: 20,
backgroundColor: "#00000000",
borderRadius: 20,
padding: 35,
alignItems: "center",
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
}) })
\ No newline at end of file
frontend/src/screen/activity/Green.js
View file @ a84dab60
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import Orientation from 'react-native-orientation-locker'; import Orientation from 'react-native-orientation-locker';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import {mainColor} from '../../assets/color/color'; import { mainColor } from '../../assets/color/color';
import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native'; import { Text, TouchableOpacity, StyleSheet, View, Dimensions, Modal, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native';
import axios from "axios"; import axios from "axios";
import CountDown from 'react-native-countdown-component'; import CountDown from 'react-native-countdown-component';
import {secondColor} from '../../assets/color/color'; import { secondColor } from '../../assets/color/color';
import client from "../client/Client"; import client from "../client/Client";
import Voice from '@react-native-voice/voice'; import Voice from '@react-native-voice/voice';
...@@ -15,6 +15,8 @@ import BackButton from "../../component/BackButton" ...@@ -15,6 +15,8 @@ import BackButton from "../../component/BackButton"
export default function Green() { export default function Green() {
const [modalVisible, setModalVisible] = useState(false);
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
...@@ -62,7 +64,7 @@ export default function Green() { ...@@ -62,7 +64,7 @@ export default function Green() {
const value = e.value; const value = e.value;
if(value.includes(secondColor[1]) == true){ if (value.includes(secondColor[1]) == true) {
var color = "Green"; var color = "Green";
...@@ -76,7 +78,7 @@ export default function Green() { ...@@ -76,7 +78,7 @@ export default function Green() {
}); });
}; };
}else{ } else {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
...@@ -133,7 +135,7 @@ export default function Green() { ...@@ -133,7 +135,7 @@ export default function Green() {
const startRecording = async () => { const startRecording = async () => {
setModalVisible(true);
try { try {
await Voice.start('en-US'); await Voice.start('en-US');
...@@ -152,6 +154,39 @@ export default function Green() { ...@@ -152,6 +154,39 @@ export default function Green() {
return ( return (
<SafeAreaView> <SafeAreaView>
<View>
<Modal
animationType="slide"
transparent={true}
hidden={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<CountDown
size={40}
until={3}
onFinish={() => setModalVisible(false)}
// onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }}
digitTxtStyle={{ color: 'black' }}
timeLabelStyle={{ color: 'red', fontWeight: 'bold' }}
separatorStyle={{ color: 'black' }}
timeToShow={['S']}
timeLabels={{ s: 'Seconds' }}
style={styles.counter}
/>
</View>
</View>
</Modal>
</View>
<View style={{ flexDirection: "column" }}> <View style={{ flexDirection: "column" }}>
<ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}> <ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
...@@ -245,6 +280,32 @@ const styles = StyleSheet.create({ ...@@ -245,6 +280,32 @@ const styles = StyleSheet.create({
marginRight: 50, marginRight: 50,
color: "#000000", color: "#000000",
marginLeft: 50, marginLeft: 50,
} }, centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: -90,
marginLeft: -100
},
modalView: {
marginRight: 20,
backgroundColor: "#00000000",
borderRadius: 20,
padding: 35,
alignItems: "center",
// shadowColor: "#000",
// shadowOffset: {
// width: 0,
// height: 2
// },
// shadowOpacity: 0.25,
// shadowRadius: 4,
// elevation: 5
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
}) })
\ No newline at end of file
frontend/src/screen/activity/Red.js
View file @ a84dab60
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import Orientation from 'react-native-orientation-locker'; import Orientation from 'react-native-orientation-locker';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import {mainColor} from '../../assets/color/color'; import { mainColor } from '../../assets/color/color';
import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native'; import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar, Modal, Pressable } from 'react-native';
import axios from "axios"; import axios from "axios";
import {secondColor} from '../../assets/color/color'; import { secondColor } from '../../assets/color/color';
import CountDown from 'react-native-countdown-component'; import CountDown from 'react-native-countdown-component';
import client from "../client/Client"; import client from "../client/Client";
import Voice from '@react-native-voice/voice'; import Voice from '@react-native-voice/voice';
import BackButton from "../../component/BackButton" import BackButton from "../../component/BackButton"
import AsyncStorage from '@react-native-async-storage/async-storage';
export default function Red() { export default function Red() {
const [colorToken, setColorToken] = useState();
const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false);
const [colorData, setColorData] = useState({ activity: '' });
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
...@@ -36,14 +40,19 @@ export default function Red() { ...@@ -36,14 +40,19 @@ export default function Red() {
Voice.onSpeechEnd = onSpeechEndHandler; Voice.onSpeechEnd = onSpeechEndHandler;
Voice.onSpeechResults = onSpeechResultsHandler; Voice.onSpeechResults = onSpeechResultsHandler;
Voice.onSpeechPartialResults = onSpeechPartialResults; Voice.onSpeechPartialResults = onSpeechPartialResults;
// Voice.onSpeechError = onSpeechError;
// console.log(backColor);
return () => { return () => {
Voice.destroy().then(Voice.removeAllListeners); Voice.destroy().then(Voice.removeAllListeners);
}; };
}, []); }, []);
useEffect(() => {
// console.log(colorToken);
}, []);
const onSpeechStartHandler = e => { const onSpeechStartHandler = e => {
// console.log('start handler =>> ', e); // console.log('start handler =>> ', e);
}; };
...@@ -62,7 +71,7 @@ export default function Red() { ...@@ -62,7 +71,7 @@ export default function Red() {
const value = e.value; const value = e.value;
if(value.includes(secondColor[0]) == true){ if (value.includes(secondColor[0]) == true) {
console.log('Your Answer is Correct'); console.log('Your Answer is Correct');
...@@ -74,7 +83,7 @@ export default function Red() { ...@@ -74,7 +83,7 @@ export default function Red() {
}); });
}; };
}else{ } else {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
...@@ -84,8 +93,37 @@ export default function Red() { ...@@ -84,8 +93,37 @@ export default function Red() {
}; };
// const onSpeechError = e => {
// console.log('onSpeechError: ', e);
// const value = e.value;
// if (value.includes(secondColor[0]) == true) {
// console.log('Your Answer is Correct');
// sendData(mainColor[0])
// // showAlert = () => {
// // this.setState({
// // showAlert: true
// // });
// // };
// } else {
// console.log('Your Answer is Incorrect', value);
// }
// };
function sendData(value) { function sendData(value) {
AsyncStorage.getItem('colorToken')
.then(res => {
var date = new Date().getDate(); var date = new Date().getDate();
var month = new Date().getMonth() + 1; var month = new Date().getMonth() + 1;
var year = new Date().getFullYear(); var year = new Date().getFullYear();
...@@ -94,11 +132,16 @@ export default function Red() { ...@@ -94,11 +132,16 @@ export default function Red() {
var data = { var data = {
value: value, value: value,
date: todayData date: todayData,
token: res,
} }
data = JSON.stringify(data); data = JSON.stringify(data);
setColorData(data);
console.log(data);
client.post('store', data, { client.post('store', data, {
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
...@@ -106,10 +149,17 @@ export default function Red() { ...@@ -106,10 +149,17 @@ export default function Red() {
}, },
}).then((response) => { }).then((response) => {
console.log(response.data); console.log(response.data);
// setModalVisible2(true);
// navigation.navigate("Green");
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
}) })
})
.catch(error => {
console.log(error);
});
} }
const onSpeechPartialResults = e => { const onSpeechPartialResults = e => {
...@@ -121,17 +171,9 @@ export default function Red() { ...@@ -121,17 +171,9 @@ export default function Red() {
// setPartialResults(e.value); // setPartialResults(e.value);
}; };
const onFinishCD = () => {
Alert.alert('Countdown Finished...');
}
const onPressCD = () => {
Alert.alert('Countdown Component Pressed...');
}
const startRecording = async () => { const startRecording = async () => {
// setModalVisible(true);
try { try {
await Voice.start('en-US'); await Voice.start('en-US');
...@@ -150,6 +192,65 @@ export default function Red() { ...@@ -150,6 +192,65 @@ export default function Red() {
return ( return (
<SafeAreaView> <SafeAreaView>
<View>
<Modal
animationType="slide"
transparent={true}
hidden={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<CountDown
size={40}
until={3}
onFinish={() => setModalVisible(false)}
// onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }}
digitTxtStyle={{ color: 'black' }}
timeLabelStyle={{ color: 'red', fontWeight: 'bold' }}
separatorStyle={{ color: 'black' }}
timeToShow={['S']}
timeLabels={{ s: 'Seconds' }}
style={styles.counter}
/>
</View>
</View>
</Modal>
</View>
<View>
<Modal
animationType="slide"
transparent={true}
hidden={true}
visible={modalVisible2}
onRequestClose={() => {
setModalVisible2(!modalVisible2);
}}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text>Your answer is Corect</Text>
<Pressable
style={[styles.button, styles.buttonClose2]}
onPress={() => navigation.navigate("Green")}
>
<Text style={styles.textStyle2}>Next Game</Text>
</Pressable>
</View>
</View>
</Modal>
</View>
<View style={{ flexDirection: "column" }}> <View style={{ flexDirection: "column" }}>
<ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}> <ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
...@@ -186,7 +287,7 @@ export default function Red() { ...@@ -186,7 +287,7 @@ export default function Red() {
</View> </View>
<View style={{ marginLeft: -100 }}> <View style={{ marginLeft: -100 }}>
<TouchableOpacity onPress={() => { }} <TouchableOpacity onPress={() => { navigation.navigate("Green")}}
style={{ width: "60%", height: "40%", borderRadius: 50 }}> style={{ width: "60%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ flex: .9, marginLeft: -90 }} /> <Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ flex: .9, marginLeft: -90 }} />
</TouchableOpacity> </TouchableOpacity>
...@@ -243,6 +344,66 @@ const styles = StyleSheet.create({ ...@@ -243,6 +344,66 @@ const styles = StyleSheet.create({
marginRight: 50, marginRight: 50,
color: "#000000", color: "#000000",
marginLeft: 50, marginLeft: 50,
}, centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: -90,
marginLeft: -100
},
modalView: {
marginRight: 20,
backgroundColor: "#00000000",
borderRadius: 20,
padding: 35,
alignItems: "center",
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
centeredView2: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView2: {
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen2: {
backgroundColor: "#F194FF",
},
buttonClose2: {
backgroundColor: "#2196F3",
},
textStyle2: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText2: {
marginBottom: 15,
textAlign: "center"
} }
}) })
\ No newline at end of file
frontend/src/screen/activity/White.js
View file @ a84dab60
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import {mainColor} from '../../assets/color/color'; import { mainColor } from '../../assets/color/color';
import Orientation from 'react-native-orientation-locker'; import Orientation from 'react-native-orientation-locker';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native'; import { Text, TouchableOpacity, StyleSheet, View, Modal, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native';
import axios from "axios"; import axios from "axios";
import {secondColor} from '../../assets/color/color'; import { secondColor } from '../../assets/color/color';
import CountDown from 'react-native-countdown-component'; import CountDown from 'react-native-countdown-component';
import client from "../client/Client"; import client from "../client/Client";
import Voice from '@react-native-voice/voice'; import Voice from '@react-native-voice/voice';
...@@ -15,6 +15,8 @@ import BackButton from "../../component/BackButton" ...@@ -15,6 +15,8 @@ import BackButton from "../../component/BackButton"
export default function White() { export default function White() {
const [modalVisible, setModalVisible] = useState(false);
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
...@@ -62,7 +64,7 @@ export default function White() { ...@@ -62,7 +64,7 @@ export default function White() {
const value = e.value; const value = e.value;
if(value.includes(secondColor[5]) == true){ if (value.includes(secondColor[5]) == true) {
console.log('Your Answer is Correct'); console.log('Your Answer is Correct');
...@@ -74,7 +76,7 @@ export default function White() { ...@@ -74,7 +76,7 @@ export default function White() {
}); });
}; };
}else{ } else {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
...@@ -131,7 +133,7 @@ export default function White() { ...@@ -131,7 +133,7 @@ export default function White() {
const startRecording = async () => { const startRecording = async () => {
setModalVisible(true);
try { try {
await Voice.start('en-US'); await Voice.start('en-US');
...@@ -150,6 +152,39 @@ export default function White() { ...@@ -150,6 +152,39 @@ export default function White() {
return ( return (
<SafeAreaView> <SafeAreaView>
<View>
<Modal
animationType="slide"
transparent={true}
hidden={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<CountDown
size={40}
until={3}
onFinish={() => setModalVisible(false)}
// onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }}
digitTxtStyle={{ color: 'black' }}
timeLabelStyle={{ color: 'red', fontWeight: 'bold' }}
separatorStyle={{ color: 'black' }}
timeToShow={['S']}
timeLabels={{ s: 'Seconds' }}
style={styles.counter}
/>
</View>
</View>
</Modal>
</View>
<View style={{ flexDirection: "column" }}> <View style={{ flexDirection: "column" }}>
<ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}> <ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
...@@ -185,7 +220,7 @@ export default function White() { ...@@ -185,7 +220,7 @@ export default function White() {
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{ marginLeft: -100, marginTop:-15 }}> <View style={{ marginLeft: -100, marginTop: -15 }}>
<TouchableOpacity onPress={() => { }} <TouchableOpacity onPress={() => { }}
style={{ width: "60%", height: "50%", borderRadius: 50 }}> style={{ width: "60%", height: "50%", borderRadius: 50 }}>
<Image source={require('../../assets/game/finish.png')} resizeMode='contain' style={{ flex: .9, marginLeft: -120, }} /> <Image source={require('../../assets/game/finish.png')} resizeMode='contain' style={{ flex: .9, marginLeft: -120, }} />
...@@ -243,6 +278,24 @@ const styles = StyleSheet.create({ ...@@ -243,6 +278,24 @@ const styles = StyleSheet.create({
marginRight: 50, marginRight: 50,
color: "#000000", color: "#000000",
marginLeft: 50, marginLeft: 50,
} }, centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: -90,
marginLeft: -100
},
modalView: {
marginRight: 20,
backgroundColor: "#00000000",
borderRadius: 20,
padding: 35,
alignItems: "center",
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
}) })
\ No newline at end of file
frontend/src/screen/activity/Yellow.js
View file @ a84dab60
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import Orientation from 'react-native-orientation-locker'; import Orientation from 'react-native-orientation-locker';
import {secondColor} from '../../assets/color/color'; import { secondColor } from '../../assets/color/color';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Text, TouchableOpacity, StyleSheet, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native'; import { Text, TouchableOpacity, StyleSheet, Modal, View, Dimensions, SafeAreaView, ImageBackground, Button, Image, StatusBar } from 'react-native';
import axios from "axios"; import axios from "axios";
import CountDown from 'react-native-countdown-component'; import CountDown from 'react-native-countdown-component';
import {mainColor} from '../../assets/color/color'; import { mainColor } from '../../assets/color/color';
import client from "../client/Client"; import client from "../client/Client";
import Voice from '@react-native-voice/voice'; import Voice from '@react-native-voice/voice';
...@@ -15,6 +15,8 @@ import BackButton from "../../component/BackButton" ...@@ -15,6 +15,8 @@ import BackButton from "../../component/BackButton"
export default function Yellow() { export default function Yellow() {
const [modalVisible, setModalVisible] = useState(false);
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
...@@ -62,7 +64,7 @@ export default function Yellow() { ...@@ -62,7 +64,7 @@ export default function Yellow() {
const value = e.value; const value = e.value;
if(value.includes(secondColor[3]) == true){ if (value.includes(secondColor[3]) == true) {
console.log('Your Answer is Correct'); console.log('Your Answer is Correct');
...@@ -74,7 +76,7 @@ export default function Yellow() { ...@@ -74,7 +76,7 @@ export default function Yellow() {
}); });
}; };
}else{ } else {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
...@@ -131,7 +133,7 @@ export default function Yellow() { ...@@ -131,7 +133,7 @@ export default function Yellow() {
const startRecording = async () => { const startRecording = async () => {
setModalVisible(true);
try { try {
await Voice.start('en-US'); await Voice.start('en-US');
...@@ -150,6 +152,39 @@ export default function Yellow() { ...@@ -150,6 +152,39 @@ export default function Yellow() {
return ( return (
<SafeAreaView> <SafeAreaView>
<View>
<Modal
animationType="slide"
transparent={true}
hidden={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<CountDown
size={40}
until={3}
onFinish={() => setModalVisible(false)}
// onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }}
digitTxtStyle={{ color: 'black' }}
timeLabelStyle={{ color: 'red', fontWeight: 'bold' }}
separatorStyle={{ color: 'black' }}
timeToShow={['S']}
timeLabels={{ s: 'Seconds' }}
style={styles.counter}
/>
</View>
</View>
</Modal>
</View>
<View style={{ flexDirection: "column" }}> <View style={{ flexDirection: "column" }}>
<ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}> <ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
...@@ -243,6 +278,24 @@ const styles = StyleSheet.create({ ...@@ -243,6 +278,24 @@ const styles = StyleSheet.create({
marginRight: 50, marginRight: 50,
color: "#000000", color: "#000000",
marginLeft: 50, marginLeft: 50,
} }, centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: -90,
marginLeft: -100
},
modalView: {
marginRight: 20,
backgroundColor: "#00000000",
borderRadius: 20,
padding: 35,
alignItems: "center",
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
}) })
\ No newline at end of file
frontend/src/screen/client/Client.js
View file @ a84dab60
...@@ -2,6 +2,6 @@ import axios from 'axios'; ...@@ -2,6 +2,6 @@ import axios from 'axios';
// export default axios.create({ baseURL: 'http://192.168.8.102:5000/', timeout: 15000, }); // export default axios.create({ baseURL: 'http://192.168.8.102:5000/', timeout: 15000, });
export default axios.create({ export default axios.create({
baseURL: 'http://192.168.1.100:5000/', baseURL: 'http://192.168.8.100:5000/',
timeout: 15000, timeout: 15000,
}); });
frontend/src/screen/memory/GameOverScreen.js
View file @ a84dab60
...@@ -3,6 +3,7 @@ import {View, Text, StyleSheet, Button, Image} from 'react-native'; ...@@ -3,6 +3,7 @@ import {View, Text, StyleSheet, Button, Image} from 'react-native';
import Colors from '../../constants/Colors'; import Colors from '../../constants/Colors';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import * as memoryActions from '../../store/actions/memory'; import * as memoryActions from '../../store/actions/memory';
import endpoint from '../../constants/endpoint';
const GameOverScreen = ({navigation}) => { const GameOverScreen = ({navigation}) => {
...@@ -47,7 +48,7 @@ const GameOverScreen = ({navigation}) => { ...@@ -47,7 +48,7 @@ const GameOverScreen = ({navigation}) => {
} }
const sendData = () => { 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)}`,{ fetch(`${endpoint}/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' method: 'GET'
}) })
.then(resp => resp.json()) .then(resp => resp.json())
...@@ -68,7 +69,7 @@ const GameOverScreen = ({navigation}) => { ...@@ -68,7 +69,7 @@ const GameOverScreen = ({navigation}) => {
} }
const insertData = () => { const insertData = () => {
fetch('http://192.168.8.170:5000/add', { fetch(`${endpoint}/add`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
......
frontend/src/screen/memory/elementry/GameScreenFive.js
View file @ a84dab60
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native'; import {View, Text, StyleSheet, Image} from 'react-native';
import CountDown from 'react-native-countdown-component'; import CountDown from 'react-native-countdown-component';
import Countdown from '../../../constants/Countdown';
const GameScreenFive = ({navigation}) => { const GameScreenFive = ({navigation}) => {
...@@ -15,7 +16,7 @@ const GameScreenFive = ({navigation}) => { ...@@ -15,7 +16,7 @@ const GameScreenFive = ({navigation}) => {
</View> </View>
<CountDown <CountDown
size={40} size={40}
until={5} until={Countdown.elementry}
// onFinish={() => alert('Finished')} // onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('GameScreenFiveAll')} onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}} digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
......
frontend/src/screen/memory/elementry/GameScreenFiveAll.js
View file @ a84dab60
import React,{useState,useEffect} from 'react'; import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'; import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory' import * as memoryActions from '../../../store/actions/memory'
import { SCREEN5 } from '../../../memory/data/elementry-level';
let gameData = SCREEN5.sort((item)=>Math.random(item.id)-0.5);
const GameScreenFiveAll = ({navigation}) => { const GameScreenFiveAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN5.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch(); const dispatch = useDispatch();
const [time, setTime] = useState(0); const [time, setTime] = useState(0);
...@@ -25,40 +36,22 @@ const GameScreenFiveAll = ({navigation}) => { ...@@ -25,40 +36,22 @@ const GameScreenFiveAll = ({navigation}) => {
},[timerOn]); },[timerOn]);
const renderImageItem = (itemData) => {
return( return(
<View style={styles.screen}> <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameScreenSix')}}>
<View style={styles.imageContainer}> <Image style={styles.image} source={itemData.item.source}/>
<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> </TouchableOpacity>
</View> )
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View> </View>
); );
} }
......
frontend/src/screen/memory/elementry/GameScreenFour.js
View file @ a84dab60
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native'; import {View, Text, StyleSheet, Image} from 'react-native';
import CountDown from 'react-native-countdown-component'; import CountDown from 'react-native-countdown-component';
import Countdown from '../../../constants/Countdown';
const GameScreenFour = ({navigation}) => { const GameScreenFour = ({navigation}) => {
...@@ -22,7 +23,7 @@ const GameScreenFour = ({navigation}) => { ...@@ -22,7 +23,7 @@ const GameScreenFour = ({navigation}) => {
<Text style={styles.imageText}>Car - කාරය</Text> <Text style={styles.imageText}>Car - කාරය</Text>
<CountDown <CountDown
size={40} size={40}
until={5} until={Countdown.elementry}
// onFinish={() => alert('Finished')} // onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('GameScreenFourAll')} onFinish={() => navigation.navigate('GameScreenFourAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}} digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
......
frontend/src/screen/memory/elementry/GameScreenFourAll.js
View file @ a84dab60
import React,{useState,useEffect} from 'react'; import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'; import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory' import * as memoryActions from '../../../store/actions/memory'
import { SCREEN4 } from '../../../memory/data/elementry-level';
let gameData = SCREEN4.sort((item)=>Math.random(item.id)-0.5);
const GameScreenFourAll = ({navigation}) => { const GameScreenFourAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN4.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch(); const dispatch = useDispatch();
const [time, setTime] = useState(0); const [time, setTime] = useState(0);
...@@ -25,40 +36,22 @@ const GameScreenFourAll = ({navigation}) => { ...@@ -25,40 +36,22 @@ const GameScreenFourAll = ({navigation}) => {
},[timerOn]); },[timerOn]);
const renderImageItem = (itemData) => {
return( return(
<View style={styles.screen}> <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameScreenFive')}}>
<View style={styles.imageContainer}> <Image style={styles.image} source={itemData.item.source}/>
<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> </TouchableOpacity>
</View> )
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View> </View>
); );
} }
......
frontend/src/screen/memory/elementry/GameScreenOne.js
View file @ a84dab60
...@@ -5,6 +5,7 @@ import CountDown from 'react-native-countdown-component'; ...@@ -5,6 +5,7 @@ import CountDown from 'react-native-countdown-component';
import {useDispatch} from 'react-redux'; import {useDispatch} from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'; import * as memoryActions from '../../../store/actions/memory';
import Levels from '../../../constants/Levels'; import Levels from '../../../constants/Levels';
import Countdown from '../../../constants/Countdown';
const GameScreenOne = ({navigation}) => { const GameScreenOne = ({navigation}) => {
...@@ -31,7 +32,7 @@ const GameScreenOne = ({navigation}) => { ...@@ -31,7 +32,7 @@ const GameScreenOne = ({navigation}) => {
<Text style={styles.imageText}>Pencil - පැන්සල</Text> <Text style={styles.imageText}>Pencil - පැන්සල</Text>
<CountDown <CountDown
size={40} size={40}
until={5} until={Countdown.elementry}
// onFinish={() => alert('Finished')} // onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('GameScreenOneAll')} onFinish={() => navigation.navigate('GameScreenOneAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}} digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
......
frontend/src/screen/memory/elementry/GameScreenOneAll.js
View file @ a84dab60
import React,{useEffect, useState} from 'react'; import React,{useEffect, useState} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'; import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import {useSelector, useDispatch} from 'react-redux'; import {useSelector, useDispatch} from 'react-redux';
import * as memoryActions from '../../../store/actions/memory' import * as memoryActions from '../../../store/actions/memory';
import { SCREEN1 } from '../../../memory/data/elementry-level';
let gameData = SCREEN1.sort((item)=>Math.random(item.id)-0.5);
const GameScreenOneAll = ({navigation}) => { const GameScreenOneAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN1.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch(); const dispatch = useDispatch();
const [time, setTime] = useState(0); const [time, setTime] = useState(0);
...@@ -26,40 +36,22 @@ const GameScreenOneAll = ({navigation}) => { ...@@ -26,40 +36,22 @@ const GameScreenOneAll = ({navigation}) => {
},[timerOn]); },[timerOn]);
const renderImageItem = (itemData) => {
return( return(
<View style={styles.screen}> <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = [];navigation.navigate('GameScreenTwo')}}>
<View style={styles.imageContainer}> <Image style={styles.image} source={itemData.item.source}/>
<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>
<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> return(
<View style={styles.imageContainer}> <View style={styles.screen}>
<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')}}> <FlatList
<Image style={styles.image} source={require('../../../memory/images/elementry/1/el7.jpg')}/> keyExtractor={(item, data)=>item.id}
</TouchableOpacity> data={gameData}
<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')}}> renderItem={renderImageItem}
<Image style={styles.image} source={require('../../../memory/images/elementry/1/el3.jpg')}/> numColumns={2}
</TouchableOpacity> />
</View>
</View> </View>
); );
} }
...@@ -68,7 +60,6 @@ const styles = StyleSheet.create({ ...@@ -68,7 +60,6 @@ const styles = StyleSheet.create({
screen: { screen: {
flex: 1, flex: 1,
padding: 10, padding: 10,
alignItems: 'center'
}, },
imageItem: { imageItem: {
width: '48%', width: '48%',
......
frontend/src/screen/memory/elementry/GameScreenSix.js
View file @ a84dab60
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native'; import {View, Text, StyleSheet, Image} from 'react-native';
import CountDown from 'react-native-countdown-component'; import CountDown from 'react-native-countdown-component';
import Countdown from '../../../constants/Countdown';
const GameScreenSix = ({navigation}) => { const GameScreenSix = ({navigation}) => {
...@@ -16,7 +17,7 @@ const GameScreenSix = ({navigation}) => { ...@@ -16,7 +17,7 @@ const GameScreenSix = ({navigation}) => {
<Text style={styles.imageText}>Pencil - පැන්සල</Text> <Text style={styles.imageText}>Pencil - පැන්සල</Text>
<CountDown <CountDown
size={40} size={40}
until={5} until={Countdown.elementry}
// onFinish={() => alert('Finished')} // onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('GameScreenSixAll')} onFinish={() => navigation.navigate('GameScreenSixAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}} digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
......
frontend/src/screen/memory/elementry/GameScreenSixAll.js
View file @ a84dab60
import React,{useState,useEffect} from 'react'; import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'; import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'; import * as memoryActions from '../../../store/actions/memory';
import { SCREEN6 } from '../../../memory/data/elementry-level';
let gameData = SCREEN6.sort((item)=>Math.random(item.id)-0.5);
const GameScreenSixAll = ({navigation}) => { const GameScreenSixAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN6.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch(); const dispatch = useDispatch();
const [time, setTime] = useState(0); const [time, setTime] = useState(0);
...@@ -25,40 +36,22 @@ const GameScreenSixAll = ({navigation}) => { ...@@ -25,40 +36,22 @@ const GameScreenSixAll = ({navigation}) => {
},[timerOn]); },[timerOn]);
const renderImageItem = (itemData) => {
return( return(
<View style={styles.screen}> <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameOverScreen')}}>
<View style={styles.imageContainer}> <Image style={styles.image} source={itemData.item.source}/>
<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> </TouchableOpacity>
</View> )
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View> </View>
); );
} }
......
frontend/src/screen/memory/elementry/GameScreenThree.js
View file @ a84dab60
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native'; import {View, Text, StyleSheet, Image} from 'react-native';
import CountDown from 'react-native-countdown-component'; import CountDown from 'react-native-countdown-component';
import Countdown from '../../../constants/Countdown';
const GameScreenThree = ({navigation}) => { const GameScreenThree = ({navigation}) => {
...@@ -16,7 +17,7 @@ const GameScreenThree = ({navigation}) => { ...@@ -16,7 +17,7 @@ const GameScreenThree = ({navigation}) => {
<Text style={styles.imageText}>Flower - මල</Text> <Text style={styles.imageText}>Flower - මල</Text>
<CountDown <CountDown
size={40} size={40}
until={5} until={Countdown.elementry}
// onFinish={() => alert('Finished')} // onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('GameScreenThreeAll')} onFinish={() => navigation.navigate('GameScreenThreeAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}} digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
......
frontend/src/screen/memory/elementry/GameScreenThreeAll.js
View file @ a84dab60
import React,{useState,useEffect} from 'react'; import React,{useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'; import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory'; import * as memoryActions from '../../../store/actions/memory';
import { SCREEN3 } from '../../../memory/data/elementry-level';
let gameData = SCREEN3.sort((item)=>Math.random(item.id)-0.5);
const GameScreenThreeAll = ({navigation}) => { const GameScreenThreeAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN3.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch(); const dispatch = useDispatch();
const [time, setTime] = useState(0); const [time, setTime] = useState(0);
...@@ -25,40 +36,22 @@ const GameScreenThreeAll = ({navigation}) => { ...@@ -25,40 +36,22 @@ const GameScreenThreeAll = ({navigation}) => {
},[timerOn]); },[timerOn]);
const renderImageItem = (itemData) => {
return( return(
<View style={styles.screen}> <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameScreenFour')}}>
<View style={styles.imageContainer}> <Image style={styles.image} source={itemData.item.source}/>
<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> </TouchableOpacity>
</View> )
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View> </View>
); );
} }
......
frontend/src/screen/memory/elementry/GameScreenTwo.js
View file @ a84dab60
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native'; import {View, Text, StyleSheet, Image} from 'react-native';
import CountDown from 'react-native-countdown-component'; import CountDown from 'react-native-countdown-component';
import Countdown from '../../../constants/Countdown';
const GameScreenTwo = ({navigation}) => { const GameScreenTwo = ({navigation}) => {
...@@ -16,7 +17,7 @@ const GameScreenTwo = ({navigation}) => { ...@@ -16,7 +17,7 @@ const GameScreenTwo = ({navigation}) => {
<Text style={styles.imageText}>Ball - බෝලය</Text> <Text style={styles.imageText}>Ball - බෝලය</Text>
<CountDown <CountDown
size={40} size={40}
until={5} until={Countdown.elementry}
// onFinish={() => alert('Finished')} // onFinish={() => alert('Finished')}
onFinish={() => navigation.navigate('GameScreenTwoAll')} onFinish={() => navigation.navigate('GameScreenTwoAll')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}} digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
......
frontend/src/screen/memory/elementry/GameScreenTwoAll.js
View file @ a84dab60
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import React, {useState,useEffect} from 'react'; import React, {useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'; import {View, Text, StyleSheet, Image, TouchableOpacity,FlatList} from 'react-native';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import * as memoryActions from '../../../store/actions/memory' import * as memoryActions from '../../../store/actions/memory'
import { SCREEN2 } from '../../../memory/data/elementry-level';
let gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
const GameScreenTwoAll = ({navigation}) => { const GameScreenTwoAll = ({navigation}) => {
const shuffle = () => {
gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
};
if(gameData.length == 0){
shuffle();
}
const dispatch = useDispatch(); const dispatch = useDispatch();
const [time, setTime] = useState(0); const [time, setTime] = useState(0);
...@@ -26,40 +37,22 @@ const GameScreenTwoAll = ({navigation}) => { ...@@ -26,40 +37,22 @@ const GameScreenTwoAll = ({navigation}) => {
},[timerOn]); },[timerOn]);
const renderImageItem = (itemData) => {
return( return(
<View style={styles.screen}> <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameScreenThree')}}>
<View style={styles.imageContainer}> <Image style={styles.image} source={itemData.item.source}/>
<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> </TouchableOpacity>
</View> )
}
return(
<View style={styles.screen}>
<FlatList
keyExtractor={(item, data)=>item.id}
data={gameData}
renderItem={renderImageItem}
numColumns={2}
/>
</View> </View>
); );
} }
......
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