211 lines
4.0 KiB
JavaScript
211 lines
4.0 KiB
JavaScript
// ============================================
|
|
// 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);
|