반응속도 체크 웹 게임 서비스

const onClickScreen = useCallback((e) => { if (state === 'waiting') { timeout.current = setTimeout(() => { setState('now'); setMessage('지금 클릭!'); startTime.current = new Date(); }, Math.floor(Math.random() * 1000) + 2000); setState('ready'); setMessage('초록색이 되면 클릭하세요!'); } else if (state === 'ready') { // 성급하게 클릭 clearTimeout(timeout.current); setState('waiting'); setMessage('너무 성급하시네요 ㅡ.ㅡ 초록색이 된 후에 클릭하세요!'); } else if (state === 'now') { // 반응속도 체크 if(result.length !== 4) { endTime.current = new Date(); setState('waiting'); // eslint-disable-next-line react/jsx-key setMessage(['기회는 5번! 다음 화면에서 배경이 초록색이 되는 순간 클릭하세요.', <br/>, <br/>, '시작하려면 클릭해주세요.']); setResult((prevResult) => { return [...prevResult, endTime.current - startTime.current]; }); } else { endTime.current = new Date(); setResult((prevResult) => { return [...prevResult, endTime.current - startTime.current]; }); setState('finish'); setMessage('게임이 종료됐습니다. 게임을 다시하려면 아래 다시 버튼을 눌러주세요!'); e.preventDefault(); } } }, [state]); const onReset = useCallback(() => { setResult([]); setState('waiting'); // eslint-disable-next-line react/jsx-key setMessage(['기회는 5번! 다음 화면에서 배경이 초록색이 되는 순간 클릭하세요.', <br/>, <br/>, '시작하려면 클릭해주세요.']); dispatch(resetRequestAction()); }, []);

const onSubmitForm = useCallback(() => { dispatch(addNicknameRequestAction({ nickname, score })); alert('점수 제출이 완료됐습니다!'); alert('잠시 후 게임이 다시 시작됩니다!'); setNickname(''); let i = 4; const id = setInterval(() => { setMessage(`${i}초 후에 게임이 다시 시작됩니다!`); i-- },1000); setTimeout(() => { clearInterval(id); onReset(); }, 5000); }, [nickname, score]);

function addNicknameAPI(data) { return axios.post('/user', data); } // data: nickname & score function* addNickname(action) { try { const result = yield call(addNicknameAPI, action.data); yield put({ type: ADD_NICKNAME_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: ADD_NICKNAME_FAILURE, error: err.response.data, }); } }

router.post('/', async (req, res, next) => { // POST /user try { await User.create({ nickname: req.body.nickname, score: req.body.score, }); const user = await User.findOne({ where: { nickname: req.body.nickname }, }); return res.status(201).json(user); } catch(error) { console.error(error); next(error); } });

import styled, { createGlobalStyle } from 'styled-components'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export const GlobalFont = createGlobalStyle` body { @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap'); font-family: 'Jua', sans-serif; } `; export const Header = styled.div` width: 100%; height: 50px; background: black; color: gold; display: flex; align-items: center; font-weight: bold; margin-bottom: 30px; `; export const Style = styled.span` position: absolute; right: 5%; `; export const Wrapper = styled(FontAwesomeIcon)` margin-left: 5%; font-size: 20px; `; export const Center = styled.span` margin-left: 10px; font-size: 20px; `; export const A = styled.a` color: gold; `; export const Footer = styled.footer` width: 100%; height: 50px; background: black; position: fixed; bottom: 0; left: 0; `; export const Github = styled(FontAwesomeIcon)` font-size: 30px; color: white; `; export const Instagram = styled(FontAwesomeIcon)` font-size: 30px; color: white; `; export const Facebook = styled(FontAwesomeIcon)` font-size: 30px; color: white; `; export const Ul = styled.ul` width: 100%; height: 50px; list-style: none; display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; z-index: -1; `; export const Li = styled.li` flex: 1; text-align: center; `;

<div> <div style={{ position: 'relative', paddingBottom: '50px' }}> {children} </div> <Footer> <div> <Ul> <Li> <a href="https://github.com/Taewoong1378" target="_blank" rel="noreferrer noopener"> <Github icon={faGithub} /> </a> </Li> <Li> <a href="https://www.instagram.com/tae_coding/" target="_blank" rel="noreferrer noopener"> <Instagram icon={faInstagram} /> </a> </Li> <Li> <a href="https://www.facebook.com/profile.php?id=100008233455158" target="_blank" rel="noreferrer noopener"> <Facebook icon={faFacebook} /> </a> </Li> </Ul> </div> </Footer> </div>

... } else if (state === 'now') { // 반응속도 체크 if(result.length !== 4) { endTime.current = new Date(); setState('waiting'); // eslint-disable-next-line react/jsx-key setMessage(['기회는 5번! 다음 화면에서 배경이 초록색이 되는 순간 클릭하세요.', <br/>, <br/>, '시작하려면 클릭해주세요.']); setResult((prevResult) => { return [...prevResult, endTime.current - startTime.current]; }); } else { endTime.current = new Date(); setResult((prevResult) => { return [...prevResult, endTime.current - startTime.current]; }); setState('finish'); setMessage('게임이 종료됐습니다. 게임을 다시하려면 아래 다시 버튼을 눌러주세요!'); e.preventDefault(); } } ... return result.length === 0 ? <Link href="/record"> <a><div style={{ textAlign: 'center'}}><MainButton type="primary">다른 사람 점수 보러가기</MainButton></div></a> </Link> : result.length === 5 ? <> <FirstUl style={{ position: 'relative' }}> <Li> 평균 : {score}ms </Li> <Li> {score > 250 ? '연습을 더 하셔야겠네요!' : score > 220 ? '이 정도면 전체 평균 정도 수준이네요!' : '정말 빠른 반응 속도를 가지고 있네요!'} </Li> </FirstUl> <Div> <ButtonWrapper type="primary" onClick={onReset}>다시!</ButtonWrapper> <Link href="/record"> <a><ButtonWrapper type="primary">다른 사람 점수 보러가기</ButtonWrapper></a> </Link> </Div> <UnderButton setMessage={setMessage} onReset={onReset} score={score} /> </> : <> <SecondUl> <Li key="first">1회차 : {result[0] ? `${result[0]}ms` : null}</Li> <Li key="second">2회차 : {result[1] ? `${result[1]}ms` : null}</Li> <Li key="third">3회차 : {result[2] ? `${result[2]}ms` : null}</Li> <Li key="fourth">4회차 : {result[3] ? `${result[3]}ms` : null}</Li> <Li key="fifth">5회차 : {result[4] ? `${result[4]}ms` : null}</Li> <Li key="sixth"><UnderResetButton onClick={onReset} type="primary">다시!</UnderResetButton></Li> </SecondUl> </> }, [result]);