dave/uno-online
1
0
Fork 0
forked from Github/uno-online
Code Issues Pull Requests Projects Releases Wiki Activity

custom player names

Browse Source
This commit is contained in:
Dave Umrysh 2022-04-15 15:16:38 -06:00
parent 489d9e32ee
commit 9c84bb2efe
4 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/components/Game.js
View File

@ -37,6 +37,9 @@ const Game = (props) => {
const [messages, setMessages] = useState([])
const [playerName, setPlayerName] = useState(data.playerName)
const [player1Name, setPlayer1Name] = useState('Player 1')
const [player2Name, setPlayer2Name] = useState('Player 2')
useEffect(() => {
const connectionOptions = {
"forceNew" : true,
@ -46,7 +49,7 @@ const Game = (props) => {
}
socket = io.connect(ENDPOINT, connectionOptions)
socket.emit('join', {room: room}, (error) => {
socket.emit('join', {room: room, playerName: playerName}, (error) => {
if(error)
setRoomFull(true)
})
@ -157,12 +160,22 @@ const Game = (props) => {
socket.on("roomData", ({ users }) => {
setUsers(users)
// For each user, update the name
users.forEach(function(user){
if(user.name === 'Player 1'){
setPlayer1Name(user.playerName)
}else if(user.name === 'Player 2'){
setPlayer2Name(user.playerName)
}
})
})
socket.on('currentUserData', ({ name }) => {
setCurrentUser(name)
})
socket.on('message', message => {
setMessages(messages => [ ...messages, message ])
@ -1247,7 +1260,7 @@ const Game = (props) => {
{/* PLAYER 1 VIEW */}
{currentUser === 'Player 1' && <>
<div className='player2Deck' style={{pointerEvents: 'none'}}>
<p className='playerDeckText'>Player 2</p>
<p className='playerDeckText'>{player2Name}</p>
{player2Deck.map((item, i) => (
<img
key={i}
@ -1268,7 +1281,7 @@ const Game = (props) => {
</div>
<br />
<div className='player1Deck' style={turn === 'Player 1' ? null : {pointerEvents: 'none'}}>
<p className='playerDeckText'>{playerName}</p>
<p className='playerDeckText'>{player1Name}</p>
{player1Deck.map((item, i) => (
<img
key={i}
@ -1314,7 +1327,7 @@ const Game = (props) => {
{/* PLAYER 2 VIEW */}
{currentUser === 'Player 2' && <>
<div className='player1Deck' style={{pointerEvents: 'none'}}>
<p className='playerDeckText'>Player 1</p>
<p className='playerDeckText'>{player1Name}</p>
{player1Deck.map((item, i) => (
<img
key={i}
@ -1335,7 +1348,7 @@ const Game = (props) => {
</div>
<br />
<div className='player2Deck' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
<p className='playerDeckText'>{playerName}</p>
<p className='playerDeckText'>{player2Name}</p>
{player2Deck.map((item, i) => (
<img
key={i}

2
client/src/components/Homepage.js
View File

@ -10,7 +10,7 @@ const Homepage = () => {
<div className='Homepage'>
<div className='homepage-menu'>
<img src={require('../assets/logo.png').default} width='200px' />
<br>
<br />
<input type='text' placeholder='Your name' className="your-name-input" onChange={(event) => setPlayerName(event.target.value)} />
<div className='homepage-form'>
<div className='homepage-join'>

7
server.js
View File

@ -16,11 +16,14 @@ app.use(cors())
io.on('connection', socket => {
socket.on('join', (payload, callback) => {
let numberOfUsersInRoom = getUsersInRoom(payload.room).length
let username = numberOfUsersInRoom===0 ? 'Player 1' : 'Player 2';
const { error, newUser} = addUser({
id: socket.id,
name: numberOfUsersInRoom===0 ? 'Player 1' : 'Player 2',
room: payload.room
name: username,
room: payload.room,
playerName: payload.playerName
})
if(error)

4
users.js
View File

@ -1,11 +1,11 @@
const users = []
const addUser = ({id, name, room}) => {
const addUser = ({id, name, room, playerName}) => {
const numberOfUsersInRoom = users.filter(user => user.room === room).length
if(numberOfUsersInRoom === 2)
return { error: 'Room full' }
const newUser = { id, name, room }
const newUser = { id, name, room, playerName}
users.push(newUser)
return { newUser }
}