Merge pull request #53 from boostcamp-2020/feat/chatting-integrate

채팅창 백/프론트 합치기

Author: ramram1048

src/backend/routes/index.js

@@ -3,14 +3,17 @@ import Games from '@game/Games';
 
 const router = express.Router();
 
-router.get('/rooms/:roomID', (req, res) => {
+const getRoomsRouter = (req, res) => {
   const { roomID } = req.params;
   if (Games.isEnterableRoom(roomID)) {
     return res.status(200).json({});
   }
 
   return res.status(403).json({});
-});
+};
+
+router.get('/rooms', getRoomsRouter);
+router.get('/rooms/:roomID', getRoomsRouter);
 
 router.post('/rooms', (req, res) => {
   const roomID = Games.createGame();

src/frontend/game/game.js

@@ -1,6 +1,14 @@
 import './game.scss';
-import renderWaitingRoom from '@scenes/waitingRoom';
+import { renderWaitingRoom, setupWaitingRoomSocket } from '@scenes/waitingRoom';
 import socket from '@utils/socket';
+import requestHandler from '@utils/requestHandler';
+
+const scrollToBottom = (component) => {
+  const scrollOption = {
+    top: component.scrollHeight,
+  };
+  component.scrollTo(scrollOption);
+};
 
 const initializeLayout = () => {
   const chatMessageLog = document.getElementById('chat-message-log');
@@ -9,50 +17,74 @@ const initializeLayout = () => {
   chatForm.addEventListener('submit', (e) => {
     e.preventDefault();
     const message = e.target.message.value;
+    if (!message.length) return;
     e.target.message.value = '';
 
     // TODO: initialize에서 분리하기
     const sendMessageToServer = () => {
       const messageWrapper = document.createElement('div');
       const messageBox = document.createElement('div');
+
       messageWrapper.classList.add('chat-mine');
-      messageBox.classList.add('chat-message');
       messageWrapper.appendChild(messageBox);
-      chatMessageLog.appendChild(messageWrapper);
+
+      messageBox.classList.add('chat-message');
       messageBox.innerText = message;
-    };
 
-    // sendMessageToServer();
+      chatMessageLog.appendChild(messageWrapper);
+    };
 
-    socket.emit('send chat', { message }, sendMessageToServer);
+    socket.emit('send chat', { message });
+    sendMessageToServer();
+    scrollToBottom(chatMessageLog);
   });
 
   // TODO: initialize에서 분리하기
   const getMessageFromServer = ({ nickname, message }) => {
     const messageWrapper = document.createElement('div');
     const nicknameBox = document.createElement('div');
     const messageBox = document.createElement('div');
+
     messageWrapper.classList.add('chat-other-player');
-    nicknameBox.classList.add('chat-nickname');
-    messageBox.classList.add('chat-message');
     messageWrapper.appendChild(nicknameBox);
     messageWrapper.appendChild(messageBox);
-    chatMessageLog.appendChild(messageWrapper);
+
+    nicknameBox.classList.add('chat-nickname');
     nicknameBox.innerText = nickname;
+
+    messageBox.classList.add('chat-message');
     messageBox.innerText = message;
+
+    chatMessageLog.appendChild(messageWrapper);
+    scrollToBottom(chatMessageLog);
   };
 
   socket.on('send chat', getMessageFromServer);
 };
 
-const initialize = () => {
+const initialize = async () => {
   const urlParams = new URLSearchParams(window.location.search);
   const roomID = urlParams.get('room');
+  const config = { method: 'GET', uri: `/rooms/${roomID}` };
+  const { success } = await requestHandler(config);
+  if (!success) {
+    window.alert('올바르지 않은 코드입니다.');
+    window.location.href = '/';
+    return;
+  }
   socket.emit('join player', { roomID });
 
   initializeLayout();
 
-  renderWaitingRoom(roomID);
+  const { NicknameInput } = renderWaitingRoom(roomID);
+  // const { PlayerList } = renderLeftTab();
+  setupWaitingRoomSocket();
+
+  socket.on('enter room', ({ nickname, color, players }) => {
+    NicknameInput.setValue(nickname);
+    // NicknameInput.instance.style.backgroundColor = color;
+    // PlayerList.setListItems(players);
+  });
 };
 
 initialize();

src/frontend/game/game.scss

@@ -79,4 +79,5 @@ $right-size: 330px;
   padding: 0.3em;
   border-radius: 0.5em;
   font-size: larger;
+  word-break: break-word;
 }

src/frontend/scenes/waitingRoom/index.js

@@ -5,9 +5,10 @@ import TextObject from '@engine/TextObject';
 import InputObject from '@engine/InputObject';
 import SvgObject from '@engine/SvgObject';
 import Svg from '@utils/svg';
+import socket from '@utils/socket';
 import { copyGameCode, redirectToLobby } from './events';
 
-const setupGameLayout = (roomID) => {
+export const renderWaitingRoom = (roomID = '') => {
   const Header = new GameObject();
   Header.toggleClass('waiting-header');
   Header.attachToRoot();
@@ -64,10 +65,10 @@ const setupGameLayout = (roomID) => {
   const CopyIcon = new SvgObject();
   CopyIcon.setInnerHtml(Svg.copy);
   CopyIcon.attachToObject(GameCodeCopyButton);
-};
 
-const waitingRoom = (roomID = '') => {
-  setupGameLayout(roomID);
+  return {
+    NicknameInput,
+  };
 };
 
-export default waitingRoom;
+export const setupWaitingRoomSocket = () => {};