scss for LobbyGame

Arquisoft · Mar 31, 2024 · 6b1d2c1 · 6b1d2c1
1 parent 135c611
commit 6b1d2c1
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 57 deletions.
diff --git a/webapp/src/components/game/LobbyGame.css b/webapp/src/components/game/LobbyGame.css
@@ -1,14 +1,9 @@
-.lobby-container {
-    border: 1px solid #ccc;
-    padding: 20px;
-    border-radius: 5px;
-  }
+
+
+
+/** Deprecated**/
+
 
-  .lobby-title {
-    font-size: 24px;
-    font-weight: bold;
-    margin-bottom: 15px;
-  }
 
   .player-item {
     display: flex;
@@ -19,53 +14,7 @@
     padding: 10px;
   }
 
-  .add-bot-button {
-    background-color: #4CAF50; 
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer; 
-    margin-top: 10px; 
-  }
 
-  .add-bot-button:disabled {
-    opacity: 0.5; 
-    cursor: default; 
-  }
 
-  .delete-button {
-    background-color: #f44336;
-    color: white;
-    padding: 5px 10px;
-    border: none;
-    border-radius: 3px;
-    cursor: pointer;
-    margin-left: 10px; 
-  }
 
-  .delete-button:hover {
-    opacity: 0.8;
-  }
-
-  .button-container {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .start-game-button {
-    background-color: #007bff; 
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer; 
-    margin-left: 10px;
-  }
-
-  .start-game-button:disabled {
-    background-color: #cccccc; /* Change background color for disabled state */
-    color: #666666; /* Change text color for disabled state */
-    cursor: not-allowed; /* Change cursor for disabled state */
-  }
 
diff --git a/webapp/src/components/game/LobbyGame.scss b/webapp/src/components/game/LobbyGame.scss
@@ -0,0 +1,90 @@
+table {
+    width: 100%;
+    border-collapse: collapse;
+
+    th, td {
+      padding: 8px;
+      text-align: center;
+    }
+
+    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
+    }
+  }
+
+  .lobby-title {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+
+  .add-bot-button {
+    background-color: #4CAF50; 
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer; 
+    margin-top: 10px; 
+  }
+
+  .add-bot-button:disabled {
+    opacity: 0.5; 
+    cursor: default; 
+  }
+
+  .delete-button {
+    background-color: #f44336;
+    color: white;
+    padding: 5px 10px;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    margin-left: 10px; 
+  }
+
+  .delete-button:hover {
+    opacity: 0.8;
+  }
+
+  .button-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .start-game-button {
+    background-color: #007bff; 
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer; 
+    margin-left: 10px;
+  }
+
+  .start-game-button:disabled {
+    background-color: #cccccc; /* Change background color for disabled state */
+    color: #666666; /* Change text color for disabled state */
+    cursor: not-allowed; /* Change cursor for disabled state */
+  }
+
+  .lobby-container {
+    border: 1px solid #ccc;
+    padding: 20px;
+    border-radius: 5px;
+  }
+
+
diff --git a/webapp/src/components/game/LobbyGame.tsx b/webapp/src/components/game/LobbyGame.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { Player } from './GameSinglePlayer';
-import './LobbyGame.css';
+import './LobbyGame.scss';
 
 interface LobbyGameProps {
   setPlayers: (players:Player[]) => void;