From 9c84bb2efe6009cecf66eb9f285c2a73cfef5ec8 Mon Sep 17 00:00:00 2001
From: Dave Umrysh <dave@umycode.com>
Date: Fri, 15 Apr 2022 15:16:38 -0600
Subject: [PATCH] custom player names

---
 client/src/components/Game.js     | 37 +++++++++++++++++++++----------
 client/src/components/Homepage.js |  2 +-
 server.js                         |  7 ++++--
 users.js                          |  4 ++--
 4 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Game.js b/client/src/components/Game.js
index 2a7f75b..ef28a05 100644
--- a/client/src/components/Game.js
+++ b/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}
diff --git a/client/src/components/Homepage.js b/client/src/components/Homepage.js
index 045b2f8..53ce664 100644
--- a/client/src/components/Homepage.js
+++ b/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'>
diff --git a/server.js b/server.js
index 14ac08d..179f571 100644
--- a/server.js
+++ b/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)
diff --git a/users.js b/users.js
index c44c1f6..5e4d30e 100644
--- a/users.js
+++ b/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 }
 }