52 lines
1.9 KiB
JavaScript
52 lines
1.9 KiB
JavaScript
import React, { useState, useContext, useEffect, useCallback } from 'react';
|
|
import { SocketContext } from '../../../App';
|
|
import useInput from '../../../hooks/useInput';
|
|
import './NameInput.css';
|
|
import Overlay from '../../Overlay/Overlay';
|
|
|
|
const NameInput = ({ isRoomPrivate, roomId }) => {
|
|
const socket = useContext(SocketContext);
|
|
const nickname = useInput('');
|
|
const password = useInput('');
|
|
const [isPasswordWrong, setIsPasswordWrong] = useState(false);
|
|
|
|
const handleButtonClick = useCallback(() => {
|
|
socket.emit('player:login', { name: nickname.value, password: password.value, roomId: roomId });
|
|
}, [socket, nickname.value, password.value, roomId]);
|
|
|
|
useEffect(() => {
|
|
socket.on('error:wrongPassword', () => {
|
|
setIsPasswordWrong(true);
|
|
});
|
|
const keyDownHandler = event => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
handleButtonClick();
|
|
}
|
|
};
|
|
document.addEventListener('keydown', keyDownHandler);
|
|
return () => {
|
|
document.removeEventListener('keydown', keyDownHandler);
|
|
};
|
|
}, [socket, handleButtonClick]);
|
|
|
|
return (
|
|
<div className='name-overlay'>
|
|
<div className='name-input-container' style={{ height: isRoomPrivate ? '100px' : '50px' }}>
|
|
<input placeholder='Nickname' type='text' onChange={nickname.onChange} />
|
|
{isRoomPrivate ? (
|
|
<input
|
|
placeholder='Room password'
|
|
type='text'
|
|
onChange={password.onChange}
|
|
style={{ backgroundColor: isPasswordWrong ? 'red' : null }}
|
|
/>
|
|
) : null}
|
|
<button onClick={handleButtonClick}>JOIN</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NameInput;
|