Skip to content

21_22-J 38
21_22-J 38
Commit a04756f2 authored by W.D.R.P. Sandeepa's avatar W.D.R.P. Sandeepa
Browse files
Options

Merge branch 'it18218640' into 'master' 

It18218640

See merge request !163
parents 1f81dca2 7bb80673
Hide whitespace changes
Inline Side-by-side
Showing with 484 additions and 117 deletions
API/app.py
View file @ a04756f2
...@@ -36,8 +36,14 @@ def getColorActivities2(): ...@@ -36,8 +36,14 @@ def getColorActivities2():
@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 req
@app.route("/predict", methods=["POST"]) @app.route("/predict", methods=["POST"])
...@@ -190,6 +196,5 @@ def reading(): ...@@ -190,6 +196,5 @@ def reading():
body = jsonify(word) body = jsonify(word)
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.1.100')
API/model/colorModel.py
View file @ a04756f2
from flask import jsonify from flask import jsonify
from API.db.dbConnection import get_all_data, insert_data_json, insert_data, insert from API.db.dbConnection import get_all_data, insert_data_json, insert_data, insert, get_data
def get_color_activities1(): def get_color_activities1():
...@@ -57,20 +57,20 @@ def storeResult(date, result, userId, time, value): ...@@ -57,20 +57,20 @@ def storeResult(date, result, userId, time, value):
print(e) print(e)
return e return e
def get_color_activity_result(): 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)
......
frontend/src/component/TableList.js
View file @ a04756f2
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: [
...@@ -11,12 +15,41 @@ const CONTENT = { ...@@ -11,12 +15,41 @@ const CONTENT = {
['4 jan 2022', '2s', 'White', 'Good'], ['4 jan 2022', '2s', 'White', 'Good'],
['5 jan 2022', '2s', 'Blue', 'Good'], ['5 jan 2022', '2s', 'Blue', 'Good'],
['6 jan 2022', '2s', 'Yellow', 'Good'], ['6 jan 2022', '2s', 'Yellow', 'Good'],
], ],
}; };
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.get('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/screen/activity/Black.js
View file @ a04756f2
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,8 +14,10 @@ import BackButton from "../../component/BackButton" ...@@ -14,8 +14,10 @@ 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(() => {
StatusBar.setHidden(true); StatusBar.setHidden(true);
...@@ -102,7 +104,7 @@ export default function Black() { ...@@ -102,7 +104,7 @@ export default function Black() {
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}).then((response) => { }).then((response) => {
console.log(response.data); console.log(response.data);
}).catch(err => { }).catch(err => {
...@@ -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 @ a04756f2
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,25 +62,25 @@ export default function Blue2() { ...@@ -62,25 +62,25 @@ 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');
sendData(mainColor[4]); sendData(mainColor[4]);
showAlert = () => { showAlert = () => {
this.setState({ this.setState({
showAlert: true showAlert: true
}); });
}; };
}else{ } else {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
} }
}; };
...@@ -103,7 +103,7 @@ export default function Blue2() { ...@@ -103,7 +103,7 @@ export default function Blue2() {
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}).then((response) => { }).then((response) => {
console.log(response.data); console.log(response.data);
}).catch(err => { }).catch(err => {
...@@ -119,19 +119,19 @@ export default function Blue2() { ...@@ -119,19 +119,19 @@ export default function Blue2() {
// console.log(value.length) // console.log(value.length)
// setPartialResults(e.value); // setPartialResults(e.value);
}; };
const onFinishCD = () => { const onFinishCD = () => {
Alert.alert('Countdown Finished...'); Alert.alert('Countdown Finished...');
} }
const onPressCD = () => { const onPressCD = () => {
Alert.alert('Countdown Component Pressed...'); 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 +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 @ a04756f2
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";
...@@ -72,17 +74,17 @@ export default function Green() { ...@@ -72,17 +74,17 @@ export default function Green() {
showAlert = () => { showAlert = () => {
this.setState({ this.setState({
showAlert: true showAlert: true
}); });
}; };
}else{ } else {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
} }
}; };
...@@ -105,7 +107,7 @@ export default function Green() { ...@@ -105,7 +107,7 @@ export default function Green() {
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}).then((response) => { }).then((response) => {
console.log(response.data); console.log(response.data);
}).catch(err => { }).catch(err => {
...@@ -121,19 +123,19 @@ export default function Green() { ...@@ -121,19 +123,19 @@ export default function Green() {
// console.log(value.length) // console.log(value.length)
// setPartialResults(e.value); // setPartialResults(e.value);
}; };
const onFinishCD = () => { const onFinishCD = () => {
Alert.alert('Countdown Finished...'); Alert.alert('Countdown Finished...');
} }
const onPressCD = () => { const onPressCD = () => {
Alert.alert('Countdown Component Pressed...'); 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');
...@@ -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 @ a04756f2
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"
export default function Red() { export default function Red() {
const [modalVisible, setModalVisible] = useState(false);
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
...@@ -62,7 +61,7 @@ export default function Red() { ...@@ -62,7 +61,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');
...@@ -70,17 +69,17 @@ export default function Red() { ...@@ -70,17 +69,17 @@ export default function Red() {
showAlert = () => { showAlert = () => {
this.setState({ this.setState({
showAlert: true showAlert: true
}); });
}; };
}else{ } else {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
} }
}; };
...@@ -103,7 +102,7 @@ export default function Red() { ...@@ -103,7 +102,7 @@ export default function Red() {
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}).then((response) => { }).then((response) => {
console.log(response.data); console.log(response.data);
}).catch(err => { }).catch(err => {
...@@ -119,19 +118,19 @@ export default function Red() { ...@@ -119,19 +118,19 @@ export default function Red() {
// console.log(value.length) // console.log(value.length)
// setPartialResults(e.value); // setPartialResults(e.value);
}; };
const onFinishCD = () => { const onFinishCD = () => {
Alert.alert('Countdown Finished...'); Alert.alert('Countdown Finished...');
} }
const onPressCD = () => { const onPressCD = () => {
Alert.alert('Countdown Component Pressed...'); 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 +149,39 @@ export default function Red() { ...@@ -150,6 +149,39 @@ 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 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 +218,7 @@ export default function Red() { ...@@ -186,7 +218,7 @@ export default function Red() {
</View> </View>
<View style={{ marginLeft: -100 }}> <View style={{ marginLeft: -100 }}>
<TouchableOpacity onPress={() => { }} <TouchableOpacity onPress={() => { }}
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 +275,24 @@ const styles = StyleSheet.create({ ...@@ -243,6 +275,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/White.js
View file @ a04756f2
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');
...@@ -70,17 +72,17 @@ export default function White() { ...@@ -70,17 +72,17 @@ export default function White() {
showAlert = () => { showAlert = () => {
this.setState({ this.setState({
showAlert: true showAlert: true
}); });
}; };
}else{ } else {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
} }
}; };
...@@ -103,7 +105,7 @@ export default function White() { ...@@ -103,7 +105,7 @@ export default function White() {
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}).then((response) => { }).then((response) => {
console.log(response.data); console.log(response.data);
}).catch(err => { }).catch(err => {
...@@ -119,19 +121,19 @@ export default function White() { ...@@ -119,19 +121,19 @@ export default function White() {
// console.log(value.length) // console.log(value.length)
// setPartialResults(e.value); // setPartialResults(e.value);
}; };
const onFinishCD = () => { const onFinishCD = () => {
Alert.alert('Countdown Finished...'); Alert.alert('Countdown Finished...');
} }
const onPressCD = () => { const onPressCD = () => {
Alert.alert('Countdown Component Pressed...'); 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 +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,10 +220,10 @@ export default function White() { ...@@ -185,10 +220,10 @@ 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, }} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
...@@ -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 @ a04756f2
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');
...@@ -70,17 +72,17 @@ export default function Yellow() { ...@@ -70,17 +72,17 @@ export default function Yellow() {
showAlert = () => { showAlert = () => {
this.setState({ this.setState({
showAlert: true showAlert: true
}); });
}; };
}else{ } else {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
} }
}; };
...@@ -103,7 +105,7 @@ export default function Yellow() { ...@@ -103,7 +105,7 @@ export default function Yellow() {
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}).then((response) => { }).then((response) => {
console.log(response.data); console.log(response.data);
}).catch(err => { }).catch(err => {
...@@ -119,19 +121,19 @@ export default function Yellow() { ...@@ -119,19 +121,19 @@ export default function Yellow() {
// console.log(value.length) // console.log(value.length)
// setPartialResults(e.value); // setPartialResults(e.value);
}; };
const onFinishCD = () => { const onFinishCD = () => {
Alert.alert('Countdown Finished...'); Alert.alert('Countdown Finished...');
} }
const onPressCD = () => { const onPressCD = () => {
Alert.alert('Countdown Component Pressed...'); 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 +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
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