42 lines
1.4 KiB
JavaScript
42 lines
1.4 KiB
JavaScript
import React, { useState, useContext, useEffect } from 'react';
|
|
import { SocketContext } from '../../../App';
|
|
import useInput from '../../../hooks/useInput';
|
|
import useKeyPress from '../../../hooks/useKeyPress';
|
|
import styles from './NameInput.module.css';
|
|
|
|
const NameInput = ({ isRoomPrivate, roomId }) => {
|
|
const socket = useContext(SocketContext);
|
|
const nickname = useInput('');
|
|
const password = useInput('');
|
|
const [isPasswordWrong, setIsPasswordWrong] = useState(false);
|
|
|
|
const handleButtonClick = () => {
|
|
socket.emit('player:login', { name: nickname.value, password: password.value, roomId: roomId });
|
|
};
|
|
|
|
useKeyPress('Enter', handleButtonClick);
|
|
|
|
useEffect(() => {
|
|
socket.on('error:wrongPassword', () => {
|
|
setIsPasswordWrong(true);
|
|
});
|
|
}, [socket]);
|
|
|
|
return (
|
|
<div className={styles.container} style={{ height: isRoomPrivate ? '100px' : '50px' }}>
|
|
<input placeholder='Nickname' type='text' {...nickname} />
|
|
{isRoomPrivate ? (
|
|
<input
|
|
placeholder='Room password'
|
|
type='text'
|
|
{...password}
|
|
style={{ backgroundColor: isPasswordWrong ? 'red' : null }}
|
|
/>
|
|
) : null}
|
|
<button onClick={handleButtonClick}>JOIN</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NameInput;
|