Controls improved

Author: Gianluca

src/components/controls/index2.js

@@ -7,14 +7,15 @@ export default class Controls extends PureComponent {
     constructor(props) {
         super(props)
         this.scrollView = React.createRef()
-        this.cannonXPosition = 0
+        this.cannonXPosition = this.props.width / 2
         this.translateY = new Animated.Value(0)
     }
 
     componentDidMount() {
+        const { width } = this.props
         // Centra il cannone
         // Senza timeout non chiama scrollTo.. perché?
-        setTimeout(() => this.scrollView.current.scrollTo({ x: this.props.width / 2 - 25, y: 0, animated: false }), 200)
+        setTimeout(() => this.scrollView.current.scrollTo({ x: width / 2 - 25, y: 0, animated: false }), 200)
         Animated.timing(
             this.translateY,
             {
@@ -27,7 +28,7 @@ export default class Controls extends PureComponent {
         ).start()
     }
 
-    afire = () => {
+    fire = () => {
         const { fire } = this.props
 
         // Passa a fire() la posizione del cannone, per sincronizzare il proiettile
@@ -47,7 +48,7 @@ export default class Controls extends PureComponent {
     }
 
     render() {
-        const { width, height, winner } = this.props
+        const { width, height } = this.props
 
         console.log('Controls rendered')
 
@@ -63,33 +64,33 @@ export default class Controls extends PureComponent {
                     showsHorizontalScrollIndicator={false}
                     overScrollMode='never'
                     decelerationRate={0.01}
-                    contentContainerStyle={styles.scrollViewContainer}
                     scrollEventThrottle={50}
                     onScroll={({ nativeEvent }) => this.calculateCannonPosition(nativeEvent.contentOffset.x)}
 
                 >
-                    <View style={sidePaddingStyle} />
-
-                    {winner !== 2 && <Sprite image='cannon' />}
-
-                    <View style={sidePaddingStyle} />
-
+                    <TouchableWithoutFeedback onPress={this.fire}>
+                        <View style={styles.touchableArea}>
+                            <View style={sidePaddingStyle} />
+                            <Sprite image='cannon' />
+                            <View style={sidePaddingStyle} />
+                        </View>
+                    </TouchableWithoutFeedback>
                 </ScrollView>
-            </Animated.View>
+            </Animated.View >
         )
     }
 }
 
 const styles = StyleSheet.create({
-    scrollViewContainer: {
+    touchableArea: {
+        flexDirection: 'row',
         alignItems: 'flex-end'
     },
     sidePaddingBase: {
         height: 50,
         //backgroundColor: 'orangered'
     },
     base: {
-        //backgroundColor: 'green',
         position: 'absolute',
         bottom: -50,
         left: 0,

src/components/game-view/index.js

@@ -57,7 +57,7 @@ export default class GameView extends PureComponent {
 
                     {this.renderRockets()}
 
-                    <Controls winner={winner} fire={fire} width={width} height={height} updatePlayerPosition={updatePlayerPosition} />
+                    {winner !== 2 && <Controls fire={fire} width={width} height={height} updatePlayerPosition={updatePlayerPosition} />}
 
                 </View>