Changes to cabecera & sala

2026-09-28 10:09:26 +02:00
parent 03715d621e
commit 54b6b0d67b
8 changed files with 398 additions and 198 deletions
@@ -209,115 +209,89 @@ $.ajax({

 function mostrarSala(partida, equipos, jugadores) {

-const contenedor = $("#contenedorSalas");
+    const contenedor = $("#contenedorSalas");
+    let equiposHTML = "";

-let equiposHTML = "";
+    equipos.forEach(function (equipo) {

-equipos.forEach(function (equipo) {
-
-    const jugadoresEquipo = jugadores.filter(function (jugador) {
-
-        return jugador.idEquipo == equipo.idEquipo;
-
-    });
-
-    let jugadoresHTML = "";
-
-    if (jugadoresEquipo.length > 0) {
-
-        jugadoresEquipo.forEach(function (jugador) {
-
-            jugadoresHTML += `
-                <div class="jugador">
-
-                    <span class="avatar">
-                        👤
-                    </span>
-
-                    ${escapeHTML(jugador.nombreUsuario)}
-
-                </div>
-            `;
+        const jugadoresEquipo = jugadores.filter(function (jugador) {
+            return jugador.idEquipo == equipo.idEquipo;
        });

-    } else {
+        let jugadoresHTML = "";

-        jugadoresHTML = `
-            <div class="text-muted small">
-                Sin jugadores
+        if (jugadoresEquipo.length > 0) {
+            jugadoresEquipo.forEach(function (jugador) {
+                jugadoresHTML += `
+                    <div class="jugador">
+                        <span class="avatar">👤</span>
+                        ${escapeHTML(jugador.nombreUsuario)}
+                    </div>
+                `;
+            });
+        } else {
+            jugadoresHTML = `
+                <div class="text-muted small">Sin jugadores</div>
+            `;
+        }
+
+        let botonUnirseHTML = "";
+
+        if (!usuarioYaEstaEnEquipo) {
+            botonUnirseHTML = `
+                <button
+                    type="button"
+                    class="btn btn-unirse w-100 btn-unirse-equipo mt-2"
+                    data-id-partida="${partida.idPartida}"
+                    data-id-equipo="${equipo.idEquipo}">
+                    Unirse
+                </button>
+            `;
+        }
+
+        equiposHTML += `
+            <div class="equipo me-2 ms-2 p-3 border rounded">
+                <h6>${escapeHTML(equipo.nombreEquipo)}</h6>
+                <div class="jugadores mb-2">
+                    ${jugadoresHTML}
+                </div>
+                ${botonUnirseHTML}
+            </div>
+        `;
+    });
+
+    // Zona de acciones adicionales 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 botonUnirseHTML = "";
-
-    if (!usuarioYaEstaEnEquipo) {
-
-        botonUnirseHTML = `
-            <button
-                type="button"
-                class="btn btn-unirse w-100 btn-unirse-equipo"
-                data-id-partida="${partida.idPartida}"
-                data-id-equipo="${equipo.idEquipo}">
-
-                Unirse
-
-            </button>
-        `;
-    }
-
-
-    equiposHTML += `
-        <div class="equipo">
-
-            <h6>
-                ${escapeHTML(equipo.nombreEquipo)}
-            </h6>
-
-            <div class="jugadores">
-
-                ${jugadoresHTML}
-
+    const salaHTML = `
+        <div class="col-12 col-md-10 col-lg-8">
+            <div class="sala card p-3 shadow-sm">
+                <div class="sala-header h4 text-center mb-3">
+                    ${escapeHTML(partida.nombrePartida)}
+                </div>
+                <div class="sala-body">
+                    <div class="equipos d-flex justify-content-around">
+                        ${equiposHTML}
+                    </div>
+                    ${accionesSalaHTML}
+                </div>
            </div>
-
-            ${botonUnirseHTML}
-
        </div>
    `;
-});
-
-
-const salaHTML = `
-    <div class="col-12 col-md-10 col-lg-8">
-
-        <div class="sala">
-
-            <div class="sala-header">
-
-                ${escapeHTML(partida.nombrePartida)}
-
-            </div>
-
-            <div class="sala-body">
-
-                <div class="equipos">
-
-                    ${equiposHTML}
-
-                </div>
-
-            </div>
-
-        </div>
-
-    </div>
-`;
-
-
-contenedor.append(salaHTML);
-

+    contenedor.append(salaHTML);
 }

 // ======================================================
@@ -631,4 +605,43 @@ function () {
 }


-);
+);
+
+
+// ======================================================
+// ABANDONAR SALA
+// ======================================================
+$(document).on("click", ".btn-abandonar-sala", function () {
+    if (!confirm("¿Estás seguro de que deseas salir de esta sala?")) {
+        return;
+    }
+
+    const boton = $(this);
+    boton.prop("disabled", true).text("Saliendo...");
+
+    $.ajax({
+        url: "controladores/ControladorEquipoxUsuario.php",
+        type: "POST",
+        dataType: "json",
+        data: {
+            orden: "salirDeSala" // Asegúrate de procesar esta 'orden' en tu PHP
+        },
+        success: function (respuesta) {
+            if (respuesta.error) {
+                alert(respuesta.error);
+                boton.prop("disabled", false).text("Abandonar sala");
+                return;
+            }
+
+            // Restablecemos el estado y recargamos la lista completa de salas
+            usuarioYaEstaEnEquipo = false;
+            $("#contenedorCrearSala").show();
+            cargarSalas();
+        },
+        error: function (xhr, status, error) {
+            console.error("Error al salir de la sala:", error);
+            alert("No se pudo salir de la sala.");
+            boton.prop("disabled", false).text("Abandonar sala");
+        }
+    });
+});
@@ -1,26 +1,99 @@
+// Función de escape colocada arriba para evitar el ReferenceError
+function escapeHTML(str) {
+  return $("<div>").text(str ?? "").html();
+}
+
+// Comprobar estado de sesión al cargar la página
+$(document).ready(function () {
+  comprobarSesion();
+});
+
+
+// Comprobar estado de sesión al cargar la página
+function comprobarSesion() {
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: { orden: "comprobarSesion" },
+  }).done(function (respuesta) {
+    try {
+      if (typeof respuesta === "string") {
+        respuesta = JSON.parse(respuesta);
+      }
+      
+      const contenedor = $("#contenedorUsuarioCabecera");
+      contenedor.empty();
+
+      if (respuesta.activa && respuesta.usuario) {
+        // 1. Renderizar Menú de Usuario en la Cabecera
+        const htmlUsuario = `
+          <div class="dropdown">
+            <button class="btn user-dropdown-btn dropdown-toggle d-flex align-items-center gap-2"
+                    type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="fa-solid fa-circle-user fa-lg text-warning"></i>
+              <span>${escapeHTML(respuesta.usuario.nombreUsuario)}</span>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end user-dropdown-menu" aria-labelledby="userDropdown">
+              <li>
+                <a class="dropdown-item d-flex align-items-center gap-2" href="perfil.php">
+                  <i class="fa-solid fa-user text-primary"></i> Perfil
+                </a>
+              </li>
+              <li><hr class="dropdown-divider"></li>
+              <li>
+                <a class="dropdown-item logout-item d-flex align-items-center gap-2" href="#" id="botonCerrarSesion">
+                  <i class="fa-solid fa-right-from-bracket"></i> Cerrar Sesión
+                </a>
+              </li>
+            </ul>
+          </div>
+        `;
+        contenedor.html(htmlUsuario);
+
+        // 2. Muestra el botón JUGAR y ajusta columnas
+        $("#colBotonJugar").removeClass("d-none");
+        $("#colRanking").removeClass("col-lg-8").addClass("col-lg-7 col-xl-8");
+
+      } else {
+        // 1. Renderizar Botones de Invitado
+        const htmlInvitado = `
+          <button type="button" class="btn btn-kahoot-login rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalLogin">
+            <i class="fa-solid fa-right-to-bracket me-1"></i> Iniciar Sesión
+          </button>
+          <button type="button" class="btn btn-kahoot-register rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalRegistro">
+            <i class="fa-solid fa-user-plus me-1"></i> Registrarse
+          </button>
+        `;
+        contenedor.html(htmlInvitado);
+
+        // 2. Ocultar el botón JUGAR y expandir ranking
+        $("#colBotonJugar").addClass("d-none");
+        $("#colRanking").removeClass("col-lg-7 col-xl-8").addClass("col-lg-8");
+      }
+    } catch (e) {
+      console.error("Error al procesar la respuesta de la sesión:", e);
+    }
+  });
+}
+
 // Registro
 $("#botonAceptarRegistro").click(function (event) {
  event.preventDefault();
-  console.log("hola");
  let nombreUsuario = $("#regNombre").val().trim();
  let email = $("#regEmail").val().trim();
  let contrasena = $("#regPassword").val();
  let contrasenaConfirmacion = $("#regPasswordConfirm").val();

-  // Limpiamos errores anteriores
  $("#regNombre").removeClass("is-invalid");
  $("#regEmail").removeClass("is-invalid");
  $("#regPassword").removeClass("is-invalid");
  $("#regPasswordConfirm").removeClass("is-invalid");
  $("#errorRegistro").text("");

-  // Comprobamos que las contraseñas coincidan
  if (contrasena !== contrasenaConfirmacion) {
    $("#regPassword").addClass("is-invalid");
    $("#regPasswordConfirm").addClass("is-invalid");
-
    $("#errorRegistro").text("Las contraseñas no coinciden.");
-
    return;
  }

@@ -34,30 +107,25 @@ $("#botonAceptarRegistro").click(function (event) {
      orden: "registrarUsuario",
    },
  }).done(function (respuesta) {
-    //console.log(respuesta);
-    respuesta = JSON.parse(respuesta);
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
    if (respuesta.error) {
      $("#errorRegistro").text(respuesta.error);
-
-      // Marcamos los campos si hay error
      $("#regNombre").addClass("is-invalid");
      $("#regEmail").addClass("is-invalid");
    } else {
-      // Registro correcto
      $("#errorRegistro")
        .removeClass("text-danger")
        .addClass("text-success")
        .text(respuesta.exito);

-      // Limpiamos formulario
      $("#formRegistro")[0].reset();

-      // Cerramos modal después de un segundo
      setTimeout(function () {
        location.reload();
      }, 1000);
    }
-  }); // Fin función ajax
+  });
 });

 // Login
