죄수의 딜레마 개념을 활용한 XY 게임을 웹 콘텐츠로 개발
4팀이 10라운드를 거쳐 최대 이익을 달성하는 멀티 플레이어 게임
위드플러스에서 기업 교육에서 런칭 예정
- 교육용 오프라인 게임을 웹 앱을 서비스함으로써 게임을 통한 교육의 효율성을 제공하고 싶었습니다.
- 다양한 사용자에게 서비스를 제공하고 그에 따른 피드백을 실질적으로 반영하는 과정을 겪고자 기업 교육에 사용되는 웹 앱을 개발하여 런칭하였습니다.
- Client: https://github.com/X-y-game/x-y-game
- Server: https://github.com/X-y-game/X-y-game-server
- 해당 웹 어플리케이션은 모바일 환경에 최적화되어 있습니다.
- X-y-game-server에서 .env 파일을 설정해주어야 합니다.
git clone https://github.com/X-y-game/x-y-game.git cd X-y-game npm install (or yarn) npm start (or yarn)
- MongoDB 계정이 필요하며 Root 디렉토리에 .env 파일을 만들고 다음과 같이 설정합니다.
git clone https://github.com/X-y-game/x-y-game-server.git cd X-y-game npm install (or yarn) npm run dev
DB_URL = <YOUR_MONGODB_ATLAS_URL> PORT = <default Port 8080 or SET_YOUR_PORT>
COOKIE_SCRET = <SET_YOUR_COOKIET_SECRET>
git clone https://github.com/X-y-game/X-y-game-server.git
cd X-y-game-server
npm install (or yarn)
npm start (or yarn)
V1.0.0 First Release
- 관리자 페이지에서 채널 , 룸 및 팀을 생성합니다.
- 교육생(유저)은 관리자가 알려준 비밀번호와 함께 채널, 룸, 팀으로 이동합니다.
- 게임의 규칙은 아래와 같습니다.
- 모두가 X를 선택 : 각 -100 손실
- 모두가 Y를 선택 : 각 100 이익
- X가 두 팀, Y가 두 팀 : X 200 이익, Y 200 손실
- X가 세 팀, Y가 한팀 : X 100 이익, Y 300 손실
- X가 한팀, Y가 세팀 : X 300 이익, Y 100 손실
- 5라운드 가중치 3배, 8라운드 가중치 5배, 10라운드 가중치 10배가 적용됩니다.
- 4팀은 X, Y중 하나의 카드를 선택하여 제출 합니다.
- 4팀이 모두 카드를 제출하면 해당 라운드의 선택 결과와 손익 정보가 표시됩니다.
- 10라운드가 되면 게임이 종료되고, 최종 결과를 확인합니다.
| Frontend | Backend | etc |
|---|---|---|
| ES2015+ React Styled-Component react-table |
MongoDB Mongoose Express Node.js Mongo Atlas |
Jest esLint Husky Netlify |
- Admin 페이지를 통해 관리자가 채널, 팀 , 룸 생성 및 삭제
- 비밀번호를 통한 인증으로 채널에 접속할 수 있도록 함
- 4팀 인원 수를 기다리는 로딩
- X, Y카드 중 하나를 선택하여 제출
- 4팀 모두 선택 되면 라운드 결과 모달이 표시
- 상단 버튼을 통해 현재까지의 결과를 확인할 수 있음
- 상단 버튼을 통해 게임의 규칙을 확인할 수 있음
- 10라운드 종료 후 최종 결과 모듈 표시
- 최종 결과 모듈에서 필터를 통해 정보 확인 가능
- 반응형 처리
- 한 게임룸당 4팀이 들어와야 하며, 4팀이 전부 준비상태가 되면 게임 시작 버튼을 활성화 해주려고 했습니다. 서버 socket 쪽에서 각 팀이 준비버튼을 누른 지 확인하여, emit를 해주었지만 마지막에 접속한 브라우저는 렌더링이 되지 않는 문제가 있었습니다.
- 이를 해결하기 위해 먼저 socket이 작동하는 원리에 대해 제대로 이해를 해야 했고, 문서를 반복해서 읽어야 했습니다. 그 룸 전체 소켓 그룹에 대해 상황을 알려주어야 그 상태를 받고 렌더링을 되는 것을 파악하였고, 로직을 수정하였습니다.
- 이전 교육용 프로그램에서는 데이터 보안 처리가 안되어 있어 데이터베이스 관리를 통해 ip 접근 및 액세스를 제한하고 싶었습니다. 막상 제작해보니, 교육용으로 염두해두고 제작해두었기 때문에 데이터가 방대하지 않으므로 , 외부 데이터베이스가 아닌 json파일로 관리 했어도 괜찮았을 것 같습니다.