responsecheck : setTimeout

react_webgame/main/ResponseCheck-class.jsx

@@ -7,8 +7,40 @@ class ResponseCheck extends Component {
         result: [],
     }
     
+    timeout;
+    startTime;
+    endTime;
+
     onClickScreen = () => {
-        
+        const { state, message, result } = this.state;
+        if( state === 'waiting') {
+            this.setState({
+                state: 'ready',
+                message: '초록색이 되면 클릭하세요.',
+            })
+            this.timeout = setTimeout(() => {
+                this.setState({
+                    state: 'now',
+                    message: '지금 클릭',
+                })
+                this.startTime = new Date();
+            }, Math.floor(Math.random() * 1000) + 2000); //2~3초 랜덤
+        } else if (state === 'ready') {
+            clearTimeout(this.timeout)
+            this.setState( {
+                state: 'waiting',
+                message: '너무 성급하시군요! 초록색이 된 후에 클릭하세요',
+            })
+        } else if (state === 'now') { // 반응속도 체크
+            this.endTime = new Date();
+            this.setState( (prevState) => {
+                return {
+                    state: 'waiting',
+                    message: '클릭해서 시작하세요',
+                    result: [...prevState.result, this.endTime - this.startTime],
+                }
+            });
+        }
     }
 
     renderAverage = () => {