Toggle navigation
Toggle navigation
This project
Loading...
Sign in
강동현
/
nodejs-game
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
Overnap
2021-06-09 17:38:47 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
7fec6ca83250c511d3c3241b65ddf12ddd8fa02a
7fec6ca8
1 parent
7cf319e0
RoomData 핸들링을 RoomInfo에서 Room으로 옮김
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
75 additions
and
69 deletions
web/src/components/room/RoomInfo.tsx
web/src/pages/Room.tsx
web/src/components/room/RoomInfo.tsx
View file @
7fec6ca
...
...
@@ -4,74 +4,11 @@ import SocketContext from '../../contexts/SocketContext';
import { MessageResponse, MessageType, RawMessage } from '../common/types';
import { RoomData, UpdateRoomUser } from './types';
interface RoomInfo
Location
{
state: { roomData: RoomData }
interface RoomInfo
Props
{
roomData: RoomData;
}
export const RoomInfo: React.FC = () => {
const history = useHistory();
const socket = useContext(SocketContext);
const location: RoomInfoLocation = useLocation();
const [ roomData, setRoomData ] = useState<RoomData>({
// 기본값
uuid: '0',
name: 'loading...',
maxUsers: 9,
users: []
});
const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type == MessageType.ROOM_USER_UPDATE) {
const data = rawMessage.message as UpdateRoomUser;
console.log(data);
if (data.state == 'removed') {
const newUsers = roomData.users;
const index = newUsers.indexOf(data.user);
if (index < 0) {
console.log('존재하지 않는 유저를 제거 시도');
} else {
newUsers.splice(index, 1);
}
setRoomData({
...roomData,
users: newUsers
});
} else if (data.state == 'added') {
setRoomData({
...roomData,
users: [data.user, ...roomData.users]
});
}
}
}, [roomData]);
useEffect(() => {
socket.on('msg', handleUpdateRoomUser);
return () => {
socket.off('msg', handleUpdateRoomUser);
}
}, [roomData]);
useEffect(() => {
// 비정상적인 루트로 방을 들어오면 로그인 화면으로 푸시
if (location.state === undefined) {
history.push('/');
return;
}
setRoomData(location.state.roomData);
return () => {
const rawMessage: RawMessage = {
type: MessageType.ROOM_LEAVE,
message: ''
}
socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {});
}
}, [])
export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
return (
<div className='m-3 w-5/6 flex items-center place-content-between'>
<div>{roomData.name}</div>
...
...
web/src/pages/Room.tsx
View file @
7fec6ca
import React, { useC
ontext
} from 'react';
import { useLocation } from 'react-router';
import React, { useC
allback, useContext, useEffect, useState
} from 'react';
import { use
History, use
Location } from 'react-router';
import { Main } from '../components/common/Main';
import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
import { Canvas } from '../components/room/Canvas';
import { Chat } from '../components/room/Chat';
import { RoomInfo } from '../components/room/RoomInfo';
import { RoomData, UpdateRoomUser } from '../components/room/types';
import SocketContext from '../contexts/SocketContext';
interface RoomLocation {
state: { roomData: RoomData }
}
export const Room: React.FC = () => {
const history = useHistory();
const socket = useContext(SocketContext);
const location: RoomLocation = useLocation();
const [ roomData, setRoomData ] = useState<RoomData>({
// 기본값
uuid: '0',
name: 'loading...',
maxUsers: 9,
users: []
});
const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type == MessageType.ROOM_USER_UPDATE) {
const data = rawMessage.message as UpdateRoomUser;
console.log(data);
if (data.state == 'removed') {
const newUsers = roomData.users;
const index = newUsers.indexOf(data.user);
if (index < 0) {
console.log('존재하지 않는 유저를 제거 시도');
} else {
newUsers.splice(index, 1);
}
setRoomData({
...roomData,
users: newUsers
});
} else if (data.state == 'added') {
setRoomData({
...roomData,
users: [data.user, ...roomData.users]
});
}
}
}, [roomData]);
useEffect(() => {
socket.on('msg', handleUpdateRoomUser);
return () => {
socket.off('msg', handleUpdateRoomUser);
}
}, [roomData]);
useEffect(() => {
// 비정상적인 루트로 방을 들어오면 로그인 화면으로 푸시
if (location.state === undefined) {
history.push('/');
return;
}
setRoomData(location.state.roomData);
return () => {
const rawMessage: RawMessage = {
type: MessageType.ROOM_LEAVE,
message: ''
}
socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {});
}
}, [])
return (
<Main>
<RoomInfo />
<RoomInfo
roomData={roomData}
/>
<div className='w-full flex'>
<Canvas />
<Chat />
...
...
Please
register
or
login
to post a comment