Add buscadorSala

2026-09-23 13:12:42 +02:00
parent 050d5e49c4
commit d65b7fcb91
8 changed files with 677 additions and 238 deletions
@@ -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);