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-06 00:32:26 +0900
Browse Files
Options
Browse Files
Download
Plain Diff
Commit
34c44f47d2f49f55926ce7ada7fed48306e10d70
34c44f47
2 parents
9b5f8124
99df0cc7
Builds for 1 pipeline
failed
in 1 minute 24 seconds
Merge branch 'feature/rooms' into develop
Changes
4
Builds
3
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
10 additions
and
28 deletions
web/package.json
web/src/components/rooms/RoomInfo.tsx → web/src/components/rooms/RoomBlock.tsx
web/src/contexts/SocketContext.ts
web/src/pages/Rooms.tsx
web/package.json
View file @
34c44f4
...
...
@@ -23,7 +23,7 @@
"web-vitals"
:
"^1.0.1"
},
"scripts"
:
{
"start"
:
"npm run twcss && react-scripts start"
,
"start"
:
"npm run twcss &&
set PORT=3001 &&
react-scripts start"
,
"build"
:
"npm run twcss && react-scripts build"
,
"test"
:
"react-scripts test"
,
"eject"
:
"react-scripts eject"
,
...
...
web/src/components/rooms/Room
Info
.tsx
→
web/src/components/rooms/Room
Block
.tsx
View file @
34c44f4
...
...
@@ -5,11 +5,11 @@ import { MessageResponse, MessageType } from '../common/types';
import { RoomData } from '../room/types';
import { Room } from './types';
interface RoomProps {
interface Room
Block
Props {
room: Room
}
export const Room
Info: React.FC<Room
Props> = ({ room }) => {
export const Room
Block: React.FC<RoomBlock
Props> = ({ room }) => {
const history = useHistory();
const socket = useContext(SocketContext);
const joinRoom = () => {
...
...
web/src/contexts/SocketContext.ts
View file @
34c44f4
import
React
from
'react'
;
import
{
io
}
from
'socket.io-client'
;
export
const
socket
=
io
(
'http://localhost/'
);
export
const
socket
=
io
(
'http://localhost
:3000
/'
);
const
SocketContext
=
React
.
createContext
(
socket
);
export
const
SocketProvider
=
SocketContext
.
Provider
;
...
...
web/src/pages/Rooms.tsx
View file @
34c44f4
import React, { useContext, useEffect, useState } from 'react';
import React, { useC
allback, useC
ontext, useEffect, useState } from 'react';
import { Main } from '../components/common/Main';
import { MessageResponse, MessageType } from '../components/common/types';
import { Room
Info } from '../components/rooms/RoomInfo
';
import { Room
Block } from '../components/rooms/RoomBlock
';
import { Room } from '../components/rooms/types';
import SocketContext from '../contexts/SocketContext';
...
...
@@ -9,25 +9,7 @@ export const Rooms: React.FC = () => {
const socket = useContext(SocketContext);
const [ rooms, setRooms ] = useState<Room[]>([]);
// for test
const testingRoom1: Room = {
uuid: '23525',
name: 'Hello World!',
currentUsers: 3,
maxUsers: 4
}
const testingRoom2: Room = {
uuid: '235252134',
name: 'Bonjour World!',
currentUsers: 6,
maxUsers: 6
}
useEffect(() => {
setRooms([testingRoom1, testingRoom2]);
// refreshRooms()
}, []);
const refreshRooms = () => {
const refreshRooms = useCallback(() => {
socket.emit(MessageType.ROOM_LIST_REQUEST, (response: MessageResponse<Room[]>) => {
if (response.ok) {
setRooms(response.result!);
...
...
@@ -36,14 +18,14 @@ export const Rooms: React.FC = () => {
console.log("방 목록을 수신하지 못함");
}
});
}
}
, []);
//
useEffect(refreshRooms, []);
useEffect(refreshRooms, []);
return (
<Main>
<div className='mt-auto w-screen flex flex-col items-center'>
{rooms.map((room) => (<Room
Info
key={room.uuid} room={room} />))}
{rooms.map((room) => (<Room
Block
key={room.uuid} room={room} />))}
</div>
</Main>
)
...
...
Please
register
or
login
to post a comment