Merge branch 'develop' into refactor/#199

src/backend/game/GameMethods/voteScene.js

@@ -20,13 +20,10 @@ function forceGuesserVote() {
 
   unvotedUsers.forEach((user) => {
     const { submittedCard } = user;
-
-    // 자기 카드를 뺀 나머지 카드만 골라냄
     const voteableCards = submittedCards.filter(
       (card) => card !== submittedCard,
     );
 
-    // 랜덤 하게 투표
     user.voteCard(generateRandom.pickOneFromArray(voteableCards));
   });
 }
@@ -45,10 +42,11 @@ function emitEndVote() {
     };
   });
 
+  const endTime = this.getEndTime(TIME.WAIT_RESULT);
   emit({
     users: this.getUsers(),
     name: 'end vote',
-    params: { players },
+    params: { players, endTime },
   });
 }
 

src/backend/utils/number.js

@@ -16,7 +16,7 @@ export const TIME = {
   WAIT_DISCUSSION: 60000,
   SKIP_DISCUSSION: 3000,
   WAIT_VOTE: 10000,
-  WAIT_RESULT: 20000,
+  WAIT_RESULT: 15000,
   WAIT_SCORE_BOARD: 10000,
 };
 

src/frontend/engine/DuckLeftTabObject.js

@@ -12,6 +12,7 @@ class DuckLeftTabObject extends DuckObject {
     this.hatWidth = 45;
 
     this.addClass('left-duck-wrapper');
+    this.instance.dataset.socketId = this.socketID;
     this.render();
   }
 
