Skip to content

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

updates

parent 1f805eb4
Hide whitespace changes
Inline Side-by-side
Showing with 160 additions and 26 deletions
screens/metronome.js
View file @ 7d4f57a8
...@@ -42,14 +42,27 @@ const note5 = require('../media/img/notee.png'); ...@@ -42,14 +42,27 @@ const note5 = require('../media/img/notee.png');
const note6 = require('../media/img/notef.png'); const note6 = require('../media/img/notef.png');
const sound1 = require('../media/sound/sound3.wav'); const sound1 = require('../media/sound/sound1.wav');
const sound2 = require('../media/sound/sound5.wav'); const sound2 = require('../media/sound/sound2.wav');
const sound3 = require('../media/sound/sound3.wav');
const sound4 = require('../media/sound/sound4.wav');
const sound5 = require('../media/sound/sound5.wav');
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}]},
];
var miniBar = '{id :4,note:[{id:1}, {id:2},{id:3}]}';
const config = { const config = {
deviceWidth: Dimensions.get('window').width, deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height, deviceHeight: Dimensions.get('window').height,
}; };
var randomTempo = 0;
class MetronomeSkill extends React.Component { class MetronomeSkill extends React.Component {
constructor(props) { constructor(props) {
...@@ -73,6 +86,8 @@ this.animatedValue = new Animated.Value(0); ...@@ -73,6 +86,8 @@ this.animatedValue = new Animated.Value(0);
speed: 2000, speed: 2000,
image: note3, image: note3,
tempoName: 'Allegretto', tempoName: 'Allegretto',
toneSound: '4',
soundName: sound1,
}; };
} }
...@@ -117,21 +132,38 @@ this.animatedValue = new Animated.Value(0); ...@@ -117,21 +132,38 @@ this.animatedValue = new Animated.Value(0);
}; };
//beat //beat
beatDown = () => { beatDown = async () => {
// console.log(this.state.beat);
var find = {id: this.state.beat, note:[{id:1}, {id:2},{id:3}]};
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)) {
barTempo.splice(index, 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);
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);
} }
}; };
beatUp = () => { beatUp = async () => {
if (this.state.beat >= 16) { if (this.state.beat >= 16) {
this.setState({beat: 16}); this.setState({beat: 16});
} }
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}]});
} }
}; };
...@@ -162,7 +194,7 @@ this.animatedValue = new Animated.Value(0); ...@@ -162,7 +194,7 @@ this.animatedValue = new Animated.Value(0);
noteUp = () => { noteUp = () => {
if (this.state.note >= 32) { if (this.state.note >= 32) {
this.setState({note: 32 }); this.setState({note: 32 });
this.noteChange(); this.setState({image: note6});
} }
else if (this.state.note === 1) { else if (this.state.note === 1) {
this.setState({note: 1 + 1 }); this.setState({note: 1 + 1 });
...@@ -199,7 +231,7 @@ this.animatedValue = new Animated.Value(0); ...@@ -199,7 +231,7 @@ this.animatedValue = new Animated.Value(0);
} }
if (this.state.tempo - 1 > 19 && this.state.tempo - 1 <= 40){ if (this.state.tempo - 1 > 19 && this.state.tempo - 1 <= 40){
this.setState({tempoName:'Grave'}); this.setState({tempoName:'Grave'});
} }
if (this.state.tempo - 1 > 40 && this.state.tempo - 1 <= 45){ if (this.state.tempo - 1 > 40 && this.state.tempo - 1 <= 45){
this.setState({tempoName:'Lento'}); this.setState({tempoName:'Lento'});
} }
...@@ -265,7 +297,7 @@ this.animatedValue = new Animated.Value(0); ...@@ -265,7 +297,7 @@ this.animatedValue = new Animated.Value(0);
} }
if (this.state.tempo + 1 > 19 && this.state.tempo + 1 <= 40){ if (this.state.tempo + 1 > 19 && this.state.tempo + 1 <= 40){
this.setState({tempoName:'Grave'}); this.setState({tempoName:'Grave'});
} }
if (this.state.tempo + 1 > 40 && this.state.tempo + 1 <= 45){ if (this.state.tempo + 1 > 40 && this.state.tempo + 1 <= 45){
this.setState({tempoName:'Lento'}); this.setState({tempoName:'Lento'});
} }
...@@ -290,7 +322,7 @@ this.animatedValue = new Animated.Value(0); ...@@ -290,7 +322,7 @@ this.animatedValue = new Animated.Value(0);
if (this.state.tempo + 1 > 77 && this.state.tempo + 1 <= 83){ if (this.state.tempo + 1 > 77 && this.state.tempo + 1 <= 83){
this.setState({tempoName:'Andantino'}); this.setState({tempoName:'Andantino'});
} }
if (this.state.tempo + 1 > 83 && this.state.tempo +1 <= 85){ if (this.state.tempo + 1 > 83 && this.state.tempo + 1 <= 85){
this.setState({tempoName:'Marcia moderato'}); this.setState({tempoName:'Marcia moderato'});
} }
if (this.state.tempo + 1 > 85 && this.state.tempo + 1 <= 97){ if (this.state.tempo + 1 > 85 && this.state.tempo + 1 <= 97){
...@@ -346,7 +378,7 @@ this.animatedValue = new Animated.Value(0); ...@@ -346,7 +378,7 @@ this.animatedValue = new Animated.Value(0);
playClick = async () => { playClick = async () => {
const { count} = this.state; const { count} = this.state;
var play1 = new Sound(sound2, (error) => { var play1 = new Sound(this.state.soundName, (error) => {
if (error) { if (error) {
console.log('failed to load the sound', error); console.log('failed to load the sound', error);
return; return;
...@@ -367,6 +399,106 @@ this.animatedValue = new Animated.Value(0); ...@@ -367,6 +399,106 @@ this.animatedValue = new Animated.Value(0);
})); }));
} }
keepTap = async () => {
randomTempo = Math.floor(Math.random() * 300);
console.log(randomTempo);
this.setState({tempo:randomTempo});
if (this.state.tempo > 10 && this.state.tempo <= 19){
this.setState({tempoName:'Larghissimo'});
}
if (this.state.tempo > 19 && this.state.tempo <= 40){
this.setState({tempoName:'Grave'});
}
if (this.state.tempo > 40 && this.state.tempo <= 45){
this.setState({tempoName:'Lento'});
}
if (this.state.tempo > 45 && this.state.tempo <= 50){
this.setState({tempoName:'Largo'});
}
if (this.state.tempo > 50 && this.state.tempo <= 55){
this.setState({tempoName:'Larghetto'});
}
if (this.state.tempo > 55 && this.state.tempo <= 65){
this.setState({tempoName:'Adagio'});
}
if (this.state.tempo > 65 && this.state.tempo <= 69){
this.setState({tempoName:'Adagietto'});
}
if (this.state.tempo > 69 && this.state.tempo <= 72){
this.setState({tempoName:'Andante moderato'});
}
if (this.state.tempo > 72 && this.state.tempo <= 77){
this.setState({tempoName:'Andante'});
}
if (this.state.tempo > 77 && this.state.tempo <= 83){
this.setState({tempoName:'Andantino'});
}
if (this.state.tempo > 83 && this.state.tempo <= 85){
this.setState({tempoName:'Marcia moderato'});
}
if (this.state.tempo > 85 && this.state.tempo + 1 <= 97){
this.setState({tempoName:'Moderato'});
}
if (this.state.tempo > 97 && this.state.tempo <= 109){
this.setState({tempoName:'Allegretto'});
}
if (this.state.tempo > 109 && this.state.tempo <= 132){
this.setState({tempoName:'Allegro'});
}
if (this.state.tempo > 132 && this.state.tempo <= 140){
this.setState({tempoName:'Vivace'});
}
if (this.state.tempo > 140 && this.state.tempo <= 150){
this.setState({tempoName:'Vivacissmo'});
}
if (this.state.tempo > 150 && this.state.tempo <= 167){
this.setState({tempoName:'Allegrissma'});
}
if (this.state.tempo > 167 && this.state.tempo <= 177){
this.setState({tempoName:'Presto'});
}
if (this.state.tempo > 177 && this.state.tempo <= 500){
this.setState({tempoName:'Prestissimo'});
}
}
//note
toneDown = () => {
console.log('Down');
if (this.state.toneSound === 1) {
this.setState({toneSound: 1, soundName: sound1});
}
else {
this.setState({toneSound: parseInt(this.state.toneSound, 10) - 1});
if ( parseInt(this.state.toneSound, 10) - 1 === 4) {
this.setState({soundName: sound4});
}
if ( parseInt(this.state.toneSound, 10) - 1 === 3) {
this.setState({soundName: sound3});
}
if ( parseInt(this.state.toneSound, 10) - 1 === 2) {
this.setState({soundName: sound2});
}
}
};
toneUp = () => {
if (this.state.toneSound >= 5) {
this.setState({toneSound: 5, soundName: sound5});
}
else {
this.setState({toneSound: parseInt(this.state.toneSound, 10) + 1});
if ( parseInt(this.state.toneSound, 10) + 1 === 4) {
this.setState({soundName: sound4});
}
if ( parseInt(this.state.toneSound, 10) + 1 === 3) {
this.setState({soundName: sound3});
}
if ( parseInt(this.state.toneSound, 10) + 1 === 2) {
this.setState({soundName: sound2});
}
}
};
animate () { animate () {
this.animatedValue.setValue(0); this.animatedValue.setValue(0);
...@@ -398,7 +530,7 @@ animate () { ...@@ -398,7 +530,7 @@ 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:275,height:'65%', width:'93%', marginRight:30}}> <View style={{ backgroundColor: '#545252',marginTop:296,height:'60%', width:'93%', marginRight:30}}>
<SafeAreaView> <SafeAreaView>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>Settings</Text> <View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>Settings</Text>
</View> </View>
...@@ -410,24 +542,26 @@ animate () { ...@@ -410,24 +542,26 @@ animate () {
marginLeft: config.deviceWidth * 0.04, marginLeft: config.deviceWidth * 0.04,
marginRight: config.deviceWidth * 0.1, marginRight: config.deviceWidth * 0.1,
marginBottom: config.deviceHeight * 0.12}}> 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>
<Text style={{fontSize:20, margin:10}}>Tone</Text> </View>
<View style={{borderWidth:3, borderColor:'black', width:'85%'}}/> <View style={{borderWidth:2, borderColor:'black', width:'85%'}}/>
<Text style={{fontSize:20, margin:10}}>Visual Block</Text> <Text style={{fontSize:20, margin:10}}>Visual Block</Text>
<View style={{borderWidth:3, borderColor:'black', width:'85%'}}/> <View style={{borderWidth:2, borderColor:'black', width:'85%'}}/>
<Text style={{fontSize:20, margin:10}}>Tempo Calculation</Text> <Text style={{fontSize:20, margin:10}}>Tempo Calculation</Text>
<View style={{borderWidth:3, borderColor:'black', width:'85%'}}/>
<Text style={{fontSize:20, margin:10}}>UI Sound Effect</Text>
<View style={{borderWidth:3, borderColor:'black', width:'85%'}}/>
<Text style={{fontSize:20, margin:10}}>Mute Reminder</Text>
</View> </View>
</ScrollView> </ScrollView>
...@@ -442,7 +576,7 @@ animate () { ...@@ -442,7 +576,7 @@ 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:275,height:'65%', width:'93%', marginLeft:30}}> <View style={{ backgroundColor: '#545252',marginTop:296,height:'60%',width:'93%', marginLeft:30}}>
<SafeAreaView> <SafeAreaView>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>List</Text> <View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>List</Text>
</View> </View>
...@@ -537,10 +671,10 @@ animate () { ...@@ -537,10 +671,10 @@ animate () {
<Image style={{height:35, width:35, alignItems: 'center', marginTop:10, marginRight:25}} source={this.state.image}/> <Image style={{height:35, width:35, alignItems: 'center', marginTop:10, marginRight:25}} source={this.state.image}/>
</View> </View>
<View style={{flexDirection: 'row', marginLeft:10, marginRight:10, justifyContent: 'space-between'}}> <View style={{flexDirection: 'row', marginLeft:10, marginRight:10, justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'darkmagenta',borderColor:'darkorchid', borderWidth:3,width:'20%', height:'200%'}}><Text/></TouchableOpacity> {barTempo.map((item, id) => (
<TouchableOpacity style={{backgroundColor:'darkmagenta',borderColor:'darkorchid', borderWidth:3,width:'20%', height:'200%'}}><Text/></TouchableOpacity> <TouchableOpacity key={id} style={{backgroundColor:'darkmagenta',borderColor:'darkorchid', borderWidth:3,width: config.deviceWidth * 0.5 / barTempo.length, height:'200%', marginLeft:3, marginRight:5}}>
<TouchableOpacity style={{backgroundColor:'darkmagenta',borderColor:'darkorchid', borderWidth:3,width:'20%', height:'200%'}}><Text/></TouchableOpacity> <Text/></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'darkmagenta',borderColor:'darkorchid', borderWidth:3,width:'20%', height:'200%'}}><Text/></TouchableOpacity> ))}
</View> </View>
<View style={{flexDirection: 'row', marginTop:25, marginLeft:10, marginRight:10, justifyContent: 'space-between'}}> <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={{backgroundColor:'grey',width:'100%', height:'180%'}}><Text/></TouchableOpacity>
...@@ -575,7 +709,7 @@ animate () { ...@@ -575,7 +709,7 @@ animate () {
<View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.4}}> <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%', 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'}}><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>
......
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