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 20:58:29 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
4c0593669741948d507f87d386942b217f77126d
4c059366
1 parent
a5ddd907
Ready 컴포넌트 내부에서 직접 상태 처리하도록 수정
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
29 additions
and
9 deletions
web/src/components/room/Ready.tsx
web/src/components/room/Ready.tsx
View file @
4c05936
import React, { useCallback, useContext } from 'react';
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 { User } from './types';
interface ReadyLocation {
state: { username: string }
}
interface ReadyProps {
isReady: boolean;
isAdmin: boolean;
isAllReady: boolean;
users: User[];
}
export const Ready: React.FC<ReadyProps> = ({
isReady, isAdmin, isAllReady
}) => {
export const Ready: React.FC<ReadyProps> = ({
users
}) => {
const socket = useContext(SocketContext);
const location: ReadyLocation = useLocation();
const [ isAdmin, setIsAdmin ] = useState(false);
const [ isReady, setIsReady ] = useState(false);
const [ isAllReady, setIsAllReady ] = useState(false);
useEffect(() => {
const me = users.find(x => x.username === location.state.username);
setIsAdmin(me?.admin || false);
setIsReady(me?.ready || false);
const test = true;
users.forEach(x => test && x.ready);
setIsAllReady(test);
});
const handleReady = useCallback(() => {
if (isAdmin && isAllReady) {
const rawMessage: RawMessage = {
...
...
@@ -24,17 +44,17 @@ export const Ready: React.FC<ReadyProps> = ({ isReady, isAdmin, isAllReady }) =>
}
socket.emit('msg', rawMessage, () => {});
}
}, []);
}, [
isAdmin, isReady, isAllReady
]);
return (
<button className={`${isAdmin ? isAllReady ? 'bg-green-500' : 'bg-gray-400'
: isReady ? 'bg-green-600'
: 'bg-green-500 active:bg-green-600'}
text-white font-bold uppercase
text-sm
px-
5 py-2 ml-3
rounded shadow
text-white font-bold uppercase
px-
7 py-3 m-8
rounded shadow
outline-none focus:outline-none hover:shadow-md
ease-linear transition-all duration-100`}
type="button"
onClick={() =>
{}
}>{isAdmin ? 'Start' : 'Ready'}</button>
onClick={() =>
handleReady()
}>{isAdmin ? 'Start' : 'Ready'}</button>
);
}
...
...
Please
register
or
login
to post a comment