fix styles single player

Arquisoft · Apr 3, 2024 · 798bfc9 · 798bfc9
1 parent f18d0ea
commit 798bfc9
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 20 deletions.
diff --git a/webapp/src/components/game/LobbyGame.scss b/webapp/src/components/game/LobbyGame.scss
@@ -1,28 +1,37 @@
 table {
     width: 100%;
     border-collapse: collapse;
+    border:none;
 
     th, td {
       padding: 8px;
       text-align: center;
+      border:none;
     }
-
+  /*
     tr:nth-child(even) {
       background-color: #f2f2f2;
-    }
-
+    }*/
+    /*
     &:hover {
       tr {
         background-color: #ddd;
       }
-    }
+    }*/
 
-    img {
-      max-width: 100px; // Cambia el tamaño máximo de la imagen según sea necesario
-      height: auto;
-      display: block;
-      margin: 0 auto; // Centra la imagen horizontalmente
-    }
+
+  }
+
+  .player-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+  }
+
+  img {
+    max-width: 100px; // Cambia el tamaño máximo de la imagen según sea necesario
+    height: auto;
+    display: block;
   }
 
   .lobby-title {

diff --git a/webapp/src/components/game/singleplayer/LobbyGameSinglePlayer.tsx b/webapp/src/components/game/singleplayer/LobbyGameSinglePlayer.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useRef } from 'react'
 import { Player } from './GameSinglePlayer';
 import '../LobbyGame.scss';
 
@@ -11,10 +11,21 @@ interface LobbyGameProps {
 
 const LobbyGame: FC<LobbyGameProps> = ({setPlayers, players, setCurrentStage, isFetched}) => {
 
+  function* botCounter(){
+    let count=0;
+    while(true){
+      count++;
+      yield count;
+    }
+
+  };
+  const botGen = useRef(botCounter()); // Assign the function to the variable
+
   const addBotPlayer = () => {
     if (players.length < 4) { 
 
-      setPlayers([...players, { username: `Bot ${players.length + 1}`, points: 0, isBot: true }]);
+      setPlayers([...players, { username: `Bot ${botGen.current.next().value}`,
+      points: 0, isBot: true }]);
     }
   };
 
@@ -26,15 +37,22 @@ 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>}
+      <h2 className='lobby-title'>Lobby - Single player</h2>
+        <div>
+          {players.map((player, index) => (
+            <div key={player.username} className='player-item'>
+              <img src={"https://robohash.org/"+player.username+".png"} alt={player.username} />
+              <p>{player.username}</p>
+              <p>Total points: {player.points}</p>
+              {!player.isBot && (
+                <button className="delete-button" disabled>Delete</button>
+              )}
+              {player.isBot && (
+                <button onClick={() => deletePlayer(index)} className="delete-button">Delete</button>
+              )}
+            </div>
+          ))}
         </div>
-      ))}
       <div className='button-container'>
         <button disabled={players.length === 4} onClick={addBotPlayer} className="add-bot-button">
           Add Bot Player