connect-foundation / 2019-01

👨‍💻👩‍💻Boolean Avengers : 개발 상식을 점검할 수 있는 웹 시리어스 게임 서비스

Welcome to Boolean Avengers 👋

📖 Wiki

🖥 Demo Video

🕹️ Click and Play game!

개발자를 위한 OX 퀴즈 게임 서비스

끝까지 살아남는 자가 채용된다! 식상한 퀴즈게임과 지루한 개발 공부에 질리셨나요? 키보드로 직접 캐릭터를 조작해서 개발 상식 OX 퀴즈를 풀어보세요! Boolean Avengers는 다이내믹한 게임 요소와 개발 상식 퀴즈를 결합한 웹 시리어스 게임 서비스입니다.

Install & Run

• 😘Front-End

cd client
npm install
npm start

• 🏗Back-End

cd server
npm install
npm start

• 🐳By Docker-compose

docker-compose up

⛑Run tests

npm test

🏁 Challenge

웹에서 즐기는 다이내믹한 게임!

• 웹 환경에서 유저들이 여러 상호작용을 할 수 있는 게임 서비스를 제공합니다.
• 여러 유저들의 행동을 실시간으로 반영하면서, 유저들에게 동일한 UX를 제공합니다.
• 웹에서 보다 부드러운 애니메이션을 통해 매끄러운 게임 환경을 제공합니다.
• 유저들간의 상호작용을 유도하여, 다이내믹한 게임 요소들을 제공합니다.

📒 Tech Log

• 1주차 - 서비스 기획 + 개발 세팅 + 브랜치 전략
• 2주차 - 인프라 + 개발환경 설정(husky + ESLint)
• 3주차 - 캐릭터 애니메이션 + 실시간 움직임 표시
• 4주차 - 게임 예외상황 + socket test + 소켓 재연결 이슈
• 5주차 - 캐릭터 움직임 버그 + OAuth 로그인
• 6주차 - 사운드 + 도메인 + 엄격한 채팅 길이 검사 + 애니메이션 추가
• 7주차 - 리팩토링

🔧 Tech Stack

🗃 Project Folder

📁docker
📁mysql
📁script
📁client
├── 📁public
├── 📁src
│   ├── App
│   ├── 📁modules
│   ├── 📁constants
│   └── 📁components
│       ├── 📁Admin
│       ├── 📁Login
│       ├── 📁Lobby
│       └── 📁Room
│       └── 📁OAuth
📁server
├── App
├── 📁bin
│   └── www
├── 📁middlewares
├── 📁routes
│   └── 📁admin
├── 📁database
├── 📁controller
├── 📁models
├── 📁constants
├── 📁test
└── 📁util

🏗 Architecture

Server & Client

CI/CD

Socket event flow

Game Logic

Move

Game start to end

👨‍👩‍👦‍👦 Author

👤 boostcamp 2019-01

👸 김희선
🌟 함형규
🤐 서보현👨‍⚕️
💑 조영도

📝 Copyright

Character Image

Allowed use and edit only for non-commercial from Source

Sound

Allowed use only for non-commercial from Source

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

---

This README was generated with ❤️ by readme-md-generator

2019-01's Issues

[0-1] DB 설계

유저, 문제, 닉네임에 대한 db 설계

예상시간: 2h

docker-redis 환경 마련

• 예상 시간 :

[0-14] 자동 배포 설정

예상 시간: ??

정답에 대한 해설을 보여줘야 할지?

OX 문제를 만들다 보니까 답을 O, X로 나타내주는 것 외에도 간단한 해설을 보여주는게 나을 것 같다는 생각이 들었습니다.
추가적인 구현인 것 같기도 하고, 필수에 가까운 내용같기도 합니다. option으로 구현할까요?

[0-11] 백로그 분류

백로그 task 분류

예상시간: 4h

[0-6] CI 도구 설정 및 스크립트 작성

예상시간:5h

[13-1] 서버가 시작 명령을 보내고, 클라이언트는 시간을 표시한다.

예상 시간: 4

[0-3] 문제 초기 데이터 삽입 (20개)

예상시간:1h

[8-3] 플레이어에 따라 전광판을 다르게 보여준다. (방장: start, 플레이어: 대기중)

예상 시간: 2h

docker-mysql에서 volume사용해서 데이터 유지하도록 하기

• 현재 초기데이터는 작성해둔 sql 파일로 넣어주고 있다.
• nCloud의 docker-mysql은 배포가 될 때마다 초기화 되고, 초기데이터가 들어간다.
• 현재는 상관 없지만 유저가 추가되되는 등 데이터를 유지시킬 필요가 있을 때는 변경된 데이터를 유지해줄 필요가 있다.
• docker의 volume기능을 이용해서 위 기능을 구현할 수 있는 것 같다.

[0-12] docker 설정

docker 공부 및 설정

예상시간: ?

[0-8] spa, 라우터 설계

예상시간:2h

[0-4] 깃 브랜치 실습

예상시간:3h

[0-9] 객체 설계

리액트 컴포넌트 및 모델, 컨트롤러 객체 설계

예상시간: 5h

docker-mysql에서 패스워드 암호화

[11-1] ox 문제를 db에 넣는다.

