Skip to content

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

still updating

parent 31faf1ff
Hide whitespace changes
Inline Side-by-side
Showing with 371 additions and 109 deletions
media/img/left.png
View replaced file @ 31faf1ff View file @ 1f805eb4
media/img/left.png

9.49 KB | W: | H:

media/img/left.png

9.31 KB | W: | H:

media/img/left.png
media/img/left.png
media/img/left.png
media/img/left.png
  • 2-up
  • Swipe
  • Onion skin
media/img/right.png
View replaced file @ 31faf1ff View file @ 1f805eb4
media/img/right.png

9.45 KB | W: | H:

media/img/right.png

9.53 KB | W: | H:

media/img/right.png
media/img/right.png
media/img/right.png
media/img/right.png
  • 2-up
  • Swipe
  • Onion skin
screens/metronome.js
View file @ 1f805eb4
...@@ -8,18 +8,20 @@ import { ...@@ -8,18 +8,20 @@ import {
Text, Text,
View, View,
StatusBar, StatusBar,
TouchableHighlight, // TouchableHighlight,
Button, // Button,
Image, Image,
// Alert, // Alert,
Modal, Modal,
TouchableOpacity, TouchableOpacity,
BackHandler, BackHandler,
Pressable, //Pressable,
TextInput, TextInput,
SafeAreaView, SafeAreaView,
Dimensions, Dimensions,
ScrollView, ScrollView,
Animated,
Easing,
} from 'react-native'; } from 'react-native';
import Orientation from 'react-native-orientation'; import Orientation from 'react-native-orientation';
import styles from '../style/styleMetronome'; import styles from '../style/styleMetronome';
...@@ -32,6 +34,17 @@ const rightIcon = require('../media/img/right.png'); ...@@ -32,6 +34,17 @@ const rightIcon = require('../media/img/right.png');
const settingsIcon = require('../media/img/settings.png'); const settingsIcon = require('../media/img/settings.png');
const listIcon = require('../media/img/list.png'); const listIcon = require('../media/img/list.png');
const note1 = require('../media/img/notea.png');
const note2 = require('../media/img/noteb.png');
const note3 = require('../media/img/notec.png');
const note4 = require('../media/img/noted.png');
const note5 = require('../media/img/notee.png');
const note6 = require('../media/img/notef.png');
const sound1 = require('../media/sound/sound3.wav');
const sound2 = require('../media/sound/sound5.wav');
const config = { const config = {
deviceWidth: Dimensions.get('window').width, deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height, deviceHeight: Dimensions.get('window').height,
...@@ -41,28 +54,27 @@ const config = { ...@@ -41,28 +54,27 @@ const config = {
class MetronomeSkill extends React.Component { class MetronomeSkill extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.animatedValue = new Animated.Value(0);
Sound.setCategory('Playback'); // true = mixWithOthers Sound.setCategory('Playback'); // true = mixWithOthers
this.state = { this.state = {
logbook: [], playing: false,
index:0, count: 0,
correct: 0, bpm: 100,
wrong: 0, beatsPerMeasure: 3,
keywordsList: '', soundNumber: 0,
count: 1, showImg: true,
name : '',
start : true,
showC : false,
showW : false,
showDone : false,
showSet : false, showSet : false,
showList: false, showList: false,
showNotes: false, showNotes: false,
maxCount : 5, tempo: 100,
records: [], beat: 4,
bpm: 80, note:4,
soundNumber: 0, moveShape: false,
showImg: true, speed: 2000,
image: note3,
tempoName: 'Allegretto',
}; };
} }
toggleKeyword = (keyword) => { toggleKeyword = (keyword) => {
...@@ -84,6 +96,7 @@ class MetronomeSkill extends React.Component { ...@@ -84,6 +96,7 @@ class MetronomeSkill extends React.Component {
}; };
componentDidMount() { componentDidMount() {
//this.animate();
//this.removeArray(); //this.removeArray();
BackHandler.addEventListener('hardwareBackPress', this.homeExit); BackHandler.addEventListener('hardwareBackPress', this.homeExit);
Orientation.lockToPortrait(); Orientation.lockToPortrait();
...@@ -91,7 +104,7 @@ class MetronomeSkill extends React.Component { ...@@ -91,7 +104,7 @@ class MetronomeSkill extends React.Component {
} }
componentWillUnmount() { componentWillUnmount() {
this.removeArray(); // this.removeArray();
BackHandler.removeEventListener('hardwareBackPress', this.homeExit); BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
//clearInterval(this.interval); //clearInterval(this.interval);
// Orientation.lockToLandscape(); // Orientation.lockToLandscape();
...@@ -103,34 +116,287 @@ class MetronomeSkill extends React.Component { ...@@ -103,34 +116,287 @@ class MetronomeSkill extends React.Component {
console.log('Remove'); console.log('Remove');
}; };
renderImage(){ //beat
var imgSource = this.state.showImg ? playIcon : stopIcon; beatDown = () => {
return ( if (this.state.beat === 1) {
<Image this.setState({beat: 1});
style={{height:150, width:150}} }
source={imgSource} else {
/> this.setState({beat: this.state.beat - 1});
); }
} };
beatUp = () => {
if (this.state.beat >= 16) {
this.setState({beat: 16});
}
else {
this.setState({beat: this.state.beat + 1});
}
};
setExit = async () => {
this.setState({showSet: false}); //note
noteDown = () => {
if (this.state.note === 1) {
this.setState({note: 1});
this.setState({image: note1});
}
else {
this.setState({note: (this.state.note / 2 )});
if ( this.state.note / 2 === 16) {
this.setState({image: note5});
}
if ( this.state.note / 2 === 8) {
this.setState({image: note4});
}
if ( this.state.note / 2 === 4) {
this.setState({image: note3});
}
if ( this.state.note / 2 === 2) {
this.setState({image: note2});
}
}
}; };
modalSet = () => {
console.log('Settings'); noteUp = () => {
this.setState({showSet: true}); if (this.state.note >= 32) {
BackHandler.addEventListener('hardwareBackPress', this.setExit); this.setState({note: 32 });
// BackHandler.removeEventListener('hardwareBackPress', this.setExit); this.noteChange();
}
else if (this.state.note === 1) {
this.setState({note: 1 + 1 });
if ( this.state.note + 1 === 2) {
this.setState({image: note2});
}
}
else {
this.setState({note: this.state.note * 2});
if ( this.state.note * 2 === 32) {
this.setState({image: note6});
}
if ( this.state.note * 2 === 16) {
this.setState({image: note5});
}
if ( this.state.note * 2 === 8) {
this.setState({image: note4});
}
if ( this.state.note * 2 === 4) {
this.setState({image: note3});
}
}
}; };
//left right
leftDown = () => {
if (this.state.tempo === 10) {
this.setState({tempo: 10, tempoName:'Larghissimo'});
}
else {
this.setState({tempo: (this.state.tempo - 1 )});
if (this.state.tempo - 1 > 10 && this.state.tempo - 1 <= 19){
this.setState({tempoName:'Larghissimo'});
}
if (this.state.tempo - 1 > 19 && this.state.tempo - 1 <= 40){
this.setState({tempoName:'Grave'});
}
if (this.state.tempo - 1 > 40 && this.state.tempo - 1 <= 45){
this.setState({tempoName:'Lento'});
}
if (this.state.tempo - 1 > 45 && this.state.tempo - 1 <= 50){
this.setState({tempoName:'Largo'});
}
if (this.state.tempo - 1 > 50 && this.state.tempo - 1 <= 55){
this.setState({tempoName:'Larghetto'});
}
if (this.state.tempo - 1 > 55 && this.state.tempo - 1 <= 65){
this.setState({tempoName:'Adagio'});
}
if (this.state.tempo - 1 > 65 && this.state.tempo - 1 <= 69){
this.setState({tempoName:'Adagietto'});
}
if (this.state.tempo - 1 > 69 && this.state.tempo - 1 <= 72){
this.setState({tempoName:'Andante moderato'});
}
if (this.state.tempo - 1 > 72 && this.state.tempo - 1 <= 77){
this.setState({tempoName:'Andante'});
}
if (this.state.tempo - 1 > 77 && this.state.tempo - 1 <= 83){
this.setState({tempoName:'Andantino'});
}
if (this.state.tempo - 1 > 83 && this.state.tempo - 1 <= 85){
this.setState({tempoName:'Marcia moderato'});
}
if (this.state.tempo - 1 > 85 && this.state.tempo - 1 <= 97){
this.setState({tempoName:'Moderato'});
}
if (this.state.tempo - 1 > 97 && this.state.tempo - 1 <= 109){
this.setState({tempoName:'Allegretto'});
}
if (this.state.tempo - 1 > 109 && this.state.tempo - 1 <= 132){
this.setState({tempoName:'Allegro'});
}
if (this.state.tempo - 1 > 132 && this.state.tempo - 1 <= 140){
this.setState({tempoName:'Vivace'});
}
if (this.state.tempo - 1 > 140 && this.state.tempo - 1 <= 150){
this.setState({tempoName:'Vivacissmo'});
}
if (this.state.tempo - 1 > 150 && this.state.tempo - 1 <= 167){
this.setState({tempoName:'Allegrissma'});
}
if (this.state.tempo - 1 > 167 && this.state.tempo - 1 <= 177){
this.setState({tempoName:'Presto'});
}
if (this.state.tempo - 1 > 177 && this.state.tempo - 1 <= 500){
this.setState({tempoName:'Prestissimo'});
}
}
};
rightUp = () => {
if (this.state.tempo >= 500) {
this.setState({tempo: 500, tempoName:'Prestissimo'});
}
else {
this.setState({tempo: this.state.tempo + 1});
if (this.state.tempo + 1 > 10 && this.state.tempo + 1 <= 19){
this.setState({tempoName:'Larghissimo'});
}
if (this.state.tempo + 1 > 19 && this.state.tempo + 1 <= 40){
this.setState({tempoName:'Grave'});
}
if (this.state.tempo + 1 > 40 && this.state.tempo + 1 <= 45){
this.setState({tempoName:'Lento'});
}
if (this.state.tempo + 1 > 45 && this.state.tempo + 1 <= 50){
this.setState({tempoName:'Largo'});
}
if (this.state.tempo + 1 > 50 && this.state.tempo + 1 <= 55){
this.setState({tempoName:'Larghetto'});
}
if (this.state.tempo + 1 > 55 && this.state.tempo + 1 <= 65){
this.setState({tempoName:'Adagio'});
}
if (this.state.tempo + 1 > 65 && this.state.tempo + 1 <= 69){
this.setState({tempoName:'Adagietto'});
}
if (this.state.tempo + 1 > 69 && this.state.tempo + 1 <= 72){
this.setState({tempoName:'Andante moderato'});
}
if (this.state.tempo + 1 > 72 && this.state.tempo + 1 <= 77){
this.setState({tempoName:'Andante'});
}
if (this.state.tempo + 1 > 77 && this.state.tempo + 1 <= 83){
this.setState({tempoName:'Andantino'});
}
if (this.state.tempo + 1 > 83 && this.state.tempo +1 <= 85){
this.setState({tempoName:'Marcia moderato'});
}
if (this.state.tempo + 1 > 85 && this.state.tempo + 1 <= 97){
this.setState({tempoName:'Moderato'});
}
if (this.state.tempo + 1 > 97 && this.state.tempo + 1 <= 109){
this.setState({tempoName:'Allegretto'});
}
if (this.state.tempo + 1 > 109 && this.state.tempo + 1 <= 132){
this.setState({tempoName:'Allegro'});
}
if (this.state.tempo + 1 > 132 && this.state.tempo + 1 <= 140){
this.setState({tempoName:'Vivace'});
}
if (this.state.tempo + 1 > 140 && this.state.tempo + 1 <= 150){
this.setState({tempoName:'Vivacissmo'});
}
if (this.state.tempo + 1 > 150 && this.state.tempo + 1 <= 167){
this.setState({tempoName:'Allegrissma'});
}
if (this.state.tempo + 1 > 167 && this.state.tempo + 1 <= 177){
this.setState({tempoName:'Presto'});
}
if (this.state.tempo + 1 > 177 && this.state.tempo + 1 <= 500){
this.setState({tempoName:'Prestissimo'});
}
}
};
stopPlay(){
this.setState({ showImg: !this.state.showImg });
if (this.state.playing) {
clearInterval(this.timer);
this.setState({
playing: false,
});
} else {
this.animate();
this.timer = setInterval(
this.playClick,
(60 / this.state.tempo) * 1000
);
this.setState(
{
count: 0,
playing: true,
},
this.playClick
);
}
}
playClick = async () => {
const { count} = this.state;
var play1 = new Sound(sound2, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
}
// loaded successfully
play1.play((success) => {
if (success) {
// console.log('successfully finished playing');
} else {
// console.log('playback failed due to audio decoding errors');
play1.release();
}
});
});
this.setState(state => ({
count: (state.count + 1) % this.state.beat,
}));
}
animate () {
this.animatedValue.setValue(0);
Animated.timing(
this.animatedValue,
{
toValue: 1,
//duration: 2000,
duration: (60 / this.state.tempo) * this.state.speed,
easing: Easing.linear,
useNativeDriver: false,
}
).start(() => this.animate());
}
render() { render() {
var imgSource = this.state.showImg ? playIcon : stopIcon;
const movingMargin = this.animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 300, 1],
});
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<ImageBackground <ImageBackground
source={require('../media/img/background.jpg')} source={require('../media/img/background.jpg')}
style={styles.imagebackground}> style={styles.imagebackground}>
{/* 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:275,height:'65%', width:'93%', marginRight:30}}>
<SafeAreaView> <SafeAreaView>
...@@ -180,36 +446,8 @@ class MetronomeSkill extends React.Component { ...@@ -180,36 +446,8 @@ class MetronomeSkill extends React.Component {
<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>
<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}}>
<Text style={{fontSize:20, margin:10}}>Tone</Text>
<View style={{borderWidth:3, borderColor:'black', width:'85%'}}/>
<Text style={{fontSize:20, margin:10}}>Visual Block</Text> <View style={{alignItems: 'center', marginTop:250, height:'30%'}}>
<View style={{borderWidth:3, borderColor:'black', width:'85%'}}/>
<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>
</ScrollView>
<View style={{alignItems: 'center', height:'30%'}}>
<TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'15%',borderRadius:5}} onPress={() => this.setState({showList: false})}> <TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'15%',borderRadius:5}} onPress={() => this.setState({showList: false})}>
<Text style={{marginLeft:10}}>Back</Text> <Text style={{marginLeft:10}}>Back</Text>
</TouchableOpacity> </TouchableOpacity>
...@@ -220,42 +458,58 @@ class MetronomeSkill extends React.Component { ...@@ -220,42 +458,58 @@ class MetronomeSkill extends React.Component {
{/* 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:275,height:'60%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}> <View style={{ backgroundColor: '#545252',marginTop:'80%',height:'62%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}>
<SafeAreaView> <SafeAreaView>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>Notes</Text> <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>
<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}}>
<Text style={{fontSize:20, margin:10}}>Tone</Text>
<View style={{borderWidth:3, borderColor:'black', width:'85%'}}/> <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>
</View>
<Text style={{fontSize:20, margin:10}}>Visual Block</Text> <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={{borderWidth:3, borderColor:'black', width:'85%'}}/> <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>
</View>
<Text style={{fontSize:20, margin:10}}>Tempo Calculation</Text>
<View style={{borderWidth:3, borderColor:'black', width:'85%'}}/> <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>
</View>
<Text style={{fontSize:20, margin:10}}>UI Sound Effect</Text>
<View style={{borderWidth:3, borderColor:'black', width:'85%'}}/> </View>
<Text style={{fontSize:20, margin:10}}>Mute Reminder</Text>
</View> <View style={{alignItems: 'center', height:'30%', marginTop:30}}>
</ScrollView>
<View style={{alignItems: 'center', height:'30%'}}>
<TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'15%',borderRadius:5}} onPress={() => this.setState({showNotes: false})}> <TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'15%',borderRadius:5}} onPress={() => this.setState({showNotes: false})}>
<Text style={{marginLeft:10}}>Back</Text> <Text style={{marginLeft:11}}>Back</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</SafeAreaView> </SafeAreaView>
...@@ -268,18 +522,19 @@ class MetronomeSkill extends React.Component { ...@@ -268,18 +522,19 @@ class MetronomeSkill extends React.Component {
<View style={{height: '70%',marginTop:50}}> <View style={{height: '70%',marginTop:50}}>
<View style={{height:'60%', width:'100%'}}> <View style={{height:'60%', width:'100%'}}>
<View style={{alignItems:'center'}}> <View style={{alignItems:'center'}}>
<View style={{backgroundColor:'white', height:'80%', width:'95%', marginLeft:10, marginRight:10, marginTop:40, borderRadius:10}}> <View style={{backgroundColor:'white', height:'85%', width:'95%', marginLeft:10, marginRight:10, marginTop:30, borderRadius:10}}>
<View style={{flexDirection: 'row', marginTop:8, marginLeft:30, marginRight:15, justifyContent: 'space-between'}}> <View style={{flexDirection: 'row', marginTop:8, marginLeft:60, marginRight:15, justifyContent: 'space-between'}}>
<Text>TEMPO</Text> <Text>TEMPO</Text>
<Text/> <Text/>
<Text style={{marginLeft:120}}>T.S</Text> <Text style={{marginLeft:110}}>T.S.</Text>
<Text>SUB DIV.</Text> <Text>SUB DIV.</Text>
</View> </View>
<View style={{flexDirection: 'row', marginTop:1, marginLeft:30, marginRight:15, justifyContent: 'space-between'}}> <View style={{flexDirection: 'row', marginTop:1, justifyContent: 'space-between'}}>
<Text style={{fontSize:40}}>75</Text> <Image style={{height:35, width:35, alignItems: 'center', marginTop:10, marginLeft:8}} source={this.state.image}/>
<Text style={{fontSize:20, marginTop:20, marginRight:30,marginLeft:5}}>Andante</Text> <Text style={{fontSize:40}}>{this.state.tempo}</Text>
<Text style={{fontSize:40, marginRight:25}}>4/4</Text> <Text style={{fontSize:12, marginTop:15, marginRight:25, width: 70}}>{this.state.tempoName}</Text>
<Text style={{fontSize:40, marginRight:10}}>@</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>
<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> <TouchableOpacity style={{backgroundColor:'darkmagenta',borderColor:'darkorchid', borderWidth:3,width:'20%', height:'200%'}}><Text/></TouchableOpacity>
...@@ -289,16 +544,23 @@ class MetronomeSkill extends React.Component { ...@@ -289,16 +544,23 @@ class MetronomeSkill extends React.Component {
</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>
<TouchableOpacity style={{backgroundColor:'#129da6', height:'180%', width:'8%', position: 'absolute'}}><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> </View>
</View> </View>
<View style={{borderWidth:3, borderColor:'black', width:'100%'}}/> <View style={{borderWidth:3, borderColor:'black', width:'95%', marginLeft:10, marginRight:10}}/>
<View style={{backgroundColor:'gray', height: '125%', width:'100%'}}> <View style={{backgroundColor:'gray', height: '120%', width:'100%', marginTop:5}}>
<View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.03}}> <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.modalSet}> <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> <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})}> <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}/> <Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={listIcon}/>
...@@ -306,14 +568,14 @@ class MetronomeSkill extends React.Component { ...@@ -306,14 +568,14 @@ class MetronomeSkill extends React.Component {
</View> </View>
<View style={{marginTop: config.deviceHeight * 0.01, alignItems:'center'}}> <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={{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}}><Image style={{height:252, width:110}} source={leftIcon}/></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:19, left:config.deviceWidth * 0.5}}><Image style={{height:250, width:110}} source={rightIcon}/></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:60}} onPress={ () => this.setState({ showImg: !this.state.showImg }) } >{this.renderImage()}</TouchableOpacity> <TouchableOpacity style={{position: 'absolute',top:67}} onPress={() => this.stopPlay()} ><Image style={{height:150, width:150}} source={imgSource}/></TouchableOpacity>
</View> </View>
<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}}>4/4</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'}} onPress={() => this.setState({showNotes: true})}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#7097A6', width:'20%', height:'120%', borderRadius:8,alignItems: 'center'}}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
......
screens/quiz.js
View file @ 1f805eb4
...@@ -52,7 +52,7 @@ const NOTESBLACK = [ ...@@ -52,7 +52,7 @@ const NOTESBLACK = [
{name: 'F#1', url: require('../media/sound/d_d.mp3'),left:0.275}, {name: 'F#1', url: require('../media/sound/d_d.mp3'),left:0.275},
{name: 'G#1', url: require('../media/sound/f_f.mp3'),left:0.348}, {name: 'G#1', url: require('../media/sound/f_f.mp3'),left:0.348},
{name: 'A#1', url: require('../media/sound/g_g.mp3'), left:0.423}, {name: 'A#1', url: require('../media/sound/g_g.mp3'), left:0.423},
{name: 'C#1', url: require('../media/sound/a_a.mp3'), left:0.575}, {name: 'C#2', url: require('../media/sound/a_a.mp3'), left:0.575},
{name: 'D#2', url: require('../media/sound/c_cc.mp3'), left:0.65}, {name: 'D#2', url: require('../media/sound/c_cc.mp3'), left:0.65},
{name: 'F#2', url: require('../media/sound/d_dd.mp3'), left:0.798}, {name: 'F#2', url: require('../media/sound/d_dd.mp3'), left:0.798},
{name: 'G#2', url: require('../media/sound/f_ff.mp3'), left:0.872}, {name: 'G#2', url: require('../media/sound/f_ff.mp3'), left:0.872},
......
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