Skip to content

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

still updating

parent 31faf1ff
Show whitespace changes
Inline Side-by-side
Showing with 370 additions and 108 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 {
Text,
View,
StatusBar,
TouchableHighlight,
Button,
// TouchableHighlight,
// Button,
Image,
// Alert,
Modal,
TouchableOpacity,
BackHandler,
Pressable,
//Pressable,
TextInput,
SafeAreaView,
Dimensions,
ScrollView,
Animated,
Easing,
} from 'react-native';
import Orientation from 'react-native-orientation';
import styles from '../style/styleMetronome';
......@@ -32,6 +34,17 @@ const rightIcon = require('../media/img/right.png');
const settingsIcon = require('../media/img/settings.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 = {
deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height,
......@@ -41,28 +54,27 @@ const config = {
class MetronomeSkill extends React.Component {
constructor(props) {
super(props);
this.animatedValue = new Animated.Value(0);
Sound.setCategory('Playback'); // true = mixWithOthers
this.state = {
logbook: [],
index:0,
correct: 0,
wrong: 0,
keywordsList: '',
count: 1,
name : '',
start : true,
showC : false,
showW : false,
showDone : false,
playing: false,
count: 0,
bpm: 100,
beatsPerMeasure: 3,
soundNumber: 0,
showImg: true,
showSet : false,
showList: false,
showNotes: false,
maxCount : 5,
records: [],
bpm: 80,
soundNumber: 0,
showImg: true,
tempo: 100,
beat: 4,
note:4,
moveShape: false,
speed: 2000,
image: note3,
tempoName: 'Allegretto',
};
}
toggleKeyword = (keyword) => {
......@@ -84,6 +96,7 @@ class MetronomeSkill extends React.Component {
};
componentDidMount() {
//this.animate();
//this.removeArray();
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
Orientation.lockToPortrait();
......@@ -91,7 +104,7 @@ class MetronomeSkill extends React.Component {
}
componentWillUnmount() {
this.removeArray();
// this.removeArray();
BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
//clearInterval(this.interval);
// Orientation.lockToLandscape();
......@@ -103,34 +116,287 @@ class MetronomeSkill extends React.Component {
console.log('Remove');
};
renderImage(){
var imgSource = this.state.showImg ? playIcon : stopIcon;
return (
<Image
style={{height:150, width:150}}
source={imgSource}
/>
);
//beat
beatDown = () => {
if (this.state.beat === 1) {
this.setState({beat: 1});
}
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});
}
}
};
noteUp = () => {
if (this.state.note >= 32) {
this.setState({note: 32 });
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'});
}
}
};
modalSet = () => {
console.log('Settings');
this.setState({showSet: true});
BackHandler.addEventListener('hardwareBackPress', this.setExit);
// BackHandler.removeEventListener('hardwareBackPress', this.setExit);
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() {
var imgSource = this.state.showImg ? playIcon : stopIcon;
const movingMargin = this.animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 300, 1],
});
return (
<View style={{flex: 1}}>
<ImageBackground
source={require('../media/img/background.jpg')}
style={styles.imagebackground}>
{/* Modal 1*/}
{/* Modal 1*/}
<Modal transparent={true} visible={this.state.showSet} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:275,height:'65%', width:'93%', marginRight:30}}>
<SafeAreaView>
......@@ -180,36 +446,8 @@ class MetronomeSkill extends React.Component {
<SafeAreaView>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>List</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}}>
<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={{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%'}}>
<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>
</TouchableOpacity>
......@@ -220,42 +458,58 @@ class MetronomeSkill extends React.Component {
{/* Modal 3*/}
<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>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>Notes</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}}>
<Text style={{fontSize:20, margin:10}}>Tone</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 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>
</ScrollView>
<View style={{alignItems: 'center', height:'30%'}}>
<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:10}}>Back</Text>
<Text style={{marginLeft:11}}>Back</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
......@@ -268,18 +522,19 @@ class MetronomeSkill extends React.Component {
<View style={{height: '70%',marginTop:50}}>
<View style={{height:'60%', width:'100%'}}>
<View style={{alignItems:'center'}}>
<View style={{backgroundColor:'white', height:'80%', width:'95%', marginLeft:10, marginRight:10, marginTop:40, borderRadius:10}}>
<View style={{flexDirection: 'row', marginTop:8, marginLeft:30, marginRight:15, justifyContent: 'space-between'}}>
<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:120}}>T.S</Text>
<Text style={{marginLeft:110}}>T.S.</Text>
<Text>SUB DIV.</Text>
</View>
<View style={{flexDirection: 'row', marginTop:1, marginLeft:30, marginRight:15, justifyContent: 'space-between'}}>
<Text style={{fontSize:40}}>75</Text>
<Text style={{fontSize:20, marginTop:20, marginRight:30,marginLeft:5}}>Andante</Text>
<Text style={{fontSize:40, marginRight:25}}>4/4</Text>
<Text style={{fontSize:40, marginRight:10}}>@</Text>
<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'}}>
<TouchableOpacity style={{backgroundColor:'darkmagenta',borderColor:'darkorchid', borderWidth:3,width:'20%', height:'200%'}}><Text/></TouchableOpacity>
......@@ -289,16 +544,23 @@ class MetronomeSkill extends React.Component {
</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={{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 style={{borderWidth:3, borderColor:'black', width:'100%'}}/>
<View style={{backgroundColor:'gray', height: '125%', width:'100%'}}>
<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.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>
<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}/>
......@@ -306,14 +568,14 @@ class MetronomeSkill extends React.Component {
</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}}><Image style={{height:252, width:110}} 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:60}} onPress={ () => this.setState({ showImg: !this.state.showImg }) } >{this.renderImage()}</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>
<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%', 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%', 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>
</View>
</View>
</View>
......
screens/quiz.js
View file @ 1f805eb4
......@@ -52,7 +52,7 @@ const NOTESBLACK = [
{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: '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: '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},
......
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