@@ -32,6 +33,7 @@ class DuckLeftTabObject extends DuckObject {
           ${DuckHat({ width: hatWidth })}
           ${Duck({ color, width: duckWidth })}
           <span class="duck-score">${score}</span>
+          <img alt="speaker button" class="duck-speaker"/>
         </div>
         <span class="duck-nickname">${nickname}</span>
     `;

src/frontend/game/game.html

@@ -19,10 +19,10 @@
           <span id="participants-count" class="left-title-number">0</span>
         </div>
         <div id="participants-wrapper" class="participants-wrapper"></div>
-        <div class="microphone-controller" id="microphone-controller">
-          <span>마이크 연결</span>
+        <button class="microphone-controller" id="microphone-controller">
+          <span>음성 채팅 참여</span>
           <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg>
-        </div>
+        </button>
       </div>
       <div id="background" class="background">
         <div id="root" class="main"></div>

src/frontend/game/left.scss

@@ -32,6 +32,10 @@
   font-weight: 700;
 }
 
+.microphone-controller-exit {
+  background-color: $red-color;
+}
+
 .participants-wrapper {
   @include flex-column;
   height: 100%;
@@ -63,6 +67,24 @@
     background-color: $gray-color;
     border-radius: 1rem;
   }
+
+  .duck-speaker {
+    position: absolute;
+    top: 0%;
+    left: 45%;
+    width: 100px;
+    height: 100px;
+    cursor: pointer;
+    visibility: hidden;
+  }
+  .duck-speaker-active {
+    content: url('@resources/speaker-active.png');
+    visibility: visible;
+  }
+  .duck-speaker-deactive {
+    content: url('@resources/speaker-deactive.png');
+    visibility: visible;
+  }
 }
 
 .duck-hat {

src/frontend/game/voiceChat.js

@@ -1,23 +1,20 @@
 import socket from '@utils/socket';
 import Peer from 'peerjs';
+import leftSound from '@resources/left.mp3';
 import {
   getAudioStream,
   setAnswerBehavior,
   connectToNewUser,
+  peerMap,
+  deleteOtherPeer,
+  closeVoiceButton,
+  transformVoiceButton,
+  putBackVoiceButton,
 } from '@utils/voiceChatUtil';
 
 let myPeerJSClient = null;
 let myAudioStream = null;
 
-const peerMap = new Map();
-
-const deleteOtherPeer = (socketID) => {
-  if (peerMap.has(socketID)) {
-    peerMap.get(socketID).mediaConnection.close();
-    peerMap.delete(socketID);
-  }
-};
-
 const isConnectedToVoiceChat = () => {
   return myPeerJSClient && myAudioStream;
 };
@@ -28,10 +25,11 @@ const activateVoiceChat = () => {
   myPeerJSClient.on('open', async () => {
     try {
       // 마이크 연결
+      closeVoiceButton();
       myAudioStream = await getAudioStream();
+      transformVoiceButton();
       setAnswerBehavior({
         stream: myAudioStream,
-        peerMap,
         peer: myPeerJSClient,
       });
     } catch (err) {
@@ -51,15 +49,20 @@ const deactivateVoiceChat = () => {
     track.stop();
   });
 
-  peerMap.forEach((_, socketID) => {
+  [...peerMap.keys()].forEach((socketID) => {
     deleteOtherPeer(socketID);
   });
+
+  putBackVoiceButton();
 };
 
 // 연결된 유저가 보이스 채팅 접속을 끊었을 때
 socket.on('voice disconnected', ({ socketID }) => {
   if (!isConnectedToVoiceChat()) return;
 
+  const se = new Audio(leftSound);
+  se.play();
+
   deleteOtherPeer(socketID);
 });
 
@@ -70,7 +73,6 @@ socket.on('another voice connected', ({ socketID }) => {
     peer: myPeerJSClient,
     socketID,
     stream: myAudioStream,
-    peerMap,
   });
 });
 

src/frontend/scenes/endGame/style.scss

@@ -42,6 +42,8 @@
     margin-top: 25%;
 
     animation: emphasizeDuck 1s cubic-bezier(0.19, 1, 0.22, 1);
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
     filter: drop-shadow(0 0 10px $main-color);
     transform: scale(1.5);
     transform-origin: bottom;
@@ -71,10 +73,19 @@
 }
 
 @keyframes emphasizeDuck {
-  5% {
-    transform: rotateZ(-5deg) scale(2.5);
+  20% {
+    transform: rotateZ(0) scale(1.5);
   }
-  90% {
-    transform: scale(1.4);
+  40% {
+    transform: rotateZ(-8deg) scale(2) translate(0, -20%);
+  }
+  60% {
+    transform: rotateZ(0) scale(1.5);
+  }
+  80% {
+    transform: rotateZ(8deg) scale(2) translate(0, -20%);
+  }
+  100% {
+    transform: rotateZ(0) scale(1.5);
   }
 }

src/frontend/scenes/scoreboard/render.js

@@ -47,15 +47,22 @@ const renderRow = (TableBody, players) => {
   players.forEach(defineRenderRow(TableBody));
 };
 
-const makeRandom = (x) => Math.random() * 5 + x - 2.5;
+const makeXRandom = (x) => {
+  return Math.random() * 5 + x - 2.5;
+};
+const makeYRandom = (y) => {
+  return Math.random() * 2 + y - 1;
+};
 
 const yellowDuckyJumpsOverTheLazyStone = (players) =>
   players.map((player) => {
     const {
       score: { current, correct, bonus },
     } = player;
     const currentStone = stonePosition[current];
-    const currentPosition = currentStone.map(makeRandom);
+    const currentXPosition = makeXRandom(currentStone[0]);
+    const currentYPosition = makeYRandom(currentStone[1]);
+    const currentPosition = [currentXPosition, currentYPosition];
     const duck = player.makeDuck({
       width: 50,
       classes: ['movable'],
@@ -70,7 +77,9 @@ const yellowDuckyJumpsOverTheLazyStone = (players) =>
     [...Array(jumpCount)].forEach((_, index) => {
       const nextStone = Math.min(30, current + index);
       setTimeout(() => {
-        const nextPosition = stonePosition[nextStone].map(makeRandom);
+        const nextXPosition = makeXRandom(stonePosition[nextStone][0]);
+        const nextYPosition = makeYRandom(stonePosition[nextStone][1]);
+        const nextPosition = [nextXPosition, nextYPosition];
         duck.jump(...nextPosition, 500);
       }, jumpTiming(index));
     });

src/frontend/scenes/vote/render.js

@@ -9,6 +9,9 @@ import { sendVoteResult } from './events';
 
 const renderVote = ({ endTime }) => {
   const { ProgressBar } = SceneManager.sharedComponents;
+  ProgressBar.setTime(endTime);
+  ProgressBar.start();
+
   const cards = CardManager.submittedCards;
 
   const { color, submittedCardID } = PlayerManager.getCurrentPlayer();
@@ -29,9 +32,6 @@ const renderVote = ({ endTime }) => {
     });
   }
 
-  ProgressBar.setTime(endTime);
-  ProgressBar.start();
-
   const HelpText = new TextObject();
   HelpText.addClass('helper-text');
   HelpText.setContent(TEXT.VOTE.TITLE);

src/frontend/scenes/voteResult/index.js

@@ -1,8 +1,12 @@
 import renderVoteResult from './render';
 
 const VoteResult = class {
+  constructor(endTime) {
+    this.endTime = endTime;
+  }
+
   render() {
-    const { arrayToBeRemoved = [] } = renderVoteResult();
+    const { arrayToBeRemoved = [] } = renderVoteResult(this.endTime);
     this.arrayToBeRemoved = arrayToBeRemoved;
   }
 

src/frontend/scenes/voteResult/render.js

@@ -1,10 +1,11 @@
 import './style.scss';
+import GameObject from '@engine/GameObject';
 import TextObject from '@engine/TextObject';
-import CardManager from '@utils/CardManager';
-import TEXT from '@utils/text';
 import DuckObject from '@engine/DuckObject';
+import CardManager from '@utils/CardManager';
 import PlayerManager from '@utils/PlayerManager';
-import GameObject from '@engine/GameObject';
+import SceneManager from '@utils/SceneManager';
+import TEXT from '@utils/text';
 
 const DIFF_Y_POSITION_STAMP = 14;
 const DIFF_Y_POSITION_NAME = -18;
@@ -15,7 +16,11 @@ const ORIGIN_SCORE = [50, 0];
 const WIDTH_STAMP_DUCK = 40;
 const WIDTH_NAME_DUCK = 25;
 
-const renderVoteResult = () => {
+const renderVoteResult = (endTime) => {
+  const { ProgressBar } = SceneManager.sharedComponents;
+  ProgressBar.setTime(endTime);
+  ProgressBar.start();
+
   const cards = CardManager.submittedCards;
   const players = PlayerManager.getPlayers();
 

src/frontend/socket/vote.js

@@ -4,14 +4,14 @@ import VoteResult from '@scenes/voteResult';
 import PlayerManager from '../utils/PlayerManager';
 
 const setupVote = () => {
-  const onEndVote = ({ players }) => {
+  const onEndVote = ({ players, endTime }) => {
     players.forEach((playerInfo) => {
       const { socketID } = playerInfo;
       const player = PlayerManager.get(socketID);
       player.updateScore(playerInfo);
       player.updateCard(playerInfo);
     });
-    SceneManager.renderNextScene(new VoteResult());
+    SceneManager.renderNextScene(new VoteResult(endTime));
   };
 
   socket.on('end vote', onEndVote);