Skip to content

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

change interface

parent d6c8e846
Hide whitespace changes
Inline Side-by-side
Showing with 1478 additions and 212 deletions
frontend/src/component/ImageButton.js
View file @ 6450a215
...@@ -8,7 +8,7 @@ export default function ImageButton(props){ ...@@ -8,7 +8,7 @@ export default function ImageButton(props){
const {title, path} = props; const {title, path} = props;
return( return(
<TouchableOpacity onPress={()=> {navigation.navigate(path)}} style={styles.ImageButton}> <TouchableOpacity onPress={()=> {navigation.navigate(path, { type: 'primary'})}} style={styles.ImageButton}>
<Text style={styles.text}>{title}</Text> <Text style={styles.text}>{title}</Text>
</TouchableOpacity> </TouchableOpacity>
); );
......
frontend/src/router/router.js
View file @ 6450a215
...@@ -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 @ 6450a215
...@@ -8,12 +8,22 @@ import ColorActivity from "../component/colorActivity"; ...@@ -8,12 +8,22 @@ import ColorActivity from "../component/colorActivity";
import client from "./client/Client"; import client from "./client/Client";
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
export default function Color() { export default function Color(props) {
const [type, setType] = useState('');
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
setType(props.route.params.type);
// const type2 = props.route.params.type2;
// console.log(props);
// console.log(type);
// console.log(type2);
const unsubscribe = navigation.addListener("focus", () => { const unsubscribe = navigation.addListener("focus", () => {
Orientation.unlockAllOrientations(); Orientation.unlockAllOrientations();
Orientation.lockToPortrait(); Orientation.lockToPortrait();
......
frontend/src/screen/activity/Black.js
View file @ 6450a215
...@@ -9,17 +9,23 @@ import CountDown from 'react-native-countdown-component'; ...@@ -9,17 +9,23 @@ 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 AsyncStorage from '@react-native-async-storage/async-storage';
import BackButton from "../../component/BackButton" import BackButton from "../../component/BackButton"
export default function Black() { export default function Black() {
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false);
const [colorData, setColorData] = useState({ activity: '' });
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners);
StatusBar.setHidden(true); StatusBar.setHidden(true);
const unsubscribe = navigation.addListener("focus", () => { const unsubscribe = navigation.addListener("focus", () => {
...@@ -69,16 +75,17 @@ export default function Black() { ...@@ -69,16 +75,17 @@ export default function Black() {
sendData(mainColor[2]) sendData(mainColor[2])
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);
setModalVisible3(true);
} }
...@@ -87,29 +94,45 @@ export default function Black() { ...@@ -87,29 +94,45 @@ export default function Black() {
function sendData(value) { function sendData(value) {
var date = new Date().getDate(); AsyncStorage.getItem('colorToken')
var month = new Date().getMonth() + 1; .then(res => {
var year = new Date().getFullYear();
var todayData = date + '-' + month + '-' + year; var date = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
var data = { var todayData = date + '-' + month + '-' + year;
value: value,
date: todayData var data = {
} value: value,
date: todayData,
token: res,
}
data = JSON.stringify(data);
setColorData(data);
data = JSON.stringify(data); console.log(data);
client.post('store', data, { client.post('store', data, {
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 => { stopRecording();
console.log(err); setModalVisible2(true);
}) // navigation.navigate("Green");
}).catch(err => {
console.log(err);
})
})
.catch(error => {
console.log(error);
});
} }
...@@ -154,7 +177,7 @@ export default function Black() { ...@@ -154,7 +177,7 @@ export default function Black() {
<View> <View>
<Modal <Modal
animationType="slide" animationType="fade"
transparent={true} transparent={true}
hidden={true} hidden={true}
visible={modalVisible} visible={modalVisible}
...@@ -171,7 +194,7 @@ export default function Black() { ...@@ -171,7 +194,7 @@ export default function Black() {
// onFinish={() => navigation.navigate('GameScreenFiveAll')} // onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }} digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }}
digitTxtStyle={{ color: 'black' }} digitTxtStyle={{ color: 'black' }}
timeLabelStyle={{ color: 'red', fontWeight: 'bold' }} timeLabelStyle={{ color: 'white', fontWeight: 'bold' }}
separatorStyle={{ color: 'black' }} separatorStyle={{ color: 'black' }}
timeToShow={['S']} timeToShow={['S']}
timeLabels={{ s: 'Seconds' }} timeLabels={{ s: 'Seconds' }}
...@@ -184,6 +207,67 @@ export default function Black() { ...@@ -184,6 +207,67 @@ export default function Black() {
</View> </View>
<View>
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={modalVisible2}
onRequestClose={() => {
setModalVisible2(!modalVisible2);
}}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Image style={styles.alert2} source={require("../../assets/alert/2.png")}></Image>
<Text style={styles.headStyle2}>Your answer is</Text>
<Text style={styles.head2Style2}>Corect.</Text>
<Text style={{marginBottom: 10, fontSize: 20,}}>Finish first round.</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => navigation.navigate("Color", { type: 'secondary'})}
>
<Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-10}} />
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
<View>
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={modalVisible3}
onRequestClose={() => {
setModalVisible3(!modalVisible3);
}}
>
<View style={styles.centeredView3}>
<View style={styles.modalView3}>
<Image style={styles.alert3} source={require("../../assets/alert/1.png")}></Image>
<Text style={styles.headStyle3}>Your answer is</Text>
<Text style={styles.head2Style3}>Incorect.</Text>
<TouchableOpacity
style={[]}
onPress={() => setModalVisible3(!modalVisible3)}
>
<Image source={require('../../assets/alert/tryagain.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-1}} />
</TouchableOpacity>
</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")}>
...@@ -220,7 +304,7 @@ export default function Black() { ...@@ -220,7 +304,7 @@ export default function Black() {
</View> </View>
<View style={{ marginLeft: -100, marginTop: -15 }}> <View style={{ marginLeft: -100, marginTop: -15 }}>
<TouchableOpacity onPress={() => { }} <TouchableOpacity onPress={() => { navigation.navigate("Color", { type: 'secondary'})}}
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>
...@@ -290,14 +374,6 @@ const styles = StyleSheet.create({ ...@@ -290,14 +374,6 @@ const styles = StyleSheet.create({
borderRadius: 20, borderRadius: 20,
padding: 35, padding: 35,
alignItems: "center", alignItems: "center",
// shadowColor: "#000",
// shadowOffset: {
// width: 0,
// height: 2
// },
// shadowOpacity: 0.25,
// shadowRadius: 4,
// elevation: 5
}, },
button: { button: {
borderRadius: 20, borderRadius: 20,
...@@ -305,4 +381,141 @@ const styles = StyleSheet.create({ ...@@ -305,4 +381,141 @@ const styles = StyleSheet.create({
elevation: 2 elevation: 2
}, },
centeredView2: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView2: {
marginTop: -10,
margin: 20,
backgroundColor: "#FFFFFFEF",
borderRadius: 20,
padding: 35,
borderWidth: 5,
borderColor: "#1DCE92",
alignItems: "center",
shadowColor: "red",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen2: {
backgroundColor: "#F194FF",
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText2: {
marginBottom: 15,
textAlign: "center"
},
headStyle2: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 20,
},alert2: {
backgroundColor: "white",
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80
},
centeredView3: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: -20
},
modalView3: {
margin: 20,
backgroundColor: "#FFFFFF",
borderRadius: 20,
padding: 20,
borderWidth: 5,
borderColor: "#1DCE92",
alignItems: "center",
shadowColor: "red",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button3: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen3: {
backgroundColor: "#F194FF",
},
buttonClose3: {
backgroundColor: "#1DCE92",
},
textStyle3: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
headStyle3: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 5,
},
head2Style3: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 20,
},
modalText3: {
marginBottom: 15,
textAlign: "center"
},
alert3: {
backgroundColor: "white",
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -65
}
}) })
\ No newline at end of file
frontend/src/screen/activity/Blue.js
View file @ 6450a215
...@@ -285,6 +285,48 @@ const styles = StyleSheet.create({ ...@@ -285,6 +285,48 @@ const styles = StyleSheet.create({
marginRight: 50, marginRight: 50,
color: "#000000", color: "#000000",
marginLeft: 50, marginLeft: 50,
} },
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/Blue2.js
View file @ 6450a215
...@@ -10,15 +10,20 @@ import client from "../client/Client"; ...@@ -10,15 +10,20 @@ 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"
import AsyncStorage from '@react-native-async-storage/async-storage';
export default function Blue2() { export default function Blue2() {
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false);
const [colorData, setColorData] = useState({ activity: '' });
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners);
StatusBar.setHidden(true); StatusBar.setHidden(true);
const unsubscribe = navigation.addListener("focus", () => { const unsubscribe = navigation.addListener("focus", () => {
...@@ -78,6 +83,7 @@ export default function Blue2() { ...@@ -78,6 +83,7 @@ export default function Blue2() {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
setModalVisible3(true);
} }
...@@ -86,29 +92,45 @@ export default function Blue2() { ...@@ -86,29 +92,45 @@ export default function Blue2() {
function sendData(value) { function sendData(value) {
var date = new Date().getDate(); AsyncStorage.getItem('colorToken')
var month = new Date().getMonth() + 1; .then(res => {
var year = new Date().getFullYear();
var todayData = date + '-' + month + '-' + year; var date = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
var data = { var todayData = date + '-' + month + '-' + year;
value: value,
date: todayData var data = {
} value: value,
date: todayData,
token: res,
}
data = JSON.stringify(data);
setColorData(data);
console.log(data);
data = JSON.stringify(data); client.post('store', data, {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
}).then((response) => {
console.log(response.data);
stopRecording();
setModalVisible2(true);
// navigation.navigate("Green");
}).catch(err => {
console.log(err);
})
client.post('store', data, { })
headers: { .catch(error => {
Accept: 'application/json', console.log(error);
'Content-Type': 'application/json', });
},
}).then((response) => {
console.log(response.data);
}).catch(err => {
console.log(err);
})
} }
...@@ -153,7 +175,7 @@ export default function Blue2() { ...@@ -153,7 +175,7 @@ export default function Blue2() {
<View> <View>
<Modal <Modal
animationType="slide" animationType="fade"
transparent={true} transparent={true}
hidden={true} hidden={true}
visible={modalVisible} visible={modalVisible}
...@@ -170,7 +192,7 @@ export default function Blue2() { ...@@ -170,7 +192,7 @@ export default function Blue2() {
// onFinish={() => navigation.navigate('GameScreenFiveAll')} // onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }} digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }}
digitTxtStyle={{ color: 'black' }} digitTxtStyle={{ color: 'black' }}
timeLabelStyle={{ color: 'red', fontWeight: 'bold' }} timeLabelStyle={{ color: 'white', fontWeight: 'bold' }}
separatorStyle={{ color: 'black' }} separatorStyle={{ color: 'black' }}
timeToShow={['S']} timeToShow={['S']}
timeLabels={{ s: 'Seconds' }} timeLabels={{ s: 'Seconds' }}
...@@ -183,6 +205,66 @@ export default function Blue2() { ...@@ -183,6 +205,66 @@ export default function Blue2() {
</View> </View>
<View>
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={modalVisible2}
onRequestClose={() => {
setModalVisible2(!modalVisible2);
}}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Image style={styles.alert2} source={require("../../assets/alert/2.png")}></Image>
<Text style={styles.headStyle2}>Your answer is</Text>
<Text style={styles.head2Style2}>Corect.</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => navigation.navigate("White")}
>
<Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-10}} />
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
<View>
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={modalVisible3}
onRequestClose={() => {
setModalVisible3(!modalVisible3);
}}
>
<View style={styles.centeredView3}>
<View style={styles.modalView3}>
<Image style={styles.alert3} source={require("../../assets/alert/1.png")}></Image>
<Text style={styles.headStyle3}>Your answer is</Text>
<Text style={styles.head2Style3}>Incorect.</Text>
<TouchableOpacity
style={[]}
onPress={() => setModalVisible3(!modalVisible3)}
>
<Image source={require('../../assets/alert/tryagain.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-1}} />
</TouchableOpacity>
</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")}>
...@@ -214,16 +296,16 @@ export default function Blue2() { ...@@ -214,16 +296,16 @@ export default function Blue2() {
<View style={{}}> <View style={{}}>
<TouchableOpacity onPress={startRecording} <TouchableOpacity onPress={startRecording}
style={{ width: "30%", height: "40%", borderRadius: 50 }}> style={{ width: "30%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -190 }} /> <Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -100 }} />
</TouchableOpacity> </TouchableOpacity>
</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>
</View> </View> */}
</View> </View>
...@@ -296,4 +378,142 @@ const styles = StyleSheet.create({ ...@@ -296,4 +378,142 @@ const styles = StyleSheet.create({
elevation: 2 elevation: 2
}, },
centeredView2: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView2: {
marginTop: -10,
margin: 20,
backgroundColor: "#FFFFFFEF",
borderRadius: 20,
padding: 35,
borderWidth: 5,
borderColor: "#1DCE92",
alignItems: "center",
shadowColor: "red",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen2: {
backgroundColor: "#F194FF",
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText2: {
marginBottom: 15,
textAlign: "center"
},
headStyle2: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 20,
},alert2: {
backgroundColor: "white",
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80
},
centeredView3: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: -20
},
modalView3: {
margin: 20,
backgroundColor: "#FFFFFF",
borderRadius: 20,
padding: 20,
borderWidth: 5,
borderColor: "#1DCE92",
alignItems: "center",
shadowColor: "red",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button3: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen3: {
backgroundColor: "#F194FF",
},
buttonClose3: {
backgroundColor: "#1DCE92",
},
textStyle3: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
headStyle3: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 5,
},
head2Style3: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 20,
},
modalText3: {
marginBottom: 15,
textAlign: "center"
},
alert3: {
backgroundColor: "white",
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -65
}
}) })
\ No newline at end of file
frontend/src/screen/activity/Green.js
View file @ 6450a215
...@@ -8,19 +8,25 @@ import CountDown from 'react-native-countdown-component'; ...@@ -8,19 +8,25 @@ 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';
import AsyncStorage from '@react-native-async-storage/async-storage';
import BackButton from "../../component/BackButton" import BackButton from "../../component/BackButton"
export default function Green() { export default function Green({ navigation }) {
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false);
const [colorData, setColorData] = useState({ activity: '' });
const navigation = useNavigation(); // const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners);
StatusBar.setHidden(true); StatusBar.setHidden(true);
const unsubscribe = navigation.addListener("focus", () => { const unsubscribe = navigation.addListener("focus", () => {
...@@ -39,8 +45,6 @@ export default function Green() { ...@@ -39,8 +45,6 @@ export default function Green() {
Voice.onSpeechResults = onSpeechResultsHandler; Voice.onSpeechResults = onSpeechResultsHandler;
Voice.onSpeechPartialResults = onSpeechPartialResults; Voice.onSpeechPartialResults = onSpeechPartialResults;
// console.log(backColor);
return () => { return () => {
Voice.destroy().then(Voice.removeAllListeners); Voice.destroy().then(Voice.removeAllListeners);
}; };
...@@ -66,22 +70,22 @@ export default function Green() { ...@@ -66,22 +70,22 @@ export default function Green() {
if (value.includes(secondColor[1]) == true) { if (value.includes(secondColor[1]) == true) {
var color = "Green"; const value = e.value;
console.log('Your Answer is Correct'); console.log('Your Answer is Correct');
sendData(mainColor[1]) sendData(mainColor[1])
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);
setModalVisible3(true);
} }
...@@ -90,29 +94,45 @@ export default function Green() { ...@@ -90,29 +94,45 @@ export default function Green() {
function sendData(value) { function sendData(value) {
var date = new Date().getDate(); AsyncStorage.getItem('colorToken')
var month = new Date().getMonth() + 1; .then(res => {
var year = new Date().getFullYear();
var todayData = date + '-' + month + '-' + year; var date = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
var data = { var todayData = date + '-' + month + '-' + year;
value: value,
date: todayData var data = {
} value: value,
date: todayData,
token: res,
}
data = JSON.stringify(data);
data = JSON.stringify(data); setColorData(data);
client.post('store', data, { console.log(data);
headers: {
Accept: 'application/json', client.post('store', data, {
'Content-Type': 'application/json', headers: {
}, Accept: 'application/json',
}).then((response) => { 'Content-Type': 'application/json',
console.log(response.data); },
}).catch(err => { }).then((response) => {
console.log(err); console.log(response.data);
}) stopRecording();
setModalVisible2(true);
// navigation.navigate("Green");
}).catch(err => {
console.log(err);
})
})
.catch(error => {
console.log(error);
});
} }
...@@ -138,6 +158,7 @@ export default function Green() { ...@@ -138,6 +158,7 @@ export default function Green() {
setModalVisible(true); setModalVisible(true);
try { try {
// console.log('startRecording');
await Voice.start('en-US'); await Voice.start('en-US');
} catch (error) { } catch (error) {
console.log('error =>> ', error); console.log('error =>> ', error);
...@@ -157,7 +178,7 @@ export default function Green() { ...@@ -157,7 +178,7 @@ export default function Green() {
<View> <View>
<Modal <Modal
animationType="slide" animationType="fade"
transparent={true} transparent={true}
hidden={true} hidden={true}
visible={modalVisible} visible={modalVisible}
...@@ -171,10 +192,9 @@ export default function Green() { ...@@ -171,10 +192,9 @@ export default function Green() {
size={40} size={40}
until={3} until={3}
onFinish={() => setModalVisible(false)} onFinish={() => setModalVisible(false)}
// onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }} digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }}
digitTxtStyle={{ color: 'black' }} digitTxtStyle={{ color: 'black' }}
timeLabelStyle={{ color: 'red', fontWeight: 'bold' }} timeLabelStyle={{ color: 'white', fontWeight: 'bold' }}
separatorStyle={{ color: 'black' }} separatorStyle={{ color: 'black' }}
timeToShow={['S']} timeToShow={['S']}
timeLabels={{ s: 'Seconds' }} timeLabels={{ s: 'Seconds' }}
...@@ -187,6 +207,66 @@ export default function Green() { ...@@ -187,6 +207,66 @@ export default function Green() {
</View> </View>
<View>
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={modalVisible2}
onRequestClose={() => {
setModalVisible2(!modalVisible2);
}}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Image style={styles.alert2} source={require("../../assets/alert/2.png")}></Image>
<Text style={styles.headStyle2}>Your answer is</Text>
<Text style={styles.head2Style2}>Corect.</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => navigation.navigate("Black")}
>
<Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-10}} />
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
<View>
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={modalVisible3}
onRequestClose={() => {
setModalVisible3(!modalVisible3);
}}
>
<View style={styles.centeredView3}>
<View style={styles.modalView3}>
<Image style={styles.alert3} source={require("../../assets/alert/1.png")}></Image>
<Text style={styles.headStyle3}>Your answer is</Text>
<Text style={styles.head2Style3}>Incorect.</Text>
<TouchableOpacity
style={[]}
onPress={() => setModalVisible3(!modalVisible3)}
>
<Image source={require('../../assets/alert/tryagain.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-1}} />
</TouchableOpacity>
</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")}>
...@@ -218,16 +298,16 @@ export default function Green() { ...@@ -218,16 +298,16 @@ export default function Green() {
<View style={{}}> <View style={{}}>
<TouchableOpacity onPress={startRecording} <TouchableOpacity onPress={startRecording}
style={{ width: "30%", height: "40%", borderRadius: 50 }}> style={{ width: "30%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -190 }} /> <Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -100 }} />
</TouchableOpacity> </TouchableOpacity>
</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>
</View> </View> */}
</View> </View>
...@@ -293,14 +373,6 @@ const styles = StyleSheet.create({ ...@@ -293,14 +373,6 @@ const styles = StyleSheet.create({
borderRadius: 20, borderRadius: 20,
padding: 35, padding: 35,
alignItems: "center", alignItems: "center",
// shadowColor: "#000",
// shadowOffset: {
// width: 0,
// height: 2
// },
// shadowOpacity: 0.25,
// shadowRadius: 4,
// elevation: 5
}, },
button: { button: {
borderRadius: 20, borderRadius: 20,
...@@ -308,4 +380,141 @@ const styles = StyleSheet.create({ ...@@ -308,4 +380,141 @@ const styles = StyleSheet.create({
elevation: 2 elevation: 2
}, },
centeredView2: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView2: {
marginTop: -10,
margin: 20,
backgroundColor: "#FFFFFF",
borderRadius: 20,
padding: 35,
borderWidth: 5,
borderColor: "#1DCE92",
alignItems: "center",
shadowColor: "green",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen2: {
backgroundColor: "#F194FF",
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText2: {
marginBottom: 15,
textAlign: "center"
},
headStyle2: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 20,
},alert2: {
backgroundColor: "white",
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80
},
centeredView3: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: -20
},
modalView3: {
margin: 20,
backgroundColor: "#FFFFFF",
borderRadius: 20,
padding: 20,
borderWidth: 5,
borderColor: "#1DCE92",
alignItems: "center",
shadowColor: "green",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button3: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen3: {
backgroundColor: "#F194FF",
},
buttonClose3: {
backgroundColor: "#1DCE92",
},
textStyle3: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
headStyle3: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 5,
},
head2Style3: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 20,
},
modalText3: {
marginBottom: 15,
textAlign: "center"
},
alert3: {
backgroundColor: "white",
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -65
}
}) })
\ No newline at end of file
frontend/src/screen/activity/PrimaryType.js
View file @ 6450a215
...@@ -5,14 +5,14 @@ import { Text, TouchableOpacity, StyleSheet, View, Image, SafeAreaView, ScrollVi ...@@ -5,14 +5,14 @@ import { Text, TouchableOpacity, StyleSheet, View, Image, SafeAreaView, ScrollVi
import ColorActivity from "../../component/colorActivity"; import ColorActivity from "../../component/colorActivity";
import client from "../client/Client"; import client from "../client/Client";
export default function PrimaryType(title) { export default function PrimaryType({navigation}) {
// const { id, title } = props; // const { id, title } = props;
const title1 = title.route.params.title; // const title1 = title.route.params.title;
const id = title.route.params.id; // const id = title.route.params.id;
const navigation = useNavigation(); // const navigation = useNavigation();
const [names, setNames] = useState([]); const [names, setNames] = useState([]);
...@@ -52,7 +52,7 @@ export default function PrimaryType(title) { ...@@ -52,7 +52,7 @@ export default function PrimaryType(title) {
<View> <View>
<ImageBackground source={require("../../assets/color/background.png")} <ImageBackground source={require("../../assets/color/background.png")}
style={styles.image}> style={styles.image}>
<Text style={styles.title}>{title1}</Text> <Text style={styles.title}>Primary Activities</Text>
</ImageBackground> </ImageBackground>
</View> </View>
</View> </View>
......
frontend/src/screen/activity/Red.js
View file @ 6450a215
...@@ -11,15 +11,16 @@ import Voice from '@react-native-voice/voice'; ...@@ -11,15 +11,16 @@ 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'; import AsyncStorage from '@react-native-async-storage/async-storage';
export default function Red() { export default function Red({ navigation }) {
const [colorToken, setColorToken] = useState(); const [colorToken, setColorToken] = useState();
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false); const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false);
const [colorData, setColorData] = useState({ activity: '' }); const [colorData, setColorData] = useState({ activity: '' });
const navigation = useNavigation(); // const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
...@@ -47,12 +48,6 @@ export default function Red() { ...@@ -47,12 +48,6 @@ export default function Red() {
}; };
}, []); }, []);
useEffect(() => {
// console.log(colorToken);
}, []);
const onSpeechStartHandler = e => { const onSpeechStartHandler = e => {
// console.log('start handler =>> ', e); // console.log('start handler =>> ', e);
}; };
...@@ -77,16 +72,16 @@ export default function Red() { ...@@ -77,16 +72,16 @@ export default function Red() {
sendData(mainColor[0]) sendData(mainColor[0])
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);
setModalVisible3(true);
} }
...@@ -149,7 +144,8 @@ export default function Red() { ...@@ -149,7 +144,8 @@ export default function Red() {
}, },
}).then((response) => { }).then((response) => {
console.log(response.data); console.log(response.data);
// setModalVisible2(true); stopRecording();
setModalVisible2(true);
// navigation.navigate("Green"); // navigation.navigate("Green");
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
...@@ -173,7 +169,7 @@ export default function Red() { ...@@ -173,7 +169,7 @@ export default function Red() {
const startRecording = async () => { const startRecording = async () => {
// setModalVisible(true); setModalVisible(true);
try { try {
await Voice.start('en-US'); await Voice.start('en-US');
...@@ -195,7 +191,7 @@ export default function Red() { ...@@ -195,7 +191,7 @@ export default function Red() {
<View> <View>
<Modal <Modal
animationType="slide" animationType="fade"
transparent={true} transparent={true}
hidden={true} hidden={true}
visible={modalVisible} visible={modalVisible}
...@@ -212,7 +208,7 @@ export default function Red() { ...@@ -212,7 +208,7 @@ export default function Red() {
// onFinish={() => navigation.navigate('GameScreenFiveAll')} // onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }} digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }}
digitTxtStyle={{ color: 'black' }} digitTxtStyle={{ color: 'black' }}
timeLabelStyle={{ color: 'red', fontWeight: 'bold' }} timeLabelStyle={{ color: 'white', fontWeight: 'bold' }}
separatorStyle={{ color: 'black' }} separatorStyle={{ color: 'black' }}
timeToShow={['S']} timeToShow={['S']}
timeLabels={{ s: 'Seconds' }} timeLabels={{ s: 'Seconds' }}
...@@ -227,7 +223,7 @@ export default function Red() { ...@@ -227,7 +223,7 @@ export default function Red() {
<View> <View>
<Modal <Modal
animationType="slide" animationType="fade"
transparent={true} transparent={true}
hidden={true} hidden={true}
visible={modalVisible2} visible={modalVisible2}
...@@ -237,13 +233,47 @@ export default function Red() { ...@@ -237,13 +233,47 @@ export default function Red() {
> >
<View style={styles.centeredView2}> <View style={styles.centeredView2}>
<View style={styles.modalView2}> <View style={styles.modalView2}>
<Text>Your answer is Corect</Text>
<Pressable <Image style={styles.alert2} source={require("../../assets/alert/2.png")}></Image>
style={[styles.button, styles.buttonClose2]}
<Text style={styles.headStyle2}>Your answer is</Text>
<Text style={styles.head2Style2}>Corect.</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => navigation.navigate("Green")} onPress={() => navigation.navigate("Green")}
> >
<Text style={styles.textStyle2}>Next Game</Text> <Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-10}} />
</Pressable> </TouchableOpacity>
</View>
</View>
</Modal>
</View>
<View>
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={modalVisible3}
onRequestClose={() => {
setModalVisible3(!modalVisible3);
}}
>
<View style={styles.centeredView3}>
<View style={styles.modalView3}>
<Image style={styles.alert3} source={require("../../assets/alert/1.png")}></Image>
<Text style={styles.headStyle3}>Your answer is</Text>
<Text style={styles.head2Style3}>Incorect.</Text>
<TouchableOpacity
style={[]}
onPress={() => setModalVisible3(!modalVisible3)}
>
<Image source={require('../../assets/alert/tryagain.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-1}} />
</TouchableOpacity>
</View> </View>
</View> </View>
...@@ -282,16 +312,16 @@ export default function Red() { ...@@ -282,16 +312,16 @@ export default function Red() {
<View style={{}}> <View style={{}}>
<TouchableOpacity onPress={startRecording} <TouchableOpacity onPress={startRecording}
style={{ width: "30%", height: "40%", borderRadius: 50 }}> style={{ width: "30%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -190 }} /> <Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -100 }} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{ marginLeft: -100 }}> {/* <View style={{ marginLeft: -100 }}>
<TouchableOpacity onPress={() => { navigation.navigate("Green")}} <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>
</View> </View> */}
</View> </View>
...@@ -364,46 +394,145 @@ const styles = StyleSheet.create({ ...@@ -364,46 +394,145 @@ const styles = StyleSheet.create({
elevation: 2 elevation: 2
}, },
centeredView2: { centeredView2: {
flex: 1, flex: 1,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
marginTop: 22 marginTop: 22
}, },
modalView2: { modalView2: {
marginTop: -10,
margin: 20, margin: 20,
backgroundColor: "white", backgroundColor: "#FFFFFFEF",
borderRadius: 20, borderRadius: 20,
padding: 35, padding: 35,
borderWidth: 5,
borderColor: "#1DCE92",
alignItems: "center",
shadowColor: "red",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen2: {
backgroundColor: "#F194FF",
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText2: {
marginBottom: 15,
textAlign: "center"
},
headStyle2: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 20,
},alert2: {
backgroundColor: "white",
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80
},
centeredView3: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: -20
},
modalView3: {
margin: 20,
backgroundColor: "#FFFFFF",
borderRadius: 20,
padding: 20,
borderWidth: 5,
borderColor: "#1DCE92",
alignItems: "center", alignItems: "center",
shadowColor: "#000", shadowColor: "red",
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 2 height: 2
}, },
shadowOpacity: 0.25, shadowOpacity: 0.25,
shadowRadius: 4, shadowRadius: 4,
elevation: 5 elevation: 5
}, },
button2: { button3: {
borderRadius: 20, borderRadius: 20,
padding: 10, padding: 10,
elevation: 2 elevation: 2
}, },
buttonOpen2: { buttonOpen3: {
backgroundColor: "#F194FF", backgroundColor: "#F194FF",
}, },
buttonClose2: { buttonClose3: {
backgroundColor: "#2196F3", backgroundColor: "#1DCE92",
}, },
textStyle2: { textStyle3: {
color: "white", color: "white",
fontWeight: "bold", fontWeight: "bold",
textAlign: "center" textAlign: "center"
}, },
modalText2: { headStyle3: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 5,
},
head2Style3: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 20,
},
modalText3: {
marginBottom: 15, marginBottom: 15,
textAlign: "center" textAlign: "center"
} },
alert3: {
backgroundColor: "white",
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -65
}
}) })
\ No newline at end of file
frontend/src/screen/activity/White.js
View file @ 6450a215
...@@ -8,19 +8,22 @@ import { secondColor } from '../../assets/color/color'; ...@@ -8,19 +8,22 @@ 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 AsyncStorage from '@react-native-async-storage/async-storage';
import BackButton from "../../component/BackButton" import BackButton from "../../component/BackButton"
export default function White() { export default function White() {
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false);
const [colorData, setColorData] = useState({ activity: '' });
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners)
StatusBar.setHidden(true); StatusBar.setHidden(true);
const unsubscribe = navigation.addListener("focus", () => { const unsubscribe = navigation.addListener("focus", () => {
...@@ -78,8 +81,8 @@ export default function White() { ...@@ -78,8 +81,8 @@ export default function White() {
} else { } else {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
setModalVisible3(true);
} }
...@@ -88,29 +91,44 @@ export default function White() { ...@@ -88,29 +91,44 @@ export default function White() {
function sendData(value) { function sendData(value) {
var date = new Date().getDate(); AsyncStorage.getItem('colorToken')
var month = new Date().getMonth() + 1; .then(res => {
var year = new Date().getFullYear();
var todayData = date + '-' + month + '-' + year; var date = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
var data = { var todayData = date + '-' + month + '-' + year;
value: value,
date: todayData
}
data = JSON.stringify(data); var data = {
value: value,
date: todayData,
token: res,
}
client.post('store', data, { data = JSON.stringify(data);
headers: {
Accept: 'application/json', setColorData(data);
'Content-Type': 'application/json',
}, console.log(data);
}).then((response) => {
console.log(response.data); client.post('store', data, {
}).catch(err => { headers: {
console.log(err); Accept: 'application/json',
}) 'Content-Type': 'application/json',
},
}).then((response) => {
console.log(response.data);
stopRecording();
setModalVisible2(true);
}).catch(err => {
console.log(err);
})
})
.catch(error => {
console.log(error);
});
} }
...@@ -155,7 +173,7 @@ export default function White() { ...@@ -155,7 +173,7 @@ export default function White() {
<View> <View>
<Modal <Modal
animationType="slide" animationType="fade"
transparent={true} transparent={true}
hidden={true} hidden={true}
visible={modalVisible} visible={modalVisible}
...@@ -172,7 +190,7 @@ export default function White() { ...@@ -172,7 +190,7 @@ export default function White() {
// onFinish={() => navigation.navigate('GameScreenFiveAll')} // onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }} digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }}
digitTxtStyle={{ color: 'black' }} digitTxtStyle={{ color: 'black' }}
timeLabelStyle={{ color: 'red', fontWeight: 'bold' }} timeLabelStyle={{ color: 'white', fontWeight: 'bold' }}
separatorStyle={{ color: 'black' }} separatorStyle={{ color: 'black' }}
timeToShow={['S']} timeToShow={['S']}
timeLabels={{ s: 'Seconds' }} timeLabels={{ s: 'Seconds' }}
...@@ -185,6 +203,67 @@ export default function White() { ...@@ -185,6 +203,67 @@ export default function White() {
</View> </View>
<View>
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={modalVisible2}
onRequestClose={() => {
setModalVisible2(!modalVisible2);
}}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Image style={styles.alert2} source={require("../../assets/alert/2.png")}></Image>
<Text style={styles.headStyle2}>Your answer is</Text>
<Text style={styles.head2Style2}>Corect.</Text>
<Text style={{marginBottom: 10, fontSize: 20,}}>Finish second round.</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => navigation.navigate("Color", { type: 'result'})}
>
<Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-10}} />
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
<View>
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={modalVisible3}
onRequestClose={() => {
setModalVisible3(!modalVisible3);
}}
>
<View style={styles.centeredView3}>
<View style={styles.modalView3}>
<Image style={styles.alert3} source={require("../../assets/alert/1.png")}></Image>
<Text style={styles.headStyle3}>Your answer is</Text>
<Text style={styles.head2Style3}>Incorect.</Text>
<TouchableOpacity
style={[]}
onPress={() => setModalVisible3(!modalVisible3)}
>
<Image source={require('../../assets/alert/tryagain.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-1}} />
</TouchableOpacity>
</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")}>
...@@ -221,7 +300,7 @@ export default function White() { ...@@ -221,7 +300,7 @@ export default function White() {
</View> </View>
<View style={{ marginLeft: -100, marginTop: -15 }}> <View style={{ marginLeft: -100, marginTop: -15 }}>
<TouchableOpacity onPress={() => { }} <TouchableOpacity onPress={() => { navigation.navigate("Color", { type: 'result'}) }}
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>
...@@ -298,4 +377,153 @@ const styles = StyleSheet.create({ ...@@ -298,4 +377,153 @@ const styles = StyleSheet.create({
elevation: 2 elevation: 2
}, },
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: {
marginTop: -10,
margin: 20,
backgroundColor: "#FFFFFFEF",
borderRadius: 20,
padding: 35,
borderWidth: 5,
borderColor: "#1DCE92",
alignItems: "center",
shadowColor: "red",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen2: {
backgroundColor: "#F194FF",
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText2: {
marginBottom: 15,
textAlign: "center"
},
headStyle2: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 20,
},alert2: {
backgroundColor: "white",
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80
},
centeredView3: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: -20
},
modalView3: {
margin: 20,
backgroundColor: "#FFFFFF",
borderRadius: 20,
padding: 20,
borderWidth: 5,
borderColor: "#1DCE92",
alignItems: "center",
shadowColor: "red",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button3: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen3: {
backgroundColor: "#F194FF",
},
buttonClose3: {
backgroundColor: "#1DCE92",
},
textStyle3: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
headStyle3: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 5,
},
head2Style3: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 20,
},
modalText3: {
marginBottom: 15,
textAlign: "center"
},
alert3: {
backgroundColor: "white",
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -65
}
}) })
\ No newline at end of file
frontend/src/screen/activity/Yellow.js
View file @ 6450a215
...@@ -8,19 +8,21 @@ import CountDown from 'react-native-countdown-component'; ...@@ -8,19 +8,21 @@ 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';
import AsyncStorage from '@react-native-async-storage/async-storage';
import BackButton from "../../component/BackButton" import BackButton from "../../component/BackButton"
export default function Yellow() { export default function Yellow() {
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false);
const [colorData, setColorData] = useState({ activity: '' });
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
Voice.destroy().then(Voice.removeAllListeners);
StatusBar.setHidden(true); StatusBar.setHidden(true);
const unsubscribe = navigation.addListener("focus", () => { const unsubscribe = navigation.addListener("focus", () => {
...@@ -78,8 +80,8 @@ export default function Yellow() { ...@@ -78,8 +80,8 @@ export default function Yellow() {
} else { } else {
console.log('Your Answer is Incorrect', value); console.log('Your Answer is Incorrect', value);
setModalVisible3(true);
} }
...@@ -88,29 +90,45 @@ export default function Yellow() { ...@@ -88,29 +90,45 @@ export default function Yellow() {
function sendData(value) { function sendData(value) {
var date = new Date().getDate(); AsyncStorage.getItem('colorToken')
var month = new Date().getMonth() + 1; .then(res => {
var year = new Date().getFullYear();
var todayData = date + '-' + month + '-' + year; var date = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
var data = { var todayData = date + '-' + month + '-' + year;
value: value,
date: todayData var data = {
} value: value,
date: todayData,
token: res,
}
data = JSON.stringify(data); data = JSON.stringify(data);
client.post('store', data, { setColorData(data);
headers: {
Accept: 'application/json', console.log(data);
'Content-Type': 'application/json',
}, client.post('store', data, {
}).then((response) => { headers: {
console.log(response.data); Accept: 'application/json',
}).catch(err => { 'Content-Type': 'application/json',
console.log(err); },
}) }).then((response) => {
console.log(response.data);
stopRecording();
setModalVisible2(true);
// navigation.navigate("Green");
}).catch(err => {
console.log(err);
})
})
.catch(error => {
console.log(error);
});
} }
...@@ -155,7 +173,7 @@ export default function Yellow() { ...@@ -155,7 +173,7 @@ export default function Yellow() {
<View> <View>
<Modal <Modal
animationType="slide" animationType="fade"
transparent={true} transparent={true}
hidden={true} hidden={true}
visible={modalVisible} visible={modalVisible}
...@@ -172,7 +190,7 @@ export default function Yellow() { ...@@ -172,7 +190,7 @@ export default function Yellow() {
// onFinish={() => navigation.navigate('GameScreenFiveAll')} // onFinish={() => navigation.navigate('GameScreenFiveAll')}
digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }} digitStyle={{ backgroundColor: '#FFF', borderWidth: 2, borderColor: 'black' }}
digitTxtStyle={{ color: 'black' }} digitTxtStyle={{ color: 'black' }}
timeLabelStyle={{ color: 'red', fontWeight: 'bold' }} timeLabelStyle={{ color: 'white', fontWeight: 'bold' }}
separatorStyle={{ color: 'black' }} separatorStyle={{ color: 'black' }}
timeToShow={['S']} timeToShow={['S']}
timeLabels={{ s: 'Seconds' }} timeLabels={{ s: 'Seconds' }}
...@@ -185,6 +203,66 @@ export default function Yellow() { ...@@ -185,6 +203,66 @@ export default function Yellow() {
</View> </View>
<View>
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={modalVisible2}
onRequestClose={() => {
setModalVisible2(!modalVisible2);
}}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Image style={styles.alert2} source={require("../../assets/alert/2.png")}></Image>
<Text style={styles.headStyle2}>Your answer is</Text>
<Text style={styles.head2Style2}>Corect.</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => navigation.navigate("Blue2")}
>
<Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-10}} />
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
<View>
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={modalVisible3}
onRequestClose={() => {
setModalVisible3(!modalVisible3);
}}
>
<View style={styles.centeredView3}>
<View style={styles.modalView3}>
<Image style={styles.alert3} source={require("../../assets/alert/1.png")}></Image>
<Text style={styles.headStyle3}>Your answer is</Text>
<Text style={styles.head2Style3}>Incorect.</Text>
<TouchableOpacity
style={[]}
onPress={() => setModalVisible3(!modalVisible3)}
>
<Image source={require('../../assets/alert/tryagain.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-1}} />
</TouchableOpacity>
</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")}>
...@@ -216,16 +294,16 @@ export default function Yellow() { ...@@ -216,16 +294,16 @@ export default function Yellow() {
<View style={{}}> <View style={{}}>
<TouchableOpacity onPress={startRecording} <TouchableOpacity onPress={startRecording}
style={{ width: "30%", height: "40%", borderRadius: 50 }}> style={{ width: "30%", height: "40%", borderRadius: 50 }}>
<Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -190 }} /> <Image source={require('../../assets/game/mic2.png')} resizeMode='contain' style={{ flex: 1, marginLeft: -100 }} />
</TouchableOpacity> </TouchableOpacity>
</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>
</View> </View> */}
</View> </View>
...@@ -298,4 +376,141 @@ const styles = StyleSheet.create({ ...@@ -298,4 +376,141 @@ const styles = StyleSheet.create({
elevation: 2 elevation: 2
}, },
centeredView2: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView2: {
marginTop: -10,
margin: 20,
backgroundColor: "#FFFFFFEF",
borderRadius: 20,
padding: 35,
borderWidth: 5,
borderColor: "#1DCE92",
alignItems: "center",
shadowColor: "red",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen2: {
backgroundColor: "#F194FF",
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText2: {
marginBottom: 15,
textAlign: "center"
},
headStyle2: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 20,
},alert2: {
backgroundColor: "white",
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80
},
centeredView3: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: -20
},
modalView3: {
margin: 20,
backgroundColor: "#FFFFFF",
borderRadius: 20,
padding: 20,
borderWidth: 5,
borderColor: "#1DCE92",
alignItems: "center",
shadowColor: "red",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button3: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen3: {
backgroundColor: "#F194FF",
},
buttonClose3: {
backgroundColor: "#1DCE92",
},
textStyle3: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
headStyle3: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 5,
},
head2Style3: {
color: "black",
fontWeight: "bold",
textAlign: "center",
fontSize: 30,
marginBottom: 20,
},
modalText3: {
marginBottom: 15,
textAlign: "center"
},
alert3: {
backgroundColor: "white",
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -65
}
}) })
\ 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