/
index.js
109 lines (104 loc) · 2.76 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert } from 'react-native';
import { CustomGestureHandler, State } from 'react-native-gesture-handler';
export default class Example extends Component {
state = {
level: 0,
state: 'UNDETERMINED',
};
points = [
{ x: 150, y: 50 },
{ x: 221, y: 79 },
{ x: 250, y: 150 },
{ x: 221, y: 221 },
{ x: 150, y: 250 },
{ x: 79, y: 221 },
{ x: 50, y: 150 },
{ x: 79, y: 79 },
];
parseEvent = ({ nativeEvent }, sm) => {
if (
Math.pow(nativeEvent.x - this.points[this.state.level].x, 2) +
Math.pow(nativeEvent.y - this.points[this.state.level].y, 2) <
700
) {
if (nativeEvent.state === State.BEGAN) {
if (!this.timeout) {
this.timeout = setTimeout(() => {
sm.cancel();
Alert.alert('Meh...', "You're so slow ¯\\_(ツ)_/¯");
clearTimeout(this.timeout);
this.timeout = false;
}, 2000);
}
this.setState({ level: (this.state.level + 1) % 8 });
}
if (this.state.level === 7) {
clearTimeout(this.timeout);
this.timeout = false;
sm.activate();
sm.end();
}
}
};
parseState = ({ nativeEvent: { state, oldState } }) => {
this.setState({
state: Object.keys(State).find(key => State[key] === state),
});
if (oldState === State.ACTIVE) {
Alert.alert('Yay!');
clearTimeout(this.timeout);
this.timeout = false;
}
if (state === State.FAILED || state === State.CANCELLED) {
this.setState({ level: 0 });
clearTimeout(this.timeout);
this.timeout = false;
}
};
render() {
return (
<View style={styles.scrollView}>
<Text>Draw circle fast starting from the top</Text>
<CustomGestureHandler
shouldCancelWhenOutside
handleEvents={this.parseEvent}
onHandlerStateChange={this.parseState}>
<View style={styles.ghspace}>
{this.points.map((p, i) => (
<View
key={`point${i}`}
style={[
styles.circle,
{
top: p.y,
left: p.x,
backgroundColor: this.state.level >= i ? 'blue' : 'black',
},
]}
/>
))}
</View>
</CustomGestureHandler>
<Text>{this.state.level + 1} / 8</Text>
<Text>{this.state.state}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
circle: {
width: 10,
height: 10,
position: 'absolute',
borderRadius: 5,
},
ghspace: {
backgroundColor: 'red',
width: 305,
height: 305,
},
scrollView: {
flex: 1,
},
});