Skip to content

P
pianoApp
Commit 194a1e62 authored by norhalimah's avatar norhalimah
Browse files
Options

backhandler fixed

parent d794fa83
Show whitespace changes
Inline Side-by-side
Showing with 206 additions and 225 deletions
img/background.jpg
View replaced file @ d794fa83 View file @ 194a1e62
img/background.jpg

6.75 KB | W: | H:

img/background.jpg

35.6 KB | W: | H:

img/background.jpg
img/background.jpg
img/background.jpg
img/background.jpg
  • 2-up
  • Swipe
  • Onion skin
screens/home.js
View file @ 194a1e62
......@@ -20,17 +20,18 @@ class Home extends React.PureComponent {
async componentDidMount() {
Orientation.lockToPortrait();
BackHandler.addEventListener('hardwareBackPress', exitApp);
// Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
}
componentWillUnmount() {
Orientation.lockToPortrait();
BackHandler.removeEventListener('hardwareBackPress', exitApp);
// Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
}
render() {
BackHandler.addEventListener('hardwareBackPress', exitApp);
return (
<View style={styles.container}>
<ImageBackground
......@@ -41,7 +42,7 @@ class Home extends React.PureComponent {
}}>
<SafeAreaView>
<ScrollView>
<View style={{marginTop: '5%', marginBottom: '5%'}}>
<View style={{marginTop: '15%', marginBottom: '5%'}}>
<TouchableOpacity
style={styles.menu}
onPress={() => {
......@@ -87,8 +88,8 @@ const styles = StyleSheet.create({
marginLeft: '3%',
marginRight: '3%',
borderRadius: 10,
borderWidth: 2,
borderColor: 'white',
borderWidth: 5,
borderColor: 'black',
backgroundColor: 'white',
},
});
screens/logbook.js
View file @ 194a1e62
......@@ -41,16 +41,17 @@ class LogBook extends React.PureComponent {
componentDidMount() {
Orientation.lockToPortrait();
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
this.displayData();
}
homeExit = async () => {
this.props.navigation.navigate('1');
BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
//Orientation.lockToPortrait();
};
render() {
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
return (
<View style={styles.container}>
<ImageBackground
......@@ -69,25 +70,28 @@ class LogBook extends React.PureComponent {
key ={id}
style={{
flexDirection: 'row',
padding: 10,
paddingLeft: 15,
paddingRight: 15,
paddingBottom:10,
paddingTop:5,
backgroundColor: 'white',
borderBottomWidth:1,
}}>
<View style={{alignItems: 'center'}}>
<View style={{marginRight:10, marginBottom:10}}>
<Text style={{color:'black', fontSize: 40}}>{(item.date !== undefined) ? item.date.split(' ')[0].trim() : ''}</Text>
<Text style={{color:'black', fontSize: 15, marginLeft:11}}>{(item.date !== undefined) ? item.date.split(' ')[1].trim() : ''}</Text>
<View style={{alignItems: 'center',marginRight:5}}>
<View>
<Text style={{color:'black', fontSize: 40,textAlign: 'center'}}>{(item.date !== undefined) ? item.date.split(' ')[0].trim() : ''}</Text>
<Text style={{color:'black', fontSize: 15, textAlign: 'center'}}>{(item.date !== undefined) ? item.date.split(' ')[1].trim() : ''}</Text>
</View>
<View style={{marginRight:5}}>
<Text style={{color:'black', fontSize: 15}}>{item.day}</Text>
<View>
<Text style={{color:'black', fontSize: 15, textAlign: 'center'}}>{item.day}</Text>
</View>
</View>
<View style={{borderWidth:1, borderColor : 'blue'}}/>
<View style={{flexDirection: 'column',marginLeft:5,marginTop:5}}>
<Text style={{color:'green', fontSize: 15}}>Correct : {item.correct}</Text>
<Text style={{color:'red', fontSize: 15}}>Wrong : {item.wrong}</Text>
<Text style={{color:'black', fontSize: 15}}>Timer : {item.timer}</Text>
<Text style={{color:'black', fontSize: 15}}>Time : {item.time}</Text>
<View style={{borderWidth:1, borderColor : 'gray'}}/>
<View style={{flexDirection: 'column',marginLeft:5,marginTop:10}}>
<Text style={{color:'green', fontSize: 15}}>Correct:{item.correct}</Text>
<Text style={{color:'red', fontSize: 15}}>Wrong: {item.wrong}</Text>
<Text style={{color:'black', fontSize: 15}}>Timer: {item.timer}</Text>
<Text style={{color:'black', fontSize: 15}}>Time: {item.time}</Text>
</View>
</View>
)).reverse()}
......@@ -105,6 +109,7 @@ const styles = StyleSheet.create({
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#9001f5',
},
menu: {
marginTop: '3%',
......
screens/quiz.js
View file @ 194a1e62
......@@ -4,7 +4,7 @@
/* eslint-disable prettier/prettier */
import React from 'react';
import {
//ImageBackground,
ImageBackground,
Text,
View,
StatusBar,
......@@ -59,6 +59,7 @@ const NOTESFF1 = [{name: 'F#2', url: require('../sound/f_ff.mp3')}];
const NOTESGG1 = [{name: 'G#2', url: require('../sound/g_gg.mp3')}];
const NOTESAA1 = [{name: 'A#2', url: require('../sound/a_aa.mp3')}];
const keywordsList = [];
const exitApp = () => BackHandler.exitApp();
var imageN = '';
var indexN = 0;
......@@ -82,6 +83,7 @@ class Quiz extends React.Component {
showC : false,
showW : false,
showDone : false,
showQuit : false,
maxCount : 5,
records: [],
};
......@@ -96,9 +98,9 @@ class Quiz extends React.Component {
// loaded successfully
sound.play((success) => {
if (success) {
console.log('successfully finished playing');
// console.log('successfully finished playing');
} else {
console.log('playback failed due to audio decoding errors');
// console.log('playback failed due to audio decoding errors');
sound.release();
}
});
......@@ -108,10 +110,10 @@ class Quiz extends React.Component {
let index = -1;
if ((index = keywordsList.indexOf(keyword.name)) !== -1) {
list.splice(index, 1);
console.log(list);
// console.log(list);
} else {
list.push(keyword.name);
console.log(list);
// console.log(list);
}
this.setState({keywordsList: list});
};
......@@ -171,7 +173,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
// console.log('finish');
this.backAction();
}
else {
......@@ -184,7 +186,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
// console.log('finish');
this.backAction();
}
else {
......@@ -202,7 +204,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -215,7 +217,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -233,7 +235,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
// console.log('finish');
this.backAction();
}
else {
......@@ -246,7 +248,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
// console.log('finish');
this.backAction();
}
else {
......@@ -264,7 +266,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
// console.log('finish');
this.backAction();
}
else {
......@@ -277,7 +279,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
// console.log('finish');
this.backAction();
}
else {
......@@ -295,7 +297,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -308,7 +310,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
// console.log('finish');
this.backAction();
}
else {
......@@ -326,7 +328,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
// console.log('finish');
this.backAction();
}
else {
......@@ -339,7 +341,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
// console.log('finish');
this.backAction();
}
else {
......@@ -357,7 +359,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -388,7 +390,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -401,7 +403,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -419,7 +421,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -432,7 +434,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -450,7 +452,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -463,7 +465,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -481,7 +483,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -494,7 +496,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -512,7 +514,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -525,7 +527,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -543,7 +545,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
// console.log('finish');
this.backAction();
}
else {
......@@ -556,7 +558,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -574,7 +576,7 @@ class Quiz extends React.Component {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
console.log('finish');
// console.log('finish');
this.backAction();
}
else {
......@@ -587,7 +589,7 @@ class Quiz extends React.Component {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
console.log('finish');
//console.log('finish');
this.backAction();
}
else {
......@@ -601,7 +603,7 @@ class Quiz extends React.Component {
homeExit = async () => {
// this.props.navigation.navigate('1');
Alert.alert('Hold on!', 'Are you sure you want to exit?', [
Alert.alert('Hold on!', 'Are you sure you want to quit?', [
{
text: 'Cancel',
onPress: () => null,
......@@ -609,7 +611,7 @@ class Quiz extends React.Component {
},
{ text: 'YES', onPress: () => [ this.props.navigation.navigate('1'), Orientation.lockToPortrait()]},
]);
return true;
};
backAction = () => {
......@@ -619,14 +621,14 @@ class Quiz extends React.Component {
componentDidMount() {
//this.removeArray();
// BackHandler.addEventListener('hardwareBackPress', this.homeExit);
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
Orientation.lockToLandscape();
this.displayData();
}
componentWillUnmount() {
this.removeArray();
// BackHandler.addEventListener('hardwareBackPress', this.homeExit);
BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
//clearInterval(this.interval);
// Orientation.lockToLandscape();
}
......@@ -642,18 +644,18 @@ this.setState({records: []});
this.setState({
logbook: JSON.parse(value),
});
console.log(this.state.logbook);
// console.log(this.state.logbook);
RNFS.readFile(path1, 'ascii')
.then((ccc) => {
console.log('has notes has counter');
console.log(ccc);
// console.log(ccc);
imageN = Math.floor(Math.random() * this.state.logbook.length);
this.setState({
name : this.state.logbook[imageN],
maxCount : ccc,
});
indexN = Notes.findIndex(item=> item.name === this.state.name);
console.log(this.state.name);
// console.log(this.state.name);
})
.catch((err) => {
console.log(err.message, err.code);
......@@ -663,9 +665,9 @@ this.setState({records: []});
name : this.state.logbook[imageN],
maxCount : 10,
});
console.log(this.state.name);
// console.log(this.state.name);
indexN = Notes.findIndex(item=> item.name === this.state.name);
console.log(indexN);
// console.log(indexN);
});
}
else {
......@@ -713,13 +715,13 @@ this.setState({records: []});
value = JSON.parse(value);
value.push(obj);
// console.log(value);
console.log('We have data!!');
// console.log('We have data!!');
AsyncStorage.setItem('@storage_key', JSON.stringify(value), (err)=> {
if (err){
console.log('an error');
throw err;
}
console.log('success');
// console.log('success');
}).catch((err)=> {
console.log('error is: ' + err);
});
......@@ -731,7 +733,7 @@ this.setState({records: []});
console.log('an error');
throw err;
}
console.log('success'); //console.log(JSON.stringify(this.state.listN));
// console.log('success'); //console.log(JSON.stringify(this.state.listN));
}).catch((err)=> {
console.log('error is: ' + err);
});
......@@ -781,31 +783,39 @@ this.setState({records: []});
const CorrectAlertBox = () =>{
return (
<Modal transparent={true} visible={this.state.showC}>
<Modal transparent={true} visible={this.state.showC} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginTop: Dimensions.get('window').height * 0.3,
marginLeft: Dimensions.get('window').width * 0.3,
backgroundColor: 'white',
marginLeft: Dimensions.get('window').width * 0.25,
width : Dimensions.get('window').width * 0.4,
borderRadius: 5,
alignItems: 'center',
}}>
<ImageBackground
source={require('../img/correctAlert.png')}
style={{
width: '130%',
height: '95%',
}}>
<Text style={{fontSize: 20, margin:10}}>Correct</Text>
<Text style={{fontSize: 25,textAlign: 'center', marginTop:Dimensions.get('window').height * 0.43, marginLeft:120, color:'white'}}>Correct</Text>
<View
style={{
alignItems: 'flex-end',
alignItems: 'center',
marginLeft:120,
}}>
<TouchableOpacity style={{
backgroundColor: 'black',
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
margin:10,
marginTop:10,
marginBottom:10,
}}
onPress={() => this.setState({showC: false})}>
<Text style={{color: 'white'}}>Ok</Text>
<Text style={{color: 'black'}}>OK</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</View>
</Modal>
......@@ -814,31 +824,39 @@ this.setState({records: []});
const WrongAlertBox = () =>{
return (
<Modal transparent={true} visible={this.state.showW}>
<Modal transparent={true} visible={this.state.showW} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginTop: Dimensions.get('window').height * 0.3,
marginLeft: Dimensions.get('window').width * 0.3,
backgroundColor: 'white',
marginLeft: Dimensions.get('window').width * 0.25,
width : Dimensions.get('window').width * 0.4,
borderRadius: 5,
alignItems: 'center',
}}>
<ImageBackground
source={require('../img/wrongAlert.png')}
style={{
width: '130%',
height: '95%',
}}>
<Text style={{fontSize: 20, margin:10}}>Wrong</Text>
<Text style={{fontSize: 25,textAlign: 'center', marginTop:Dimensions.get('window').height * 0.43, marginLeft:120, color:'white'}}>Wrong</Text>
<View
style={{
alignItems: 'flex-end',
alignItems: 'center',
marginLeft:120,
}}>
<TouchableOpacity style={{
backgroundColor: 'black',
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
margin:10,
marginTop:10,
marginBottom:10,
}}
onPress={() => this.setState({showW: false})}>
<Text style={{color: 'white'}}>Ok</Text>
<Text style={{color: 'black'}}>OK</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</View>
</Modal>
......@@ -847,7 +865,7 @@ this.setState({records: []});
const DoneAlertBox = () =>{
return (
<Modal transparent={true} visible={this.state.showDone}>
<Modal transparent={true} visible={this.state.showDone} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
......@@ -858,8 +876,8 @@ this.setState({records: []});
borderRadius: 5,
}}>
<Text style={{fontSize: 20, margin:10}}>Well Done</Text>
<Text style={{fontSize: 15, marginLeft:10}}>Correct : {this.state.correct}</Text>
<Text style={{fontSize: 15, marginLeft:10}}>Wrong: {this.state.wrong}</Text>
<Text style={{fontSize: 15, marginLeft:10, color: 'green'}}>Correct : {this.state.correct}</Text>
<Text style={{fontSize: 15, marginLeft:10, color:'red'}}>Wrong: {this.state.wrong}</Text>
<View
style={{
alignItems: 'flex-end',
......@@ -871,7 +889,7 @@ this.setState({records: []});
margin : 10,
}}
onPress={() => this.setState({showDone: false})}>
<Text style={{color: 'white'}}>Ok</Text>
<Text style={{color: 'white'}}>OK</Text>
</TouchableOpacity>
</View>
</View>
......@@ -882,6 +900,12 @@ this.setState({records: []});
return (
<View style={styles.container}>
<ImageBackground
source={require('../img/background.jpg')}
style={{
width: '100%',
height: '100%',
}}>
<CorrectAlertBox />
<WrongAlertBox />
<DoneAlertBox />
......@@ -901,6 +925,8 @@ this.setState({records: []});
backgroundColor: 'black',
padding: 5,
borderRadius: 10,
borderColor:'white',
borderWidth:3,
width: 200,
alignItems: 'center',
},
......@@ -908,7 +934,7 @@ this.setState({records: []});
fontSize: 25,
color: '#FFF',
textAlign: 'center',
paddingTop: 10,
paddingTop: 5,
alignItems: 'center',
},
}}
......@@ -929,6 +955,7 @@ this.setState({records: []});
</View>
<Image style={styles.logo} source={Notes[indexN].image} />
</View>
<View style={{borderWidth:5, borderColor:'black'}}/>
<View style={styles.c2}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight
......@@ -1063,6 +1090,7 @@ this.setState({records: []});
</TouchableHighlight>
))}
</View>
</ImageBackground>
</View>
);
}
......
screens/settings.js
View file @ 194a1e62
......@@ -3,7 +3,7 @@
import React from 'react';
import {
SafeAreaView,
//ImageBackground,
ImageBackground,
Text,
View,
TouchableOpacity,
......@@ -148,10 +148,17 @@ export default class Settings extends React.Component {
});
};
componentWillUnmount() {
Orientation.lockToPortrait();
BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
// Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
}
componentDidMount() {
// notes.splice(0, notes.length);
// console.log(notes);
Orientation.lockToPortrait();
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
// console.log(notes.length);
counter = 0;
RNFS.unlink(path1).then(res => {
......@@ -180,14 +187,19 @@ export default class Settings extends React.Component {
};
render() {
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
return (
<View style={styles.container}>
<ImageBackground
source={require('../img/background.jpg')}
style={{
width: '100%',
height: '100%',
}}>
<SafeAreaView>
<View style={{alignItems:'center',marginTop: '15%', marginLeft: config.deviceWidth * 0.08,
marginRight: config.deviceWidth * 0.1, flexDirection: 'row',
flexWrap: 'wrap'}}>
<Text style={{fontSize: 15,marginRight:5}}>No. of Questions : </Text>
<Text style={{fontSize: 16,marginRight:9}}>No. of Questions : </Text>
<NumericInput
value={this.state.value}
minValue={0}
......@@ -213,6 +225,7 @@ export default class Settings extends React.Component {
width: config.deviceWidth,
marginLeft: config.deviceWidth * 0.08,
marginRight: config.deviceWidth * 0.1,
marginBottom: config.deviceHeight * 0.12,
}}>
{Notes.map((item, id) => (
<View key={id}>
......@@ -240,6 +253,7 @@ export default class Settings extends React.Component {
</View>
</ScrollView>
</SafeAreaView>
</ImageBackground>
</View>
);
}
......@@ -256,8 +270,8 @@ const styles = StyleSheet.create({
flex: 1,
width: config.deviceWidth * 0.4,
alignItems: 'center',
borderWidth: 1,
borderColor: 'black',
borderWidth: 3,
borderColor: 'white',
borderRadius: 10,
backgroundColor: 'rgba(52, 52, 52, 0.0)',
//opacity: 0.5,
......@@ -269,7 +283,7 @@ const styles = StyleSheet.create({
flex: 1,
width: config.deviceWidth * 0.4,
alignItems: 'center',
borderWidth: 1,
borderWidth: 3,
borderColor: 'black',
backgroundColor: 'white',
// backgroundColor: 'rgba(0,0,0,0)',
......
screens/totalScore.js deleted 100644 → 0
View file @ d794fa83
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from './style.js';
import {useNavigation} from '@react-navigation/native';
export default class TotalScore extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
};
}
componentDidMount() {
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
buttonB1,
buttonB2,
buttonB3,
buttonB4,
buttonB5,
SbuttonB1,
SbuttonB2,
SbuttonB3,
SbuttonB4,
SbuttonB5,
} = styles;
return (
<View style={styles.container}>
<View style={styles.c1}>
<View style={styles.boxScore}>
<Text style={{fontSize: 20}}>Total Score </Text>
<Text>Correct :{this.state.correct}</Text>
<Text>Wrong :{this.state.wrong}</Text>
</View>
<Button
title="START AGAIN"
color="#E07EF9"
onPress={() => this.props.navigation.navigate('1')}
/>
</View>
</View>
);
}
}
style/style.js
View file @ 194a1e62
......@@ -53,46 +53,56 @@ export default StyleSheet.create({
borderWidth: 3,
borderRadius: 10,
position: 'absolute',
marginTop: config.deviceWidth * 0.1,
marginTop: config.deviceWidth * 0.11,
backgroundColor:'white',
},
correct: {
width: 100,
textAlign: 'center',
paddingTop: 15,
color: 'black',
color: 'white',
height: 60,
borderRadius: 10,
alignItems: 'center',
fontSize: 25,
marginRight: 10,
backgroundColor:'green',
borderColor:'white',
borderWidth: 2,
},
wrong: {
width: 100,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 15,
color: 'black',
color: 'white',
fontSize: 25,
marginRight: 10,
backgroundColor:'red',
borderWidth: 2,
},
timer: {
width: 65,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 16,
color: 'white',
fontSize: 25,
backgroundColor:'black',
borderWidth: 2,
},
submit: {
width: '40%',
marginTop: config.deviceWidth * 0.055,
borderColor:'white',
borderWidth: 2,
borderRadius: 5,
},
viewMain: {
width: '20%',
......@@ -115,7 +125,7 @@ export default StyleSheet.create({
marginLeft: config.deviceHeight * 1.0,
},
buttonStyle: {
width: config.deviceWidth * 0.072,
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
......@@ -123,7 +133,7 @@ export default StyleSheet.create({
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: config.deviceWidth * 0.072,
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
......@@ -133,25 +143,25 @@ export default StyleSheet.create({
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
marginLeft: config.deviceWidth * 0.047,
height: '55%',
marginLeft: config.deviceWidth * 0.048,
width: '5%',
position: 'absolute',
},
buttonB2: {
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
height: '55%',
width: '5%',
marginLeft: config.deviceWidth * 0.119,
marginLeft: config.deviceWidth * 0.123,
position: 'absolute',
},
buttonB3: {
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
height: '55%',
width: '5%',
marginLeft: config.deviceWidth * 0.26,
marginLeft: config.deviceWidth * 0.275,
position: 'absolute',
},
......@@ -159,81 +169,81 @@ export default StyleSheet.create({
alignItems: 'center',
backgroundColor: 'black',
width: '5%',
height: '65%',
marginLeft: config.deviceWidth * 0.335,
height: '55%',
marginLeft: config.deviceWidth * 0.348,
position: 'absolute',
},
buttonB5: {
alignItems: 'center',
backgroundColor: 'black',
width: '5%',
height: '65%',
height: '55%',
marginBottom: 10,
marginLeft: config.deviceWidth * 0.406,
marginLeft: config.deviceWidth * 0.423,
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: 'blue',
height: '65%',
marginLeft: config.deviceWidth * 0.047,
backgroundColor: '#92ddea',
height: '55%',
marginLeft: config.deviceWidth * 0.048,
width: '5%',
position: 'absolute',
},
SbuttonB2: {
alignItems: 'center',
backgroundColor: 'blue',
height: '65%',
backgroundColor: '#92ddea',
height: '55%',
width: '5%',
marginLeft: config.deviceWidth * 0.119,
marginLeft: config.deviceWidth * 0.123,
position: 'absolute',
},
SbuttonB3: {
alignItems: 'center',
backgroundColor: 'blue',
height: '65%',
backgroundColor: '#92ddea',
height: '55%',
width: '5%',
marginLeft: config.deviceWidth * 0.26,
marginLeft: config.deviceWidth * 0.275,
position: 'absolute',
},
SbuttonB4: {
alignItems: 'center',
backgroundColor: 'blue',
backgroundColor: '#92ddea',
width: '5%',
height: '65%',
marginLeft: config.deviceWidth * 0.335,
height: '55%',
marginLeft: config.deviceWidth * 0.348,
position: 'absolute',
},
SbuttonB5: {
alignItems: 'center',
backgroundColor: 'blue',
backgroundColor: '#92ddea',
width: '5%',
height: '65%',
marginLeft: config.deviceWidth * 0.406,
height: '55%',
marginLeft: config.deviceWidth * 0.423,
position: 'absolute',
},
buttonB11: {
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
marginLeft: config.deviceWidth * 0.55,
height: '55%',
marginLeft: config.deviceWidth * 0.575,
width: '5%',
position: 'absolute',
},
buttonB21: {
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
marginLeft: config.deviceWidth * 0.623,
height: '55%',
marginLeft: config.deviceWidth * 0.65,
width: '5%',
position: 'absolute',
},
buttonB31: {
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
marginLeft: config.deviceWidth * 0.767,
height: '55%',
marginLeft: config.deviceWidth * 0.798,
width: '5%',
position: 'absolute',
},
......@@ -242,57 +252,57 @@ export default StyleSheet.create({
alignItems: 'center',
backgroundColor: 'black',
width: '5%',
height: '65%',
marginLeft: config.deviceWidth * 0.839,
height: '55%',
marginLeft: config.deviceWidth * 0.872,
position: 'absolute',
},
buttonB51: {
alignItems: 'center',
backgroundColor: 'black',
width: '5%',
height: '65%',
height: '55%',
marginBottom: 10,
marginLeft: config.deviceWidth * 0.91,
marginLeft: config.deviceWidth * 0.95,
position: 'absolute',
},
SbuttonB11: {
alignItems: 'center',
backgroundColor: 'blue',
height: '65%',
marginLeft: config.deviceWidth * 0.55,
backgroundColor: '#92ddea',
height: '55%',
marginLeft: config.deviceWidth * 0.575,
width: '5%',
position: 'absolute',
},
SbuttonB21: {
alignItems: 'center',
backgroundColor: 'blue',
height: '65%',
marginLeft: config.deviceWidth * 0.623,
backgroundColor: '#92ddea',
height: '55%',
marginLeft: config.deviceWidth * 0.65,
width: '5%',
position: 'absolute',
},
SbuttonB31: {
alignItems: 'center',
backgroundColor: 'blue',
height: '65%',
marginLeft: config.deviceWidth * 0.767,
backgroundColor: '#92ddea',
height: '55%',
marginLeft: config.deviceWidth * 0.798,
width: '5%',
position: 'absolute',
},
SbuttonB41: {
alignItems: 'center',
backgroundColor: 'blue',
backgroundColor: '#92ddea',
width: '5%',
height: '65%',
marginLeft: config.deviceWidth * 0.839,
height: '55%',
marginLeft: config.deviceWidth * 0.872,
position: 'absolute',
},
SbuttonB51: {
alignItems: 'center',
backgroundColor: 'blue',
backgroundColor: '#92ddea',
width: '5%',
height: '65%',
marginLeft: config.deviceWidth * 0.91,
height: '55%',
marginLeft: config.deviceWidth * 0.95,
position: 'absolute',
},
boxScore: {
......
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