Add icons to player list

andyplank · Dec 13, 2023 · 477d0d8 · 477d0d8
1 parent 2570a03
commit 477d0d8
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 15 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -95,11 +95,6 @@ html, body {
     background-color: var(--orange);
 }
 
-.name-plate {
-    border-radius: 0rem 1.25rem 1.25rem 0rem;
-    background: #FFF;
-}
-
 @media only screen and (max-width: 640px) {
     h1 {
         font-size: 2.2rem;     

diff --git a/client/src/components/Game.tsx b/client/src/components/Game.tsx
@@ -43,10 +43,14 @@ const Game = ({sendJsonMessage, lastMessageJson}: {sendJsonMessage: any, lastMes
                 <div className='bg-light-purple pb-4 pr-4'>
                     <h3 className='p-4'>Players</h3>
                     {players.map((player:Player) => (
-                        <h4 key={player.id}>
-                            <div className="bg-white rounded-r-lg mt-2 p-1">{player.name} : {player.points}</div>
-                            <PlayerIcon iconName={player.icon}/>
-                        </h4>
+                        <div className="flex bg-white rounded-r-lg mt-2 p-1 h-12 justify-between items-center">
+                            <h4 key={player.id}>
+                                {player.name} : {player.points}    
+                            </h4>
+                            <div className="test">
+                                <PlayerIcon iconName={player.icon} customClass="h-12"/>
+                            </div>
+                        </div>
                     ))}
                 </div>
                 <div className='col-span-3'>

diff --git a/client/src/components/Lobby.tsx b/client/src/components/Lobby.tsx
@@ -24,13 +24,13 @@ function Lobby({sendJsonMessage, isHost, remainingIcons}: {sendJsonMessage: any,
                     {Object.keys(iconMap).map((iconName: string, idx:number) => {
                         if (remainingIcons.includes(iconName)) {
                             return (
-                                <div key={iconName+idx} className='hover:scale-110 duration-500' onClick={() => selectIcon(iconName)}> 
+                                <div key={iconName+idx} className='hover:scale-110 duration-500 p-2 md:p-4' onClick={() => selectIcon(iconName)}> 
                                     <PlayerIcon iconName={iconName}/>
                                 </div>
                             ) 
                         } else {
                         return  (
-                            <div key={iconName+idx} className='filter grayscale'> 
+                            <div key={iconName+idx} className='filter grayscale p-2 md:p-4'> 
                                 <PlayerIcon iconName={iconName}/>
                             </div>
                         )}

diff --git a/client/src/components/PlayerIcon.tsx b/client/src/components/PlayerIcon.tsx
@@ -15,17 +15,15 @@ export const iconMap:any = {
     cow: "cow.svg"
 }
 
-const PlayerIcon = ({iconName}: {iconName: string}) => {
+const PlayerIcon = ({iconName, customClass}: {iconName: string, customClass?: string}) => {
     if (!iconMap[iconName]) {
         return <></>
     }
 
     const icon = iconMap[iconName];
 
     return (
-        <div className="p-2 lg:p-4">
-            <img src={`./icons/${icon}`} alt={iconName}/>
-        </div>
+        <img src={`./icons/${icon}`} alt={iconName} className={customClass}/>
     )
 }