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