예상 시간 : 3h

이미 구축해 놓은 infrastructure에 mysql을 추가해야 한다.

2주차 데모

[0-5] 개발 환경 초기 설정 (prettier, eslint 등)

예상시간:6h

개발 전 화면 구조 잡기

슬랙 클론 코딩한 조처럼, 프론트 개발 시 화면 구조를 미리 잡고 개발하는 것 어떨까요?

191206 까지 master 브랜치 push 하기

추가로 실 서버에 배포해서 중간 데모 진행할 수 있게 하기...!

[8-1] 방에 첫 번째로 입장한 플레이어가 방장이 된다.

예상 시간: 2h

[12-2] 리액트에서 캔버스를 사용해서 이미지를 표시한다.

예상 시간 : 3h

feature 개발 시, 완성될 때마다 commit에 issue 번호 달기

잊지 말고 달아놔요!! :)

모두 "습관화"되었다고 판단될 때, 이슈 닫겠습니다!!

[0-7] MVC 설계, 디렉토리 설계

예상시간:5h

DB 관련된 기능을 수행하는 객체를 따로 구현하기

async getQuizList() {
  const [quizList] = await this.pool.query(this.quizFinder.getTenQuiz);
  return quizList;
}

위와같이 QuizModel에서 직접 pool을 날려주기 때문에 따로 빼주는 걸 고려하기로 함

Story book 도입?

• react 컴포넌트를 한 눈에 보기 편해보임
• 상태 관리 편하다고 한다.

목요일 22:00까지 코드리뷰 받을 코드정하기

예상 시간 : 1h

[0-13] redux, mobx 리서치

예상 시간 : ?

[8-4] 방장이 start 버튼을 누르면 게임을 시작한다.

예상 시간: 2.5h

테스트 코드 작성

• 예상 시간 : ?
• 테스트 목표 범위 정하기 : unit , integration, E2E test
• 테스트 도입 시점 정하기 : 기능 완성 후 / develop 브랜치에서 master로 머지하기 전 / 한 주 시작 전 등등

[10-1] 소켓 연결한 클라이언트는 캐릭터가 나타난다.

예상시간:3h

[6-1] socket.io 리서치

예상 시간: 4h

[6-2] 클라이언트와 서버 소켓 연결

예상시간: 2h

master, develop 브랜치에 PR할 때만, CI 스크립트 실행

현재 travis 설정이 모든 브랜치에 push가 있을 때마다 CI 스크립트 실행됨.
master, develop 브랜치에 PR할 때만, CI 스크립트 실행되도록 변경할 필요가 있음.

추가로, 배포는 merge가 된 경우에만 실행되도록 방법을 찾아봐야 할 필요가 있다.

[0-2] 그래픽 이미지(게임 배경, 캐릭터 등) 제작

예상 시간: 5h

[0-10] 프로토콜 설계

서버와 클라이언트 간 주고 받는 데이터 프로토콜 설계

예상시간: 3h

github repository branch protection setting을 해두면 좋을 것 같아요.

[12-1] 캔버스 라이브러리를 리서치한다.

예상시간 : 5h

브랜치 tag 달기

• 예상 시간 : 1시간

Travis trigger 포인트 변경 필요

• 현재 pull request 시, travis로 docker image 빌드함.
• 그러나 travis 정책에 따르면, pull request가 보내진 브랜치로 빌드하지 않음
  • 링크: https://docs.travis-ci.com/user/pull-requests/
• 그래서 pull request 시 travis 실행이 아닌, develop, master로 push 시 빌드하는 것으로 변경할 필요 있음.

[12-3] 키보드 입력에 따라 캔버스 이미지를 움직인다.

예상 시간 : 3h

api 문서 작성

• 예상 시간 : ?
• gitbook 리서치

[10-2] 각 소켓마다의 키보드 입력마다 소켓 통신으로 캔버스 이미지를 수정한다.

현재 feature 브랜치 중 .travis.yml 파일 다른지 여부 확인 필요

중간에 travis.yml 파일 변경되었는데, 작업 중인 브랜치에선 변경 전 파일이 있다면 현재 develop 브랜치에 있는 파일 고대로 변경해야 합니다.
commit도 필수로 해야합니다.

이전 파일인 경우, travis가 의도치 않은 build & deploy 과정을 거치기 때문에, 개발 서버의 내용이 변경될 수 있습니다. (경험담)
유의해주세요! :)

README.md 꾸미기

• 마스터님의 제안
• readme-md-generator 이용?
• travis-ci build 라벨을 붙이는 등도 좋을 것 같아요

[11-3] 방에서 문제를 모든 클라이언트에게 보내고, 클라이언트는 문제를 볼 수 있다.

예상 시간 : 1h

[8-2] 전광판이 있다.

예상 시간: 3h

[11-2](서버) 방에서 10-20개 정도의 문제를 랜덤하게 db에서 가져온다.

예상 시간 : 1h

[14-1] 탈락한 클라이언트들의 캐릭터는 사라지고, 게임에 참여할 수 없다.

예상시간: 1.5h

[13-2] 제한시간이 끝나면 전광판에 O/X가 표시된다.

예상시간: 2h