Generated Avatar for bots and players (single player)

Arquisoft · Mar 31, 2024 · 135c611 · 135c611
1 parent 8b5e994
commit 135c611
Showing 1 changed file with 26 additions and 8 deletions.
diff --git a/webapp/src/components/game/LobbyGame.tsx b/webapp/src/components/game/LobbyGame.tsx
@@ -27,14 +27,32 @@ const LobbyGame: FC<LobbyGameProps> = ({setPlayers, players, setCurrentStage, is
   return (
     <div className='lobby-container'>
       <h2 className='lobby-title'>Lobby</h2>
-      {players.map((player, index) => (
-        <div key={player.username} className='player-item'>
-          <p>Name: {player.username}</p>
-          <p>Total points: {player.points}</p>
-          {player.isBot && <button onClick={() => deletePlayer(index)} className="delete-button">Delete</button>}
-          {!player.isBot && <button onClick={() => deletePlayer(index)} className="delete-button" disabled>Delete</button>}
-        </div>
-      ))}
+      <table>
+  <thead>
+    <tr>
+      <th scope="col" id="playerAvatar"></th>
+      <th scope="col" id="playerUsername">Username</th>
+      <th scope="col" id="playerPoints">Total points</th>
+      <th scope="col" id="playerBotOptions"></th>
+    </tr>
+  </thead>
+  <tbody>
+    {players.map((player, index) => (
+      <tr key={player.username} className='player-item'>
+        <td headers='playerAvatar'><img src={"https://robohash.org/"+player.username+".png"} alt={player.username} /></td>
+        <td headers='playerUsername'>{player.username}</td>
+        <td headers='playerPoints'>Total points: {player.points}</td>
+        <td headers='playerBotOptions'>
+          {player.isBot ? (
+            <button onClick={() => deletePlayer(index)} className="delete-button">Delete</button>
+          ) : (
+            <button className="delete-button" disabled>Delete</button>
+          )}
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>
       <div className='button-container'>
         <button disabled={players.length === 4} onClick={addBotPlayer} className="add-bot-button">
           Add Bot Player