Merge pull request #280 from Front-line-dev/feat/voice-left-tab

음성 채팅 버튼 스타일, 스피커 버튼

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/utils/voiceChatUtil.js

@@ -1,6 +1,41 @@
-const audioContainer = document.getElementById('voice-chat-audio-container');
+import { $id, $qs } from '@utils/dom';
+import joinSound from '@resources/joined.mp3';
+import leftSound from '@resources/left.mp3';
 
-const addAudioStream = ({ mediaConnection, peerMap }) => {
+const peerMap = new Map();
+const audioContainer = $id('voice-chat-audio-container');
+
+const getDuckSpeaker = (socketID) => {
+  const duckWrapper = $qs(`.left-duck-wrapper[data-socket-id="${socketID}"]`);
+
+  if (!duckWrapper) return null;
+
+  const duckSpeaker = duckWrapper.querySelector('.duck-speaker');
+
+  return duckSpeaker;
+};
+
+const getVoiceButton = () => {
+  return $id('microphone-controller');
+};
+
+const duckSpeakerHandler = ({ target }) => {
+  const duckSpeaker = target;
+  const socketID = duckSpeaker.closest('.left-duck-wrapper').dataset.socketId;
+  const { audioElement } = peerMap.get(socketID);
+  if (duckSpeaker.classList.contains('duck-speaker-deactive')) {
+    audioElement.muted = false;
+    duckSpeaker.classList.add('duck-speaker-active');
+    duckSpeaker.classList.remove('duck-speaker-deactive');
+  } else {
+    audioElement.muted = true;
+    duckSpeaker.classList.add('duck-speaker-deactive');
+    duckSpeaker.classList.remove('duck-speaker-active');
+  }
+};
+
+// 받은 mediaConnection으로 실제 오디오 엘리먼트 생성
+const addAudioStream = ({ mediaConnection }) => {
   const socketID = mediaConnection.peer;
 
   if (peerMap.has(socketID)) return;
@@ -20,6 +55,10 @@ const addAudioStream = ({ mediaConnection, peerMap }) => {
     audioElement.remove();
   });
 
+  const duckSpeaker = getDuckSpeaker(socketID);
+  duckSpeaker.classList.add('duck-speaker-active');
+  duckSpeaker.addEventListener('click', duckSpeakerHandler);
+
   peerMap.set(socketID, {
     mediaConnection,
     audioElement,
@@ -28,13 +67,15 @@ const addAudioStream = ({ mediaConnection, peerMap }) => {
 
 // socket을 통해 다른 사람이 접속한걸 받았을 때
 // 다른 사람에게 mediaConnection 요청을 보냄
-const connectToNewUser = ({ peer, socketID, stream, peerMap }) => {
+const connectToNewUser = ({ peer, socketID, stream }) => {
   const mediaConnection = peer.call(socketID, stream);
   addAudioStream({ mediaConnection, peerMap });
+  const se = new Audio(joinSound);
+  se.play();
 };
 
 // 내가 다른 사람의 mediaConnection 요청을 받았을 때
-const setAnswerBehavior = ({ stream, peerMap, peer }) => {
+const setAnswerBehavior = ({ stream, peer }) => {
   peer.on('call', (mediaConnection) => {
     // 다른 사람의 요청에 answer를 날림
     mediaConnection.answer(stream);
@@ -47,4 +88,55 @@ const getAudioStream = () =>
     audio: true,
   });
 
-export { getAudioStream, setAnswerBehavior, connectToNewUser };
+const closeVoiceButton = () => {
+  const voiceButton = getVoiceButton();
+  voiceButton.disabled = true;
+  const se = new Audio(joinSound);
+  se.play();
+};
+
+const transformVoiceButton = () => {
+  const voiceButton = getVoiceButton();
+  const voiceButtonSpan = voiceButton.querySelector('span');
+  voiceButtonSpan.innerText = '음성 채팅 나가기';
+  voiceButton.classList.add('microphone-controller-exit');
+  voiceButton.disabled = false;
+};
+
+const putBackVoiceButton = () => {
+  const voiceButton = getVoiceButton();
+  const voiceButtonSpan = voiceButton.querySelector('span');
+  voiceButtonSpan.innerText = '음성 채팅 참여';
+  voiceButton.classList.remove('microphone-controller-exit');
+  const se = new Audio(leftSound);
+  se.play();
+};
+
+const removeDuckSpeaker = (socketID) => {
+  const duckSpeaker = getDuckSpeaker(socketID);
+
+  if (!duckSpeaker) return;
+
+  duckSpeaker.removeEventListener('click', duckSpeakerHandler);
+
+  duckSpeaker.classList.remove('duck-speaker-active', 'duck-speaker-deactive');
+};
+
+const deleteOtherPeer = (socketID) => {
+  if (peerMap.has(socketID)) {
+    peerMap.get(socketID).mediaConnection.close();
+    peerMap.delete(socketID);
+    removeDuckSpeaker(socketID);
+  }
+};
+
+export {
+  getAudioStream,
+  setAnswerBehavior,
+  connectToNewUser,
+  peerMap,
+  deleteOtherPeer,
+  closeVoiceButton,
+  transformVoiceButton,
+  putBackVoiceButton,
+};

src/frontend/webpack.config.js

@@ -90,7 +90,7 @@ module.exports = (webpackEnv) => {
           ],
         },
         {
-          test: /\.(png|jpe?g|gif)$/i,
+          test: /\.(png|jpe?g|gif|mp3)$/i,
           loader: 'file-loader',
           options: {
             outputPath: 'assets',