Add buscadorSala

js/buscadorSala.js

@@ -0,0 +1,79 @@
+const btnCrearSala = document.getElementById("btnCrearSala");
+
+const nombreSala = document.getElementById("nombreSala");
+const nombreEquipo1 = document.getElementById("nombreEquipo1");
+const nombreEquipo2 = document.getElementById("nombreEquipo2");
+
+btnCrearSala.addEventListener("click", function () {
+  limpiarErrores();
+
+  const sala = nombreSala.value.trim();
+  const equipo1 = nombreEquipo1.value.trim();
+  const equipo2 = nombreEquipo2.value.trim();
+
+  let formularioValido = true;
+
+  if (sala === "") {
+    mostrarError(nombreSala, "El nombre de la sala es obligatorio.");
+
+    formularioValido = false;
+  }
+
+  if (equipo1 === "") {
+    mostrarError(nombreEquipo1, "El nombre del equipo 1 es obligatorio.");
+
+    formularioValido = false;
+  }
+
+  if (equipo2 === "") {
+    mostrarError(nombreEquipo2, "El nombre del equipo 2 es obligatorio.");
+
+    formularioValido = false;
+  }
+
+  if (!formularioValido) {
+    return;
+  }
+
+  console.log("Sala:", sala);
+  console.log("Equipo 1:", equipo1);
+  console.log("Equipo 2:", equipo2);
+
+
+  const idSala = 1;
+
+  //TODO aqui va la peticion ayax en el futuro para crear la sala en la bbdd
+
+  window.location.href = "sala.html?id=" + idSala;
+});
+
+function mostrarError(input, mensaje) {
+  input.classList.add("is-invalid");
+
+  // Comprobamos si ya existe un mensaje
+  let mensajeError = input.parentElement.querySelector(".invalid-feedback");
+
+  if (!mensajeError) {
+    mensajeError = document.createElement("div");
+
+    mensajeError.classList.add("invalid-feedback");
+
+    input.parentElement.appendChild(mensajeError);
+  }
+
+  mensajeError.textContent = mensaje;
+}
+
+function limpiarErrores() {
+  const inputs = [nombreSala, nombreEquipo1, nombreEquipo2];
+
+  inputs.forEach((input) => {
+    input.classList.remove("is-invalid");
+
+    const mensajeError = input.parentElement.querySelector(".invalid-feedback");
+
+    if (mensajeError) {
+      mensajeError.remove();
+    }
+  });
+}

js/lobbyDummy.js

@@ -0,0 +1,210 @@
+// ============================================
+// DATOS DE PRUEBA
+// ============================================
+
+const salas = [
+    {
+        id: 1,
+        nombre: "Sala Principal",
+        equipos: [
+            {
+                id: 1,
+                nombre: "Equipo 1",
+                jugadores: [
+                    "Carlos",
+                    "María"
+                ]
+            },
+            {
+                id: 2,
+                nombre: "Equipo 2",
+                jugadores: [
+                    "Jorge"
+                ]
+            }
+        ]
+    },
+
+    {
+        id: 2,
+        nombre: "Los Trivialeros",
+        equipos: [
+            {
+                id: 3,
+                nombre: "Equipo Rojo",
+                jugadores: [
+                    "Ana",
+                    "Pedro",
+                    "Lucía"
+                ]
+            },
+            {
+                id: 4,
+                nombre: "Equipo Azul",
+                jugadores: [
+                    "David",
+                    "Laura"
+                ]
+            }
+        ]
+    },
+
+    {
+        id: 3,
+        nombre: "Partida rápida",
+        equipos: [
+            {
+                id: 5,
+                nombre: "Equipo 1",
+                jugadores: [
+                    "Miguel"
+                ]
+            },
+            {
+                id: 6,
+                nombre: "Equipo 2",
+                jugadores: []
+            }
+        ]
+    },
+
+    {
+        id: 4,
+        nombre: "Noche de Trivial",
+        equipos: [
+            {
+                id: 7,
+                nombre: "Los quesitos",
+                jugadores: [
+                    "Pablo",
+                    "Sara"
+                ]
+            },
+            {
+                id: 8,
+                nombre: "Los cerebritos",
+                jugadores: [
+                    "Mario",
+                    "Elena",
+                    "Álvaro"
+                ]
+            }
+        ]
+    }
+];
+
+
+// ============================================
+// MOSTRAR SALAS
+// ============================================
+
+function mostrarSalas(salas) {
+
+    const contenedor = document.getElementById("contenedorSalas");
+
+    contenedor.innerHTML = "";
+
+    salas.forEach(sala => {
+
+        const columna = document.createElement("div");
+
+        columna.className = "col-12 col-md-6 col-xl-5";
+
+
+        columna.innerHTML = `
+
+            <div class="sala">
+
+                <div class="sala-header">
+                    ${sala.nombre}
+                </div>
+
+
+                <div class="sala-body">
+
+                    <div class="equipos">
+
+                        ${crearEquipo(sala, sala.equipos[0])}
+
+                        ${crearEquipo(sala, sala.equipos[1])}
+
+                    </div>
+
+                </div>
+
+            </div>
+
+        `;
+
+        contenedor.appendChild(columna);
+    });
+}
+
+
+
+// ============================================
+// CREAR EQUIPO
+// ============================================
+
+function crearEquipo(sala, equipo) {
+
+    let jugadoresHTML = "";
+
+    equipo.jugadores.forEach(jugador => {
+
+        jugadoresHTML += `
+            <div class="jugador">
+                <span class="avatar">👤</span>
+                ${jugador}
+            </div>
+        `;
+    });
+
+
+    return `
+
+        <div class="equipo">
+
+            <h6>
+                ${equipo.nombre}
+            </h6>
+
+            <div class="jugadores">
+
+                ${jugadoresHTML}
+
+            </div>
+
+            <button
+                type="button"
+                class="btn btn-unirse"
+                onclick="unirseEquipo(${sala.id}, ${equipo.id})">
+
+                Unirse
+
+            </button>
+
+        </div>
+
+    `;
+}
+
+function unirseEquipo(idSala, idEquipo) {
+
+    console.log("Sala:", idSala);
+    console.log("Equipo:", idEquipo);
+
+    alert(
+        "Has pulsado unirse al equipo " +
+        idEquipo +
+        " de la sala " +
+        idSala
+    );
+}
+
+
+// ============================================
+// CARGAR DATOS DE PRUEBA
+// ============================================
+
+mostrarSalas(salas);