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-10 08:30:10 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
4a65fe228a115012417e57ac4acc640a554ba699
4a65fe22
1 parent
f5c9b261
export default로 일괄 변경
Show whitespace changes
Inline
Side-by-side
Showing
21 changed files
with
82 additions
and
42 deletions
web/src/App.tsx
web/src/components/common/Footer.tsx
web/src/components/common/Main.tsx
web/src/components/room/Canvas.tsx
web/src/components/room/Chat.tsx
web/src/components/room/ChatLine.tsx
web/src/components/room/GameBoard.tsx
web/src/components/room/Ready.tsx
web/src/components/room/RoomInfo.tsx
web/src/components/room/RoundInfo.tsx
web/src/components/room/Timer.tsx
web/src/components/room/UserInfo.tsx
web/src/components/room/UserRole.tsx
web/src/components/room/UserStatus.tsx
web/src/components/room/Word.tsx
web/src/components/rooms/Create.tsx
web/src/components/rooms/Refrsh.tsx
web/src/components/rooms/RoomBlock.tsx
web/src/pages/Login.tsx
web/src/pages/Room.tsx
web/src/pages/Rooms.tsx
web/src/App.tsx
View file @
4a65fe2
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { socket, SocketProvider } from './contexts/SocketContext';
import
{ Login }
from './pages/Login';
import
{ Room }
from './pages/Room';
import
{ Rooms }
from './pages/Rooms';
import
Login
from './pages/Login';
import
Room
from './pages/Room';
import
Rooms
from './pages/Rooms';
const App: React.FC = () => {
return (
...
...
web/src/components/common/Footer.tsx
View file @
4a65fe2
import React from 'react';
export
const Footer: React.FC = () => {
const Footer: React.FC = () => {
return (
<div className="mt-auto flex justify-center items-center">
<a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game">
...
...
@@ -19,3 +19,5 @@ export const Footer: React.FC = () => {
</div>
);
}
export default Footer;
\ No newline at end of file
...
...
web/src/components/common/Main.tsx
View file @
4a65fe2
import React from 'react';
import
{ Footer }
from './Footer';
import
Footer
from './Footer';
export
const Main: React.FC = ({ children }) => {
const Main: React.FC = ({ children }) => {
return (
<div className="flex flex-col items-center w-screen h-screen">
{children}
...
...
@@ -9,3 +9,5 @@ export const Main: React.FC = ({ children }) => {
</div>
);
}
export default Main;
\ No newline at end of file
...
...
web/src/components/room/Canvas.tsx
View file @
4a65fe2
...
...
@@ -9,7 +9,7 @@ interface CanvasProps {
isDrawer: boolean;
}
export
const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => {
const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => {
const socket = useContext(SocketContext);
const canvasRef = useRef<HTMLCanvasElement>(null);
...
...
@@ -186,3 +186,5 @@ export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => {
</div>
);
}
export default Canvas;
\ No newline at end of file
...
...
web/src/components/room/Chat.tsx
View file @
4a65fe2
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
import SocketContext from '../../contexts/SocketContext';
import { MessageType, RawMessage } from '../common/types';
import
{ ChatLine }
from './ChatLine';
import
ChatLine
from './ChatLine';
import { ChatData } from './types';
interface ChatProps {
...
...
@@ -9,7 +9,7 @@ interface ChatProps {
h: string;
}
export
const Chat: React.FC<ChatProps> = (props) => {
const Chat: React.FC<ChatProps> = (props) => {
const socket = useContext(SocketContext);
const [ input, setInput ] = useState('');
const [ chatLines, setChatLines ] = useState<ChatData[]>([]);
...
...
@@ -87,3 +87,5 @@ export const Chat: React.FC<ChatProps> = (props) => {
</div>
);
}
export default Chat;
\ No newline at end of file
...
...
web/src/components/room/ChatLine.tsx
View file @
4a65fe2
...
...
@@ -5,9 +5,11 @@ interface ChatLineProps {
chatData: ChatData;
}
export
const ChatLine: React.FC<ChatLineProps> = ({ chatData }) => {
const ChatLine: React.FC<ChatLineProps> = ({ chatData }) => {
return (
<div className='w-full px-3 py-1.5 bg-white
text-gray-700 text-sm'>{chatData.sender} : {chatData.message}</div>
);
}
export default ChatLine;
\ No newline at end of file
...
...
web/src/components/room/GameBoard.tsx
View file @
4a65fe2
...
...
@@ -2,10 +2,10 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import SocketContext from '../../contexts/SocketContext';
import { MessageType, RawMessage } from '../common/types';
import
{ Canvas }
from './Canvas';
import
{ RoundInfo }
from './RoundInfo';
import
Canvas
from './Canvas';
import
RoundInfo
from './RoundInfo';
import { RoundData } from './types';
import
{ Word }
from './Word';
import
Word
from './Word';
interface GameBoardLocation {
state: { username: string }
...
...
@@ -15,7 +15,7 @@ interface GameBoardProps {
isInGame: boolean
}
export
const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
const socket = useContext(SocketContext);
const location: GameBoardLocation = useLocation();
...
...
@@ -92,3 +92,5 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
</div>
);
}
export default GameBoard;
\ No newline at end of file
...
...
web/src/components/room/Ready.tsx
View file @
4a65fe2
...
...
@@ -12,7 +12,7 @@ interface ReadyProps {
users: User[];
}
export
const Ready: React.FC<ReadyProps> = ({ users }) => {
const Ready: React.FC<ReadyProps> = ({ users }) => {
const socket = useContext(SocketContext);
const location: ReadyLocation = useLocation();
...
...
@@ -58,3 +58,5 @@ export const Ready: React.FC<ReadyProps> = ({ users }) => {
onClick={() => handleReady()}>{isAdmin ? 'Start' : 'Ready'}</button>
);
}
export default Ready;
\ No newline at end of file
...
...
web/src/components/room/RoomInfo.tsx
View file @
4a65fe2
...
...
@@ -5,7 +5,7 @@ interface RoomInfoProps {
roomData: RoomData;
}
export
const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
return (
<div className='m-3 my-8 w-5/6 flex items-center place-content-between'>
<div>{roomData.name}</div>
...
...
@@ -13,3 +13,5 @@ export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
</div>
);
}
export default RoomInfo;
\ No newline at end of file
...
...
web/src/components/room/RoundInfo.tsx
View file @
4a65fe2
import React from 'react';
import
{ Timer }
from './Timer';
import
Timer
from './Timer';
interface RoundInfoProps {
round: number;
wordChosen: string;
}
export
const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => {
const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => {
return (
<div className='p-3 m-3 h-14 rounded shadow flex items-center place-content-between'>
<Timer />
...
...
@@ -15,3 +15,5 @@ export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => {
</div>
);
}
export default RoundInfo;
\ No newline at end of file
...
...
web/src/components/room/Timer.tsx
View file @
4a65fe2
...
...
@@ -7,7 +7,7 @@ interface timer {
time: number;
};
export
const Timer: React.FC = () => {
const Timer: React.FC = () => {
const socket = useContext(SocketContext);
const [ time, setTime ] = useState(0);
...
...
@@ -53,3 +53,5 @@ export const Timer: React.FC = () => {
</div>
);
}
export default Timer;
\ No newline at end of file
...
...
web/src/components/room/UserInfo.tsx
View file @
4a65fe2
import React from 'react';
import { User } from './types';
import
{ UserStatus }
from './UserStatus';
import
UserStatus
from './UserStatus';
interface UserInfoProps {
users: User[];
}
export
const UserInfo: React.FC<UserInfoProps> = ({ users }) => {
const UserInfo: React.FC<UserInfoProps> = ({ users }) => {
return (
<div className='w-7/12 h-60 flex justify-center'>
{users.map((user) => (<UserStatus key={user.username} user={user} />))}
</div>
);
}
export default UserInfo
\ No newline at end of file
...
...
web/src/components/room/UserRole.tsx
View file @
4a65fe2
...
...
@@ -7,7 +7,7 @@ interface UserRoleProps {
isInGame: boolean;
}
export
const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => {
const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => {
const socket = useContext(SocketContext);
const [ roles, setRoles ] = useState<RoleData[]>([]);
...
...
@@ -39,3 +39,5 @@ export const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => {
</div>
);
}
export default UserRole;
...
...
web/src/components/room/UserStatus.tsx
View file @
4a65fe2
...
...
@@ -5,7 +5,7 @@ interface UserStatusProps {
user: User;
}
export
const UserStatus: React.FC<UserStatusProps> = ({ user }) => {
const UserStatus: React.FC<UserStatusProps> = ({ user }) => {
return (
<div className='p-3 h-12 m-4 rounded-lg shadow'>
<div className={`${user.admin ? 'text-blue-500' :
...
...
@@ -16,3 +16,5 @@ export const UserStatus: React.FC<UserStatusProps> = ({ user }) => {
</div>
)
}
export default UserStatus;
\ No newline at end of file
...
...
web/src/components/room/Word.tsx
View file @
4a65fe2
...
...
@@ -9,7 +9,7 @@ interface WordProps {
setWords: (value: React.SetStateAction<string[]>) => void;
}
export
const Word: React.FC<WordProps> = (props) => {
const Word: React.FC<WordProps> = (props) => {
const socket = useContext(SocketContext);
const handleChoose = useCallback(() => {
...
...
@@ -35,3 +35,5 @@ export const Word: React.FC<WordProps> = (props) => {
onClick={() => handleChoose()}>{props.word}</button>
);
}
export default Word;
\ No newline at end of file
...
...
web/src/components/rooms/Create.tsx
View file @
4a65fe2
...
...
@@ -8,7 +8,7 @@ interface CreateLocation {
state: { username: string }
}
export
const Create: React.FC = () => {
const Create: React.FC = () => {
const history = useHistory();
const socket = useContext(SocketContext);
const [ roomName, setRoomName ] = useState('');
...
...
@@ -54,3 +54,5 @@ export const Create: React.FC = () => {
</div>
);
}
export default Create;
\ No newline at end of file
...
...
web/src/components/rooms/Refrsh.tsx
View file @
4a65fe2
...
...
@@ -4,7 +4,7 @@ interface RefreshProps {
refreshRooms: () => void
}
export
const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => {
const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => {
return (
<button className="bg-green-500 active:bg-green-600
text-white uppercase text-xl
...
...
@@ -15,3 +15,5 @@ export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => {
onClick={() => refreshRooms()}>⟳</button>
);
}
export default Refresh;
\ No newline at end of file
...
...
web/src/components/rooms/RoomBlock.tsx
View file @
4a65fe2
...
...
@@ -13,7 +13,7 @@ interface RoomBlockProps {
room: Room
}
export
const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
const history = useHistory();
const socket = useContext(SocketContext);
const location: RoomBlockLocation = useLocation();
...
...
@@ -57,3 +57,5 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
</button>
);
}
export default RoomBlock;
\ No newline at end of file
...
...
web/src/pages/Login.tsx
View file @
4a65fe2
import React, { useCallback, useContext, useState } from 'react';
import { useHistory } from 'react-router';
import
{ Main }
from '../components/common/Main';
import
Main
from '../components/common/Main';
import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
import SocketContext from '../contexts/SocketContext';
export
const Login: React.FC = () => {
const Login: React.FC = () => {
const history = useHistory();
const socket = useContext(SocketContext);
const [ username, setUsername ] = useState("");
...
...
@@ -51,3 +51,5 @@ export const Login: React.FC = () => {
</Main>
)
}
export default Login;
\ No newline at end of file
...
...
web/src/pages/Room.tsx
View file @
4a65fe2
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useHistory, useLocation } from 'react-router';
import
{ Main }
from '../components/common/Main';
import
Main
from '../components/common/Main';
import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
import
{ Chat }
from '../components/room/Chat';
import
{ GameBoard }
from '../components/room/GameBoard';
import
{ Ready }
from '../components/room/Ready';
import
{ RoomInfo }
from '../components/room/RoomInfo';
import
Chat
from '../components/room/Chat';
import
GameBoard
from '../components/room/GameBoard';
import
Ready
from '../components/room/Ready';
import
RoomInfo
from '../components/room/RoomInfo';
import { RoomData, UpdateRoomUser } from '../components/room/types';
import
{ UserInfo }
from '../components/room/UserInfo';
import
{ UserRole }
from '../components/room/UserRole';
import
UserInfo
from '../components/room/UserInfo';
import
UserRole
from '../components/room/UserRole';
import SocketContext from '../contexts/SocketContext';
interface RoomLocation {
state: { roomData: RoomData }
}
export
const Room: React.FC = () => {
const Room: React.FC = () => {
const history = useHistory();
const socket = useContext(SocketContext);
const location: RoomLocation = useLocation();
...
...
@@ -124,3 +124,5 @@ export const Room: React.FC = () => {
</Main>
);
}
export default Room;
\ No newline at end of file
...
...
web/src/pages/Rooms.tsx
View file @
4a65fe2
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useHistory } from 'react-router';
import
{ Main }
from '../components/common/Main';
import
Main
from '../components/common/Main';
import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
import
{ Create }
from '../components/rooms/Create';
import
{ Refresh }
from '../components/rooms/Refrsh';
import
{ RoomBlock }
from '../components/rooms/RoomBlock';
import
Create
from '../components/rooms/Create';
import
Refresh
from '../components/rooms/Refrsh';
import
RoomBlock
from '../components/rooms/RoomBlock';
import { Room } from '../components/rooms/types';
import SocketContext from '../contexts/SocketContext';
export
const Rooms: React.FC = () => {
const Rooms: React.FC = () => {
const history = useHistory();
const socket = useContext(SocketContext);
const [ rooms, setRooms ] = useState<Room[]>([]);
...
...
@@ -42,3 +42,5 @@ export const Rooms: React.FC = () => {
</Main>
)
}
export default Rooms;
\ No newline at end of file
...
...
Please
register
or
login
to post a comment