mejoras en el diseño

fedecarboni7 · Jul 25, 2024 · aece52a · aece52a
1 parent 19fccee
commit aece52a
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 16 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,4 +10,7 @@ venv/
 *.db
 
 # VSCode
-.vscode
+.vscode
+
+# IDX
+.idx
diff --git a/static/css/style.css b/static/css/style.css
@@ -41,6 +41,7 @@ a.logout-link:hover {
     border: 1px solid #444;
     border-radius: 8px;
     background-color: #2b2b2b;
+    position: relative;
 }
 
 .player-header {
@@ -62,6 +63,7 @@ a.logout-link:hover {
     color: #fff;
     font-size: initial;
     margin-right: 5px;
+    max-width: calc(100% - 180px);
 }
 
 .player-header input[type="checkbox"] {
@@ -139,16 +141,22 @@ a.logout-link:hover {
 }
 
 .delete-button {
-    background-color: #a21508;
-    padding: 10px;
+    background-color: transparent;
+    border: none;
+    color: #cbcbcb;
+    cursor: pointer;
+    font-size: 16px;
+    position: absolute;
+    top: 9px;
+    right: 0px;
 }
 
 .delete-button:hover {
-    background-color: #901308;
+    color: #e44e41;
 }
 
 .reset-button {
-    background-color: #a21508;
+    background-color: #9f1f14;
 }
 
 .reset-button:hover {

diff --git a/static/js/script.js b/static/js/script.js
@@ -19,7 +19,7 @@ function addPlayer() {
 
     // Nombre del jugador
     const nameLabel = document.createElement("label");
-    nameLabel.textContent = "Nombre del jugador " + (playerCount + 1) + ":";
+    nameLabel.textContent = "Jugador " + (playerCount + 1) + ":";
     playerHeader.appendChild(nameLabel);
 
     const nameInput = document.createElement("input");
@@ -81,9 +81,15 @@ function addPlayer() {
     const deleteButton = document.createElement("button");
     deleteButton.className = "delete-button";
     deleteButton.type = "button";
-    deleteButton.textContent = "Eliminar";
+
+    const trashIcon = document.createElement("i");
+    trashIcon.className = "fas fa-trash-alt";
+
+    deleteButton.appendChild(trashIcon);
+
     deleteButton.addEventListener("click", function() {
         container.removeChild(playerDiv);
+        renumerarJugadores();
     });
     playerDiv.appendChild(deleteButton);
 
@@ -92,9 +98,23 @@ function addPlayer() {
     updateSelectedCount();
 }
 
+function renumerarJugadores() {
+    const container = document.getElementById("players-container");
+    const jugadores = container.children;
+    for (let i = 0; i < jugadores.length; i++) {
+      const jugador = jugadores[i];
+      const label = jugador.querySelector(".player-header label");
+      label.textContent = "Jugador " + (i + 1) + ":";
+      // Actualizar el valor del checkbox (opcional, si lo usas para algo)
+      const checkbox = jugador.querySelector(".player-header input[type='checkbox']");
+      if (checkbox) {
+        checkbox.value = i;
+      }
+    }
+}
 
 function deletePlayer(playerId) {
-    if (confirm("¿Estás seguro de que quieres eliminar este jugador?")) {
+    if (confirm("¿Estás seguro de que querés eliminar este jugador?")) {
         fetch(`/player/${playerId}`, { method: 'DELETE' })
             .then(response => response.json())
             .then(data => {
@@ -108,7 +128,7 @@ function deletePlayer(playerId) {
 }
 
 function reset() {
-    if (confirm("¿Estás seguro de que quieres restablecer los datos?")) {
+    if (confirm("¿Estás seguro de que querés restablecer los datos?")) {
         fetch('/reset')
             .then(response => response.json())
             .then(data => {

diff --git a/templates/index.html b/templates/index.html
@@ -9,6 +9,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="../static/favicon/favicon-16x16.png">
     <link rel="manifest" href="../static/favicon/site.webmanifest">
     <link rel="stylesheet" type="text/css" href="/static/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <script src="static/js/script.js"></script>
 </head>
 <body>
@@ -19,8 +20,11 @@ <h1>Armar Equipos</h1>
             <div class="player-entry">
                 <div class="player-header">
                     <input type="checkbox" name="selectedPlayers" value="{{ player.id }}">
-                    <label>Nombre:</label>
+                    <label>Jugador {{ loop.index }}:</label>
                     <input type="text" name="names" value="{{ player.name }}" required>
+                    <button class="delete-button" type="button" onclick="deletePlayer('{{ player.id }}')">
+                        <i class="fas fa-trash-alt"></i>
+                    </button>
                 </div>
                 <div class="player-score">
                     <span>Puntaje total: {{ player.total_score }}</span>
@@ -66,24 +70,22 @@ <h1>Armar Equipos</h1>
                         </div>
                     </div>
                 </div>
-                <button class="delete-button" type="button" onclick="deletePlayer('{{ player.id }}')">Eliminar</button>
-            </div>            
+            </div>
             {% endfor %}
         </div>
         <button type="button" onclick="addPlayer()">Agregar jugador</button>
         <button type="button" id="toggle-select-button" onclick="toggleSelectPlayers()">Seleccionar todos los jugadores</button>
         <button type="submit" id="submitBtn">Calcular</button>
     </form>
-    <button class="reset-button" type="button" onclick="reset()">Restablecer jugadores</button>
+    <button class="reset-button" type="button" onclick="reset()">Borrar a todos</button>
     <br>
     <a href="/logout" class="logout-link">Cerrar sesión</a>
 
-    {% if min_difference %}
+    {% if teams %}
         <h3>Diferencia mínima de habilidades: {{ min_difference }}</h3>
         <h3>Diferencia mínima encontrada: {{ min_difference_total }}</h3>
-    {% endif %}
+        <h3>Combinaciones encontradas: {{ len_teams // 2 }}</h3>
 
-    {% if teams %}
         {% for i in range(0, len_teams - 1, 2) %}
             {% if len_teams > 2 %}
                 <p>Opción {{ i // 2 + 1 }}</p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,4 +10,7 @@ venv/ @@
     *.db
     # VSCode
-    .vscode
+    .vscode
+    # IDX
+    .idx