Merge pull request #125 from boostcamp-2020/develop

3주차 코드 프리징

Author: sbyeol3

.vscode/settings.json

@@ -1,6 +1,11 @@
 {
     "eslint.format.enable": true,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": true,
+        "source.fixAll.stylelint": true,
     },
+    "stylelint.enable": true,
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
 }

README.md

@@ -1,16 +1,27 @@
-# 웹 기반 스토리텔링 보드게임 DUXIT 🃏
+# DUXIT : 웹 기반 스토리텔링 보드게임 🃏
 
 <p align="center">
 <img src="https://i.imgur.com/RNtI3ZD.jpg" width=500>
 </p>
 
-[![GitHub stars](https://img.shields.io/github/stars/boostcamp-2020/Project18-B-Web-Duxit.svg?style=social&label=Star)](https://github.com/boostcamp-2020/Project18-B-Web-Duxit) *DUXIT은 여러분의 ⭐️ 스타⭐️ 를 먹고 삽니다.*
+<p align="center">
+<img src="https://img.shields.io/github/stars/boostcamp-2020/Project18-B-Web-Duxit.svg?style=flat&label=Star">
+<img src="https://github.com/boostcamp-2020/Project18-B-Web-Duxit/workflows/Deploy%20master%20branch/badge.svg?style=flat&branch=master"><br>
+<span style="font-weight:600">DUXIT은 여러분의 ⭐️ 스타⭐️ 를 먹고 삽니다.</span>
+</p>
 
 
 ## 공개 주소 ✨
 
 데모를 보고 싶다면? [DuXit.ga](http://duxit.ga/)
 
+## DUXIT은 어떤 게임인가요? 🐥
+- DUXIT은 스토리텔링 보드게임 DIXIT을 웹으로 옮긴 온라인 게임입니다.
+- 번갈아가면서 각 플레이어는 스토리텔러가 되고, 자신이 가지고 있는 6장의 카드 중 하나를 고릅니다. 고른 카드에 대한 주제도 함께 정합니다.
+- 스토리텔러를 제외한 플레이어들은 자신이 갖고 있는 6장의 카드 중 주제와 가장 유사한 카드 한 장을 고릅니다. 모든 플레이어가 선택한 카드가 한번에 공개되면, 스토리텔러를 제외한 플레이어는 `스토리텔러가 어떤 카드를 냈을까?`를 추측하며 한 장의 카드를 고릅니다.
+- 이후 각 플레이어가 선택한 카드의 주인이 공개되며 정해진 점수산출 방식에 의해 말을 움직입니다. 가장 먼저 결승점에 도달하거나, 카드가 소진되었을 때 가장 멀리 말을 움직인 사람이 승리하는 게임입니다.
+- DUXIT은 최소 3인, 최대 6인까지 참여 가능합니다.
+
 ## Team. YAHTZEE 🎲
 
 > [WIKI link!](https://github.com/boostcamp-2020/Project18-B-Web-Duxit/wiki)
@@ -26,16 +37,10 @@
 
 | division        | stack                             |
 | --------------- | --------------------------------- |
-| Web             | babel, webpack                    |
-| Front-end       | Vanilla JS, TypeScript, socket-io, Scss |
-| Back-end        | Node.js, winston , socket-io      |
-| Production      | forever, nginx, NCP               |
-| Code Management | Git, GitHub                       |
-| Formatting      | eslint, stylelint, prettier       |
+| Web             | ![Babel](https://img.shields.io/badge/babel-v7.12.3-yellow?logo=babel) ![Webpack](https://img.shields.io/badge/webpack-v5.6.0-skyblue?logo=webpack)                    |
+| Front-end       | ![Javascript](https://img.shields.io/badge/javascript-ES6-yellow?logo=javascript) ![TypeScript](https://img.shields.io/badge/TypeScript-v4.1.2-blue?logo=TypeScript) ![Sass](https://img.shields.io/badge/Sass-v1.29.0-pink?logo=Sass) ![socket.io](https://img.shields.io/badge/socket.io-v3.0.3-white?logo=socket.io)  |
+| Back-end        | ![NodeJS](https://img.shields.io/badge/node.js-v12.18-green?logo=node.js) ![Express](https://img.shields.io/badge/Express-v4.16.1-9cf?logo=express) ![winston](https://img.shields.io/badge/winston-v3.3.3-beige?logo=winston) ![socket.io](https://img.shields.io/badge/socket.io-v3.0.3-white?logo=socket.io)      |
+| Production      | ![Forever](https://img.shields.io/badge/forever-v3.0.4-blue?logo=forever) ![NginX](https://img.shields.io/badge/NginX-v1.18.0-green?logo=NginX) ![Naver Cloud Platform](https://img.shields.io/badge/Naver_Cloud_Platform-compact_server-9cf&color=brightgreen)               |
+| Code Management | ![Git](https://img.shields.io/badge/Git-v2.27.0-red?logo=Git) ![github](https://img.shields.io/badge/github-gray?logo=github)                      |
+| Formatting      | ![eslint](https://img.shields.io/badge/eslint-v7.2.0-purple?logo=eslint)   ![stylelint](https://img.shields.io/badge/stylelint-v13.8.0-navy?logo=stylelint) ![prettier](https://img.shields.io/badge/prettier-v2.1.2-yellow?logo=prettier)       |
 
-## DUXIT은 어떤 게임인가요? 🐥
-- DUXIT은 스토리텔링 보드게임 DIXIT을 웹으로 옮긴 온라인 게임입니다.
-- 번갈아가면서 각 플레이어는 스토리텔러가 되고, 자신이 가지고 있는 6장의 카드 중 하나를 고릅니다. 고른 카드에 대한 주제도 함께 정합니다.
-- 스토리텔러를 제외한 플레이어들은 자신이 갖고 있는 6장의 카드 중 주제와 가장 유사한 카드 한 장을 고릅니다. 모든 플레이어가 선택한 카드가 한번에 공개되면, 스토리텔러를 제외한 플레이어는 `스토리텔러가 어떤 카드를 냈을까?`를 추측하며 한 장의 카드를 고릅니다.
-- 이후 각 플레이어가 선택한 카드의 주인이 공개되며 정해진 점수산출 방식에 의해 말을 움직입니다. 가장 먼저 결승점에 도달하거나, 카드가 소진되었을 때 가장 멀리 말을 움직인 사람이 승리하는 게임입니다.
-- DUXIT은 최소 3인, 최대 6인까지 참여 가능합니다.

src/backend/.env.sample

@@ -1,2 +1,5 @@
 [CORS]
-FRONTEND_ORIGIN=
+FRONTEND_ORIGIN=
+
+[ASSETS]
+CARD_COUNT=

src/backend/game/Card.js

@@ -0,0 +1,19 @@
+// import { randomize } from '@utils/generateRandom';
+
+// const parseImageFilename = (id) => `${id.toFixed().padStart(3, 0)}.png`;
+
+// const Card = class {
+//   constructor(id) {
+//     this.id = id;
+//     this.src = `${process.env.CARD_ORIGIN}/${parseImageFilename(id)}`;
+//   }
+// };
+
+// const FULL_CARD_LIST = Array.from(
+//   { length: process.env.CARD_COUNT },
+//   (value, index) => new Card(index),
+// );
+// export const getRandomCards = (count) =>
+//   randomize(FULL_CARD_LIST).slice(0, count);
+
+// export default Card;

src/backend/game/Game.js

@@ -1,23 +1,48 @@
 import generateRandom from '@utils/generateRandom';
+import GAME_STATE from '@utils/gameState';
+import { PLAYER, CARD } from '@utils/number';
 import GameList from '@game/GameList';
+import socketIO from '@socket';
 import User from './User';
 
-const MAX_PLAYER = 6;
-
 export default class Game {
   constructor(roomID) {
     this.roomID = roomID;
     this.users = new Map();
     this.status = {
-      isPlaying: false,
+      state: GAME_STATE.WAITING,
       unusedCards: [],
       topic: '',
       turn: 0,
     };
   }
 
+  start() {
+    this.status = {
+      ...this.status,
+      state: GAME_STATE.TELLER,
+      unusedCards: generateRandom.cards(CARD.DECK),
+    };
+    [...this.users.values()].forEach((user, index) => {
+      user.initOnStart({ turnID: index });
+    });
+    this.startNewRound();
+  }
+
+  end() {
+    // 아직 사용되지 않은 함수
+    this.status = {
+      ...this.status,
+      state: GAME_STATE.WAITING,
+    };
+  }
+
   isEnterable() {
-    if (this.status.isPlaying || this.users.size >= MAX_PLAYER) return false;
+    if (
+      this.status.state !== GAME_STATE.WAITING ||
+      this.users.size >= PLAYER.MAX
+    )
+      return false;
     return true;
   }
 
@@ -39,11 +64,75 @@ export default class Game {
   }
 
   getUser(socketID) {
-    if (!this.users.has(socketID)) {
-      console.log(`getUser: socketID ${socketID} does not exist`);
-      return null;
-    }
-
+    if (!this.users.has(socketID)) return null;
     return this.users.get(socketID);
   }
+
+  getUsersProfile() {
+    return [...this.users.keys()].map((socketID) => {
+      return { ...this.users.get(socketID).getProfile(), socketID };
+    });
+  }
+
+  updateUserProfile({ socketID, nickname, color }) {
+    const user = this.users.get(socketID);
+    user.setColor(color);
+    user.setNickname(nickname);
+  }
+
+  dealCards(cards, count) {
+    const newCards = this.status.unusedCards.slice(0, count);
+    this.status = {
+      ...this.status,
+      unusedCards: [...this.status.unusedCards.slice(count)],
+    };
+    return [...cards, ...newCards];
+  }
+
+  getUserArray() {
+    return [...this.users.values()];
+  }
+
+  forceGuesserSelect() {
+    this.getUserArray()
+      .filter((user) => user.submittedCard === null)
+      .forEach((user) => {
+        user.submittedCard = generateRandom.pickOneFromArray(user.cards);
+        socketIO
+          .to(user.socketID)
+          .emit('guesser select card', { cardID: user.submittedCard });
+      });
+  }
+
+  startNewRound() {
+    // Initialize Game status
+    this.status = {
+      ...this.status,
+      state: GAME_STATE.TELLER,
+      topic: '',
+      turn: this.status.turn + 1,
+    };
+    const {
+      users,
+      status: { unusedCards, turn },
+    } = this;
+    const isFirstTurn = turn === 1;
+    const teller = [...users.values()][turn % users.size];
+    const { socketID: tellerID } = teller;
+    const requiredCardCount = isFirstTurn ? CARD.HAND : 1;
+
+    // 카드가 부족한지 체크
+    const outOfDeck = unusedCards.length < users.size * requiredCardCount;
+    // if (outOfDeck) {
+    //   // TODO: 점수나 승자같은 결과를 내면서 턴을 끝내야되요~
+    //   return;
+    // }
+
+    users.forEach((user) => {
+      const cards = this.dealCards(user.cards, requiredCardCount);
+      const params = { tellerID, cards };
+      user.initOnRound(params);
+      socketIO.to(user.socketID).emit('get round data', params);
+    });
+  }
 }

src/backend/game/GameList.js

@@ -26,7 +26,6 @@ class GameList {
   getGame(ID) {
     const game = this.games.get(ID);
     if (!game) {
-      console.log(`Game.findGame: can not find ${ID}`);
       return null;
     }
 

src/backend/game/User.js

@@ -6,9 +6,35 @@ class User {
     this.turnID = 0;
     this.submittedCard = null;
     this.votedCard = null;
-    this.isTeller = null;
+    this.isTeller = false;
     this.cards = [];
     this.score = 0;
+    this.isReady = false;
+  }
+
+  initOnStart({ turnID } = {}) {
+    this.turnID = turnID;
+    this.score = 0;
+  }
+
+  initOnRound({ tellerID = '', cards = [] } = {}) {
+    this.submittedCard = null;
+    this.votedCard = null;
+    this.isReady = false;
+    this.isTeller = this.socketID === tellerID;
+    this.cards = cards;
+  }
+
+  setReady(isReady) {
+    this.isReady = isReady;
+  }
+
+  setColor(color) {
+    this.color = color;
+  }
+
+  setNickname(nickname) {
+    this.nickname = nickname;
   }
 
   submitCard(cardID) {
@@ -23,7 +49,7 @@ class User {
     this.cards = [...this.cards, cardID];
   }
 
-  getUserInfo() {
+  getState() {
     const {
       socketID,
       nickname,
@@ -34,6 +60,7 @@ class User {
       isTeller,
       cards,
       score,
+      isReady,
     } = this;
 
     return {
@@ -46,14 +73,16 @@ class User {
       isTeller,
       cards,
       score,
+      isReady,
     };
   }
 
   getProfile() {
-    const { nickname, color } = this;
+    const { nickname, color, score } = this;
     return {
       nickname,
       color,
+      score,
     };
   }
 }

src/backend/package-lock.json

@@ -3,14 +3,13 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "npx webpack --watch",
+    "start": "npx webpack --watch --mode=development",
     "dev": "npm start",
     "build": "npx webpack --mode=production"
   },
   "dependencies": {
     "cors": "^2.8.5",
     "debug": "~2.6.9",
-    "dotenv": "^8.2.0",
     "express": "~4.16.1",
     "morgan": "~1.9.1",
     "socket.io": "^3.0.3",
@@ -24,6 +23,7 @@
     "@babel/preset-env": "^7.12.1",
     "babel-loader": "^8.2.1",
     "core-js": "^3.7.0",
+    "dotenv-webpack": "^6.0.0",
     "eslint": "^7.2.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^6.15.0",

src/backend/package.json

@@ -2,17 +2,13 @@
  * Module dependencies.
  */
 
-import dotenv from 'dotenv';
 import debugModule from 'debug';
 import http from 'http';
 import socketIO from './sockets';
 import createApplication from './app';
 
 const debug = debugModule('backend:server');
 
-// dotenv
-dotenv.config();
-
 /**
  * Normalize a port into a number, string, or false.
  */

src/backend/server.js

@@ -1,8 +1,11 @@
+import logger from '@utils/winston';
+
 function onSendChat({ message }) {
   const socket = this;
   // game = socket.game
   const { game } = socket;
   const { nickname } = game.getUser(socket.id).getProfile();
+  logger.info(`chat ip:${socket.handshake.address} msg:${message}`);
   socket.in(game.roomID).emit('send chat', { message, nickname });
 }