137 lines
4.5 KiB
JavaScript
137 lines
4.5 KiB
JavaScript
import { ListaUsuarios } from './listausuarios.js';
|
|
import { ListaPartidas } from './listapartidas.js';
|
|
import { cardGamePropia, cardGameGeneral } from './htmlTmpl.js';
|
|
|
|
const usersConnectUlEl = document.querySelector('#users_connect');
|
|
const usersDisconnectUlEl = document.querySelector('#users_disconnect');
|
|
const partidasAbiertasEl = document.querySelector('#partidas_abiertas');
|
|
const partidasProcesoEl = document.querySelector('#tus_partidas');
|
|
const chat = document.querySelector('#logchat');
|
|
|
|
const userId = localStorage.getItem('userId');
|
|
const socket = io('/salachat', { closeOnBeforeunload: true, auth: { userId } });
|
|
|
|
document.querySelector('#btnCerrar').addEventListener('click', () => {
|
|
cerrarSesion('buttonClick');
|
|
});
|
|
document.querySelector('#btnCrearPartida').addEventListener('click', () => {
|
|
crearPartida();
|
|
});
|
|
document.querySelector('#chatinput').addEventListener('keyup', (event) => {
|
|
enviarMensaje(event);
|
|
});
|
|
|
|
let listaUsuarios;
|
|
let listaPartidas;
|
|
|
|
// Funciones que modifican el DOM
|
|
function agregarUsuarioToLista(usuario, listaElemento, claseCSS) {
|
|
const liUsuario = document.createElement('li');
|
|
liUsuario.innerHTML = usuario.nickname;
|
|
liUsuario.classList.add(claseCSS);
|
|
listaElemento.appendChild(liUsuario);
|
|
}
|
|
function listarUsuarios() {
|
|
usersConnectUlEl.innerHTML = '';
|
|
usersDisconnectUlEl.innerHTML = '';
|
|
const miUsuario = listaUsuarios.usuario;
|
|
agregarUsuarioToLista(miUsuario, usersConnectUlEl, 'spanNickPropio');
|
|
const usuariosConectados = listaUsuarios.usuariosConectados;
|
|
usuariosConectados.forEach((usuario) => {
|
|
agregarUsuarioToLista(usuario, usersConnectUlEl, 'spanNick');
|
|
});
|
|
const usuariosDesconectados = listaUsuarios.usuariosDesconectados;
|
|
usuariosDesconectados.forEach((usuario) => {
|
|
agregarUsuarioToLista(usuario, usersDisconnectUlEl, 'spanNickOffline');
|
|
});
|
|
}
|
|
function listarPartidasAbiertas() {
|
|
partidasAbiertasEl.innerHTML = '';
|
|
listaPartidas.partidasAbiertas.forEach((partida) => {
|
|
const cardGame =
|
|
userId === partida.uuidJugadorA
|
|
? cardGamePropia(partida.nickJugadorA, partida.uuid)
|
|
: cardGameGeneral(partida.nickJugadorA, partida.uuid);
|
|
partidasAbiertasEl.appendChild(cardGame);
|
|
});
|
|
}
|
|
function agregaMsg({ uuid, msg }) {
|
|
const spanUser = document.createElement('span');
|
|
const spanMsg = document.createElement('span');
|
|
if (userId === uuid) {
|
|
spanUser.classList.add('spanNickPropio');
|
|
spanUser.textContent = `Tú: `;
|
|
spanMsg.textContent = msg;
|
|
} else {
|
|
spanUser.classList.add('spanNick');
|
|
spanUser.textContent = `${listaUsuarios.obtenerUsuarioPorUuid(uuid).nickname}: `;
|
|
spanMsg.textContent = msg;
|
|
}
|
|
const linea = document.createElement('p');
|
|
linea.appendChild(spanUser);
|
|
linea.appendChild(spanMsg);
|
|
chat.appendChild(linea);
|
|
logchat.scrollTop = logchat.scrollHeight;
|
|
}
|
|
function agregaMsgBroadcast(msg) {
|
|
const spanMsg = document.createElement('span');
|
|
spanMsg.textContent = msg;
|
|
spanMsg.classList.add('broadcastMsg');
|
|
const linea = document.createElement('p');
|
|
linea.appendChild(spanMsg);
|
|
chat.appendChild(linea);
|
|
logchat.scrollTop = logchat.scrollHeight;
|
|
}
|
|
|
|
// Logica de negocio de la aplicacion
|
|
const entraSala = ({ usuarios, partidas }) => {
|
|
listaUsuarios = new ListaUsuarios(userId, usuarios);
|
|
listaPartidas = new ListaPartidas(partidas);
|
|
listarUsuarios();
|
|
listarPartidasAbiertas();
|
|
};
|
|
const actualizaUsuarios = (usuario) => {
|
|
listaUsuarios.actualizaUsuario(usuario);
|
|
listarUsuarios();
|
|
usuario.conectado
|
|
? agregaMsgBroadcast(`${usuario.nickname} se ha conectado`)
|
|
: agregaMsgBroadcast(`${usuario.nickname} se ha desconectado`);
|
|
};
|
|
const agregarPartida = (partida) =>{
|
|
listaPartidas.agregarPartida(partida);
|
|
listarPartidasAbiertas();
|
|
}
|
|
|
|
|
|
// Cerrar sesión
|
|
const cerrarSesion = (reason) => {
|
|
if (reason === 'io server disconnect' || reason === 'buttonClick') {
|
|
localStorage.removeItem('userId');
|
|
window.location.replace('/');
|
|
}
|
|
};
|
|
// Enviar mensaje
|
|
function enviarMensaje(event) {
|
|
if (event.key === 'Enter') {
|
|
const mensaje = event.target.value.trim();
|
|
if (mensaje != '') {
|
|
socket.emit('chatMsg', mensaje);
|
|
}
|
|
event.target.value = '';
|
|
}
|
|
}
|
|
function crearPartida() {
|
|
socket.emit('creaPartida');
|
|
}
|
|
|
|
// Manejadores de eventos del socket
|
|
socket.on('onConnectRoom', entraSala);
|
|
socket.on('onUserConnectRoom', actualizaUsuarios);
|
|
socket.on('chatMsg', agregaMsg);
|
|
socket.on('onCrearPartida',agregarPartida);
|
|
socket.on('onUserDisconnectRoom', actualizaUsuarios);
|
|
socket.on('disconnect', cerrarSesion);
|
|
|
|
// // const url = '/batalla.html?game_id=' + encodeURIComponent(partida.uuid);
|
|
// // window.open(url, '_blank');
|