Merge branch 'dev' of https://github.com/codestates/mindcaptor-client …

…into dev
codestates · May 6, 2021 · 2db3c7a · 2db3c7a
2 parents 4a5a61b + 97d2009
commit 2db3c7a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/src/GamePages/InGame.js b/src/GamePages/InGame.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef } from 'react';
-import Canvas from './components/Canvas3';
 import Timer from './components/Timer';
 import User from './components/User';
 import BackBtn from './components/BackBtn';
@@ -9,14 +8,12 @@ import Chat from './components/Chat';
 import io from 'socket.io-client';
 import GameStartBtn from './components/GameStartBtn';
 import Words from '../Words';
-import GameOver from './components/IsInGameMsg';
 import { useHistory } from 'react-router-dom';
 import Board from './components/Canvas';
 import Logo from './components/Logo';
 
-
 const socket = io.connect('http://localhost:4000', {
-  transports: ['websocket', 'polling'],
+  transports: ['websocket'],
   path: '/socket.io',
 });
 
@@ -101,16 +98,23 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
     return chat.map(({ name, message }, index) => (
       <div key={index}>
         <h3>
-          {name}: <span>{message}</span>
+          {name}: <span>{message}</span>{' '}
         </h3>
       </div>
     ));
   };
 
+  // const onMessageSubmit = (e) => {
+  //   const { name, message } = state;
+  //   socket.current.emit('message', { name, message });
+  //   e.preventDefault();
+  //   setState({ message: '', name });
+  // };
+
   const onMessageSubmit = (e) => {
     e.preventDefault();
     const { name, message } = state;
-    socketRef.current.emit('message', { name, message });
+    socket.emit('message', { name, message });
     setState({ message: '', name });
   };
 
@@ -140,12 +144,13 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
   //! --------------------------method--------------------------
 
   useEffect(() => {
-    // * 메세지
-    socketRef.current = socket;
-    socketRef.current.on('message', ({ name, message }) => {
-      setChat([...chat, { name, message }]);
+    socket.on('message', ({ name, message }) => {
+      if (chat.length > 4) {
+        return setChat([]);
+      }
+      return setChat([...chat, { name, message }]);
     });
-    // return () => socketRef.current.disconnect();
+    console.log('채팅이야!!!!!', chat);
   }, [chat]);
 
   useEffect(() => {
@@ -183,7 +188,7 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
     });
 
     socket.on('renew userlist', (list) => {
-      setUserlist(list);
+      setUserlist([...list]);
     });
   });
 
@@ -195,7 +200,9 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
 
     let parsedUrl = window.location.href.split('/');
     let roomNum = parsedUrl[parsedUrl.length - 1];
+    console.log(roomNum);
     socket.emit('send roomNum', roomNum);
+    console.log('userlist', userlist);
   }, []);
 
   useEffect(() => {
@@ -217,7 +224,6 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
           <div className="result_box">
             <Board />
             <Logo />
-            <Canvas className="canvas" />
             {isPresenter ? (
               <SelectWords
                 Word1={Word1}

diff --git a/src/GamePages/components/Chat.js b/src/GamePages/components/Chat.js
@@ -1,5 +1,3 @@
-import React, { useState, useEffect } from 'react';
-import moment from 'moment';
 import TextField from '@material-ui/core/TextField';
 
 export default function Chat({
@@ -16,7 +14,7 @@ export default function Chat({
         {renderChat()}
       </div>
 
-      <form onSubmit={(e) => onMessageSubmit(e)}>
+      <form onSubmit={onMessageSubmit}>
         <div className="msgBtn">
           <TextField
             name="message"

diff --git a/src/main.css b/src/main.css
@@ -930,15 +930,23 @@ canvas {
 }
 
 .card {
+<<<<<<< HEAD
+=======
   border: 2px solid #0f4d86;
+>>>>>>> b3d2fa2f4bd5a1a35c87b3fda67e7f91c185472c
   background-color: white;
   border-radius: 15px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+<<<<<<< HEAD
+  border: 5px solid #0f4d86;
+  border-radius: 15px;
+=======
   width: 600px;
   height: 400px;
+>>>>>>> b3d2fa2f4bd5a1a35c87b3fda67e7f91c185472c
 }
 .card h1 {
   text-align: center;