22 lines
700 B
JavaScript
22 lines
700 B
JavaScript
import React, { useState, useContext } from 'react';
|
|
import { SocketContext } from '../../../App';
|
|
import './NameInput.css';
|
|
const NameInput = () => {
|
|
const socket = useContext(SocketContext);
|
|
const [inputValue, setInputValue] = useState('');
|
|
const handleInputChange = e => {
|
|
setInputValue(e.target.value);
|
|
};
|
|
const handleButtonClick = () => {
|
|
socket.emit('player:login', { name: inputValue });
|
|
};
|
|
return (
|
|
<div className="name-input-container">
|
|
<input placeholder='Enter name' type='text' onChange={handleInputChange} />
|
|
<button onClick={handleButtonClick}>JOIN</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NameInput;
|