Skip to content

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

update

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