@@ -67,23 +135,14 @@ $("#botonAceptarLogin").click(function (event) {
  let email = $("#loginEmail").val().trim();
  let contrasena = $("#loginPassword").val();

-  // Limpiamos errores anteriores
  $("#loginEmail").removeClass("is-invalid");
  $("#loginPassword").removeClass("is-invalid");
  $("#errorLogin").text("");

-  // Comprobación básica
  if (email === "" || contrasena === "") {
    $("#errorLogin").text("Todos los campos son obligatorios.");
-
-    if (email === "") {
-      $("#loginEmail").addClass("is-invalid");
-    }
-
-    if (contrasena === "") {
-      $("#loginPassword").addClass("is-invalid");
-    }
-
+    if (email === "") $("#loginEmail").addClass("is-invalid");
+    if (contrasena === "") $("#loginPassword").addClass("is-invalid");
    return;
  }

@@ -96,38 +155,145 @@ $("#botonAceptarLogin").click(function (event) {
      orden: "comprobarUsuario",
    },
  }).done(function (respuesta) {
-    //console.log(respuesta);
-    respuesta = JSON.parse(respuesta);
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
    if (respuesta.error) {
      $("#loginEmail").addClass("is-invalid");
      $("#loginPassword").addClass("is-invalid");
-
      $("#errorLogin").text(respuesta.error);
    } else {
      location.reload();
    }
-  }); // Fin función ajax
+  });
 });

 // Cerrar sesión
