Merge pull request #282 from boostcamp-2020/refactor/#199

헝가리안 표기법으로 리팩토링 + 빈 문자열을 닉네임으로 설정할 때 되돌리기

src/backend/game/GameMethods/common.js

@@ -28,10 +28,7 @@ function dealCards(count = 1) {
 }
 
 const setUserTeller = (users, tellerTurnID) => {
-  users.forEach((user) => {
-    if (tellerTurnID === user.turnID) user.setTeller(true);
-    else user.setTeller(false);
-  });
+  users.forEach((user) => user.setTeller(tellerTurnID === user.turnID));
 };
 
 function startRound() {

src/backend/game/GameMethods/scoreBoardScene.js

@@ -7,10 +7,10 @@ const isGameOver = (game) => {
   if (game.status.unusedCards.length < game.getUsers().length) return true;
 
   // 플레이어 최소 한명이 30점을 넘겼을 경우
-  if (game.getUsers().some((user) => user.score >= SCORE.WIN_SCORE))
-    return true;
-
-  return false;
+  const bHigherGoal = game
+    .getUsers()
+    .some((user) => user.score >= SCORE.WIN_SCORE);
+  return bHigherGoal;
 };
 
 // 가장 높은 스코어를 가진 유저의 socketID를 리턴
@@ -49,8 +49,6 @@ function endScoreBoardScene() {
 
   if (isGameOver(this)) {
     this.emitGameEnd();
-
-    // WaitingScene 시작
     this.setState(GAME_STATE.WAITING);
   } else {
     this.startTellerScene();

src/backend/game/GameMethods/user.js

@@ -28,12 +28,12 @@ function getUsers() {
 }
 
 function getTeller() {
-  const [teller] = this.getUsers().filter((user) => user.isTeller);
+  const [teller] = this.getUsers().filter((user) => user.bTeller);
   return teller;
 }
 
 function getGuessers() {
-  return this.getUsers().filter((user) => !user.isTeller);
+  return this.getUsers().filter((user) => !user.bTeller);
 }
 
 function getUsersProfile() {

src/backend/game/User.js

@@ -6,16 +6,16 @@ class User {
     this.nickname = nickname;
     this.color = color;
 
-    this.isTeller = false;
+    this.bTeller = false;
 
     this.turnID = 0;
     this.score = 0;
     this.cards = [];
 
     this.submittedCard = null;
     this.votedCard = null;
-    this.isReady = false;
-    this.isSkip = false;
+    this.bReady = false;
+    this.bSkip = false;
   }
 
   initOnStart({ turnID } = {}) {
@@ -27,20 +27,20 @@ class User {
   initOnRound() {
     this.submittedCard = null;
     this.votedCard = null;
-    this.isReady = false;
-    this.isSkip = false;
+    this.bReady = false;
+    this.bSkip = false;
   }
 
   setTeller(boolean) {
-    this.isTeller = boolean;
+    this.bTeller = boolean;
   }
 
-  setReady(isReady) {
-    this.isReady = isReady;
+  setReady(bReady) {
+    this.bReady = bReady;
   }
 
   setSkip() {
-    this.isSkip = true;
+    this.bSkip = true;
   }
 
   setColor(color) {
@@ -57,16 +57,12 @@ class User {
 
   submitCard(cardID) {
     this.submittedCard = cardID;
-
-    // 뽑은 카드를 리스트에서 지움
     this.cards = this.cards.filter((card) => card !== cardID);
   }
 
   voteCard(cardID) {
-    // 악성 유저가 있을까봐 자기 카드 선택하는거 방지
     if (cardID === this.submittedCard) return;
-    // 텔러가 vote 못하게 막기
-    if (this.isTeller) return;
+    if (this.bTeller) return;
 
     this.votedCard = cardID;
   }
@@ -83,10 +79,10 @@ class User {
       turnID,
       submittedCard,
       votedCard,
-      isTeller,
+      bTeller,
       cards,
       score,
-      isReady,
+      bReady,
     } = this;
 
     return {
@@ -96,20 +92,20 @@ class User {
       turnID,
       submittedCard,
       votedCard,
-      isTeller,
+      bTeller,
       cards,
       score,
-      isReady,
+      bReady,
     };
   }
 
   getProfile() {
-    const { nickname, color, score, isReady } = this;
+    const { nickname, color, score, bReady } = this;
     return {
       nickname,
       color,
       score,
-      isReady,
+      bReady,
     };
   }
 

src/backend/sockets/discussion.js

@@ -5,11 +5,7 @@ function onSkipPlayer() {
   if (!user || !game) return;
 
   user.setSkip();
-
-  // 모든 유저가 스킵을 눌렀을 경우
-  if (game.getUsers().every((u) => u.isSkip)) {
-    game.endDiscussionScene(true);
-  }
+  if (game.getUsers().every((u) => u.bSkip)) game.endDiscussionScene(true);
 }
 
 export default function onDiscussion(socket) {

src/backend/sockets/waitingRoom.js

@@ -51,9 +51,9 @@ function onUpdatePlayer(updatedUserProfile = {}) {
 const timeoutMap = new Map();
 
 const isPossibleStartGame = ({ users }) => {
-  const isAllReady = [...users].every(([, user]) => user.isReady);
-  const isValidSize = users.size >= PLAYER.MIN && users.size <= PLAYER.MAX;
-  return isAllReady && isValidSize;
+  const bAllReady = [...users].every(([, user]) => user.bReady);
+  const bValidSize = users.size >= PLAYER.MIN && users.size <= PLAYER.MAX;
+  return bAllReady && bValidSize;
 };
 
 const deleteGameStartTimeout = (roomID) => {
@@ -63,7 +63,7 @@ const deleteGameStartTimeout = (roomID) => {
 };
 
 // 사용자가 레디를 눌렀을 때 or 레디를 풀었을 때
-function onReadyChange({ isReady }) {
+function onReadyChange({ bReady }) {
   const socket = this;
   const { user, game } = socket;
 
@@ -77,8 +77,8 @@ function onReadyChange({ isReady }) {
   const { users, roomID } = game;
 
   // 플레이어의 레디 상태를 변경
-  users.get(socket.id).setReady(isReady);
-  socket.in(roomID).emit('ready player', { playerID: socket.id, isReady });
+  users.get(socket.id).setReady(bReady);
+  socket.in(roomID).emit('ready player', { playerID: socket.id, bReady });
 
   const validationToStart = isPossibleStartGame({ users });
   // 모든 플레이어가 레디 상태일 때

src/backend/utils/calcScore.js

@@ -30,8 +30,8 @@ const mapScore = (correctScore, bonusScore) => ({ correctScore, bonusScore });
 const getScoreMap = (game) => {
   const scoreMap = new Map();
   const users = game.getUsers();
-  const [teller] = users.filter((user) => user.isTeller);
-  const guessers = users.filter((user) => !user.isTeller);
+  const [teller] = users.filter((user) => user.bTeller);
+  const guessers = users.filter((user) => !user.bTeller);
 
   // Teller
   // [다 맞추거나 아무도 못 맞춤]인지 [한명이라도 맞춤]인지 확인

src/frontend/engine/CardObject.js

@@ -6,6 +6,7 @@ import ImageObject from './ImageObject';
 const getFacingStyle = (isUp) => (isUp ? 'rotateY(0deg)' : 'rotateY(180deg)');
 const deg2rad = (deg) => (deg * Math.PI) / 180;
 const MOVE_PERCENT = 10;
+const HIGH_DEPTH = 7;
 
 const CardObject = class extends GameObject {
   constructor({
@@ -73,7 +74,7 @@ const CardObject = class extends GameObject {
     return () => {
       const movedX = this.fixedX + Math.sin(deg2rad(this.angle)) * MOVE_PERCENT;
       const movedY = this.fixedY - Math.cos(deg2rad(this.angle)) * MOVE_PERCENT;
-      this.setDepth('7');
+      this.setDepth(HIGH_DEPTH);
       this.move(movedX, movedY);
 
       if (this.tellerCard)

src/frontend/engine/DuckCursorObject.js

@@ -5,7 +5,7 @@ import TIME from '@type/time';
 import DuckObejct from './DuckObject';
 
 class DuckCursorObject extends DuckObejct {
-  constructor({ isReady, ...props }) {
+  constructor({ bReady, ...props }) {
     super(props);
     this.addClass('cursor-duck-wrapper');
     this.setOriginCenter();
@@ -16,7 +16,7 @@ class DuckCursorObject extends DuckObejct {
     this.mouseHandler = this.makeFollowMouse.bind(this);
     this.width = 100;
     this.render();
-    this.setVisibility(isReady);
+    this.setVisibility(bReady);
   }
 
   addMouseMoveEvent() {

src/frontend/engine/ProgressBarObject.js

@@ -5,6 +5,8 @@ import GameObject from './GameObject';
 const RED_COLOR = '#d82e21';
 const YELLOW_COLOR = '#ffd600';
 const GREEN_COLOR = '#3ed78d';
+const SMALL_WIDTH = 30;
+const MID_WIDTH = 60;
 
 const ProgressBarObject = class extends GameObject {
   constructor() {
@@ -64,8 +66,11 @@ const ProgressBarObject = class extends GameObject {
       const remainTime = endTime - new Date().getTime();
       const widthSize = (remainTime / this.time) * 100;
       progressBar.style.width = `${widthSize}%`;
-      if (widthSize < 30) progressBar.style.backgroundColor = RED_COLOR;
-      else if (widthSize < 60) progressBar.style.backgroundColor = YELLOW_COLOR;
+      if (widthSize < SMALL_WIDTH) {
+        progressBar.style.backgroundColor = RED_COLOR;
+      } else if (widthSize < MID_WIDTH) {
+        progressBar.style.backgroundColor = YELLOW_COLOR;
+      }
       timeText.innerText = (remainTime / 1000).toFixed(0);
     }, TIME.HALF_SECOND);
 

src/frontend/game/LeftTab.js

@@ -44,7 +44,7 @@ class LeftTab {
   updateDuck(playerInfo) {
     const updatedDuck = this.findDuck(playerInfo.socketID);
     if (updatedDuck) {
-      updatedDuck.setHat(playerInfo.isTeller);
+      updatedDuck.setHat(playerInfo.bTeller);
       updatedDuck.update(playerInfo);
     } else this.addDuck(playerInfo);
   }

src/frontend/scenes/discussion/events.js

@@ -2,11 +2,15 @@ import socket from '@utils/socket';
 import { $qs } from '@utils/dom';
 import PlayerManager from '@utils/PlayerManager';
 
+const changeClass = ({ target }) => {
+  target.classList.remove('skip-button');
+  target.classList.add('skip-button-clicked');
+};
+
 // eslint-disable-next-line import/prefer-default-export
 export const clickSkip = ({ target }) => {
   const warningBox = $qs('.warning-bubble');
-  target.classList.remove('skip-button');
-  target.classList.add('skip-button-clicked');
+  changeClass({ target });
   target.setAttribute('disabled', true);
   warningBox.style.visibility = 'hidden';
   socket.emit('skip player');
@@ -23,11 +27,10 @@ export const mouseOutSkip = () => {
 };
 
 export const initTeller = () => {
-  const isTeller = PlayerManager.isTeller();
+  const bTeller = PlayerManager.isTeller();
   const skipButton = $qs('.skip-button');
-  if (isTeller) {
-    skipButton.classList.remove('skip-button');
-    skipButton.classList.add('skip-button-clicked');
+  if (bTeller) {
+    changeClass({ target: skipButton });
     skipButton.setAttribute('disabled', true);
     socket.emit('skip player');
   }

src/frontend/scenes/discussion/index.js

@@ -12,7 +12,7 @@ const Discussion = class {
     this.arrayToBeRemoved = arrayToBeRemoved;
   }
 
-  wrapup() {
+  wrapUp() {
     this.arrayToBeRemoved.forEach((gameObject) => {
       gameObject.delete();
     });

src/frontend/scenes/endGame/index.js

@@ -16,7 +16,7 @@ const EndGame = class {
     this.arrayToBeRemoved = arrayToBeRemoved;
   }
 
-  wrapup() {
+  wrapUp() {
     this.arrayToBeRemoved.forEach((gameObject) => {
       gameObject.delete();
     });

src/frontend/scenes/guesserSelectCard/index.js

@@ -12,7 +12,7 @@ const GuesserSelectCard = class {
     this.arrayToBeRemoved = arrayToBeRemoved;
   }
 
-  wrapup() {
+  wrapUp() {
     this.arrayToBeRemoved.forEach((gameObject) => {
       gameObject.delete();
     });

src/frontend/scenes/guesserWaiting/index.js

@@ -12,7 +12,7 @@ const GuesserWaiting = class {
     this.cards = cards;
   }
 
-  wrapup() {
+  wrapUp() {
     this.arrayToBeRemoved.forEach((gameObject) => {
       gameObject.delete();
     });

src/frontend/scenes/guesserWaiting/render.js

@@ -21,7 +21,7 @@ const renderGuesserWaiting = ({ endTime }) => {
   ProgressBar.start();
 
   PlayerManager.getPlayers().forEach((player) =>
-    player.duck.setVisibility(!player.isTeller, player.isCurrentPlayer),
+    player.duck.setVisibility(!player.bTeller, player.isCurrentPlayer),
   );
 
   const tellerColor = PlayerManager.getTeller().color;
@@ -34,9 +34,7 @@ const renderGuesserWaiting = ({ endTime }) => {
 
   const { CardsWrapper, cards } = createCards(GUESSER_WAITING);
   CardsWrapper.attachToRoot();
-  cards.forEach((card) => {
-    card.setAnimateMove(false);
-  });
+  cards.forEach((card) => card.setAnimateMove(false));
 
   const arrayToBeRemoved = [
     NotifyingTellerText,

src/frontend/scenes/mixCard/index.js

@@ -12,7 +12,7 @@ const MixCard = class {
     this.arrayToBeRemoved = arrayToBeRemoved;
   }
 
-  wrapup() {
+  wrapUp() {
     this.arrayToBeRemoved.forEach((gameObject) => {
       gameObject.delete();
     });

src/frontend/scenes/mixCard/render.js

@@ -20,9 +20,7 @@ const stackCards = async ({ Cards, position }) => {
 };
 
 const rotateCards = ({ Cards }) => {
-  Cards.forEach((card) => {
-    card.rotate(NUMBER.ZERO, NUMBER.ZERO);
-  });
+  Cards.forEach((card) => card.rotate(NUMBER.ZERO, NUMBER.ZERO));
 };
 
 const shuffleCard = async ({ card, position, zindex = NUMBER.MAX_Z_INDEX }) => {

src/frontend/scenes/playerWaiting/index.js

@@ -18,7 +18,7 @@ const PlayerWaiting = class {
     this.arrayToBeRemoved = arrayToBeRemoved;
   }
 
-  wrapup() {
+  wrapUp() {
     this.arrayToBeRemoved.forEach((gameObject) => {
       gameObject.delete();
     });