first commit

public/assets/shipz/images/desktop.ini

@@ -0,0 +1,5 @@
+[.ShellClassInfo]
+InfoTip=This folder is shared online.
+IconFile=C:\Program Files (x86)\Google\Drive\googledrivesync.exe
+IconIndex=12
+    

public/assets/shipz/water_units.json

@@ -0,0 +1,452 @@
+{"frames": {
+
+"ship_big_gun.png":
+{
+	"frame": {"x":660,"y":70,"w":32,"h":60},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":60},
+	"sourceSize": {"w":32,"h":60}
+},
+"ship_big_gun_destroyed.png":
+{
+	"frame": {"x":654,"y":337,"w":32,"h":60},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":60},
+	"sourceSize": {"w":32,"h":60}
+},
+"ship_big_gun_dual.png":
+{
+	"frame": {"x":660,"y":2,"w":32,"h":66},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":66},
+	"sourceSize": {"w":32,"h":66}
+},
+"ship_big_gun_dual_destroyed.png":
+{
+	"frame": {"x":674,"y":467,"w":32,"h":66},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":66},
+	"sourceSize": {"w":32,"h":66}
+},
+"ship_big_gun_dual_hit.png":
+{
+	"frame": {"x":674,"y":399,"w":32,"h":66},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":66},
+	"sourceSize": {"w":32,"h":66}
+},
+"ship_big_gun_hit.png":
+{
+	"frame": {"x":620,"y":337,"w":32,"h":60},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":60},
+	"sourceSize": {"w":32,"h":60}
+},
+"ship_gun_base.png":
+{
+	"frame": {"x":720,"y":92,"w":24,"h":24},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":24,"h":24},
+	"sourceSize": {"w":24,"h":24}
+},
+"ship_gun_base_big.png":
+{
+	"frame": {"x":674,"y":535,"w":28,"h":28},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":28,"h":28},
+	"sourceSize": {"w":28,"h":28}
+},
+"ship_gun_base_big_destroyed.png":
+{
+	"frame": {"x":630,"y":755,"w":28,"h":28},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":28,"h":28},
+	"sourceSize": {"w":28,"h":28}
+},
+"ship_gun_base_dark.png":
+{
+	"frame": {"x":694,"y":101,"w":24,"h":24},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":24,"h":24},
+	"sourceSize": {"w":24,"h":24}
+},
+"ship_gun_base_dark_destroyed.png":
+{
+	"frame": {"x":686,"y":190,"w":24,"h":24},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":24,"h":24},
+	"sourceSize": {"w":24,"h":24}
+},
+"ship_gun_base_destroyed.png":
+{
+	"frame": {"x":660,"y":190,"w":24,"h":24},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":24,"h":24},
+	"sourceSize": {"w":24,"h":24}
+},
+"ship_gun_dual_gray.png":
+{
+	"frame": {"x":676,"y":274,"w":34,"h":56},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":34,"h":56},
+	"sourceSize": {"w":34,"h":56}
+},
+"ship_gun_dual_gray_destroyed.png":
+{
+	"frame": {"x":676,"y":216,"w":34,"h":56},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":34,"h":56},
+	"sourceSize": {"w":34,"h":56}
+},
+"ship_gun_dual_gray_hit.png":
+{
+	"frame": {"x":660,"y":132,"w":34,"h":56},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":34,"h":56},
+	"sourceSize": {"w":34,"h":56}
+},
+"ship_gun_dual_green.png":
+{
+	"frame": {"x":712,"y":50,"w":32,"h":40},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":40},
+	"sourceSize": {"w":32,"h":40}
+},
+"ship_gun_dual_green_destroyed.png":
+{
+	"frame": {"x":360,"y":789,"w":32,"h":40},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":40},
+	"sourceSize": {"w":32,"h":40}
+},
+"ship_gun_dual_green_hit.png":
+{
+	"frame": {"x":326,"y":789,"w":32,"h":40},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":40},
+	"sourceSize": {"w":32,"h":40}
+},
+"ship_gun_gray.png":
+{
+	"frame": {"x":714,"y":127,"w":16,"h":40},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":40},
+	"sourceSize": {"w":16,"h":40}
+},
+"ship_gun_gray_destroyed.png":
+{
+	"frame": {"x":712,"y":175,"w":16,"h":40},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":40},
+	"sourceSize": {"w":16,"h":40}
+},
+"ship_gun_gray_hit.png":
+{
+	"frame": {"x":730,"y":2,"w":16,"h":40},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":40},
+	"sourceSize": {"w":16,"h":40}
+},
+"ship_gun_green.png":
+{
+	"frame": {"x":694,"y":53,"w":16,"h":46},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":46},
+	"sourceSize": {"w":16,"h":46}
+},
+"ship_gun_green_destroyed.png":
+{
+	"frame": {"x":712,"y":2,"w":16,"h":46},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":46},
+	"sourceSize": {"w":16,"h":46}
+},
+"ship_gun_green_hit.png":
+{
+	"frame": {"x":696,"y":127,"w":16,"h":46},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":46},
+	"sourceSize": {"w":16,"h":46}
+},
+"ship_gun_huge.png":
+{
+	"frame": {"x":640,"y":477,"w":32,"h":76},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":76},
+	"sourceSize": {"w":32,"h":76}
+},
+"ship_gun_huge_destroyed.png":
+{
+	"frame": {"x":640,"y":399,"w":32,"h":76},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":76},
+	"sourceSize": {"w":32,"h":76}
+},
+"ship_gun_huge_hit.png":
+{
+	"frame": {"x":630,"y":677,"w":32,"h":76},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":76},
+	"sourceSize": {"w":32,"h":76}
+},
+"ship_gun_red.png":
+{
+	"frame": {"x":694,"y":2,"w":16,"h":49},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":49},
+	"sourceSize": {"w":16,"h":49}
+},
+"ship_gun_red_destroyed.png":
+{
+	"frame": {"x":706,"y":332,"w":16,"h":49},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":49},
+	"sourceSize": {"w":16,"h":49}
+},
+"ship_gun_red_hit.png":
+{
+	"frame": {"x":688,"y":332,"w":16,"h":49},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":49},
+	"sourceSize": {"w":16,"h":49}
+},
+"ship_large_body.png":
+{
+	"frame": {"x":450,"y":419,"w":122,"h":368},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":122,"h":368},
+	"sourceSize": {"w":122,"h":368}
+},
+"ship_large_body_destroyed.png":
+{
+	"frame": {"x":326,"y":419,"w":122,"h":368},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":122,"h":368},
+	"sourceSize": {"w":122,"h":368}
+},
+"ship_medium_body.png":
+{
+	"frame": {"x":194,"y":836,"w":62,"h":179},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":62,"h":179},
+	"sourceSize": {"w":62,"h":179}
+},
+"ship_medium_body_b.png":
+{
+	"frame": {"x":130,"y":836,"w":62,"h":179},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":62,"h":179},
+	"sourceSize": {"w":62,"h":179}
+},
+"ship_medium_body_b_destroyed.png":
+{
+	"frame": {"x":66,"y":836,"w":62,"h":179},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":62,"h":179},
+	"sourceSize": {"w":62,"h":179}
+},
+"ship_medium_body_destroyed.png":
+{
+	"frame": {"x":2,"y":836,"w":62,"h":179},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":62,"h":179},
+	"sourceSize": {"w":62,"h":179}
+},
+"ship_small_b_body.png":
+{
+	"frame": {"x":630,"y":570,"w":54,"h":105},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":54,"h":105},
+	"sourceSize": {"w":54,"h":105}
+},
+"ship_small_body.png":
+{
+	"frame": {"x":574,"y":677,"w":54,"h":105},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":54,"h":105},
+	"sourceSize": {"w":54,"h":105}
+},
+"ship_small_body_b_destroyed.png":
+{
+	"frame": {"x":574,"y":570,"w":54,"h":105},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":54,"h":105},
+	"sourceSize": {"w":54,"h":105}
+},
+"ship_small_body_destroyed.png":
+{
+	"frame": {"x":620,"y":230,"w":54,"h":105},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":54,"h":105},
+	"sourceSize": {"w":54,"h":105}
+},
+"water_ripple_big_000.png":
+{
+	"frame": {"x":326,"y":2,"w":160,"h":415},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":160,"h":415},
+	"sourceSize": {"w":160,"h":415}
+},
+"water_ripple_big_001.png":
+{
+	"frame": {"x":164,"y":419,"w":160,"h":415},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":160,"h":415},
+	"sourceSize": {"w":160,"h":415}
+},
+"water_ripple_big_002.png":
+{
+	"frame": {"x":164,"y":2,"w":160,"h":415},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":160,"h":415},
+	"sourceSize": {"w":160,"h":415}
+},
+"water_ripple_big_003.png":
+{
+	"frame": {"x":2,"y":419,"w":160,"h":415},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":160,"h":415},
+	"sourceSize": {"w":160,"h":415}
+},
+"water_ripple_big_004.png":
+{
+	"frame": {"x":2,"y":2,"w":160,"h":415},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":160,"h":415},
+	"sourceSize": {"w":160,"h":415}
+},
+"water_ripple_medium_000.png":
+{
+	"frame": {"x":574,"y":2,"w":84,"h":226},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":84,"h":226},
+	"sourceSize": {"w":84,"h":226}
+},
+"water_ripple_medium_001.png":
+{
+	"frame": {"x":488,"y":2,"w":84,"h":226},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":84,"h":226},
+	"sourceSize": {"w":84,"h":226}
+},
+"water_ripple_medium_002.png":
+{
+	"frame": {"x":566,"y":789,"w":84,"h":226},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":84,"h":226},
+	"sourceSize": {"w":84,"h":226}
+},
+"water_ripple_medium_003.png":
+{
+	"frame": {"x":480,"y":789,"w":84,"h":226},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":84,"h":226},
+	"sourceSize": {"w":84,"h":226}
+},
+"water_ripple_medium_004.png":
+{
+	"frame": {"x":394,"y":789,"w":84,"h":226},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":84,"h":226},
+	"sourceSize": {"w":84,"h":226}
+},
+"water_ripple_small_000.png":
+{
+	"frame": {"x":574,"y":400,"w":64,"h":168},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":168},
+	"sourceSize": {"w":64,"h":168}
+},
+"water_ripple_small_001.png":
+{
+	"frame": {"x":554,"y":230,"w":64,"h":168},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":168},
+	"sourceSize": {"w":64,"h":168}
+},
+"water_ripple_small_002.png":
+{
+	"frame": {"x":488,"y":230,"w":64,"h":168},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":168},
+	"sourceSize": {"w":64,"h":168}
+},
+"water_ripple_small_003.png":
+{
+	"frame": {"x":324,"y":836,"w":64,"h":168},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":168},
+	"sourceSize": {"w":64,"h":168}
+},
+"water_ripple_small_004.png":
+{
+	"frame": {"x":258,"y":836,"w":64,"h":168},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":168},
+	"sourceSize": {"w":64,"h":168}
+}},
+"meta": {
+	"app": "http://www.texturepacker.com",
+	"version": "1.0",
+	"image": "water_units.png",
+	"format": "RGBA8888",
+	"size": {"w":1024,"h":1024},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:0588f1382f7fc792c1ff1dac58116cb7$"
+}
+}