-$("#botonCerrarSesion").click(function (event) {
+$(document).on("click", "#botonCerrarSesion", function (event) {
  event.preventDefault();

  $.ajax({
    method: "POST",
    url: "controladores/controladorUsuario.php",
-    data: {
-      orden: "cerrarSesion",
-    },
+    data: { orden: "cerrarSesion" },
  }).done(function (respuesta) {
-    //console.log(respuesta);
-    respuesta = JSON.parse(respuesta);
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
    if (respuesta.error) {
      console.log(respuesta.error);
    } else {
-      // Sesión cerrada correctamente
-      window.location.href = 'index.php';
-
+      window.location.href = "index.php";
    }
-  }); // Fin función ajax
-}); // Fin función click
+  });
+});
+
+// Registro
+$("#botonAceptarRegistro").click(function (event) {
+  event.preventDefault();
+  let nombreUsuario = $("#regNombre").val().trim();
+  let email = $("#regEmail").val().trim();
+  let contrasena = $("#regPassword").val();
+  let contrasenaConfirmacion = $("#regPasswordConfirm").val();
+
+  $("#regNombre").removeClass("is-invalid");
+  $("#regEmail").removeClass("is-invalid");
+  $("#regPassword").removeClass("is-invalid");
+  $("#regPasswordConfirm").removeClass("is-invalid");
+  $("#errorRegistro").text("");
+
+  if (contrasena !== contrasenaConfirmacion) {
+    $("#regPassword").addClass("is-invalid");
+    $("#regPasswordConfirm").addClass("is-invalid");
+    $("#errorRegistro").text("Las contraseñas no coinciden.");
+    return;
+  }
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      nombreUsuario: nombreUsuario,
+      email: email,
+      contrasena: contrasena,
+      orden: "registrarUsuario",
+    },
+  }).done(function (respuesta) {
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
+    if (respuesta.error) {
+      $("#errorRegistro").text(respuesta.error);
+      $("#regNombre").addClass("is-invalid");
+      $("#regEmail").addClass("is-invalid");
+    } else {
+      $("#errorRegistro")
+        .removeClass("text-danger")
+        .addClass("text-success")
+        .text(respuesta.exito);
+
+      $("#formRegistro")[0].reset();
+
+      setTimeout(function () {
+        location.reload();
+      }, 1000);
+    }
+  });
+});
+
+// Login
+$("#botonAceptarLogin").click(function (event) {
+  event.preventDefault();
+
+  let email = $("#loginEmail").val().trim();
+  let contrasena = $("#loginPassword").val();
+
+  $("#loginEmail").removeClass("is-invalid");
+  $("#loginPassword").removeClass("is-invalid");
+  $("#errorLogin").text("");
+
+  if (email === "" || contrasena === "") {
+    $("#errorLogin").text("Todos los campos son obligatorios.");
+    if (email === "") $("#loginEmail").addClass("is-invalid");
+    if (contrasena === "") $("#loginPassword").addClass("is-invalid");
+    return;
+  }
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      email: email,
+      contrasena: contrasena,
+      orden: "comprobarUsuario",
+    },
+  }).done(function (respuesta) {
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
+    if (respuesta.error) {
+      $("#loginEmail").addClass("is-invalid");
+      $("#loginPassword").addClass("is-invalid");
+      $("#errorLogin").text(respuesta.error);
+    } else {
+      location.reload();
+    }
+  });
+});
+
+// Cerrar sesión (Usa delegación de eventos por si el botón se crea dinámicamente)
+$(document).on("click", "#botonCerrarSesion", function (event) {
+  event.preventDefault();
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: { orden: "cerrarSesion" },
+  }).done(function (respuesta) {
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
+    if (respuesta.error) {
+      console.log(respuesta.error);
+    } else {
+      window.location.href = "index.php";
+    }
+  });
+});
+
+