Skip to content

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

update style

parent 11a4245d
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 148 deletions
App.js
View file @ a0a9af4c
...@@ -141,12 +141,18 @@ class App extends React.PureComponent { ...@@ -141,12 +141,18 @@ class App extends React.PureComponent {
name="2" name="2"
component={Quiz} component={Quiz}
options={({navigation}) => ({ options={({navigation}) => ({
//title: 'C Major', title: 'Scale',
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39',
},
headerStyle: { headerStyle: {
backgroundColor: '#E07EF9', backgroundColor: '#E07EF9',
}, },
headerTintColor: '#fff', headerTintColor: '#fff',
title: '',
headerTransparent: true, headerTransparent: true,
headerBackImage: () => ( headerBackImage: () => (
<Icon <Icon
...@@ -166,12 +172,18 @@ class App extends React.PureComponent { ...@@ -166,12 +172,18 @@ class App extends React.PureComponent {
name="3" name="3"
component={Listen} component={Listen}
options={({navigation}) => ({ options={({navigation}) => ({
//title: 'C Major', title: 'Listen Skill',
headerStyle: { headerStyle: {
backgroundColor: '#E07EF9', backgroundColor: '#E07EF9',
}, },
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 30,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39',
},
headerTintColor: '#fff', headerTintColor: '#fff',
title: '',
headerTransparent: true, headerTransparent: true,
headerBackImage: () => ( headerBackImage: () => (
<Icon <Icon
...@@ -201,7 +213,6 @@ class App extends React.PureComponent { ...@@ -201,7 +213,6 @@ class App extends React.PureComponent {
fontFamily: 'Gilroy-Bold', fontFamily: 'Gilroy-Bold',
fontSize: 20, fontSize: 20,
lineHeight: 25, lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
}, },
headerBackImage: () => ( headerBackImage: () => (
<Image <Image
......
screens/data.js
View file @ a0a9af4c
...@@ -2,115 +2,115 @@ ...@@ -2,115 +2,115 @@
const notes = [ const notes = [
{ {
name: 'C Major', name: 'C Major',
image: require('../media/img/Cmajor.png'), image: require('../media/img/img_cmajor.png'),
}, },
{ {
name: 'D Major', name: 'D Major',
image: require('../media/img/Dmajor.png'), image: require('../media/img/img_dmajor.png'),
}, },
{ {
name: 'E Major', name: 'E Major',
image: require('../media/img/Emajor.png'), image: require('../media/img/img_emajor.png'),
}, },
{ {
name: 'F Sharp Major', name: 'F Sharp Major',
image: require('../media/img/Fsmajor.png'), image: require('../media/img/img_fsharpmajor.png'),
}, },
{ {
name: 'F Major', name: 'F Major',
image: require('../media/img/Fmajor.png'), image: require('../media/img/img_fmajor.png'),
}, },
{ {
name: 'E Flat Major', name: 'E Flat Major',
image: require('../media/img/Eflatmajor.png'), image: require('../media/img/img_eflatmajor.png'),
}, },
{ {
name: 'D Flat Major', name: 'D Flat Major',
image: require('../media/img/Dflatmajor.png'), image: require('../media/img/img_dflatmajor.png'),
}, },
{ {
name: 'G Major', name: 'G Major',
image: require('../media/img/Gmajor.png'), image: require('../media/img/img_gmajor.png'),
}, },
{ {
name: 'A Major', name: 'A Major',
image: require('../media/img/Amajor.png'), image: require('../media/img/img_amajor.png'),
}, },
{ {
name: 'B Major', name: 'B Major',
image: require('../media/img/Bmajor.png'), image: require('../media/img/img_bmajor.png'),
}, },
{ {
name: 'C Sharp Major', name: 'C Sharp Major',
image: require('../media/img/Csmajor.png'), image: require('../media/img/img_csharpmajor.png'),
}, },
{ {
name: 'B Flat Major', name: 'B Flat Major',
image: require('../media/img/Bflatmajor.png'), image: require('../media/img/img_bflatmajor.png'),
}, },
{ {
name: 'A Flat Major', name: 'A Flat Major',
image: require('../media/img/Aflatmajor.png'), image: require('../media/img/img_aflatmajor.png'),
}, },
{ {
name: 'G Flat Major', name: 'G Flat Major',
image: require('../media/img/Gflatmajor.png'), image: require('../media/img/img_gflatmajor.png'),
}, },
{ {
name: 'Bass Clef C Major', name: 'Bass Clef C Major',
image: require('../media/img/bass_cmajor.png'), image: require('../media/img/img_bass_cmajor.png'),
}, },
{ {
name: 'Bass Clef D Major', name: 'Bass Clef D Major',
image: require('../media/img/bass_dmajor.png'), image: require('../media/img/img_bass_dmajor.png'),
}, },
{ {
name: 'Bass Clef E Major', name: 'Bass Clef E Major',
image: require('../media/img/bass_emajor.png'), image: require('../media/img/img_bass_emajor.png'),
}, },
{ {
name: 'Bass Clef F Sharp Major', name: 'Bass Clef F Sharp Major',
image: require('../media/img/bass_fsmajor.png'), image: require('../media/img/img_bass_fsmajor.png'),
}, },
{ {
name: 'Bass Clef F Major', name: 'Bass Clef F Major',
image: require('../media/img/bass_fmajor.png'), image: require('../media/img/img_bass_fmajor.png'),
}, },
{ {
name: 'Bass Clef E Flat Major', name: 'Bass Clef E Flat Major',
image: require('../media/img/bass_eflat.png'), image: require('../media/img/img_bass_eflat.png'),
}, },
{ {
name: 'Bass Clef D Flat Major', name: 'Bass Clef D Flat Major',
image: require('../media/img/bass_dflat.png'), image: require('../media/img/img_bass_dflat.png'),
}, },
{ {
name: 'Bass Clef G Major', name: 'Bass Clef G Major',
image: require('../media/img/bass_gmajor.png'), image: require('../media/img/img_bass_gmajor.png'),
}, },
{ {
name: 'Bass Clef A Major', name: 'Bass Clef A Major',
image: require('../media/img/bass_amajor.png'), image: require('../media/img/img_bass_amajor.png'),
}, },
{ {
name: 'Bass Clef B Major', name: 'Bass Clef B Major',
image: require('../media/img/bass_bmajor.png'), image: require('../media/img/img_bass_bmajor.png'),
}, },
{ {
name: 'Bass Clef C Sharp Major', name: 'Bass Clef C Sharp Major',
image: require('../media/img/bass_csmajor.png'), image: require('../media/img/img_bass_csmajor.png'),
}, },
{ {
name: 'Bass Clef B Flat Major', name: 'Bass Clef B Flat Major',
image: require('../media/img/bass_bflat.png'), image: require('../media/img/img_bass_bflat.png'),
}, },
{ {
name: 'Bass Clef A Flat Major', name: 'Bass Clef A Flat Major',
image: require('../media/img/bass_aflat.png'), image: require('../media/img/img_bass_aflat.png'),
}, },
{ {
name: 'Bass Clef G Flat Major', name: 'Bass Clef G Flat Major',
image: require('../media/img/bass_gflat.png'), image: require('../media/img/img_bass_gflat.png'),
}, },
]; ];
......
screens/listening.js
View file @ a0a9af4c
...@@ -67,6 +67,16 @@ const NOTESBLACK = [{name: 'A#0', left: 0.053}, ...@@ -67,6 +67,16 @@ const NOTESBLACK = [{name: 'A#0', left: 0.053},
const keywordsList = []; const keywordsList = [];
const corSound = require('../media/sound/correct.mp3'); const corSound = require('../media/sound/correct.mp3');
const wroSound = require('../media/sound/wrong.mp3'); const wroSound = require('../media/sound/wrong.mp3');
const correctIcon = require('../media/img/img_smile.png');
const wrongIcon = require('../media/img/img_sad.png');
const doneIcon = require('../media/img/img_achieve.png');
const quitIcon = require('../media/img/img_qiut.png');
const wroIcon = require('../media/img/icon_wrong.png');
const corIcon = require('../media/img/icon_check.png');
const timerIcon = require('../media/img/icon_timer.png');
const rightIcon = require('../media/img/btn_right.png');
const leftIcon = require('../media/img/btn_left.png');
const playIcon = require('../media/img/btn_play.png');
const keySound = Listennotes; const keySound = Listennotes;
var soundN = ''; var soundN = '';
......
screens/quiz.js
View file @ a0a9af4c
...@@ -68,6 +68,17 @@ const NOTESBLACK = [ ...@@ -68,6 +68,17 @@ const NOTESBLACK = [
const keywordsList = []; const keywordsList = [];
const corSound = require('../media/sound/correct.mp3'); const corSound = require('../media/sound/correct.mp3');
const wroSound = require('../media/sound/wrong.mp3'); const wroSound = require('../media/sound/wrong.mp3');
const correctIcon = require('../media/img/img_smile.png');
const wrongIcon = require('../media/img/img_sad.png');
const doneIcon = require('../media/img/img_achieve.png');
const quitIcon = require('../media/img/img_qiut.png');
const wroIcon = require('../media/img/icon_wrong.png');
const corIcon = require('../media/img/icon_check.png');
const timerIcon = require('../media/img/icon_timer.png');
const resetIcon1 = require('../media/img/btn_reset_grey.png');
const resetIcon2 = require('../media/img/btn_reset_orange.png');
const undo1 = require('../media/img/btn_reset_grey.png');
const undo2 = require('../media/img/btn_reset_orange.png');
var imageN = ''; var imageN = '';
var indexN = 0; var indexN = 0;
...@@ -720,7 +731,7 @@ class Quiz extends React.Component { ...@@ -720,7 +731,7 @@ class Quiz extends React.Component {
maxCount : ccc, maxCount : ccc,
}); });
indexN = Notes.findIndex(item=> item.name === this.state.name); indexN = Notes.findIndex(item=> item.name === this.state.name);
// console.log(this.state.name); console.log(this.state.name);
}) })
.catch((err) => { .catch((err) => {
console.log(err.message, err.code); console.log(err.message, err.code);
...@@ -730,7 +741,7 @@ class Quiz extends React.Component { ...@@ -730,7 +741,7 @@ class Quiz extends React.Component {
name : this.state.logbook[imageN], name : this.state.logbook[imageN],
maxCount : 10, maxCount : 10,
}); });
// console.log(this.state.name); console.log(this.state.name);
indexN = Notes.findIndex(item=> item.name === this.state.name); indexN = Notes.findIndex(item=> item.name === this.state.name);
// console.log(indexN); // console.log(indexN);
}); });
...@@ -745,6 +756,8 @@ class Quiz extends React.Component { ...@@ -745,6 +756,8 @@ class Quiz extends React.Component {
name : Notes[indexN].name, name : Notes[indexN].name,
maxCount : res, maxCount : res,
}); });
console.log(this.state.name);
//console.log(res); //console.log(res);
}) })
.catch(() => { .catch(() => {
...@@ -756,6 +769,8 @@ class Quiz extends React.Component { ...@@ -756,6 +769,8 @@ class Quiz extends React.Component {
name : Notes[indexN].name, name : Notes[indexN].name,
maxCount : 5, maxCount : 5,
}); });
console.log(this.state.name);
}); });
} }
} catch (error) { } catch (error) {
...@@ -821,85 +836,36 @@ class Quiz extends React.Component { ...@@ -821,85 +836,36 @@ class Quiz extends React.Component {
render() { render() {
return ( return (
<View style={{flex: 1, backgroundColor:'#81C9C9'}}> <View style={{flex: 1, backgroundColor:'#81C9C9'}}>
<StatusBar hidden />
{/* Modal Quit the Scale*/} <View style={{flexDirection: 'row', width:Dimensions.get('window').width, marginBottom:Dimensions.get('window').height * 0.05}}>
<Modal transparent={true} visible={this.state.showQuit} animationType="slide"> <TouchableOpacity style={{backgroundColor:'#E7E7E7', borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.75, marginTop:'3%'}} onPress={this.onSubmit} >
<View style={styles.modalbackground}> <Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'center', lineHeight:20, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.035}}>
<View style={styles.viewmodalQ}> Submit
<Text style={styles.textquit}>Quit?</Text> </Text>
<View </TouchableOpacity>
style={styles.viewmodalQQ}> </View>
<TouchableOpacity style={styles.buttonyes}
onPress={() => this.backAction()}> <View style={{backgroundColor:'#FFFBF0',flexDirection: 'row', width:Dimensions.get('window').width, height:Dimensions.get('window').height * 0.4, borderTopLeftRadius:8, borderTopRightRadius:8}}>
<Text style={styles.textqq}>YES</Text> <View style={{width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.03, marginTop:'8%', marginBottom:'2%'}}>
</TouchableOpacity> <Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#EF476F', paddingBottom:'8%'}}>
<TouchableOpacity style={styles.buttonno} Question 100 / 100
onPress={() => this.setState({showQuit: false})}> </Text>
<Text style={styles.textqq}>NO</Text> <View style={{flexDirection:'row'}}>
</TouchableOpacity> <Image style={{height:'65%', width:'12%',marginTop:'3%'}} source={corIcon}/>
</View> <Text style={{fontFamily:'Gilroy-Bold', fontSize:24, textAlign:'left', lineHeight:30, color:'#14A76C', paddingHorizontal:'8%'}}>
</View> {this.state.correct}
</View> </Text>
</Modal>
{/* Modal Correct*/}
<Modal transparent={true} visible={this.state.showC} animationType="slide">
<View style={styles.modalbackground}>
<View style={styles.viewmodalCW}>
<ImageBackground source={require('../media/img/correctAlert.png')} style={styles.imagecw}>
<Text style={styles.textcw}>Correct</Text>
<View style={styles.viewbutton}>
<TouchableOpacity style={styles.buttonc} onPress={() => this.setState({showC: false})}>
<Text style={styles.buttonok}>OK</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</View>
</Modal>
{/* Modal Wrong*/}
<Modal transparent={true} visible={this.state.showW} animationType="slide">
<View style={styles.modalbackground}>
<View style={styles.viewmodalCW}>
<ImageBackground source={require('../media/img/wrongAlert.png')} style={styles.imagecw}>
<Text style={styles.textcw}>Wrong</Text>
<View style={styles.viewbutton}>
<TouchableOpacity style={styles.buttonc} onPress={() => this.setState({showW: false})}>
<Text style={styles.buttonok}>OK</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</View>
</Modal>
{/* Modal Done*/}
<Modal transparent={true} visible={this.state.showDone} animationType="slide">
<View style={styles.modalbackground}>
<View style={styles.viewmodalD}>
<ImageBackground source={require('../media/img/doneAlert.png')} style={styles.imagedone}>
<Text style={styles.textwelldone}>Well Done</Text>
<Text style={styles.modaltextcorrect}>Correct : {this.state.correct}</Text>
<Text style={styles.modaltextwrong}>Wrong: {this.state.wrong}</Text>
<View
style={styles.viewmodalDD}>
<TouchableOpacity style={styles.buttonc} onPress={() => this.backAction()}>
<Text style={styles.buttonok}>OK</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</View> </View>
</Modal> </View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.3, marginHorizontal:Dimensions.get('window').width * 0.04, marginTop:'2%'}}>
<StatusBar hidden /> <Image style={{height:Dimensions.get('window').height * 0.27, width:Dimensions.get('window').width * 0.18}} source={Notes[indexN].image}/>
<View style={styles.c1}> <Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#3B3A39'}}>
<View style={styles.cc1}> Remaining key(s) to select: 7
<Text style={styles.wrong}>{this.state.wrong}</Text> </Text>
<Text style={styles.correct}>{this.state.correct} / {this.state.maxCount}</Text> </View>
<Stopwatch <View style={{alignItems:'center',width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.045, marginTop:'2.5%'}}>
<Stopwatch
secs secs
start={this.state.start} start={this.state.start}
getTime={(tt) => { getTime={(tt) => {
...@@ -909,54 +875,51 @@ class Quiz extends React.Component { ...@@ -909,54 +875,51 @@ class Quiz extends React.Component {
// Options for the styling // Options for the styling
options={{//timer options={{//timer
container: { container: {
backgroundColor: 'black', backgroundColor: '#FFECDA',
padding: 5, padding: 10,
borderRadius: 10, borderRadius: 8,
borderColor:'white', borderColor:'#FFECDA',
borderWidth:3, borderWidth:2,
width: 200, width:Dimensions.get('window').width * 0.22,
alignItems: 'center', alignItems: 'center',
}, },
text: { text: {
fontSize: 25, fontSize: 16,
color: '#FFF', color: '#3B3A39',
textAlign: 'center', textAlign: 'left',
paddingTop: 5, paddingTop: 5,
lineHeight:20,
alignItems: 'center', alignItems: 'center',
fontFamily: 'sans-serif', fontFamily: 'Gilroy-Bold',
}}}/> }}}/>
<Image style={{height:'18%', width:'13%', position: 'absolute', left:25, top:15}} source={timerIcon}/>
<TouchableOpacity style={{backgroundColor:'#E7E7E7', borderColor:'#E7E7E7', borderWidth:1, borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.72, marginTop:'3%'}} onPress={this.onSubmit} >
<View style={{flexDirection: 'row'}}>
<Image style={{height:'40%', width:'12%',marginTop:'9%', marginHorizontal:'8%'}} source={undo1}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#848484', paddingTop:'8%', paddingBottom:'8%'}}>
Undo All Key
</Text>
</View> </View>
<View style={styles.buttonView}> </TouchableOpacity>
<View style={styles.submit}>
<Button
title="RESET "
color="#E07EF9"
onPress={this.removeArray}
/>
</View>
<View style={styles.submit}>
<Button title="SUBMIT" color="#E07EF9" onPress={this.onSubmit} />
</View>
</View>
<Image style={styles.logo} source={Notes[indexN].image} />
</View> </View>
<View style={{borderWidth:5, borderColor:'black'}}/> </View>
<View style={styles.c2}>
<View style={{flexDirection: 'row', height: Dimensions.get('window').height * 0.4}}>
{NOTESWHITE.map((item, id) => ( {NOTESWHITE.map((item, id) => (
<TouchableHighlight <TouchableHighlight
style={ style={
keywordsList.find((element) => element === item.name) keywordsList.find((element) => element === item.name)
? { width: Dimensions.get('window').width / NOTESWHITE.length, ? { width: Dimensions.get('window').width / NOTESWHITE.length,
alignItems: 'center', alignItems: 'center',
backgroundColor: '#EEA1E1', backgroundColor: '#FCE1FF',
borderRightWidth: 1, borderWidth: 0.5,
borderColor: 'black', borderColor: '#707070',
borderBottomWidth: 1} borderBottomWidth: 1}
: { width: Dimensions.get('window').width / NOTESWHITE.length, : { width: Dimensions.get('window').width / NOTESWHITE.length,
borderWidth: 0.5,
borderColor: '#707070',
alignItems: 'center', alignItems: 'center',
backgroundColor: 'white', backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1} borderBottomWidth: 1}
} }
onPress={() => this.toggleKeyword(item)} onPress={() => this.toggleKeyword(item)}
...@@ -977,7 +940,9 @@ class Quiz extends React.Component { ...@@ -977,7 +940,9 @@ class Quiz extends React.Component {
</TouchableHighlight> </TouchableHighlight>
))} ))}
</View> </View>
</View> </View>
); );
} }
} }
......
style/styleQuiz.js
View file @ a0a9af4c
...@@ -180,9 +180,6 @@ export default StyleSheet.create({ ...@@ -180,9 +180,6 @@ export default StyleSheet.create({
logo: { logo: {
height: config.deviceWidth * 0.22, height: config.deviceWidth * 0.22,
width: config.deviceHeight * 0.5, width: config.deviceHeight * 0.5,
borderColor: 'black',
borderWidth: 3,
borderRadius: 10,
position: 'absolute', position: 'absolute',
marginTop: config.deviceWidth * 0.11, marginTop: config.deviceWidth * 0.11,
backgroundColor:'white', backgroundColor:'white',
...@@ -271,7 +268,7 @@ export default StyleSheet.create({ ...@@ -271,7 +268,7 @@ export default StyleSheet.create({
selectedKeywordStyle: { selectedKeywordStyle: {
width: config.deviceWidth * 0.075, width: config.deviceWidth * 0.075,
alignItems: 'center', alignItems: 'center',
backgroundColor: '#EEA1E1', backgroundColor: '#FCE1FF',
borderRightWidth: 1, borderRightWidth: 1,
borderColor: 'black', borderColor: 'black',
borderBottomWidth: 1, borderBottomWidth: 1,
...@@ -283,10 +280,14 @@ export default StyleSheet.create({ ...@@ -283,10 +280,14 @@ export default StyleSheet.create({
height: '55%', height: '55%',
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
borderWidth: 0.5,
borderColor: '#707070',
}, },
SbuttonB1: { SbuttonB1: {
alignItems: 'center', alignItems: 'center',
backgroundColor: '#92ddea', backgroundColor: '#FCE1FF',
borderWidth: 0.5,
borderColor: '#707070',
height: '55%', height: '55%',
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
......
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