updating

screens/metronome.js

@@ -2,7 +2,7 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
 /* eslint-disable prettier/prettier */
-import React, {useState} from 'react';
+import React from 'react';
 import {
   ImageBackground,
   Text,
@@ -165,6 +165,7 @@ class MetronomeSkill extends React.Component {
       isEnabled: true,
       showPendulum:true,
       barTempoH : config.deviceHeight * 0.09,
+     // num : 0,
         };
 
   }
@@ -448,12 +449,14 @@ class MetronomeSkill extends React.Component {
             clearInterval(this.timer);
             this.setState({
                 playing: false,
+               // num:0,
             });
              barTempo.map((item,id) => {
                item.active = true;
           });
         } else {
           this.animate();
+          // console.log('count stop:', this.state.count);
             this.timer = setInterval(
                 this.playClick,
                 (60 / this.state.tempo) * 1000
@@ -462,6 +465,7 @@ class MetronomeSkill extends React.Component {
                 {
                     count: 0,
                     playing: true,
+                  //  num:0,
                 },
                 this.playClick
             );
@@ -469,8 +473,6 @@ class MetronomeSkill extends React.Component {
   }
 
    playClick = async () => {
-     let i =0;
-     let index = -1;
       //  const { count} = this.state;
           var play1 = new Sound(this.state.soundName, (error) => {
       if (error) {
@@ -488,17 +490,24 @@ class MetronomeSkill extends React.Component {
       });
     });
 
-        this.setState(state => ({
-            count: (state.count + 1) % this.state.beat,
-        }));
+        this.setState({
+            count: (this.state.count) % this.state.beat,
+        });
+        // console.log('count before:', this.state.count);
 
-      
             barTempo.map((item,id) => {
-          if (id === i) {item.active = false; console.log(id);}
+          if (id === this.state.count) {
+            item.active = false;
+           // console.log('count:', this.state.count);
+           // console.log(id);
+          }
           else {item.active = true;}
-          
           });
-
+         // this.setState({num : this.state.num + 1});
+          //console.log('count after:', this.state.count);
+            this.setState({
+            count: this.state.count + 1,
+        });
     }
 
     keepTap = async () => {
@@ -631,7 +640,7 @@ getRotationAnimation = () => {
       this.setState({tempoName:'Allegro'});
       if (barTempo.length < 7) {
       for (var j = barTempo.length; j < 7; j++) {
-         barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}]});
+         barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}], active:true});
       }
        this.setState({beat: barTempo.length});
     }
@@ -653,7 +662,7 @@ getRotationAnimation = () => {
       let index = -1;
       if (barTempo.length < 4) {
       for (var j = barTempo.length; j < 4; j++) {
-         barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}]});
+         barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}], active:true});
       }
        this.setState({beat: barTempo.length});
     }
@@ -676,7 +685,7 @@ getRotationAnimation = () => {
       let index = -1;
       if (barTempo.length < 8) {
       for (var j = barTempo.length; j < 8; j++) {
-         barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}]});
+         barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}], active :true});
       }
        this.setState({beat: barTempo.length});
     }
@@ -709,15 +718,12 @@ getRotationAnimation = () => {
        return (
        <View style={{flexDirection: 'row', marginTop:5, marginLeft:13, marginRight:15, justifyContent: 'space-between'}}>
                <TouchableOpacity style={{backgroundColor:'grey',width:'100%', height:'180%'}}><Text/></TouchableOpacity>
-               <TouchableOpacity style={{height:'180%', width:10, position: 'absolute'}}>
-              <Animated.View
+              <Animated.Image
         style={{
           marginLeft: this.state.showImg ? 0 : movingMargin,
-          height: '100%',
-          width: '250%',
-          backgroundColor: 'black'}} />
-               </TouchableOpacity>
-
+          height: '180%',
+          width: '8%',
+          backgroundColor: 'black', position: 'absolute'}} />
                </View>
     );
     }
@@ -728,10 +734,10 @@ getRotationAnimation = () => {
 
   render() {
     var imgSource = this.state.showImg ? playIcon : stopIcon;
-   const movingMargin = this.animatedValue.interpolate({
+  /* const movingMargin = this.animatedValue.interpolate({
     inputRange: [0, 0.5, 1],
     outputRange: [0, 300, 1],
-  });
+  }); */
 
     return (
      <View style={{flex: 1}}>
@@ -954,9 +960,9 @@ getRotationAnimation = () => {
           }}
           {...this._panResponder.panHandlers}
         />
-              <TouchableOpacity style={{position: 'absolute',top:30, right: config.deviceWidth * 0.5}} onPress={this.leftDown}><Image style={{height:252, width:115}} source={leftIcon}/></TouchableOpacity>
-              <TouchableOpacity style={{position: 'absolute',top:30, left:config.deviceWidth * 0.5}} onPress={this.rightUp}><Image style={{height:250, width:115}} source={rightIcon}/></TouchableOpacity>
-              <TouchableOpacity style={{position: 'absolute',top:75}}   onPress={() => this.stopPlay()} ><Image style={{height:150, width:150}} source={imgSource}/></TouchableOpacity>
+              <TouchableOpacity style={{position: 'absolute',top:40, right: config.deviceWidth * 0.5}} onPress={this.leftDown}><Image style={{height:242, width:110}} source={leftIcon}/></TouchableOpacity>
+              <TouchableOpacity style={{position: 'absolute',top:40, left:config.deviceWidth * 0.5}} onPress={this.rightUp}><Image style={{height:240, width:110}} source={rightIcon}/></TouchableOpacity>
+              <TouchableOpacity style={{position: 'absolute',top:85}}   onPress={() => this.stopPlay()} ><Image style={{height:150, width:150}} source={imgSource}/></TouchableOpacity>
             </View>
 
             <View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.4}}>