responsecheck : hooks

2020-12-23 18:34:35 +09:00
parent 324efb72fa
commit 83f7ac3c47
4 changed files with 73 additions and 4 deletions
--- a/react_webgame/main/ResponseCheck-class.jsx
+++ b/react_webgame/main/ResponseCheck-class.jsx
@@ -43,12 +43,20 @@ class ResponseCheck extends Component {
        }
    }

+    onReset = () => {
+        this.setState({
+            result: [],
+        })
+    }
+
    renderAverage = () => {
        const { result } = this.state;
        return result.length === 0 
            ? null 
-            : <div>평균 시간: {this.state.result.reduce((a, c) => a + c) / this.state.result.length}ms</div> 
-                
+            : <>
+                <div>평균 시간: {this.state.result.reduce((a, c) => a + c) / this.state.result.length}ms</div> 
+                <button onClick={this.onReset}>리셋</button>
+            </>    
    }

    render() {
--- a/react_webgame/main/ResponseCheck.jsx
+++ b/react_webgame/main/ResponseCheck.jsx
@@ -0,0 +1,61 @@
+import React, { useState, useRef } from 'react';
+
+const ResponseCheck = () => {
+    const [state, setstate] = useState('waiting');
+    const [message, setmessage] = useState('클릭해서 시작하세요');
+    const [result, setresult] = useState([]);
+    const timeout = useRef(null);
+    const startTime = useRef();
+    const endTime = useRef();
+
+    const onClickScreen = () => {
+        if( state === 'waiting') {
+            setstate('ready');
+            setmessage('초록색이 되면 클릭하세요.');
+            timeout.current = setTimeout(() => {
+                setstate('now');
+                setmessage('지금 클릭');
+                startTime.current = new Date();
+            }, Math.floor(Math.random() * 1000) + 2000); //2~3초 랜덤
+        } else if (state === 'ready') {
+            clearTimeout(timeout.current)
+            setstate('waiting');
+            setmessage('너무 성급하시군요! 초록색이 된 후에 클릭하세요');
+        } else if (state === 'now') { // 반응속도 체크
+            endTime.current = new Date();
+            setstate('waiting')
+            setmessage('클릭해서 시작하세요')
+            setresult((prevResult) => {
+                return [...prevResult, endTime.current - startTime.current];
+            }); 
+        }
+    }
+
+    const onReset = () => {
+        setresult([]);
+    }
+
+    const renderAverage = () => {
+        return result.length === 0 
+            ? null 
+            : <>
+                <div>평균 시간: {result.reduce((a, c) => a + c) / result.length}ms</div> 
+                <button onClick={onReset}>리셋</button>
+            </>    
+    }
+
+    return (
+        <>
+                <div
+                    id="screen"
+                    className={state}
+                    onClick={onClickScreen}
+                >
+                    {message}   
+                </div>
+                {renderAverage()}
+                
+            </>
+    )
+}
+export default ResponseCheck;
--- a/react_webgame/main/client.jsx
+++ b/react_webgame/main/client.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDom from 'react-dom';

-import ResponseCheck from './ResponseCheck-class';
+import ResponseCheck from './ResponseCheck';


 ReactDom.render(<ResponseCheck />, document.querySelector('#root'));
--- a/react_webgame/main/index.html
+++ b/react_webgame/main/index.html
@@ -1,7 +1,7 @@
 <html>
 <head>
 <meta charset="utf-8"/>
-<title>숫자야구</title>
+<title>반응속도체크</title>
 <style>
    #screen {
        width: 300px;