public/batalla.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+    <link rel="stylesheet" href="stylegame.css">
+    <title>BattleShip</title>
+</head>
+
+<body>
+    <div id="container">
+        <div id="sub-container">
+            <canvas id="mapa" tabindex="0"></canvas>
+        </div>
+        <div id="sub-container">
+            <canvas id="minimapa" tabindex="1"></canvas>
+            <textarea id="chat" readonly>Battleship</textarea>
+            <input type="text" name="" id="">
+        </div>
+    </div>
+</body>
+<script src="socket.io/socket.io.js"></script>
+<script type="module" src="./js_game/battleship.js"></script>
+</html>

public/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+    <link rel="stylesheet" href="style.css">
+    <title>BattleShip</title>
+</head>
+
+<body>
+    <div class="container" style="flex-direction: column; align-items: center; justify-content: center; gap: 0;">
+        <div>
+            <h1 style="font-size: 7rem;display: inline;">BattleShip</h1>                    
+            <i style="font-size: 2.5rem;"class="ti ti-medal-2"></i>
+            <i style="font-size: 2.5rem;"class="ti ti-medal-2"></i>
+        </div>
+        <form id="login-form" onsubmit="">
+            <div class="container_col" style="min-width: 20rem;">
+                <label for="username">Introduce tu nick de batalla</label>
+                <input id="login-input" name="nick" type="text" autocomplete="off" autocorrect="off" autocapitalize="none"
+                    spellcheck="false" placeholder="Nick..." required>
+                <input type="submit" value="Conectar">
+            </div>
+        </form>
+    </div>
+    <script src="socket.io/socket.io.js"></script>
+    <script src="./js/login.js"></script>
+</body>
+
+</html>

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');

