first commit

public/js/login.js

@@ -0,0 +1,23 @@
+const socket = io('/login');
+const form = document.querySelector('#login-form');
+const input = document.querySelector('#login-input');
+const userId = localStorage.getItem('userId');
+
+// Función para redirigir a la página 'salageneral.html'
+const redirectToGeneralPage = () => {
+  window.location.href = 'salageneral.html';
+};
+
+if (userId) redirectToGeneralPage();
+
+// Escucha el evento de envío del formulario
+form.addEventListener('submit', (e) => {
+  e.preventDefault();
+  const nick = input.value.trim();
+  if (nick) {
+    socket.emit('login', nick, (userInfo) => {
+      localStorage.setItem('userId', userInfo);
+      redirectToGeneralPage();
+    });
+  }
+});

public/js/salaespera.js

@@ -0,0 +1,192 @@
+class ListaUsuarios {
+  _usuario = {};
+  _usuarios = [];
+
+  constructor(uuidUsuario, usuarios) {
+    this._usuario = usuarios.find((usuario) => usuario.uuid === uuidUsuario);
+    this._usuarios = usuarios.filter((usuario) => usuario.uuid !== uuidUsuario);
+  }
+  get usuario() {
+    return this._usuario;
+  }
+  get usuariosConectados() {
+    return this._usuarios
+      .filter((usuario) => usuario.conectado)
+      .sort((a, b) => a.nickname.localeCompare(b.nickname));
+  }
+  get usuariosDesconectados() {
+    return this._usuarios
+      .filter((usuario) => !usuario.conectado)
+      .sort((a, b) => a.nickname.localeCompare(b.nickname));
+  }
+  actualizaUsuario(usuario) {
+    const user = this.obtenerUsuarioPorUuid(usuario.uuid);
+    if (user) {
+      user.conectado = usuario.conectado;
+    } else {
+      this._usuarios.push(usuario);
+    }
+  }
+  obtenerUsuarioPorUuid(uuid) {
+    return this._usuarios.find((usuario) => usuario.uuid === uuid);
+  }
+}
+
+class ListaPartidas {
+  _partidas = [];
+
+  agregarPartida(partida) {
+    this._partidas.push(partida);
+  }
+
+  get partidasAbiertas() {
+    return this._partidas.filter((partida) => partida.abierta);
+  }
+}
+
+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.getElementById('logchat');
+const userId = localStorage.getItem('userId');
+const socket = io('/salachat', { closeOnBeforeunload: true, auth: { userId } });
+
+let listaUsuarios;
+let listaPartidas = new ListaPartidas();
+
+function unirse(data) {
+  console.log(data);
+}
+
+// Funciones que modifican el DOM
+// Añadir lista de usuarios al 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() {
+  listaPartidas.partidasAbiertas.forEach((partida) => {
+    cardGameHTML(partida.nickJugadorA, partida.uuid);
+  });
+}
+
+// Añadir msg al chat
+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;
+}
+//Añadir mensaje del servidor
+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;
+}
+const cardGameHTML = (nickname, game_id) => {
+  var cardGameDiv = document.createElement('div');
+  cardGameDiv.classList.add('cardGame');
+  cardGameDiv.innerHTML =
+    nickname === listaUsuarios.usuario.nickname
+      ? `<span>${nickname}</span>
+      <span>VS</span>
+      <span>Esperando rival</button>
+      `
+      : `<span>${nickname}</span>
+      <span>VS</span>
+      <button onclick="unirse('${game_id}')">Unirse</button>
+      `;
+  partidasAbiertasEl.appendChild(cardGameDiv);
+};
+
+// Logica de negocio de la aplicacion
+//Entra a la sala
+const entraSala = (usuarios) => {
+  listaUsuarios = new ListaUsuarios(userId, usuarios);
+  listarUsuarios();
+};
+// Actualiza info Usuarios
+const actualizaUsuarios = (usuario) => {
+  listaUsuarios.actualizaUsuario(usuario);
+  listarUsuarios();
+  usuario.conectado
+    ? agregaMsgBroadcast(`${usuario.nickname} se ha conectado`)
+    : agregaMsgBroadcast(`${usuario.nickname} se ha desconectado`);
+};
+
+const agregaPartida = (partida) => {
+  partidasAbiertasEl.innerHTML = '';
+  listaPartidas.agregarPartida(partida);
+  listarPartidasAbiertas();
+};
+
+const onCloseClick = () => {
+  localStorage.removeItem('userId');
+  window.location.replace('/');
+};
+// Cerrar sesión
+const cerrarSesion = (reason) => {
+  if (reason === 'io server disconnect') {
+    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 = '';
+  }
+}
+// Crear partida
+const crearPartida = () => {
+  socket.emit('creaPartida');
+};
+
+// Manejadores de eventos del socket
+socket.on('onConnectRoom', entraSala);
+socket.on('onUserConnectRoom', actualizaUsuarios);
+socket.on('chatMsg', agregaMsg);
+socket.on('onUserDisconnectRoom', actualizaUsuarios);
+socket.on('disconnect', cerrarSesion);
+socket.on('on_create_partida', agregaPartida);
+
+// const url = '/batalla.html?game_id=' + encodeURIComponent(partida.uuid);
+// window.open(url, '_blank');