Builds for
1 pipeline
passed
in
8 minutes 2 seconds
Merge branch 'develop' of http://khuhub.khu.ac.kr/2020105578/nodejs-game into develop
Showing
7 changed files
with
87 additions
and
9 deletions
... | @@ -12,6 +12,7 @@ export interface RawMessage { | ... | @@ -12,6 +12,7 @@ export interface RawMessage { |
12 | export const MessageType = { | 12 | export const MessageType = { |
13 | LOGIN: "login", | 13 | LOGIN: "login", |
14 | ROOM_LIST_REQUEST: "roomList", | 14 | ROOM_LIST_REQUEST: "roomList", |
15 | + ROOM_LIST_CREATE: "createRoom", | ||
15 | ROOM_JOIN: "joinRoom", | 16 | ROOM_JOIN: "joinRoom", |
16 | ROOM_LEAVE: "leaveRoom", | 17 | ROOM_LEAVE: "leaveRoom", |
17 | ROOM_USER_UPDATE: "updateRoomUser", | 18 | ROOM_USER_UPDATE: "updateRoomUser", | ... | ... |
... | @@ -12,7 +12,7 @@ export const UserStatus: React.FC<UserStatusProps> = ({ user }) => { | ... | @@ -12,7 +12,7 @@ export const UserStatus: React.FC<UserStatusProps> = ({ user }) => { |
12 | user.ready ? 'text-green-500' : 'text-black'} | 12 | user.ready ? 'text-green-500' : 'text-black'} |
13 | text-lg text-center align-middle | 13 | text-lg text-center align-middle |
14 | ease-linear transition-all duration-100`}> | 14 | ease-linear transition-all duration-100`}> |
15 | - {user.username}</div> | 15 | + {user.nickname}</div> |
16 | </div> | 16 | </div> |
17 | ) | 17 | ) |
18 | } | 18 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -7,17 +7,14 @@ export interface RoomData { | ... | @@ -7,17 +7,14 @@ export interface RoomData { |
7 | 7 | ||
8 | export interface User { | 8 | export interface User { |
9 | username: string; | 9 | username: string; |
10 | + nickname: string; | ||
10 | admin: boolean; | 11 | admin: boolean; |
11 | ready: boolean; | 12 | ready: boolean; |
12 | } | 13 | } |
13 | 14 | ||
14 | export interface UpdateRoomUser { | 15 | export interface UpdateRoomUser { |
15 | state: "added" | "updated" | "removed"; | 16 | state: "added" | "updated" | "removed"; |
16 | - user: { | 17 | + user: User; |
17 | - username: string; | ||
18 | - admin: boolean; | ||
19 | - ready: boolean; | ||
20 | - }; | ||
21 | } | 18 | } |
22 | 19 | ||
23 | export interface ChatData { | 20 | export interface ChatData { | ... | ... |
web/src/components/rooms/Create.tsx
0 → 100644
1 | +import React, { useCallback, useContext, useState } from 'react'; | ||
2 | +import { useHistory, useLocation } from 'react-router-dom'; | ||
3 | +import SocketContext from '../../contexts/SocketContext'; | ||
4 | +import { MessageResponse, MessageType, RawMessage } from '../common/types'; | ||
5 | +import { RoomData } from '../room/types'; | ||
6 | +import { Room } from './types'; | ||
7 | + | ||
8 | +interface CreateLocation { | ||
9 | + state: { username: string } | ||
10 | +} | ||
11 | + | ||
12 | +export const Create: React.FC = () => { | ||
13 | + const history = useHistory(); | ||
14 | + const socket = useContext(SocketContext); | ||
15 | + const [ roomName, setRoomName ] = useState(''); | ||
16 | + const location: CreateLocation = useLocation(); | ||
17 | + | ||
18 | + const createRooms = useCallback(() => { | ||
19 | + const rawMessage: RawMessage = { | ||
20 | + type: MessageType.ROOM_LIST_CREATE, | ||
21 | + message: { name: roomName } | ||
22 | + } | ||
23 | + socket.emit('msg', rawMessage, (response: MessageResponse<RoomData>) => { | ||
24 | + if (response.ok) { | ||
25 | + history.push({ | ||
26 | + pathname: '/' + response.result!.uuid, | ||
27 | + state: { | ||
28 | + username: location.state.username, | ||
29 | + roomData: response.result! | ||
30 | + } | ||
31 | + }); | ||
32 | + } else { | ||
33 | + console.log('방 생성 오류'); | ||
34 | + } | ||
35 | + }); | ||
36 | + }, [roomName]); | ||
37 | + | ||
38 | + return ( | ||
39 | + <div className="flex items-center"> | ||
40 | + <input type="text" | ||
41 | + placeholder="Room name" | ||
42 | + className="h-8 px-3 py-1.5 bg-white | ||
43 | + placeholder-gray-400 text-gray-700 text-sm | ||
44 | + rounded shadow outline-none focus:outline-none" | ||
45 | + value={roomName} | ||
46 | + onChange={e => setRoomName(e.target.value)} | ||
47 | + /> | ||
48 | + <button className="bg-green-500 active:bg-green-600 | ||
49 | + text-white uppercase text-xl | ||
50 | + w-10 h-8 pb-0.5 ml-3 rounded shadow round | ||
51 | + outline-none focus:outline-none hover:shadow-md | ||
52 | + ease-linear transition-all duration-100" | ||
53 | + type="button" | ||
54 | + onClick={() => createRooms()}>+</button> | ||
55 | + </div> | ||
56 | + ); | ||
57 | +} |
web/src/components/rooms/Refrsh.tsx
0 → 100644
1 | +import React from 'react'; | ||
2 | + | ||
3 | +interface RefreshProps { | ||
4 | + refreshRooms: () => void | ||
5 | +} | ||
6 | + | ||
7 | +export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => { | ||
8 | + return ( | ||
9 | + <button className="bg-green-500 active:bg-green-600 | ||
10 | + text-white uppercase text-xl | ||
11 | + w-10 h-8 pb-0.5 mr-2 rounded shadow round | ||
12 | + outline-none focus:outline-none hover:shadow-md | ||
13 | + ease-linear transition-all duration-100" | ||
14 | + type="button" | ||
15 | + onClick={() => refreshRooms()}>⟳</button> | ||
16 | + ); | ||
17 | +} |
... | @@ -12,13 +12,13 @@ export const Login: React.FC = () => { | ... | @@ -12,13 +12,13 @@ export const Login: React.FC = () => { |
12 | const login = useCallback(() => { | 12 | const login = useCallback(() => { |
13 | const rawMessage: RawMessage = { | 13 | const rawMessage: RawMessage = { |
14 | type: MessageType.LOGIN, | 14 | type: MessageType.LOGIN, |
15 | - message: { username } | 15 | + message: { nickname: username } |
16 | } | 16 | } |
17 | - socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => { | 17 | + socket.emit('msg', rawMessage, (response : MessageResponse<string>) => { |
18 | if (response.ok) { | 18 | if (response.ok) { |
19 | history.push({ | 19 | history.push({ |
20 | pathname: '/rooms', | 20 | pathname: '/rooms', |
21 | - state: { username: username } | 21 | + state: { username: response.result } |
22 | }); | 22 | }); |
23 | } else { | 23 | } else { |
24 | console.error('login error!'); // TODO: 팝업 에러? | 24 | console.error('login error!'); // TODO: 팝업 에러? | ... | ... |
... | @@ -2,6 +2,8 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; | ... | @@ -2,6 +2,8 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; |
2 | import { useHistory } from 'react-router'; | 2 | import { useHistory } from 'react-router'; |
3 | import { Main } from '../components/common/Main'; | 3 | import { Main } from '../components/common/Main'; |
4 | import { MessageResponse, MessageType, RawMessage } from '../components/common/types'; | 4 | import { MessageResponse, MessageType, RawMessage } from '../components/common/types'; |
5 | +import { Create } from '../components/rooms/Create'; | ||
6 | +import { Refresh } from '../components/rooms/Refrsh'; | ||
5 | import { RoomBlock } from '../components/rooms/RoomBlock'; | 7 | import { RoomBlock } from '../components/rooms/RoomBlock'; |
6 | import { Room } from '../components/rooms/types'; | 8 | import { Room } from '../components/rooms/types'; |
7 | import SocketContext from '../contexts/SocketContext'; | 9 | import SocketContext from '../contexts/SocketContext'; |
... | @@ -30,6 +32,10 @@ export const Rooms: React.FC = () => { | ... | @@ -30,6 +32,10 @@ export const Rooms: React.FC = () => { |
30 | 32 | ||
31 | return ( | 33 | return ( |
32 | <Main> | 34 | <Main> |
35 | + <div className='mt-8 flex'> | ||
36 | + <Refresh refreshRooms={refreshRooms}/> | ||
37 | + <Create /> | ||
38 | + </div> | ||
33 | <div className='mt-auto w-screen flex flex-col items-center'> | 39 | <div className='mt-auto w-screen flex flex-col items-center'> |
34 | {rooms.map((room) => (<RoomBlock key={room.uuid} room={room} />))} | 40 | {rooms.map((room) => (<RoomBlock key={room.uuid} room={room} />))} |
35 | </div> | 41 | </div> | ... | ... |
-
Please register or login to post a comment