public/js_game/battleship.js

@@ -0,0 +1,6 @@
+const urlParams = new URLSearchParams(window.location.search);
+const gameId = urlParams.get('game_id');
+const userId = localStorage.getItem('userId');
+
+const socket = io('/batalla', { closeOnBeforeunload: true, auth: { userId, gameId } });
+

public/salageneral.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+    <link rel="stylesheet" href="style.css">
+    <title>BattleShip</title>
+</head>
+
+<body>
+    <div class="container">
+        <div class="container_col" style="max-width: 13rem;">    
+            <h3 style="border-bottom: 2px solid #2c5364;">Lista de usuarios</h3>       
+            <div class="container_col" style="border: none; padding: 0;">
+                <h4>Conectados</h4>
+                <ul id="users_connect">
+                </ul>
+                <br>
+                <h4>Desconectados</h4>
+                <ul id="users_disconnect">
+                </ul>
+            </div>
+            <button onclick="onCloseClick();">Cerrar</button>
+        </div>
+
+        <div class="container_col" style="border: none;">
+            <div id="cabecera" style="display: flex; align-items: center; justify-content: space-between; ">
+                <div>
+                    <h1 style="font-size: 5rem; display: inline;">Battleship</h1>
+                    <i style="font-size: 2rem;"class="ti ti-medal-2"></i>
+                    <i style="font-size: 2rem;"class="ti ti-medal-2"></i>
+                </div>
+                <button onclick="crearPartida();">Crear Partida</button>
+            </div>
+
+            <fieldset id="partidas_abiertas" class="container_games">
+                <legend>Partidas abiertas</legend>
+
+            </fieldset>
+            <fieldset id="tus_partidas" class="container_games">
+                <legend>Partidas</legend>
+                <div class="cardGame">
+                    <span>Marklogo</span>
+                    <span>VS</span>
+                    <button click="">Unirse</button>
+                </div>
+            </fieldset>
+
+            <div class="container_col" style="overflow-y: hidden;">
+                <div id="logchat" class="container_col" style="overflow-y: auto; border: none;">
+                </div>
+                <input type="text" id="chatinput" onkeyup="enviarMensaje(event)">
+            </div>
+        </div>
+    </div>
+    <script src="socket.io/socket.io.js"></script>
+    <script src="./js/salaespera.js"></script>
+</body>
+
+</html>

