Funcionalidades del host

js/buscadorSala.js

@@ -123,12 +123,24 @@ function mostrarSala(partida, equipos, jugadores) {
     let jugadoresHTML = "";
     if (jugadoresEquipo.length > 0) {
       jugadoresEquipo.forEach(function (jugador) {
+        const esHost = jugador.idUsuario == partida.idUsuario;
+
         jugadoresHTML += `
-          <div class="jugador">
-            <span class="avatar">👤</span>
-            ${escapeHTML(jugador.nombreUsuario)}
-          </div>
-        `;
+    <div class="jugador d-flex align-items-center justify-content-between ${
+      esHost ? "jugador-host" : ""
+    }">
+      <div>
+        <span class="avatar">${esHost ? "👑" : "👤"}</span>
+        ${escapeHTML(jugador.nombreUsuario)}
+      </div>
+
+      ${
+        esHost
+          ? `<span class="badge bg-warning text-dark ms-2">HOST</span>`
+          : ""
+      }
+    </div>
+  `;
       });
     } else {
       jugadoresHTML = `<div class="text-muted small">Sin jugadores</div>`;
@@ -157,19 +169,36 @@ function mostrarSala(partida, equipos, jugadores) {
     `;
   });
 
+  // Acciones disponibles si el usuario YA ESTÁ dentro de esta sala
   // Acciones disponibles si el usuario YA ESTÁ dentro de esta sala
   let accionesSalaHTML = "";
+
   if (usuarioYaEstaEnEquipo) {
-    accionesSalaHTML = `
-      <div class="sala-acciones text-center mt-4 pt-3 border-top d-flex justify-content-center gap-3">
-        <button type="button" class="btn btn-outline-danger btn-abandonar-sala" data-id-partida="${partida.idPartida}">
-          Abandonar sala
-        </button>
-        <a href="juego.php?idPartida=${partida.idPartida}" class="btn btn-success btn-lg px-4">
-          🎮 ¡Iniciar Partida!
-        </a>
-      </div>
+    let botonIniciarHTML = "";
+
+    // Solo el host puede iniciar la partida
+    if (partida.idUsuario == idUsuarioSesion) {
+      botonIniciarHTML = `
+      <a href="juego.php?idPartida=${partida.idPartida}" 
+         class="btn btn-success btn-lg px-4">
+        🎮 ¡Iniciar Partida!
+      </a>
     `;
+    }
+
+    accionesSalaHTML = `
+    <div class="sala-acciones text-center mt-4 pt-3 border-top d-flex justify-content-center gap-3">
+
+      <button type="button" 
+              class="btn btn-outline-danger btn-abandonar-sala" 
+              data-id-partida="${partida.idPartida}">
+        Abandonar sala
+      </button>
+
+      ${botonIniciarHTML}
+
+    </div>
+  `;
   }
 
   const salaHTML = `
@@ -234,13 +263,15 @@ let botonAbandonarReferencia = null;
 // A. Al hacer clic en el botón "Abandonar sala" de la tarjeta, abrimos el modal
 $(document).on("click", ".btn-abandonar-sala", function () {
   botonAbandonarReferencia = $(this);
-  const modal = new bootstrap.Modal(document.getElementById('modalAbandonarSala'));
+  const modal = new bootstrap.Modal(
+    document.getElementById("modalAbandonarSala"),
+  );
   modal.show();
 });
 
 // B. Al hacer clic en "Sí, salir" dentro del modal Kahoot
 $(document).on("click", "#btnConfirmarAbandonar", function () {
-  const modalEl = document.getElementById('modalAbandonarSala');
+  const modalEl = document.getElementById("modalAbandonarSala");
   const modalInstance = bootstrap.Modal.getInstance(modalEl);
 
   const btnConfirmar = $(this);
@@ -253,7 +284,7 @@ $(document).on("click", "#btnConfirmarAbandonar", function () {
     data: { orden: "salirDeSala" },
     success: function (respuesta) {
       btnConfirmar.prop("disabled", false).text("Sí, salir");
-      
+
       if (modalInstance) {
         modalInstance.hide();
       }
@@ -275,7 +306,7 @@ $(document).on("click", "#btnConfirmarAbandonar", function () {
       if (modalInstance) {
         modalInstance.hide();
       }
-    }
+    },
   });
 });
 // 8. Evento: Crear Sala