Skip to content

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

update

parent 7d4f57a8
Show whitespace changes
Inline Side-by-side
Showing with 504 additions and 382 deletions
screens/metronome.js
View file @ 4c3f2680
...@@ -48,14 +48,16 @@ const sound3 = require('../media/sound/sound3.wav'); ...@@ -48,14 +48,16 @@ const sound3 = require('../media/sound/sound3.wav');
const sound4 = require('../media/sound/sound4.wav'); const sound4 = require('../media/sound/sound4.wav');
const sound5 = require('../media/sound/sound5.wav'); const sound5 = require('../media/sound/sound5.wav');
const color = ['darkgray','darkmagenta','cyan'];
var vv = 0;
const barTempo = [ const barTempo = [
{id :1,note:[{id:1}, {id:2},{id:3}]}, {name :1,note:[{id:1, cc:0}, {id:2,cc:0},{id:3,cc:1}]},
{id :2,note:[{id:1}, {id:2},{id:3}]}, {name :2,note:[{id:1,cc:0}, {id:2,cc:0},{id:3,cc:1}]},
{id :3,note:[{id:1}, {id:2},{id:3}]}, {name :3,note:[{id:1,cc:0}, {id:2,cc:0},{id:3,cc:1}]},
{id :4,note:[{id:1}, {id:2},{id:3}]}, {name :4,note:[{id:1, cc:0}, {id:2,cc:0},{id:3,cc:1}]},
]; ];
var miniBar = '{id :4,note:[{id:1}, {id:2},{id:3}]}'; var miniBar = [{image:note3},{image:note3},{image:note3},{image:note3}];
const config = { const config = {
deviceWidth: Dimensions.get('window').width, deviceWidth: Dimensions.get('window').width,
...@@ -88,12 +90,28 @@ this.animatedValue = new Animated.Value(0); ...@@ -88,12 +90,28 @@ this.animatedValue = new Animated.Value(0);
tempoName: 'Allegretto', tempoName: 'Allegretto',
toneSound: '4', toneSound: '4',
soundName: sound1, soundName: sound1,
rotation: 0,
}; };
} }
toggleKeyword = (keyword) => { toggleKeyword = async (keyword, id) => {
console.log(keyword); console.log('keyword',keyword);
console.log('id', id);
if (keyword === 0) {
//console.log(1);
barTempo[id].note[keyword].cc = 1;
console.log( barTempo[id].note[keyword].cc);
}
else if (keyword === 1) {
//console.log(2);
barTempo[id].note[keyword].cc = 0;
console.log( barTempo[id].note[keyword].cc);}
else {
//console.log(3);
barTempo[id].note[keyword].cc = 0;
console.log( barTempo[id].note[keyword].cc);
}
}; };
onSubmit = () => { onSubmit = () => {
...@@ -134,27 +152,26 @@ this.animatedValue = new Animated.Value(0); ...@@ -134,27 +152,26 @@ this.animatedValue = new Animated.Value(0);
//beat //beat
beatDown = async () => { beatDown = async () => {
// console.log(this.state.beat); // console.log(this.state.beat);
var find = {id: this.state.beat, note:[{id:1}, {id:2},{id:3}]}; // var find = {name: this.state.beat};
let index = -1; let index = -1;
if (this.state.beat === 1) { if (this.state.beat === 1) {
this.setState({beat: 1}); this.setState({beat: 1});
if ((index = barTempo.map(item => item.id).indexOf(find.id) !== -1)) { if ((index = barTempo.map(item => item.name).indexOf(this.state.beat - 1) !== -1)) {
barTempo.splice(index, 1); barTempo.splice(-index, 1);
miniBar.splice(-index, 1);
} }
// find = {name: 1};
} }
else { else {
// console.log(this.state.beat);
console.log(barTempo.length);
this.setState({beat: this.state.beat - 1}); this.setState({beat: this.state.beat - 1});
// console.log(this.state.beat); // find = {name: this.state.beat - 1};
console.log(find); if ((index = barTempo.map(item => item.name).indexOf(this.state.beat) !== -1)) {
if ((index = barTempo.map(item => item.id).indexOf(find.id) !== -1)) { barTempo.splice(-index, 1);
barTempo.splice(index, 1); miniBar.splice(-index, 1);
} }
console.log(barTempo.map(item => item.id).indexOf(find.id));
console.log(barTempo.length);
console.log(barTempo);
} }
console.log(this.state.beat);
console.log(barTempo);
}; };
beatUp = async () => { beatUp = async () => {
...@@ -163,7 +180,9 @@ this.animatedValue = new Animated.Value(0); ...@@ -163,7 +180,9 @@ this.animatedValue = new Animated.Value(0);
} }
else { else {
this.setState({beat: this.state.beat + 1}); this.setState({beat: this.state.beat + 1});
barTempo.push({id :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}]}); barTempo.push({name :this.state.beat + 1,note:[{id:1,cc:vv}, {id:2,cc:vv},{id:3,cc:1}]});
miniBar.push({image:this.state.image});
console.log(barTempo);
} }
}; };
...@@ -173,20 +192,25 @@ this.animatedValue = new Animated.Value(0); ...@@ -173,20 +192,25 @@ this.animatedValue = new Animated.Value(0);
if (this.state.note === 1) { if (this.state.note === 1) {
this.setState({note: 1}); this.setState({note: 1});
this.setState({image: note1}); this.setState({image: note1});
miniBar.map((item, id) => (item.image = note1 ));
} }
else { else {
this.setState({note: (this.state.note / 2 )}); this.setState({note: (this.state.note / 2 )});
if ( this.state.note / 2 === 16) { if ( this.state.note / 2 === 16) {
this.setState({image: note5}); this.setState({image: note5});
miniBar.map((item, id) => (item.image = note5 ));
} }
if ( this.state.note / 2 === 8) { if ( this.state.note / 2 === 8) {
this.setState({image: note4}); this.setState({image: note4});
miniBar.map((item, id) => (item.image = note4 ));
} }
if ( this.state.note / 2 === 4) { if ( this.state.note / 2 === 4) {
this.setState({image: note3}); this.setState({image: note3});
miniBar.map((item, id) => (item.image = note3));
} }
if ( this.state.note / 2 === 2) { if ( this.state.note / 2 === 2) {
this.setState({image: note2}); this.setState({image: note2});
miniBar.map((item, id) => (item.image = note2 ));
} }
} }
}; };
...@@ -195,26 +219,32 @@ this.animatedValue = new Animated.Value(0); ...@@ -195,26 +219,32 @@ this.animatedValue = new Animated.Value(0);
if (this.state.note >= 32) { if (this.state.note >= 32) {
this.setState({note: 32 }); this.setState({note: 32 });
this.setState({image: note6}); this.setState({image: note6});
miniBar.map((item, id) => (item.image = note6 ));
} }
else if (this.state.note === 1) { else if (this.state.note === 1) {
this.setState({note: 1 + 1 }); this.setState({note: 1 + 1 });
if ( this.state.note + 1 === 2) { if ( this.state.note + 1 === 2) {
this.setState({image: note2}); this.setState({image: note2});
miniBar.map((item, id) => (item.image = note2 ));
} }
} }
else { else {
this.setState({note: this.state.note * 2}); this.setState({note: this.state.note * 2});
if ( this.state.note * 2 === 32) { if ( this.state.note * 2 === 32) {
this.setState({image: note6}); this.setState({image: note6});
miniBar.map((item, id) => (item.image = note6 ));
} }
if ( this.state.note * 2 === 16) { if ( this.state.note * 2 === 16) {
this.setState({image: note5}); this.setState({image: note5});
miniBar.map((item, id) => (item.image = note5));
} }
if ( this.state.note * 2 === 8) { if ( this.state.note * 2 === 8) {
this.setState({image: note4}); this.setState({image: note4});
miniBar.map((item, id) => (item.image = note4 ));
} }
if ( this.state.note * 2 === 4) { if ( this.state.note * 2 === 4) {
this.setState({image: note3}); this.setState({image: note3});
miniBar.map((item, id) => (item.image = note3 ));
} }
} }
}; };
...@@ -370,6 +400,7 @@ this.animatedValue = new Animated.Value(0); ...@@ -370,6 +400,7 @@ this.animatedValue = new Animated.Value(0);
{ {
count: 0, count: 0,
playing: true, playing: true,
// value: 1,
}, },
this.playClick this.playClick
); );
...@@ -530,44 +561,31 @@ animate () { ...@@ -530,44 +561,31 @@ animate () {
{/* Modal 1*/} {/* Modal 1*/}
<Modal transparent={true} visible={this.state.showSet} animationType="none"> <Modal transparent={true} visible={this.state.showSet} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:296,height:'60%', width:'93%', marginRight:30}}> <View style={styles.modal1}>
<SafeAreaView> <SafeAreaView>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>Settings</Text> <View style={styles.modal}><Text style={styles.textsetting}>Settings</Text>
</View> </View>
<ScrollView> <ScrollView>
<View <View style={styles.view1modal1}>
style={{ flexDirection: 'column', <View style={styles.view2modal1}>
flexWrap: 'wrap', <Text style={styles.texttitle}>Tone</Text>
width: config.deviceWidth, <TouchableOpacity style={styles.tone} onPress={this.toneDown}>
marginLeft: config.deviceWidth * 0.04, <Text style={styles.textdown}>-</Text>
marginRight: config.deviceWidth * 0.1,
marginBottom: config.deviceHeight * 0.12}}>
<View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.05,marginTop: config.deviceHeight * 0.05, height:'20%', marginBottom: 20}}>
<Text style={{fontSize:20, marginRight:10}}>Tone</Text>
<TouchableOpacity style={{backgroundColor:'white', width:'10%', height:'100%',borderRadius:10}} onPress={this.toneDown}>
<Text style={{marginLeft:15, fontSize:25}}>-</Text>
</TouchableOpacity> </TouchableOpacity>
<Text style={{fontSize:20, marginLeft:20, marginRight:20, marginTop:5}}>{this.state.toneSound}</Text> <Text style={styles.textsound}>{this.state.toneSound}</Text>
<TouchableOpacity style={{backgroundColor:'white', width:'10%', height:'100%',borderRadius:10}} onPress={this.toneUp}> <TouchableOpacity style={styles.tone} onPress={this.toneUp}>
<Text style={{marginLeft:13, fontSize:25}}>+</Text> <Text style={styles.textup}>+</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={styles.viewLine}/>
<View style={{borderWidth:2, borderColor:'black', width:'85%'}}/> <Text style={styles.texttitle}>Visual Block</Text>
<View style={styles.view3modal1}/>
<Text style={{fontSize:20, margin:10}}>Visual Block</Text> <Text style={styles.texttitle}>Tempo Calculation</Text>
<View style={{borderWidth:2, borderColor:'black', width:'85%'}}/>
<Text style={{fontSize:20, margin:10}}>Tempo Calculation</Text>
</View> </View>
</ScrollView> </ScrollView>
<View style={{alignItems: 'center', height:'30%'}}> <View style={styles.view4modal1}>
<TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'15%',borderRadius:5}} onPress={() => this.setState({showSet: false})}> <TouchableOpacity style={styles.buttonback} onPress={() => this.setState({showSet: false})}>
<Text style={{marginLeft:10}}>Back</Text> <Text style={styles.textback}>Back</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</SafeAreaView> </SafeAreaView>
...@@ -576,14 +594,13 @@ animate () { ...@@ -576,14 +594,13 @@ animate () {
{/* Modal 2*/} {/* Modal 2*/}
<Modal transparent={true} visible={this.state.showList} animationType="none"> <Modal transparent={true} visible={this.state.showList} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:296,height:'60%',width:'93%', marginLeft:30}}> <View style={styles.modal2}>
<SafeAreaView> <SafeAreaView>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>List</Text> <View style={styles.modal}><Text style={styles.textsetting}>List</Text>
</View> </View>
<View style={styles.view1modal2}>
<View style={{alignItems: 'center', marginTop:250, height:'30%'}}> <TouchableOpacity style={styles.buttonback} onPress={() => this.setState({showList: false})}>
<TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'15%',borderRadius:5}} onPress={() => this.setState({showList: false})}> <Text style={styles.textback}>Back</Text>
<Text style={{marginLeft:10}}>Back</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</SafeAreaView> </SafeAreaView>
...@@ -592,124 +609,119 @@ animate () { ...@@ -592,124 +609,119 @@ animate () {
{/* Modal 3*/} {/* Modal 3*/}
<Modal transparent={true} visible={this.state.showNotes} animationType="none"> <Modal transparent={true} visible={this.state.showNotes} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:'80%',height:'62%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}> <View style={styles.modal3}>
<SafeAreaView> <SafeAreaView>
<View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.1,marginRight: config.deviceWidth * 0.1,marginBottom: config.deviceHeight * 0.12,marginTop: config.deviceHeight * 0.05, height:'40%'}}> <View style={styles.view1modal3}>
<View style={styles.viewbeat}>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}> <Text style={styles.textmodal3}>Beat</Text>
<Text style={{fontSize:20, marginLeft:20, marginRight:20}}>Beat</Text> <View style={styles.viewbuttonbeat}>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between'}}> <TouchableOpacity style={styles.beat} onPress={this.beatDown}>
<TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.beatDown}> <Text style={styles.textdown1}>-</Text>
<Text style={{marginLeft:8, fontSize:25}}>-</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.beatUp}> <TouchableOpacity style={styles.beat} onPress={this.beatUp}>
<Text style={{marginLeft:7, fontSize:25}}>+</Text> <Text style={styles.textup1}>+</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
<View style={styles.viewts}>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.05,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}> <Text style={styles.textmodal3}>T.S.</Text>
<Text style={{fontSize:20, marginLeft:20, marginRight:20}}>T.S.</Text> <TouchableOpacity style={styles.ts}>
<TouchableOpacity style={{backgroundColor:'white', width:'100%', height:'40%',borderRadius:8}}> <Text style={styles.textts}>{this.state.beat}/{this.state.note}</Text>
<Text style={{marginLeft:10, fontSize:25}}>{this.state.beat}/{this.state.note}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={styles.viewnote}>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.05,marginRight: config.deviceWidth * 0.01,marginBottom: config.deviceHeight * 0.02}}> <Text style={styles.textmodal3}>Note</Text>
<Text style={{fontSize:20, marginLeft:20, marginRight:20}}>Note</Text> <View style={styles.viewnotes}>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between'}}> <TouchableOpacity style={styles.beat} onPress={this.noteDown}>
<TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.noteDown}> <Text style={styles.textdown1}>-</Text>
<Text style={{marginLeft:8, fontSize:25}}>-</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.noteUp}> <TouchableOpacity style={styles.beat} onPress={this.noteUp}>
<Text style={{marginLeft:7, fontSize:25}}>+</Text> <Text style={styles.textup1}>+</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
<View style={styles.viewaccent}>
<Text style={styles.textaccent}>ACCENT</Text>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.8,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.8,marginBottom: config.deviceHeight * 0.05}}> <View style={styles.viewaccent1}>
<Text style={{fontSize:20, marginLeft:130, marginRight:40,marginBottom:20}}>ACCENT</Text> <TouchableOpacity style={styles.viewimagenote}>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', alignContent:'center'}}> <View style={styles.viewminibar}>
<TouchableOpacity style={{backgroundColor:'white', width:'100%', height:'120%',borderRadius:10}}> {miniBar.map((item, id) => (
<Image style={{height:35, width:35, marginTop:5,marginRight:25}} source={this.state.image}/> <Image key={id} style={styles.imagenote} source={item.image}/>
))}
</View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
<View style={styles.viewbuttonback}>
<TouchableOpacity style={styles.buttonback} onPress={() => this.setState({showNotes: false})}>
<View style={{alignItems: 'center', height:'30%', marginTop:30}}> <Text style={styles.textback}>Back</Text>
<TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'15%',borderRadius:5}} onPress={() => this.setState({showNotes: false})}>
<Text style={{marginLeft:11}}>Back</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</SafeAreaView> </SafeAreaView>
</View> </View>
</Modal> </Modal>
<StatusBar hidden /> <StatusBar hidden />
<SafeAreaView> <SafeAreaView>
<View style={{height: '70%',marginTop:50}}> <View style={styles.view1}>
<View style={{height:'60%', width:'100%'}}> <View style={styles.view2}>
<View style={{alignItems:'center'}}> <View style={styles.view3}>
<View style={{backgroundColor:'white', height:'85%', width:'95%', marginLeft:10, marginRight:10, marginTop:30, borderRadius:10}}> <View style={styles.view4}>
<View style={{flexDirection: 'row', marginTop:8, marginLeft:60, marginRight:15, justifyContent: 'space-between'}}> <View style={styles.view5}>
<Text>TEMPO</Text> <Text>TEMPO</Text>
<Text/> <Text/>
<Text style={{marginLeft:110}}>T.S.</Text> <Text style={styles.textmargints}>T.S.</Text>
<Text>SUB DIV.</Text> <Text>SUB DIV.</Text>
</View> </View>
<View style={{flexDirection: 'row', marginTop:1, justifyContent: 'space-between'}}> <View style={styles.view6}>
<Image style={{height:35, width:35, alignItems: 'center', marginTop:10, marginLeft:8}} source={this.state.image}/> <Image style={styles.image1} source={this.state.image}/>
<Text style={{fontSize:40}}>{this.state.tempo}</Text> <Text style={{fontSize:35}}>{this.state.tempo}</Text>
<Text style={{fontSize:12, marginTop:15, marginRight:25, width: 70}}>{this.state.tempoName}</Text> <Text style={{fontSize:12, marginTop:15, marginRight:25, width: 70}}>{this.state.tempoName}</Text>
<Text style={{fontSize:40, marginRight:25}}>{this.state.beat}/{this.state.note}</Text> <Text style={{fontSize:35, marginRight:25}}>{this.state.beat}/{this.state.note}</Text>
<Image style={{height:35, width:35, alignItems: 'center', marginTop:10, marginRight:25}} source={this.state.image}/> <Image style={styles.image2} source={this.state.image}/>
</View> </View>
<View style={{flexDirection: 'row', marginLeft:10, marginRight:10, justifyContent: 'space-between'}}> <View style={styles.view7}>
{barTempo.map((item, id) => ( {barTempo.map((item, id) => (
<TouchableOpacity key={id} style={{backgroundColor:'darkmagenta',borderColor:'darkorchid', borderWidth:3,width: config.deviceWidth * 0.5 / barTempo.length, height:'200%', marginLeft:3, marginRight:5}}> <View key={id} style={{ flexDirection: 'column'}}>
<Text/></TouchableOpacity> {item.note.map((c,i) => (
<TouchableOpacity key={i} onPress={() => this.toggleKeyword(i,id)} style={{backgroundColor:color[c.cc],borderColor:'darkorchid', borderWidth:2,width: config.deviceWidth * 0.5 / barTempo.length, height:'25%', marginLeft:3, marginRight:5}}>
<Text/>
</TouchableOpacity>
))}
</View>
))} ))}
</View> </View>
<View style={{flexDirection: 'row', marginTop:25, marginLeft:10, marginRight:10, justifyContent: 'space-between'}}> <View style={styles.view8}>
<TouchableOpacity style={{backgroundColor:'grey',width:'100%', height:'180%'}}><Text/></TouchableOpacity> <TouchableOpacity style={styles.touchable1}><Text/></TouchableOpacity>
<TouchableOpacity style={{height:'180%', width:10, position: 'absolute'}}> <TouchableOpacity style={styles.touchable2}>
<Animated.View <Animated.View
style={{ style={{marginLeft: this.state.showImg ? 0 : movingMargin,height: '100%',width: '250%',backgroundColor: 'black'}} />
marginLeft: this.state.showImg ? 0 : movingMargin,
height: '100%',
width: '250%',
backgroundColor: 'black'}} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
</View> </View>
<View style={{borderWidth:3, borderColor:'black', width:'95%', marginLeft:10, marginRight:10}}/> <View style={styles.view9}/>
<View style={{backgroundColor:'gray', height: '120%', width:'100%', marginTop:5}}> <View style={styles.view10}>
<View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.03}}> <View style={styles.view11}>
<TouchableOpacity style={{backgroundColor:'#7097A6', width:'15%', height:'135%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.6, borderRadius:8}} onPress={() => this.setState({showSet: true})}> <TouchableOpacity style={styles.touchable3} onPress={() => this.setState({showSet: true})}>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={settingsIcon}/></TouchableOpacity> <Image style={styles.image3} source={settingsIcon}/></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#7097A6', width:'15%', height:'135%',borderRadius:8}} onPress={() => this.setState({showList: true})}> <TouchableOpacity style={styles.touchable4} onPress={() => this.setState({showList: true})}>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={listIcon}/> <Image style={styles.image4} source={listIcon}/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{marginTop: config.deviceHeight * 0.01, alignItems:'center'}}> <View style={styles.view12}>
<TouchableOpacity style={{backgroundColor:'#AAACAD',borderColor:'white',borderWidth:3, padding:130, borderRadius:200, position: 'absolute'}}><Text>1</Text></TouchableOpacity> <TouchableOpacity style={styles.touchable5}><Text>1</Text></TouchableOpacity>
<TouchableOpacity style={{position: 'absolute',top:18, right: config.deviceWidth * 0.5}} onPress={this.leftDown}><Image style={{height:252, width:115}} source={leftIcon}/></TouchableOpacity> <TouchableOpacity style={styles.touchable6} onPress={this.leftDown}><Image style={styles.image6} source={leftIcon}/></TouchableOpacity>
<TouchableOpacity style={{position: 'absolute',top:18, left:config.deviceWidth * 0.5}} onPress={this.rightUp}><Image style={{height:250, width:115}} source={rightIcon}/></TouchableOpacity> <TouchableOpacity style={styles.touchable7} onPress={this.rightUp}><Image style={styles.image7} source={rightIcon}/></TouchableOpacity>
<TouchableOpacity style={{position: 'absolute',top:67}} onPress={() => this.stopPlay()} ><Image style={{height:150, width:150}} source={imgSource}/></TouchableOpacity> <TouchableOpacity style={styles.touchable8} onPress={() => this.stopPlay()} >
<Image style={styles.image5} source={imgSource}/>
</TouchableOpacity>
</View> </View>
<View style={styles.view13}>
<View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.4}}> <TouchableOpacity style={styles.touchable9} onPress={() => this.setState({showNotes: true})}><Text style={{fontSize:35, marginTop:10}}>{this.state.beat}/{this.state.note}</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#7097A6', width:'20%', height:'120%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.51, borderRadius:8,alignItems: 'center'}} onPress={() => this.setState({showNotes: true})}><Text style={{fontSize:35, marginTop:10}}>{this.state.beat}/{this.state.note}</Text></TouchableOpacity> <TouchableOpacity style={styles.touchable10} onPress={() => this.keepTap()}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#7097A6', width:'20%', height:'120%', borderRadius:8,alignItems: 'center'}} onPress={() => this.keepTap()}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
......
style/styleMetronome.js
View file @ 4c3f2680
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
import {StyleSheet, Dimensions} from 'react-native'; import {StyleSheet, Dimensions} from 'react-native';
import config from './config';
const config = {
deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height,
};
export default StyleSheet.create({ export default StyleSheet.create({
imagebackground: { imagebackground: {
width: '100%', width: '100%',
height: '100%', height: '100%',
}, },
//Modal Quit
modalbackground: { modal1:{
backgroundColor: '#000000aa', backgroundColor: '#545252',
flex: 1, marginTop:296,
}, height:'60%',
viewmodalQ: { width:'93%',
marginLeft: Dimensions.get('window').height * 0.3, marginRight:30,
width : Dimensions.get('window').height * 0.4, },
height : Dimensions.get('window').width * 0.35, viewmodal:{
marginTop : Dimensions.get('window').width * 0.25,
alignItems: 'center',
backgroundColor:'white',
borderRadius: 10,
borderColor: 'black',
borderWidth: 5,
},
textquit: {
fontSize: 25,
fontFamily: 'sans-serif',
textAlign: 'center',
marginTop: 5,
color:'black',
},
viewmodalQQ : {
alignItems: 'center', alignItems: 'center',
marginTop:10,
},
view1modal1:{
flexDirection: 'column',
flexWrap: 'wrap',
width: config.deviceWidth,
marginLeft: config.deviceWidth * 0.04,
marginRight: config.deviceWidth * 0.1,
marginBottom: config.deviceHeight * 0.12,
},
view2modal1:{
flexDirection: 'row', flexDirection: 'row',
marginTop:15, flexWrap: 'wrap',
width: config.deviceWidth,
marginLeft: config.deviceWidth * 0.05,
marginTop: config.deviceHeight * 0.05, height:'20%', marginBottom: 20,
}, },
buttonyes: { view3modal1:{
backgroundColor: 'white', borderWidth:2,
padding: 15, borderColor:'black',
borderRadius: 10, width:'85%',
marginTop:10, },
marginBottom:10, view4modal1:{
borderTopColor:'black',
borderRightColor:'black',
borderWidth: 3,
marginRight:5,
},
buttonno: {
backgroundColor: 'white',
paddingLeft: 18,
paddingRight: 18,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 10,
marginTop:10,
marginBottom:10,
borderWidth: 3,
borderTopColor:'black',
marginLeft:5,
},
textqq: {
color: 'black',
fontFamily: 'sans-serif',
},
// Modal Correct and Wrong
viewmodalCW: {
marginLeft: Dimensions.get('window').height * 0.25,
width : Dimensions.get('window').height * 0.4,
alignItems: 'center', alignItems: 'center',
height:'30%',
}, },
imagecw: { textsetting: {
width: '130%', fontSize:25,
height: '95%', color: 'gray',
}, },
textcw: { texttitle:{
fontSize: 25, fontSize:20,
fontFamily: 'sans-serif', marginRight:10,
textAlign: 'center',
marginTop:Dimensions.get('window').width * 0.43,
marginLeft:120,
color:'white',
}, },
viewbutton: { tone: {
alignItems: 'center', backgroundColor:'white',
marginLeft:120, width:'10%',
height:'100%',
borderRadius:10,
}, },
buttonc: { textdown: {
backgroundColor: 'white', marginLeft:15,
borderColor: 'black', fontSize:25,
padding: 15, },
borderRadius: 5, textsound:{
marginTop:10, fontSize:20,
marginBottom:10, marginLeft:20,
marginRight:20,
marginTop:5,
},
textup:{
marginLeft:13,
fontSize:25,
}, },
buttonok: { buttonback:{
color: 'black', backgroundColor:'white',
width:'15%',
height:'15%',
borderRadius:5,
},
textback:{
marginLeft:10,
},
viewLine:{
borderWidth:2,
borderColor:'black',
width:'85%',
}, },
// Modal Done
viewmodalD: { modal2: {
marginLeft: Dimensions.get('window').height * 0.3, backgroundColor: '#545252',
width : Dimensions.get('window').height * 0.4, marginTop:296,
height:'60%',
width:'93%',
marginLeft:30,
},
view1modal2: {
alignItems: 'center', alignItems: 'center',
marginTop:250,
height:'30%',
}, },
imagedone :{
width: '120%', modal3:{
height: '98%', backgroundColor: '#545252',
marginTop:'80%',
height:'62%',
width:'100%',
borderTopRightRadius: 30,
borderTopLeftRadius: 30,
},
view1modal3: {
flexDirection: 'row',
flexWrap: 'wrap',
width: config.deviceWidth,
marginLeft: config.deviceWidth * 0.1,
marginRight: config.deviceWidth * 0.1,
marginBottom: config.deviceHeight * 0.12,
marginTop: config.deviceHeight * 0.05,
height:'40%',
},
viewbeat:{
flexDirection: 'column',
flexWrap: 'wrap',
width: config.deviceWidth * 0.2,
marginLeft: config.deviceWidth * 0.01,
marginRight: config.deviceWidth * 0.05,
marginBottom: config.deviceHeight * 0.02,
},
viewbuttonbeat: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
viewts :{
flexDirection: 'column',
flexWrap: 'wrap',
width: config.deviceWidth * 0.2,
marginLeft: config.deviceWidth * 0.05,
marginRight: config.deviceWidth * 0.05,
marginBottom: config.deviceHeight * 0.02,
}, },
viewmodalDD: { viewnote: {
flexDirection: 'column',
flexWrap: 'wrap',
width: config.deviceWidth * 0.2,
marginLeft: config.deviceWidth * 0.05,
marginRight: config.deviceWidth * 0.01,
marginBottom: config.deviceHeight * 0.02,
},
viewaccent:{
flexDirection: 'column',
flexWrap: 'wrap',
width: config.deviceWidth * 0.8,
marginLeft: config.deviceWidth * 0.01,
marginRight: config.deviceWidth * 0.8,
marginBottom: config.deviceHeight * 0.05,
},
viewaccent1: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
marginLeft:70, alignContent:'center',
}, },
textwelldone: { viewminibar: {
fontSize: 25, flexDirection: 'row',
fontFamily: 'sans-serif', flexWrap: 'wrap',
textAlign: 'center', justifyContent: 'space-between',
marginTop:Dimensions.get('window').width * 0.42, alignItems: 'center',
marginLeft:65, alignContent:'center',
color:'white', },
}, viewbuttonback: {
modaltextcorrect: {
fontSize: 15,
fontFamily: 'sans-serif',
marginLeft:65,
textAlign: 'center',
color: 'green',
},
modaltextwrong: {
fontSize: 15,
fontFamily: 'sans-serif',
marginLeft:65,
textAlign: 'center',
color: 'red',
},
c1: {
height: '70%',
alignItems: 'center', alignItems: 'center',
borderColor: 'black', height:'30%',
marginTop:50, marginTop:30,
},
imagenote: {
height:35,
width:35,
marginTop:5,
},
beat: {
backgroundColor:'white',
width:'35%',
height:'100%',
borderRadius:10,
},
ts: {
backgroundColor:'white',
width:'120%',
height:'40%',
borderRadius:8,
},
textdown1: {
marginLeft:8,
fontSize:25,
},
textup1: {
marginLeft:7,
fontSize:25,
}, },
cc1: { textmodal3: {
fontSize:20,
marginLeft:20,
marginRight:20,
},
viewnotes: {
flexDirection: 'row', flexDirection: 'row',
marginLeft: 0, flexWrap: 'wrap',
justifyContent: 'space-between',
},
textaccent: {
fontSize:20,
marginLeft:100,
marginRight:40,
marginBottom:20,
},
textts: {
marginLeft:10,
fontSize:25,
},
viewimagenote: {
backgroundColor:'white',
width:'100%',
height:'120%',
borderRadius:10,
},
view1: {
height: '70%',
marginTop:20,
},
view2:{
height:'70%',
width:'100%',
}, },
t: { view3: {
fontSize: 25, alignItems:'center',
fontFamily: 'sans-serif',
}, },
c2: { view4:{
backgroundColor:'white',
height:'85%',
width:'95%',
marginLeft:10,
marginRight:10,
marginTop:30,
borderRadius:10,
},
view5:{
flexDirection: 'row', flexDirection: 'row',
height: '35%', marginTop:8,
marginLeft: 15, marginLeft:60,
marginRight:15, marginRight:15,
justifyContent: 'space-between',
},
view6: {
flexDirection: 'row',
//marginTop:1,
justifyContent: 'space-between',
},
view7: {
flexDirection: 'row',
marginLeft:10,
marginRight:10,
justifyContent: 'space-between',
height: '40%',
},
view8: {
flexDirection: 'row',
marginLeft:10,
marginRight:10,
justifyContent: 'space-between',
},
view9:{
borderWidth:3,
borderColor:'black',
width:'95%',
marginLeft:10,
marginRight:10,
},
view10:{
backgroundColor:'gray',
height: '120%',
width:'100%',
marginTop:5,
},
view11: {
flexDirection: 'row',
marginTop: config.deviceHeight * 0.03,
},
view12: {
marginTop: config.deviceHeight * 0.01,
alignItems:'center',
},
view13: {
flexDirection: 'row',
marginTop: config.deviceHeight * 0.4,
}, },
t1: { textmargints:{
color: 'black', marginLeft:110,
paddingTop: 120,
}, },
button: {
flex: 7, image1: {
alignItems: 'center', height:35,
backgroundColor: 'white', width:20,
borderRightWidth: 1, marginTop:10,
borderColor: 'black', marginLeft:8,
borderBottomWidth: 1,
},
b1: {
marginBottom: 25,
width: 200,
height: 50,
borderRadius: 15,
alignItems: 'center',
backgroundColor: 'purple',
},
buttonText: {
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 15,
fontFamily: 'sans-serif',
},
logo: {
height: config.deviceWidth * 0.22,
width: config.deviceHeight * 0.5,
borderColor: 'black',
borderWidth: 3,
borderRadius: 10,
position: 'absolute',
marginTop: config.deviceWidth * 0.11,
backgroundColor:'white',
}, },
correct: { image2: {
width: 80, height:35,
textAlign: 'center', width:20,
paddingTop: 15, marginTop:10,
color: 'white', marginRight:30,
height: 60,
borderRadius: 10,
alignItems: 'center',
fontSize: 25,
marginRight: 10,
backgroundColor:'green',
borderColor:'white',
borderWidth: 2,
fontFamily: 'sans-serif',
}, },
wrong: { image3: {
width: 70, height:35,
height: 60, width:35,
borderRadius: 10,
borderColor:'white',
alignItems: 'center', alignItems: 'center',
textAlign: 'center', marginLeft:10,
paddingTop: 15, marginTop:10,
color: 'white', },
fontSize: 25, image4: {
marginRight: 10, height:35,
backgroundColor:'red', width:35,
borderWidth: 2,
fontFamily: 'sans-serif',
},
timer: {
width: 65,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center', alignItems: 'center',
textAlign: 'center', marginLeft:10,
paddingTop: 16, marginTop:10},
color: 'white', image5: {
fontSize: 25, height:150,
backgroundColor:'black', width:150,
borderWidth: 2, },
fontFamily: 'sans-serif', image6: {
}, height:252,
submit: { width:115,
width: '40%', },
marginTop: config.deviceHeight * 0.055, image7: {
borderColor:'white', height:250,
borderWidth: 2, width:115,
borderRadius: 5,
},
viewMain: {
width: '20%',
alignContent: 'flex-end',
marginLeft: 180,
marginTop: '173%',
position: 'absolute',
}, },
container: { touchable1: {
flex: 1, backgroundColor:'grey',
width:'100%',
height:'180%',
},
touchable2: {
height:'180%',
width:10,
position: 'absolute',
}, },
textStyle: { touchable3: {
fontSize: 16, backgroundColor:'#7097A6',
padding: 8, width:'15%',
textAlign: 'center', height:'135%',
fontFamily: 'sans-serif', marginLeft : config.deviceWidth * 0.05,
marginRight : config.deviceWidth * 0.6,
borderRadius:8,
},
touchable4: {
backgroundColor:'#7097A6',
width:'15%',
height:'135%',
borderRadius:8,
},
touchable5: {
backgroundColor:'#AAACAD',
borderColor:'white',
borderWidth:3,
padding:130,
borderRadius:200,
position: 'absolute',
}, },
buttonView: { touchable6: {
flexDirection: 'column', position: 'absolute',top:18,
marginLeft: config.deviceWidth * 1.0, right: config.deviceWidth * 0.5,
}, },
//White Notes touchable7: {
buttonStyle: { position: 'absolute',top:18,
width: config.deviceHeight * 0.075, left:config.deviceWidth * 0.5,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
}, },
selectedKeywordStyle: { touchable8: {
width: config.deviceWidth * 0.075, position: 'absolute',top:67,
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
}, },
//Black Notes touchable9: {
buttonB1: { backgroundColor:'#7097A6',
width:'20%',
height:'120%',
marginLeft : config.deviceWidth * 0.05,
marginRight : config.deviceWidth * 0.51,
borderRadius:8,
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black',
height: '55%',
width: '5%',
position: 'absolute',
}, },
SbuttonB1: { touchable10 : {
backgroundColor:'#7097A6',
width:'20%',
height:'120%',
borderRadius:8,
alignItems: 'center', alignItems: 'center',
backgroundColor: '#92ddea',
height: '55%',
width: '5%',
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