public/style.css

@@ -0,0 +1,163 @@
+@font-face {
+  font-family: 'ITC Machine Std Bold';
+  src: url('./assets/ITC Machine Std Bold.otf') format('opentype');
+}
+* {
+  box-sizing: border-box;
+  min-width: 0;
+}
+ul,
+li {
+  list-style: square;
+  margin: 0;
+  margin-left: 0.8rem;
+  padding: 0;
+}
+li {
+  font-size: small;
+  color: wheat;
+}
+h1,
+h2,
+h3,
+h4 {
+  margin: 0;
+  padding: 0;
+}
+html,
+body {
+  height: 100%;
+  min-width: 800px;
+  margin: 0;
+  padding: 0;
+}
+body {
+  padding: 1rem;
+  background: linear-gradient(to bottom right, #0f2027, #203a43, #2c5364);
+  color: #bf360c;
+  font-family: 'ITC Machine Std Bold', sans-serif;
+}
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.container_row,
+.container_games {
+  display: flex;
+  height: 100%;
+  gap: 0.2rem;
+  border: 3px solid red;
+  padding: 0.4rem;
+  border: 4px solid #2c5364;
+  border-radius: 10px;
+}
+
+.container_col {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 1rem;
+  width: 100%;
+  height: 100%;
+  border: 4px solid #2c5364;
+  border-radius: 10px;
+}
+
+.container_games {
+  max-height: 9rem;
+  min-height: 9rem;
+  padding: 1rem;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+input[type='submit'],
+button {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: 0.4rem;
+  background-color: #ff5722; /* Color de fondo naranja */
+  color: white; /* Color del texto blanco */
+  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
+  transition: background-color 0.3s ease; /* Transición suave al cambiar de color */
+}
+input[type='submit']:hover,
+button:hover {
+  background-color: #e64a19; /* Color de fondo naranja más oscuro al pasar el cursor */
+}
+input[type='submit']:active,
+button:active {
+  background-color: #bf360c; /* Color de fondo naranja más oscuro al hacer clic */
+}
+.cardGame button {
+  padding: 0 0.4rem;
+  font-size: medium;
+  width: 100%;
+  border-radius: 4px;
+}
+
+.cardGame {
+  min-width: 140px;
+  width: 140px;
+  height: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 10px;
+  background-color: #162930;
+  text-align: center;
+  align-items: center;
+  padding: 0.4rem;
+  font-size: small;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+#login-input,
+#chatinput {
+  font-family: 'roboto', sans-serif;
+  padding: 0.4rem;
+  font-weight: bold;
+  border-radius: 0.4rem;
+  background-color: transparent;
+  color: wheat;
+  outline: none;
+}
+#logchat {
+  min-width: 15rem;
+  width: 100%;
+  max-height: 100%;
+  padding: 0.1rem;
+  padding-right: 0.4rem;
+  font-family: 'roboto', sans-serif;
+  font-size: small;
+  font-weight: bold;
+  border-radius: 0.4rem;
+  background-color: transparent;
+  overflow-y: auto;
+}
+#logchat p {
+  margin: 0;
+}
+.broadcastMsg {
+  display: block;
+  text-align: right;
+  font-size: x-small;
+  color: #72d5ff;
+}
+.spanNickPropio {
+  color: #f8c51c;
+}
+.spanNick {
+  color: #87db18;
+}
+.spanNickOffline {
+  color: #2c5364;
+}

