남녀노소 즐길 수 있는 캐주얼 웹 게임 캐치 마이 마인드입니다! 여러분의 창의력을 마음껏 발휘해 보세요!
- PC 게임인 캐치마인드를 웹게임으로 구현하였습니다.
- 출제자가 그림을 그리면 이외의 플레이어가 채팅으로 답을 맞추는 웹 게임입니다.
- 기본적으로 회원제 서비스로서, 다른 유저에게 친구 신청을 보낼 수 있으며, 친구 신청을 수락하거나 거절할 수 있습니다.
- 모든 유저와 랜덤 매칭이 가능한 랜덤 게임과 친구끼리 즐길 수 있는 비밀 게임, 두가지 게임 모드가 있습니다.
- 전체 회원 및 친구들의 점수를 랭킹을 통해 확인할 수 있으며, 게임에서 점수를 획득하여 랭킹을 올릴 수 있습니다.
- 과거의 게임 기록을 움짤의 형태로 조회할 수 있습니다.
- 나의 닉네임과 캐릭터를 변경할 수 있습니다.
- 참고: https://skribbl.io/
🙎♀️ 손진아 - 팀과 함께 성장하고자 합니다.
💁♂️ 이지영 - 문제해결을 위해 끊임없이 고민하는 개발자입니다.
🤷♂️ 이창권 - 재밌는 것을 만들고 싶은 개발자입니다.
🙋♂️ 최형준 - 🌐지속 가능한 웹 개발자를 지향합니다.
| 손진아 | 이지영 | 이창권 | 최형준 | |
|---|---|---|---|---|
| Sprint 1 | 친구 기능 구현 | 웹소켓으로 게임시작기능 구현 | CI/CD 및 환경 설정 | OAuth 구현 |
| Sprint 2 | 단어 db 구축, 단어 선택 기능 구현 | 게임화면 유저리스트 구현 | 전체 랭킹, 친구 랭킹 구현 | 자동 로그인, 배포 환경에서의 OAuth |
| Sprint 3 | 채팅 기능 구현 | 비밀게임 시작구현 | 친구 초대 알람, 닉네임 변경 | 전체적인UI, 타이머, 단어 미리보기 |
| Sprint 4 | 디자인 변경 | 리팩토링, 버그픽스 | 캔버스 소켓 통신, 알림 리팩토링 | 문제 종료, 라운드 변경, 프론트 코드 리팩토링(지영이와 페어 코딩) |
| Sprint 5 | 정답 기능 구현, 친구 리팩토링 | 아바타 선택 기능 | 캔버스 툴 추가, 게임 초대 | 타이머 정확도 개선, 난입에 대한 예외처리, 게임 종료 로직 구현 |
| Sprint 6 | 게임 기록 움짤 기능 구현, 내정보 동기화 | 소켓 리팩토링, 버그픽스, 아바타, 비밀방 게임설정 | 캔버스 소켓 통신 방법 수정,알림 버그 픽스, 프론트 리팩토링 | 탈주 예외 처리, 라이센스 및 카피라이트 추가,useGamePlay 리팩토링, 404페이지 추가 |
- React (16.11.0)
- apollo-boost (0.4.4)
- styled-component (4.4.1)
- Fabric.js (3.5.1)
- Express (4.16.1)
- Passport.js (0.4.0)
- JSON Web Token (8.5.1)
- GraphQL (14.5.8)
- Sequelize (5.19.6)
- Sequelize CLI (5.5.1)
- Socket.IO (2.3.0)
- NODE-CACHE (5.0.2)
- Travis CI
- Docker (19.03.5)
- MySQL (5.7)
- Git (2.23.0)
- Git Flow
- Jest (24.9.0)
- ESLint - airbnb (6.1.0)
- dotenv (8.2.0)
펼치기 / 접기
./
├── conf/ # 설정 파일
├── public/ # 정적 문서
├── src/ # 소스 파일
| ├── asset/ # 어셋 파일
| ├── components/ # 컴포넌트
| ├── constant/ # 상수
| ├── hooks/ # 커스텀 훅
| ├── logics/ # 컴포넌트에 주입할 로직
| ├── pages/ # 페이지(뷰) 컴포넌트
| ├── queries/ # 쿼리 파일
| ├── themes/ # 테마(글로벌 스타일)
| ├── util/ # 유틸리티 파일
| ├── index.js # 엔트리 포인트
| ├── Router.js # 라우터
| └── serviceWorker.js # 빌드 시 실행되는 파일
└── test/ # 테스트 파일
펼치기 / 접기
./
├── bin/ # Express 실행 파일
├── config/ # 각종 환경설정 파일
├── db/ # DB 및 sequelize 관련 파일
| ├── migrations/ # 마이그레이션 파일들 (sequelize-cli)
| ├── models/ # 모델 파일 (sequelize-cli)
| └── seeders/ # 시더 파일 (sequelize-cli)
├── graphql/ # graphQL 관련 폴더
| ├── resolvers/ # 리졸버 파일
| ├── typeDefs/ # 타입 파일
| └── schema.js # 스키마
├── middlewares/ # 커스텀 미들웨어
├── router/ # 라우터
├── secket/ # 소켓 관련 파일
├── test/ # 테스트 파일
└── util/ # 유틸리티 파일
- components without style library (vanilla components!)
- authentication with Passport.js and OAuth 2.0
- access control with Json Web Token
- WebSocket
- Socket Room
- Throttle
- Debounce
- requestAnimationFrame in React
- canvas with Fabric.js and custom drawing tool
- cursor based lazy loading and infinite scroll
Initialize DB Tables
npx sequelize db:migrate --env local
npx sequelize db:seed:all --env local
Run Server 🐳
cd back
npm install
npm run local
Run Front 🎄
cd front
npm install
npm start
npm run test:local
Copyright 2019. Catch My Mind. All rights reserved.
Give a ⭐️ if this project helped you!
_This README was generated with ❤️