Add unirse a sala completo

buscadorSala.php

@@ -23,7 +23,8 @@
 
     <main class="container py-5">
 
-        <div class="text-center mb-5">
+        <div id="contenedorCrearSala" class="text-center mb-5">
+
 
             <button
                 type="button"

clases/ClaseEquipoxUsuario.php

@@ -2,18 +2,21 @@
 require_once __DIR__ . '/../includes/conexionBD.php';
 
 
-class EquipoxUsuario {
+class EquipoxUsuario
+{
     public $idEquipoxUsuario;
     public $idUsuario;
     public $idEquipo;
 
-    public function __construct($idEquipoxUsuario = null, $idUsuario = null, $idEquipo = null) {
+    public function __construct($idEquipoxUsuario = null, $idUsuario = null, $idEquipo = null)
+    {
         $this->idEquipoxUsuario = $idEquipoxUsuario;
         $this->idUsuario = $idUsuario;
         $this->idEquipo = $idEquipo;
     }
 
-    public function registrarUsuarioEnEquipo() {
+    public function registrarUsuarioEnEquipo()
+    {
         $conexion = conexionBD();
         if (is_array($conexion)) return $conexion;
 
@@ -36,7 +39,8 @@ class EquipoxUsuario {
         }
     }
 
-    public static function listarUsuariosPorEquipo($idEquipo) {
+    public static function listarUsuariosPorEquipo($idEquipo)
+    {
         $conexion = conexionBD();
         if (is_array($conexion)) return $conexion;
 
@@ -56,4 +60,62 @@ class EquipoxUsuario {
             ];
         }
     }
+    public function obtenerSalaUsuario($idUsuario)
+{
+    $conexion = conexionBD();
+
+    if (is_array($conexion)) {
+        return $conexion;
+    }
+
+    try {
+
+        $sql = "
+            SELECT
+                exu.idEquipo,
+                exp.idPartida
+            FROM equipoxusuario exu
+
+            INNER JOIN equipoxpartida exp
+                ON exu.idEquipo = exp.idEquipo
+
+            WHERE exu.idUsuario = :idUsuario
+
+            LIMIT 1
+        ";
+
+        $consulta = $conexion->prepare($sql);
+
+        $consulta->bindParam(
+            ':idUsuario',
+            $idUsuario,
+            PDO::PARAM_INT
+        );
+
+        $consulta->execute();
+
+        $resultado = $consulta->fetch(PDO::FETCH_ASSOC);
+
+        if (!$resultado) {
+
+            return [
+                'asociado' => false
+            ];
+        }
+
+        return [
+            'asociado' => true,
+            'idEquipo' => $resultado['idEquipo'],
+            'idPartida' => $resultado['idPartida']
+        ];
+
+    } catch (PDOException $error) {
+
+        return [
+            'error' => 'Ocurrió un error al obtener la sala del usuario.',
+            'error_tecnico' => $error->getMessage()
+        ];
+    }
+}
+
 }

controladores/ControladorEquipoxUsuario.php

@@ -4,29 +4,42 @@ session_start();
 
 require_once '../clases/ClaseEquipoxUsuario.php';
 
-switch($_POST['orden']){
+switch ($_POST['orden']) {
 
     case 'registrarUsuarioEnEquipo':
+
         if (!isset($_SESSION['idUsuario'])) {
+
             echo json_encode([
                 'error' => 'No hay una sesión activa de usuario. Por favor, inicie sesión.'
             ]);
+
             break;
         }
+
         $idUsuario = $_SESSION['idUsuario'];
+
         $idEquipo = intval($_POST['idEquipo'] ?? 0);
-        break;
+
         if ($idEquipo <= 0) {
+
             echo json_encode([
                 'error' => 'El ID del equipo proporcionado no es válido.'
             ]);
+
             break;
         }
-        $equipoxusuario = new EquipoxUsuario();
+
-        $resultado = $equipoxusuario->registrarUsuarioEnEquipo($idEquipo, $idUsuario);
+        $equipoxusuario = new EquipoxUsuario(
+            null,
+            $idUsuario,
+            $idEquipo
+        );
+        $resultado = $equipoxusuario->registrarUsuarioEnEquipo();
         echo json_encode($resultado);
         break;
 
+
     case 'listarUsuariosPorEquipo':
         $idEquipo = intval($_POST['idEquipo'] ?? 0);
 
@@ -36,12 +49,30 @@ switch($_POST['orden']){
         }
         $equipoxusuario = new EquipoxUsuario();
         $listado = $equipoxusuario->listarUsuariosPorEquipo($idEquipo);
-        break;
+        //break;
         echo json_encode($listado);
         break;
 
+    case 'obtenerSalaUsuario':
+
+    if (!isset($_SESSION['idUsuario'])) {
+
+        echo json_encode([
+            'error' => 'No hay una sesión activa de usuario.'
+        ]);
+
+        break;
+    }
+
+    $idUsuario = $_SESSION['idUsuario'];
+
+    $equipoxusuario = new EquipoxUsuario();
+
+    $resultado =
+        $equipoxusuario->obtenerSalaUsuario($idUsuario);
+
+    echo json_encode($resultado);
+
+    break;
 
 }
-
-
-?>

js/buscadorSala.js

@@ -1,352 +1,606 @@
+let usuarioYaEstaEnEquipo = false;
+
 $(document).ready(function () {
-  cargarSalas();
+comprobarSalaUsuario();
+});
 
-  function cargarSalas() {
+function comprobarSalaUsuario() {
-    $.ajax({
+
-      url: "controladores/controladorPartida.php",
+$("#cargandoSalas").remove();
-      type: "POST",
+
-      dataType: "json",
+$.ajax({
-      data: {
+    url: "controladores/ControladorEquipoxUsuario.php",
-        orden: "listar",
+    type: "POST",
-      },
+    dataType: "json",
+
+    data: {
+        orden: "obtenerSalaUsuario"
+    },
+
+    success: function (respuesta) {
+
+        console.log("Sala del usuario:", respuesta);
+
+        if (respuesta.error) {
+
+            console.error(respuesta.error);
+
+            usuarioYaEstaEnEquipo = false;
+
+            cargarSalas();
+
+            return;
+        }
+
+        if (respuesta.asociado) {
+
+            usuarioYaEstaEnEquipo = true;
+
+            $("#contenedorCrearSala").hide();
+
+            cargarSalaUsuario(respuesta.idPartida);
+
+        } else {
+
+            usuarioYaEstaEnEquipo = false;
+
+            cargarSalas();
+        }
+    },
+
+    error: function (xhr, status, error) {
+
+        console.error(
+            "Error al comprobar la sala del usuario:",
+            error
+        );
+
+        usuarioYaEstaEnEquipo = false;
+
+        cargarSalas();
+    }
+});
+
+
+}
+
+function cargarSalaUsuario(idPartida) {
+
+$.ajax({
+    url: "controladores/controladorPartida.php",
+    type: "POST",
+    dataType: "json",
+
+    data: {
+        orden: "buscar",
+        idPartida: idPartida
+    },
+
+    success: function (partida) {
+
+        if (partida.error) {
+
+            console.error(partida.error);
+
+            return;
+        }
+
+        $("#contenedorSalas").empty();
+
+        cargarInformacionSala(partida);
+    },
+
+    error: function (xhr, status, error) {
+
+        console.error(
+            "Error al obtener la sala del usuario:",
+            error
+        );
+    }
+});
+
+
+}
+
+function cargarSalas() {
+
+$.ajax({
+    url: "controladores/controladorPartida.php",
+    type: "POST",
+    dataType: "json",
+
+    data: {
+        orden: "listar"
+    },
+
+    success: function (partidas) {
 
-      success: function (partidas) {
         const contenedor = $("#contenedorSalas");
 
+        contenedor.empty();
         contenedor.empty();
 
         if (!Array.isArray(partidas) || partidas.length === 0) {
-          contenedor.html(`
-                        <div class="col-12 text-center">
-                            <p class="text-muted">
-                                No hay salas disponibles.
-                            </p>
-                        </div>
-                    `);
 
-          return;
+            contenedor.html(`
+                <div class="col-12 text-center">
+                    <p class="text-muted">
+                        No hay salas disponibles.
+                    </p>
+                </div>
+            `);
+
+            return;
         }
 
         partidas.forEach(function (partida) {
-          cargarInformacionSala(partida);
+
+            cargarInformacionSala(partida);
+
         });
-      },
+    },
 
-      error: function (xhr, status, error) {
+    error: function (xhr, status, error) {
-        console.error("Error al obtener las partidas:", error);
-      },
-    });
-  }
 
-  function cargarInformacionSala(partida) {
+        console.error(
-    $.ajax({
+            "Error al obtener las partidas:",
-      url: "controladores/controladorPartida.php",
+            error
-      type: "POST",
+        );
-      dataType: "json",
+    }
+});
 
-      data: {
+
+}
+
+function cargarInformacionSala(partida) {
+
+$.ajax({
+    url: "controladores/controladorPartida.php",
+    type: "POST",
+    dataType: "json",
+
+    data: {
         orden: "getEquipos",
-        idPartida: partida.idPartida,
+        idPartida: partida.idPartida
-      },
+    },
+
+    success: function (equipos) {
 
-      success: function (equipos) {
         $.ajax({
-          url: "controladores/controladorPartida.php",
+            url: "controladores/controladorPartida.php",
-          type: "POST",
+            type: "POST",
-          dataType: "json",
+            dataType: "json",
 
-          data: {
+            data: {
-            orden: "getJugadores",
+                orden: "getJugadores",
-            idPartida: partida.idPartida,
+                idPartida: partida.idPartida
-          },
+            },
 
-          success: function (jugadores) {
+            success: function (jugadores) {
-            mostrarSala(partida, equipos, jugadores);
-          },
 
-          error: function (xhr, status, error) {
+                mostrarSala(
-            console.error("Error al obtener jugadores:", error);
+                    partida,
-          },
+                    equipos,
+                    jugadores
+                );
+            },
+
+            error: function (xhr, status, error) {
+
+                console.error(
+                    "Error al obtener jugadores:",
+                    error
+                );
+            }
         });
-      },
+    },
 
-      error: function (xhr, status, error) {
+    error: function (xhr, status, error) {
-        console.error("Error al obtener equipos:", error);
-      },
-    });
-  }
 
-  function mostrarSala(partida, equipos, jugadores) {
+        console.error(
-    const contenedor = $("#contenedorSalas");
+            "Error al obtener equipos:",
+            error
+        );
+    }
+});
 
-    let equiposHTML = "";
 
-    equipos.forEach(function (equipo) {
+}
-      const jugadoresEquipo = jugadores.filter(function (jugador) {
+
+function mostrarSala(partida, equipos, jugadores) {
+
+const contenedor = $("#contenedorSalas");
+
+let equiposHTML = "";
+
+equipos.forEach(function (equipo) {
+
+    const jugadoresEquipo = jugadores.filter(function (jugador) {
+
         return jugador.idEquipo == equipo.idEquipo;
-      });
 
-      let jugadoresHTML = "";
+    });
+
+    let jugadoresHTML = "";
+
+    if (jugadoresEquipo.length > 0) {
 
-      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>
-                `;
-      }
 
-      equiposHTML += `
+            jugadoresHTML += `
+                <div class="jugador">
 
-                <div class="equipo">
+                    <span class="avatar">
+                        👤
+                    </span>
 
-                    <h6>
+                    ${escapeHTML(jugador.nombreUsuario)}
-                        ${escapeHTML(equipo.nombreEquipo)}
-                    </h6>
-
-                    <div class="jugadores">
-
-                        ${jugadoresHTML}
-
-                    </div>
-
-                    <button
-                        type="button"
-                        class="btn btn-unirse w-100 btn-unirse-equipo"
-                        data-id-partida="${partida.idPartida}"
-                        data-id-equipo="${equipo.idEquipo}">
-
-                        Unirse
-
-                    </button>
 
                 </div>
-
             `;
-    });
+        });
 
-    const salaHTML = `
+    } else {
 
-            <div class="col-12 col-md-10 col-lg-8">
+        jugadoresHTML = `
+            <div class="text-muted small">
+                Sin jugadores
+            </div>
+        `;
+    }
 
-                <div class="sala">
 
-                    <div class="sala-header">
+    let botonUnirseHTML = "";
 
-                        ${escapeHTML(partida.nombrePartida)}
+    if (!usuarioYaEstaEnEquipo) {
 
-                    </div>
+        botonUnirseHTML = `
+            <button
+                type="button"
+                class="btn btn-unirse w-100 btn-unirse-equipo"
+                data-id-partida="${partida.idPartida}"
+                data-id-equipo="${equipo.idEquipo}">
 
-                    <div class="sala-body">
+                Unirse
 
-                        <div class="equipos">
+            </button>
+        `;
+    }
 
-                            ${equiposHTML}
 
-                        </div>
+    equiposHTML += `
+        <div class="equipo">
 
-                    </div>
+            <h6>
+                ${escapeHTML(equipo.nombreEquipo)}
+            </h6>
+
+            <div class="jugadores">
+
+                ${jugadoresHTML}
+
+            </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>
 
-    contenedor.append(salaHTML);
+    </div>
-  }
+`;
+
+
+contenedor.append(salaHTML);
+
+
+}
+
+// ======================================================
+// UNIRSE A UN EQUIPO
+// ======================================================
+
+$(document).on(
+"click",
+".btn-unirse-equipo",
+function () {
 
-  $(document).on("click", ".btn-unirse-equipo", function () {
     const boton = $(this);
 
+    const idEquipo = boton.data("id-equipo");
+
     const idPartida = boton.data("id-partida");
 
-    const idEquipo = boton.data("id-equipo");
 
     boton.prop("disabled", true);
 
     boton.text("Uniéndose...");
 
+
     $.ajax({
-      url: "controladores/controladorPartida.php",
 
-      type: "POST",
+        url: "controladores/ControladorEquipoxUsuario.php",
 
-      dataType: "json",
+        type: "POST",
 
-      data: {
+        dataType: "json",
-        orden: "registrarEquipo",
 
-        idPartida: idPartida,
+        data: {
+            orden: "registrarUsuarioEnEquipo",
+            idEquipo: idEquipo
+        },
 
-        idEquipo: idEquipo,
-      },
 
-      success: function (respuesta) {
+        success: function (respuesta) {
-        if (respuesta.error) {
-          alert(respuesta.error);
 
-          boton.prop("disabled", false);
+            console.log(
+                "Respuesta al unirse:",
+                respuesta
+            );
 
-          boton.text("Unirse");
 
-          return;
+            if (respuesta.error) {
+
+                alert(respuesta.error);
+
+                boton.prop("disabled", false);
+
+                boton.text("Unirse");
+
+                return;
+            }
+
+
+            // ==========================================
+            // UNIÓN CORRECTA
+            // ==========================================
+
+            usuarioYaEstaEnEquipo = true;
+
+
+            // Ocultamos el botón "Crear sala"
+
+            $("#contenedorCrearSala").hide();
+
+
+            // Eliminamos las salas actuales
+
+            $("#contenedorSalas").empty();
+
+
+            // Cargamos directamente la sala
+            // donde acaba de entrar el usuario
+
+            cargarSalaUsuario(idPartida);
+        },
+
+
+        error: function (xhr, status, error) {
+
+            console.error(
+                "Error al unirse al equipo:",
+                error
+            );
+
+            console.error(
+                "Respuesta del servidor:",
+                xhr.responseText
+            );
+
+
+            alert(
+                "No se ha podido unir al equipo."
+            );
+
+
+            boton.prop("disabled", false);
+
+            boton.text("Unirse");
         }
-
-        cargarSalas();
-      },
-
-      error: function (xhr, status, error) {
-        console.error("Error al unirse al equipo:", error);
-
-        alert("No se ha podido unir al equipo.");
-
-        boton.prop("disabled", false);
-
-        boton.text("Unirse");
-      },
     });
-  });
+}
 
-  function escapeHTML(texto) {
-    return $("<div>")
-      .text(texto ?? "")
-      .html();
-  }
 
-  $("#btnCrearSala").on("click", function () {
+);
-    const nombreSala = $("#nombreSala").val().trim();
 
-    const nombreEquipo1 = $("#nombreEquipo1").val().trim();
+// ======================================================
+// ESCAPAR HTML
+// ======================================================
+
+function escapeHTML(texto) {
+
+return $("<div>")
+    .text(texto ?? "")
+    .html();
+
+
+}
+
+// ======================================================
+// CREAR SALA
+// ======================================================
+
+$("#btnCrearSala").on(
+"click",
+function () {
+
+    const nombreSala =
+        $("#nombreSala").val().trim();
+
+    const nombreEquipo1 =
+        $("#nombreEquipo1").val().trim();
+
+    const nombreEquipo2 =
+        $("#nombreEquipo2").val().trim();
 
-    const nombreEquipo2 = $("#nombreEquipo2").val().trim();
 
     let valido = true;
+    let valido = true;
+
 
     $(".mensaje-error-sala").remove();
 
-    $(".input-kahoot").removeClass("is-invalid");
+    $(".input-kahoot").removeClass(
+        "is-invalid"
+    );
+
 
     if (nombreSala === "") {
-      mostrarError("#nombreSala", "El nombre de la sala es obligatorio.");
 
-      valido = false;
+        mostrarError(
+            "#nombreSala",
+            "El nombre de la sala es obligatorio."
+        );
+
+        valido = false;
+
     } else if (nombreSala.length < 3) {
-      mostrarError(
-        "#nombreSala",
-        "El nombre de la sala debe tener al menos 3 caracteres.",
-      );
 
-      valido = false;
+        mostrarError(
+            "#nombreSala",
+            "El nombre de la sala debe tener al menos 3 caracteres."
+        );
+
+        valido = false;
     }
 
+
     if (nombreEquipo1 === "") {
-      mostrarError("#nombreEquipo1", "El nombre del equipo 1 es obligatorio.");
 
-      valido = false;
+        mostrarError(
+            "#nombreEquipo1",
+            "El nombre del equipo 1 es obligatorio."
+        );
+
+        valido = false;
+
     } else if (nombreEquipo1.length < 2) {
-      mostrarError(
-        "#nombreEquipo1",
-        "El nombre del equipo debe tener al menos 2 caracteres.",
-      );
 
-      valido = false;
+        mostrarError(
+            "#nombreEquipo1",
+            "El nombre del equipo debe tener al menos 2 caracteres."
+        );
+
+        valido = false;
     }
 
+
     if (nombreEquipo2 === "") {
-      mostrarError("#nombreEquipo2", "El nombre del equipo 2 es obligatorio.");
 
-      valido = false;
+        mostrarError(
+            "#nombreEquipo2",
+            "El nombre del equipo 2 es obligatorio."
+        );
+
+        valido = false;
+
     } else if (nombreEquipo2.length < 2) {
-      mostrarError(
-        "#nombreEquipo2",
-        "El nombre del equipo debe tener al menos 2 caracteres.",
-      );
 
-      valido = false;
+        mostrarError(
+            "#nombreEquipo2",
+            "El nombre del equipo debe tener al menos 2 caracteres."
+        );
+
+        valido = false;
     }
 
+
     if (
-      nombreEquipo1 !== "" &&
+        nombreEquipo1 !== "" &&
-      nombreEquipo2 !== "" &&
+        nombreEquipo2 !== "" &&
-      nombreEquipo1.toLowerCase() === nombreEquipo2.toLowerCase()
+        nombreEquipo1.toLowerCase() ===
+        nombreEquipo2.toLowerCase()
     ) {
-      mostrarError(
-        "#nombreEquipo2",
-        "Los dos equipos deben tener nombres diferentes.",
-      );
 
-      valido = false;
+        mostrarError(
+            "#nombreEquipo2",
+            "Los dos equipos deben tener nombres diferentes."
+        );
+
+        valido = false;
     }
 
+
     if (!valido) {
-      return;
+
+        return;
     }
 
-    // ==========================================
-    // AJAX
-    // ==========================================
 
-    $.ajax({
+    console.log("Datos válidos:");
-      method: "POST",
+
-      url: "controladores/controladorPartida.php",
+    console.log({
-      data: {
+        nombreSala: nombreSala,
-        nombrePartida: nombreSala,
         nombreEquipo1: nombreEquipo1,
-        nombreEquipo2: nombreEquipo2,
+        nombreEquipo2: nombreEquipo2
-        orden: "crear",
-      },
-    }).done(function (respuesta) {
-      console.log(respuesta);
-
-      respuesta = JSON.parse(respuesta);
-
-      if (respuesta.error) {
-        alert(respuesta.error);
-      } else {
-        console.log("Sala creada correctamente");
-        console.log("ID partida:", respuesta.idPartida);
-        console.log("ID equipo 1:", respuesta.idEquipo1);
-        console.log("ID equipo 2:", respuesta.idEquipo2);
-
-        // Cerramos el modal
-        $("#modalCrearSala").modal("hide");
-
-        // Aquí posteriormente podemos mandar al usuario
-        // a la página de la sala
-        //
-        // window.location.href =
-        //     'sala.php?id=' + respuesta.idPartida;
-      }
     });
-  });
+}
 
-  function mostrarError(selector, mensaje) {
-    const input = $(selector);
 
-    input.addClass("is-invalid");
+);
 
-    input.after(`
+// ======================================================
-            <div class="mensaje-error-sala text-danger mt-1 small">
+// MOSTRAR ERROR
-                ${mensaje}
+// ======================================================
-            </div>
-        `);
-  }
 
-  $(".input-kahoot").on("input", function () {
+function mostrarError(selector, mensaje) {
-    $(this).removeClass("is-invalid");
 
-    $(this).next(".mensaje-error-sala").remove();
+const input = $(selector);
-  });
+
-});
+input.addClass("is-invalid");
+
+
+input.after(`
+    <div class="mensaje-error-sala text-danger mt-1 small">
+
+        ${mensaje}
+
+    </div>
+`);
+
+
+}
+
+// ======================================================
+// QUITAR ERROR AL ESCRIBIR
+// ======================================================
+
+$(".input-kahoot").on(
+"input",
+function () {
+
+    $(this).removeClass(
+        "is-invalid"
+    );
+
+    $(this)
+        .next(".mensaje-error-sala")
+        .remove();
+}
+
+
+);