public/stylegame.css

@@ -0,0 +1,115 @@
+@font-face {
+  font-family: 'ITC Machine Std Bold';
+  src: url('./assets/ITC Machine Std Bold.otf') format('opentype');
+}
+
+* {
+  box-sizing: border-box;
+  min-width: 0;
+}
+h1,h2,h3,h4 {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  padding: 1rem;
+  background: linear-gradient(to bottom right, #0f2027, #203a43, #2c5364);
+  color: white;
+  font-family: 'ITC Machine Std Bold', sans-serif;
+  text-align: center;
+}
+
+#container {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+#sub-container {
+  height: 648px;  
+  display: flex;
+  flex-direction: column;
+  border: 4px solid #2c5364;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+#input-container {
+  display: flex;
+  padding: 1rem;
+  gap: 0.4rem;
+  max-width: fit-content;
+  flex-direction: column;
+  border: 4px solid #2c5364;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+/* Estilo del botón */
+#input-container input[type="button"] {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: 0.4rem;
+  background-color: #ff5722; /* Color de fondo naranja */
+  color: white; /* Color del texto blanco */
+  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
+  transition: background-color 0.3s ease; /* Transición suave al cambiar de color */
+}
+
+/* Estilo del botón al pasar el cursor */
+#input-container input[type="button"]:hover {
+  background-color: #e64a19; /* Color de fondo naranja más oscuro al pasar el cursor */
+}
+
+/* Estilo del botón al hacer clic */
+#input-container input[type="button"]:active {
+  background-color: #bf360c; /* Color de fondo naranja más oscuro al hacer clic */
+}
+
+
+
+
+#mapa {
+  width: 640px;
+  height: 640px;
+  background-color: #2c5364;
+}
+
+#minimapa {
+  width: 320px;
+  height: 320px;
+  flex-shrink: 0;
+  background-color: #2c5364;
+}
+
+#chat {
+  font-family: 'ITC Machine Std Bold', sans-serif;  
+  resize: none;
+  width: 320px;
+  height: 100%;
+  background-color: transparent;
+  color: antiquewhite;
+}
+
+.basic-input{
+  font-family: 'ITC Machine Std Bold', sans-serif;  
+  padding: 0.4rem;
+  font-size: larger;
+  border-radius: 0.4rem;
+  background-color: #2c5364;
+  color:wheat;
+  outline: none;
+
+}