강동현
Builds for 1 pipeline passed in 8 minutes 2 seconds

Merge branch 'develop' of http://khuhub.khu.ac.kr/2020105578/nodejs-game into develop

...@@ -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 {
......
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 +}
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>
......