custom player names

client/src/components/Game.js

@@ -37,16 +37,19 @@ 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,
-            "reconnectionAttempts": "Infinity", 
-            "timeout" : 10000,                  
+            "reconnectionAttempts": "Infinity",
+            "timeout" : 10000,
             "transports" : ["websocket"]
         }
         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 ])
 
@@ -175,7 +188,7 @@ const Game = (props) => {
     const checkGameOver = (arr) => {
         return arr.length === 1
     }
-    
+
     const checkWinner = (arr, player) => {
         return arr.length === 1 ? player : ''
     }
@@ -689,7 +702,7 @@ const Game = (props) => {
                     }
                 }
                 //check for number match - if draw 2 card played on draw 2 card
-                else if(currentNumber === 252) {                        
+                else if(currentNumber === 252) {
                     console.log('number matched!')
                     //check who played the card and return new state accordingly
                     if(cardPlayedBy === 'Player 1') {
@@ -1013,7 +1026,7 @@ const Game = (props) => {
             break;
         }
     }
-    
+
     const onCardDrawnHandler = () => {
         //extract player who drew the card
         const cardDrawnBy = turn
@@ -1215,7 +1228,7 @@ const Game = (props) => {
             }
         }
     }
-    
+
     return (
         <div className={`Game backgroundColorR backgroundColor${currentColor}`}>
             {(!roomFull) ? <>
@@ -1245,9 +1258,9 @@ const Game = (props) => {
                     {gameOver ? <div>{winner !== '' && <><h1>GAME OVER</h1><h2>{winner} wins!</h2></>}</div> :
                     <div>
                         {/* PLAYER 1 VIEW */}
-                        {currentUser === 'Player 1' && <>    
+                        {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}

client/src/components/Homepage.js

@@ -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'>

server.js

@@ -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)

users.js

@@ -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 }
 }