marklogo/Battleship_Server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: marklogo:7f60c7651a88770d39fff809f56ba75dad7b295c
Branches Tags
marklogo:main
..
compare: marklogo:68177c2ffa8a4774cb2d058a0da66b1449bc5762
Branches Tags
marklogo:main

2 Commits
7f60c7651a ... 68177c2ffa

Author SHA1 Message Date
Marklogo
68177c2ffa De todo un poco 2024-04-08 02:28:46 +02:00
Marklogo
3444bc59ed implementadas las batallas 2024-04-05 19:50:22 +02:00
20 changed files with 999 additions and 190 deletions
Show Stats Expand all files Collapse all files

BIN
public/assets/barcos.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 194 KiB

After

Width:  |  Height:  |  Size: 197 KiB

21
public/batalla.html
View File

@ -10,17 +10,24 @@
</head> </head>
<body> <body>
<div id="container"> <div class="parent">
<div id="sub-container"> <div class="div1">
<canvas id="mapa" tabindex="0"></canvas> <div class="logo" style="width: fit-content;">
<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> </div>
<div id="sub-container"> </div>
<canvas id="minimapa" tabindex="1"></canvas> <div class="div2"> <canvas id="mapa" tabindex="-1"></canvas></div>
<textarea id="chat" readonly>Battleship</textarea> <div class="div3"> <canvas id="minimapa" tabindex="-1"></canvas></div>
<input type="text" name="" id=""> <div class="div4" tabindex="-1"> </div>
<div class="div5" tabindex="-1">
<div id="logchat"> </div>
<input id="chatinput" type="text">
</div> </div>
</div> </div>
</body> </body>
<script src="socket.io/socket.io.js"></script> <script src="socket.io/socket.io.js"></script>
<script type="module" src="./js_game/battleship.js"></script> <script type="module" src="./js_game/battleship.js"></script>
</html> </html>

15
public/js/htmlTmpl.js
View File

@ -25,3 +25,18 @@ export const cardGameGeneral = (nickname, game_id,unirsePartidaCallback) => {
}); });
return cardGameDiv; return cardGameDiv;
}; };
export const cardGameEnCurso = (partida,entrarEnPartidaCallBack) => {
var cardGameDiv = document.createElement('div');
cardGameDiv.classList.add('cardGame');
cardGameDiv.innerHTML = `<span>${partida.nickJugadorA}</span>
<span class=""> vs </span>
<span class=""> ${partida.nickJugadorB} </span>
<button class="enter-game-btn button button-blue">Ingresar</button>
`;
const enterGameBtn = cardGameDiv.querySelector('.enter-game-btn');
enterGameBtn.addEventListener('click', () => {
entrarEnPartidaCallBack(partida.uuid);
});
return cardGameDiv;
};

40
public/js/salaespera.js
View File

@ -1,6 +1,10 @@
import { ListaUsuarios } from './listausuarios.js'; import { ListaUsuarios } from './listausuarios.js';
import { ListaPartidas } from './listapartidas.js'; import { ListaPartidas } from './listapartidas.js';
import { cardGamePropia, cardGameGeneral } from './htmlTmpl.js'; import {
cardGamePropia,
cardGameGeneral,
cardGameEnCurso,
} from './htmlTmpl.js';
const usersConnectUlEl = document.querySelector('#users_connect'); const usersConnectUlEl = document.querySelector('#users_connect');
const usersDisconnectUlEl = document.querySelector('#users_disconnect'); const usersDisconnectUlEl = document.querySelector('#users_disconnect');
@ -61,10 +65,15 @@ function generarElementoListaPartida(partida) {
return cardGame; return cardGame;
} }
// Función para actualizar la lista de partidas abiertas // Función para actualizar la lista de partidas abiertas
function actualizarListaPartidasAbiertas() { function actualizarListaPartidas() {
partidasAbiertasEl.innerHTML = '<legend>Partidas abiertas</legend>'; partidasAbiertasEl.innerHTML = '<legend>Partidas abiertas</legend>';
partidasProcesoEl.innerHTML = '<legend>Tus partidas</legend>'; partidasProcesoEl.innerHTML = '<legend>Tus partidas</legend>';
listaPartidasEnCurso.partidas.forEach((partida) => {
const cardGame = cardGameEnCurso(partida,onClickEntrarEnPartida);
partidasProcesoEl.appendChild(cardGame);
});
listaPartidasAbiertas.partidas.forEach((partida) => { listaPartidasAbiertas.partidas.forEach((partida) => {
const cardGame = generarElementoListaPartida(partida); const cardGame = generarElementoListaPartida(partida);
userId === partida.uuidJugadorA || userId === partida.uuidJugadorB userId === partida.uuidJugadorA || userId === partida.uuidJugadorB
@ -105,11 +114,12 @@ function agregarMensajeDeTransmisionAlChat(msg) {
} }
const handlers = { const handlers = {
onConnectRoom: ({ usuarios, partidas }) => { onConnectRoom: ({ usuarios, partidas, partidasEnCurso }) => {
listaUsuarios = new ListaUsuarios(userId, usuarios); listaUsuarios = new ListaUsuarios(userId, usuarios);
listaPartidasAbiertas = new ListaPartidas(partidas); listaPartidasAbiertas = new ListaPartidas(partidas);
listaPartidasEnCurso = new ListaPartidas(partidasEnCurso);
actualizarListaUsuarios(); actualizarListaUsuarios();
actualizarListaPartidasAbiertas(); actualizarListaPartidas();
}, },
onUserChangeStatus: (usuario) => { onUserChangeStatus: (usuario) => {
listaUsuarios.actualizaUsuario(usuario); listaUsuarios.actualizaUsuario(usuario);
@ -124,15 +134,18 @@ const handlers = {
}, },
onCreatePartida: (partida) => { onCreatePartida: (partida) => {
listaPartidasAbiertas.agregarPartida(partida); listaPartidasAbiertas.agregarPartida(partida);
actualizarListaPartidasAbiertas(); actualizarListaPartidas();
}, },
onJoinPartida: (uuid) => { onJoinPartida: (partida) => {
listaPartidasAbiertas.eliminarPartida(uuid); listaPartidasAbiertas.eliminarPartida(partida.uuid);
actualizarListaPartidasAbiertas(); if (partida.uuidJugadorA === userId || partida.uuidJugadorB === userId) {
listaPartidasEnCurso.agregarPartida(partida);
}
actualizarListaPartidas();
}, },
onCancelPartida: (uuid) => { onCancelPartida: (uuid) => {
listaPartidasAbiertas.eliminarPartida(uuid); listaPartidasAbiertas.eliminarPartida(uuid);
actualizarListaPartidasAbiertas(); actualizarListaPartidas();
}, },
disconnect: (reason) => { disconnect: (reason) => {
if (reason === 'io server disconnect' || reason === 'buttonClick') { if (reason === 'io server disconnect' || reason === 'buttonClick') {
@ -146,8 +159,6 @@ Object.entries(handlers).forEach(([event, handler]) => {
socket.on(event, handler); socket.on(event, handler);
}); });
document.querySelector('#btnCerrar').addEventListener('click', () => { document.querySelector('#btnCerrar').addEventListener('click', () => {
handlers.disconnect('buttonClick'); handlers.disconnect('buttonClick');
}); });
@ -166,12 +177,13 @@ document.querySelector('#chatinput').addEventListener('keyup', (event) => {
} }
}); });
// // const url = '/batalla.html?game_id=' + encodeURIComponent(partida.uuid);
// // window.open(url, '_blank');
function onClickEliminarPartida(game_id) { function onClickEliminarPartida(game_id) {
socket.emit('cancelPartida', game_id, handlers.onCancelPartida); socket.emit('cancelPartida', game_id, handlers.onCancelPartida);
} }
function onClickUnirsePartida(game_id) { function onClickUnirsePartida(game_id) {
socket.emit('joinPartida', game_id, handlers.onJoinPartida); socket.emit('joinPartida', game_id, handlers.onJoinPartida);
} }
function onClickEntrarEnPartida(game_id) {
const url = '/batalla.html?game_id=' + encodeURIComponent(game_id);
window.open(url, '_blank');
}

63
public/js_game/barco.js Normal file
View File

@ -0,0 +1,63 @@
export const BarcoTipo = Object.freeze({
FRAGATA: 1,
DESTRUCTOR: 2,
ACORAZADO: 3,
PORTAAVIONES: 4,
});
class Barco {
constructor(x, y, longitud, orientacion, barcoImg, tipoNave) {
this.barcoImg = barcoImg;
this.tipoNave = tipoNave;
this.xIni = this.x = x;
this.yIni = this.y = y;
this.longitud = longitud;
this.orientacionIni = this.orientacion = orientacion;
this.seleccionado = false;
this.posIncorrecta = true;
}
clickado(clickX, clickY) {
if (this.orientacion === 'VERTICAL') {
return (
clickX === this.x && clickY >= this.y && clickY < this.y + this.longitud
);
} else {
return (
clickY === this.y && clickX >= this.x && clickX < this.x + this.longitud
);
}
}
saveIniPos() {
this.orientacionIni = this.orientacion;
this.xIni = this.x;
this.yIni = this.y;
}
restoreIniPos() {
this.orientacion = this.orientacionIni;
this.x = this.xIni;
this.y = this.yIni;
}
setXY(x, y) {
this.x = x;
this.y = y;
}
giraBarco() {
this.orientacion === 'VERTICAL'
? (this.orientacion = 'HORIZONTAL')
: (this.orientacion = 'VERTICAL');
}
draw(ctx) {
this.orientacion === 'VERTICAL'
? ctx.drawImage(this.barcoImg[0], this.x * 64, this.y * 64)
: ctx.drawImage(this.barcoImg[1], this.x * 64, this.y * 64);
if (this.seleccionado) {
ctx.fillStyle = this.posIncorrecta
? 'rgba(255, 0, 0, 0.2)'
: 'rgba(187, 187, 0, 0.2)';
this.orientacion === 'VERTICAL'
? ctx.fillRect(this.x * 64, this.y * 64, 64, 64 * this.longitud)
: ctx.fillRect(this.x * 64, this.y * 64, 64 * this.longitud, 64);
}
}
}
export default Barco;

174
public/js_game/battleship.js
View File

@ -1,6 +1,178 @@
import { TableroEditor, TableroVisor } from './tablero.js';
const barcosImg = new Image();
barcosImg.src = '/assets/barcos.png';
barcosImg.onload = function () {
iniciaJuego();
};
function getSprites(spriteSheet) {
const sprites = {
PORTAAVIONES: [
{ x: 0, y: 0, width: 64, height: 256 },
{ x: 64, y: 192, width: 256, height: 64 },
],
ACORAZADO: [
{ x: 64, y: 0, width: 64, height: 192 },
{ x: 128, y: 128, width: 192, height: 64 },
],
DESTRUCTOR: [
{ x: 128, y: 0, width: 64, height: 128 },
{ x: 192, y: 64, width: 128, height: 64 },
],
FRAGATA: [
{ x: 192, y: 0, width: 64, height: 64 },
{ x: 256, y: 0, width: 64, height: 64 },
],
OCEANO: [
{ x: 320, y: 0, width: 32, height: 32 },
{ x: 384, y: 0, width: 32, height: 32 },
{ x: 416, y: 0, width: 32, height: 32 },
{ x: 320, y: 32, width: 32, height: 32 },
{ x: 352, y: 64, width: 32, height: 32 },
{ x: 416, y: 64, width: 32, height: 32 },
{ x: 320, y: 96, width: 32, height: 32 },
{ x: 352, y: 96, width: 32, height: 32 },
{ x: 416, y: 96, width: 32, height: 32 },
{ x: 448, y: 0, width: 32, height: 32 },
{ x: 512, y: 0, width: 32, height: 32 },
{ x: 544, y: 0, width: 32, height: 32 },
{ x: 448, y: 32, width: 32, height: 32 },
{ x: 480, y: 64, width: 32, height: 32 },
{ x: 544, y: 64, width: 32, height: 32 },
{ x: 448, y: 96, width: 32, height: 32 },
{ x: 480, y: 96, width: 32, height: 32 },
{ x: 544, y: 96, width: 32, height: 32 },
{ x: 576, y: 0, width: 32, height: 32 },
{ x: 640, y: 0, width: 32, height: 32 },
{ x: 672, y: 0, width: 32, height: 32 },
{ x: 576, y: 32, width: 32, height: 32 },
{ x: 608, y: 64, width: 32, height: 32 },
{ x: 672, y: 64, width: 32, height: 32 },
{ x: 576, y: 96, width: 32, height: 32 },
{ x: 608, y: 96, width: 32, height: 32 },
{ x: 672, y: 96, width: 32, height: 32 },
],
};
const spritesObj = {};
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
for (const key in sprites) {
if (Object.hasOwnProperty.call(sprites, key)) {
const spriteArray = sprites[key];
spritesObj[key] = spriteArray.map((sprite) => {
canvas.width = sprite.width;
canvas.height = sprite.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(
spriteSheet,
sprite.x,
sprite.y,
sprite.width,
sprite.height,
0,
0,
sprite.width,
sprite.height,
);
const spriteImage = new Image();
spriteImage.src = canvas.toDataURL();
return spriteImage;
});
}
}
return spritesObj;
}
function iniciaJuego() {
const canvasMapa = document.getElementById('mapa');
const canvasMiniMapa = document.getElementById('minimapa');
const sprites = getSprites(barcosImg);
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const gameId = urlParams.get('game_id'); const gameId = urlParams.get('game_id');
const userId = localStorage.getItem('userId'); const userId = localStorage.getItem('userId');
const socket = io('/batalla', { closeOnBeforeunload: true, auth: { userId, gameId } }); const socket = io('/batalla', {
closeOnBeforeunload: true,
auth: { userId, gameId },
});
let tablero = null;
const OnChangeState = (snapshotJugador) => {
switch (snapshotJugador.estado) {
case 'ENPREPARACION':
ENPREPARACION(snapshotJugador);
break;
case 'ENCURSO':
ENCURSO(snapshotJugador);
break;
}
};
const handlers = {
connect: () => {
gameLoop();
},
disconnect: () => {
window.close();
},
OnChangeState,
};
Object.entries(handlers).forEach(([event, handler]) => {
socket.on(event, handler);
});
const ENPREPARACION = (snapshotJugador) => {
muestraBoton('Fijar Flota',()=>{
console.log(JSON.stringify(tablero.mapaFlota.barcos));
socket.emit('sendFlota', tablero.mapaFlota.barcos,handlers.OnChangeState);
});
addMsgChat('Situa tu flota en el mapa y pulsa el boton para continuar');
tablero = new TableroEditor(canvasMapa, canvasMiniMapa, sprites, [
snapshotJugador.mapaFlota,
snapshotJugador.mapaDeAtaques,
]);
};
function addMsgChat(msg) {
const divChat = document.querySelector('#logchat');
const pMsg = document.createElement('p');
pMsg.textContent = msg;
divChat.appendChild(pMsg);
divChat.scrollTop = divChat.scrollHeight;
}
function muestraBoton(msg, callback) {
const divContent = document.querySelector('.div4');
divContent.innerHTML = `<button class="button button-orange prepasradoBtn"> --${msg}-- </button>`;
const preparadoBtn = divContent.querySelector('.prepasradoBtn');
preparadoBtn.addEventListener('click', callback);
}
function muestraAviso(msg) {
const divContent = document.querySelector('.div4');
divContent.innerHTML = `<span class="avisoMsg parpadea"> -- ${msg} -- </span>`;
}
function limpiaContenedorAvisos() {
const divContent = document.querySelector('.div4');
divContent.innerHTML = '';
}
function gameLoop() {
if (tablero) tablero.draw();
window.requestAnimationFrame(gameLoop);
}
}

266
public/js_game/mapa.js Normal file
View File

@ -0,0 +1,266 @@
import Barco from './barco.js';
import Oceano from './oceano.js';
class MapaBase {
constructor(canvas, size, scale, sprites) {
this.canvas = canvas;
this.canvas.width = size;
this.canvas.height = size;
this.width = size / scale;
this.height = size / scale;
this.ctx = this.canvas.getContext('2d');
this.scale = scale;
this.ctx.scale(this.scale, this.scale);
this.sprites = sprites;
this.oceano = new Oceano(this.width, this.height, 32, sprites['OCEANO']);
this.casillaSize = 64;
this.numFilas = 10;
this.numColumnas = 10;
}
draw() {
this.ctx.clearRect(0, 0, this.width, this.height);
this.oceano.draw(this.ctx);
}
}
class MapaVisor extends MapaBase {
celdas = [];
barcos = [];
constructor(canvas, size, scale, sprites, barcos, celdas) {
super(canvas, size, scale, sprites);
this.celdas = celdas;
//this.inicializarCeldas();
this.setBarcos(barcos);
}
inicializarCeldas() {
for (let i = 0; i < this.numFilas; i++) {
this.celdas[i] = new Array(this.numColumnas).fill(0);
}
}
setBarcos(barcos) {
const barcosArray = Array.isArray(barcos) ? barcos : [barcos];
for (const barco of barcosArray) {
this.barcos.push(
new Barco(
barco.x,
barco.y,
barco.longitud,
barco.orientacion,
this.sprites[barco.tipoNave],
barco.tipoNave,
),
);
}
}
draw() {
super.draw();
this.barcos.forEach((barco) => {
barco.draw(this.ctx);
});
this.ctx.beginPath();
for (let i = 1; i < this.numFilas; i++) {
const y = i * this.casillaSize;
this.ctx.moveTo(5, y);
this.ctx.lineTo(this.casillaSize * this.numColumnas - 5, y);
}
for (let i = 1; i < this.numColumnas; i++) {
const x = i * this.casillaSize;
this.ctx.moveTo(x, 5);
this.ctx.lineTo(x, this.casillaSize * this.numFilas - 5);
}
this.ctx.strokeStyle = 'rgba(0, 255, 0, 0.6)';
this.ctx.stroke();
this.ctx.fillStyle = 'red';
this.ctx.font = 'bold 24px Arial';
for (let fila = 0; fila < this.numFilas; fila++) {
for (let columna = 0; columna < this.numColumnas; columna++) {
const valor = this.celdas[fila][columna];
const posX = columna * this.casillaSize + this.casillaSize / 2.3;
const posY = fila * this.casillaSize + this.casillaSize / 1.5;
this.ctx.fillText(valor, posX, posY);
}
}
}
}
class MapaAtaque extends MapaVisor {
constructor(canvas, size, scale, sprites, barcos, celdas) {
super(canvas, size, scale, sprites, barcos, celdas);
canvas.addEventListener('click', this.getPosClick);
}
calcularCoordenadas(event) {
const rect = this.canvas.getBoundingClientRect();
const x = Math.floor(
(event.clientX - rect.left) / (this.casillaSize * this.scale),
);
const y = Math.floor(
(event.clientY - rect.top) / (this.casillaSize * this.scale),
);
return { x, y };
}
getPosClick = (event) => {
const { x, y } = this.calcularCoordenadas(event);
console.log(x, y);
};
draw() {
super.draw();
}
}
class MapaEditor extends MapaVisor {
barcoSeleccionado;
constructor(canvas, size, scale, sprites, barcos, celdas) {
super(canvas, size, scale, sprites, barcos, celdas);
canvas.addEventListener('click', this.getPosClick);
canvas.addEventListener('contextmenu', this.giraBarcoSeleccionado);
canvas.addEventListener('mousemove', this.mueveBarcoSeleccionado);
document.addEventListener('keydown', this.handleKeyDown);
}
fijaBarco(barco) {
barco.seleccionado = false;
const incFila = barco.orientacion === 'VERTICAL' ? 1 : 0;
const incColumna = barco.orientacion === 'HORIZONTAL' ? 1 : 0;
for (let i = 0; i < barco.longitud; i++) {
const fila = barco.y + i * incFila;
const columna = barco.x + i * incColumna;
this.celdas[fila][columna] = barco.longitud;
}
this.barcos.push(barco);
}
calcularCoordenadas(event) {
const rect = this.canvas.getBoundingClientRect();
const x = Math.floor(
(event.clientX - rect.left) / (this.casillaSize * this.scale),
);
const y = Math.floor(
(event.clientY - rect.top) / (this.casillaSize * this.scale),
);
return { x, y };
}
//Acuerdate!!!! funcion de flecha en los callBack para no tener problemas con el contexto this
handleKeyDown = (event) => {
const canvasFocused = document.activeElement === this.canvas;
if (canvasFocused && event.key === 'Escape' && this.barcoSeleccionado) {
this.barcoSeleccionado.restoreIniPos();
this.posicionaBarcoSeleccionado();
}
};
//Acuerdate!!!! funcion de flecha en los callBack para no tener problemas con el contexto this
giraBarcoSeleccionado = (event) => {
event.preventDefault();
if (this.barcoSeleccionado) {
if (
this.barcoSeleccionado.x + this.barcoSeleccionado.longitud <=
this.numColumnas &&
this.barcoSeleccionado.y + this.barcoSeleccionado.longitud <=
this.numFilas
) {
this.barcoSeleccionado.giraBarco();
this.barcoSeleccionado.posIncorrecta = this.sePuedeColocar();
}
}
};
//Acuerdate!!!! funcion de flecha en los callBack para no tener problemas con el contexto this
getPosClick = (event) => {
const { x, y } = this.calcularCoordenadas(event);
if (!this.barcoSeleccionado) {
const index = this.barcos.findIndex((barco) => barco.clickado(x, y));
if (index != -1) this.seleccionaBarco(index);
} else {
this.posicionaBarcoSeleccionado();
}
};
seleccionaBarco(index_barco) {
this.barcoSeleccionado = this.barcos[index_barco];
this.barcoSeleccionado.seleccionado = true;
this.barcoSeleccionado.saveIniPos();
this.barcos.splice(index_barco, 1);
const incFila = this.barcoSeleccionado.orientacion === 'VERTICAL' ? 1 : 0;
const incColumna =
this.barcoSeleccionado.orientacion === 'HORIZONTAL' ? 1 : 0;
for (let i = 0; i < this.barcoSeleccionado.longitud; i++) {
const fila = this.barcoSeleccionado.y + i * incFila;
const columna = this.barcoSeleccionado.x + i * incColumna;
this.celdas[fila][columna] = 0;
}
}
//Acuerdate!!!! funcion de flecha en los callBack para no tener problemas con el contexto this
mueveBarcoSeleccionado = (event) => {
if (this.barcoSeleccionado) {
const { x, y } = this.calcularCoordenadas(event);
if (!this.colisionBorde(x, y)) this.barcoSeleccionado.setXY(x, y);
this.barcoSeleccionado.posIncorrecta = this.sePuedeColocar();
}
};
posicionaBarcoSeleccionado() {
if (!this.barcoSeleccionado.posIncorrecta) {
this.fijaBarco(this.barcoSeleccionado);
this.barcoSeleccionado = null;
}
}
colisionBorde(x, y) {
const barco = this.barcoSeleccionado;
const longitud = barco.longitud;
const orientacion = barco.orientacion;
return orientacion === 'VERTICAL'
? x < 0 || x >= this.numColumnas || y < 0 || y + longitud > this.numFilas
: x < 0 || x + longitud > this.numColumnas || y < 0 || y > this.numFilas;
}
sePuedeColocar() {
const x = this.barcoSeleccionado.x;
const y = this.barcoSeleccionado.y;
const longitud = this.barcoSeleccionado.longitud;
const orientacion = this.barcoSeleccionado.orientacion;
let suma = 0;
if (orientacion === 'VERTICAL') {
for (let f = -1; f <= longitud; f++) {
for (let c = -1; c < 2; c++) {
const fila = y + f;
const columna = x + c;
if (
fila >= 0 &&
fila < this.celdas.length &&
columna >= 0 &&
columna < this.celdas[0].length
) {
suma += this.celdas[fila][columna];
}
}
}
} else {
for (let f = -1; f < 2; f++) {
for (let c = -1; c <= longitud; c++) {
const fila = y + f;
const columna = x + c;
if (
fila >= 0 &&
fila < this.celdas.length &&
columna >= 0 &&
columna < this.celdas[0].length
) {
suma += this.celdas[fila][columna];
}
}
}
}
return suma;
}
esFlotaValida() {
return true;
}
draw() {
super.draw();
if (this.barcoSeleccionado) this.barcoSeleccionado.draw(this.ctx);
}
}
export { MapaBase, MapaVisor, MapaAtaque, MapaEditor };

52
public/js_game/oceano.js Normal file
View File

@ -0,0 +1,52 @@
class Oceano {
constructor(width, height, celdaSize, sprites) {
this.sprites = sprites;
this.celdaSize = celdaSize;
this.filas = Math.floor(height / celdaSize);
this.columnas = Math.floor(width / celdaSize);
this.nFramesAnim = 3;
this.animFrame = 0;
this.gameFrame = 0;
this.lastColumnIndex = this.columnas - 1;
this.lastRowIndex = this.filas - 1;
this.lastColumnX = this.lastColumnIndex * this.celdaSize;
this.lastRowY = this.lastRowIndex * this.celdaSize;
}
update() {}
draw(ctx) {
this.animFrame = Math.floor(this.gameFrame / 10) % this.nFramesAnim;
this.gameFrame++;
const frame = this.animFrame * 9;
// Dibujar los bordes superior e inferior
ctx.drawImage(this.sprites[0 + frame], 0, 0);
ctx.drawImage(this.sprites[2 + frame], this.lastColumnX, 0);
ctx.drawImage(this.sprites[6 + frame], 0, this.lastRowY);
ctx.drawImage(this.sprites[8 + frame], this.lastColumnX, this.lastRowY);
// Dibujar los bordes laterales
for (let y = 1; y < this.lastRowIndex; y++) {
ctx.drawImage(this.sprites[3 + frame], 0, y * this.celdaSize);
ctx.drawImage(
this.sprites[5 + frame],
this.lastColumnX,
y * this.celdaSize
);
}
for (let x = 1; x < this.lastColumnIndex; x++) {
ctx.drawImage(this.sprites[1 + frame], x * this.celdaSize, 0);
ctx.drawImage(this.sprites[7 + frame], x * this.celdaSize, this.lastRowY);
}
// Dibujar el contenido interno
for (let y = 1; y < this.lastRowIndex; y++) {
for (let x = 1; x < this.lastColumnIndex; x++) {
ctx.drawImage(this.sprites[4], x * this.celdaSize, y * this.celdaSize);
}
}
}
}
export default Oceano;

53
public/js_game/tablero.js Normal file
View File

@ -0,0 +1,53 @@
import { MapaVisor,MapaEditor, MapaAtaque } from './mapa.js';
class TableroBase {
constructor(canvasMapa, canvasMiniMapa,sprites){
this.canvasMapa = canvasMapa;
this.canvasMiniMapa = canvasMiniMapa;
this.sprites = sprites;
}
}
class TableroEditor extends TableroBase{
constructor(canvasMapa, canvasMiniMapa,sprites, [mapaFlota, mapaAtaques] ){
super(canvasMapa, canvasMiniMapa,sprites)
const { barcos: barcosMapaFlota, celdas: celdasMapaFlota } = mapaFlota;
const { barcos: barcosMapaAtaques, celdas: celdasMapaAtaques } = mapaAtaques;
this.mapaFlota = new MapaEditor(canvasMapa, 640, 1,sprites,barcosMapaFlota,celdasMapaFlota);
this.mapaDeAtaques = new MapaVisor(canvasMiniMapa, 320, 0.5, sprites,barcosMapaAtaques,celdasMapaAtaques);
}
draw() {
this.mapaFlota.draw();
this.mapaDeAtaques.draw();
}
}
class TableroVisor extends TableroBase{
constructor(canvasMapa, canvasMiniMapa,sprites, [mapaFlota, mapaAtaques] ){
super(canvasMapa, canvasMiniMapa,sprites)
const { barcos: barcosMapaFlota, celdas: celdasMapaFlota } = mapaFlota;
const { barcos: barcosMapaAtaques, celdas: celdasMapaAtaques } = mapaAtaques;
this.mapaFlota = new MapaVisor(canvasMiniMapa, 320, 0.5,sprites,barcosMapaFlota,celdasMapaFlota);
this.mapaDeAtaques = new MapaVisor(canvasMapa, 640, 1, sprites,barcosMapaAtaques,celdasMapaAtaques);
}
draw() {
this.mapaFlota.draw();
this.mapaDeAtaques.draw();
}
}
class TableroAtaque extends TableroBase{
constructor(canvasMapa, canvasMiniMapa,sprites, [mapaFlota, mapaAtaques] ){
super(canvasMapa, canvasMiniMapa,sprites)
const { barcos: barcosMapaFlota, celdas: celdasMapaFlota } = mapaFlota;
const { barcos: barcosMapaAtaques, celdas: celdasMapaAtaques } = mapaAtaques;
this.mapaFlota = new MapaVisor(canvasMiniMapa, 320, 0.5,sprites,barcosMapaFlota,celdasMapaFlota);
this.mapaDeAtaques = new MapaAtaque(canvasMapa, 640, 1, sprites,barcosMapaAtaques,celdasMapaAtaques);
}
draw() {
this.mapaFlota.draw();
this.mapaDeAtaques.draw();
}
}
export {TableroBase,TableroEditor,TableroVisor}

191
public/stylegame.css
View File

@ -4,10 +4,14 @@
} }
* { * {
/* box-sizing: content-box; */
box-sizing: border-box; box-sizing: border-box;
min-width: 0; min-width: 0;
} }
h1,h2,h3,h4 { h1,
h2,
h3,
h4 {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -20,96 +24,165 @@ body {
} }
body { body {
padding: 1rem;
background: linear-gradient(to bottom right, #0f2027, #203a43, #2c5364); background: linear-gradient(to bottom right, #0f2027, #203a43, #2c5364);
color: white;
font-family: 'ITC Machine Std Bold', sans-serif; font-family: 'ITC Machine Std Bold', sans-serif;
text-align: center; color: #bf360c;
}
#container {
height: 100%;
display: flex; display: flex;
flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 0.5rem;
} }
#sub-container { /* Estilo base para los botones */
height: 648px; .button {
display: flex; width: 100%;
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; padding: 0.5rem 1rem;
font-size: 1rem; font-family: 'ITC Machine Std Bold', sans-serif;
font-size: 2rem;
border: none; border: none;
border-radius: 0.4rem; border-radius: 0.4rem;
background-color: #ff5722; /* Color de fondo naranja */ cursor: pointer;
color: white; /* Color del texto blanco */ transition: background-color 0.3s ease;
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 */ /* Estilo para el botón naranja */
#input-container input[type="button"]:hover { .button-orange {
background-color: #e64a19; /* Color de fondo naranja más oscuro al pasar el cursor */ background-color: #ff5722;
} }
/* Estilo del botón al hacer clic */ /* Estilo para el botón naranja claro al pasar el cursor */
#input-container input[type="button"]:active { .button-orange:hover {
background-color: #bf360c; /* Color de fondo naranja más oscuro al hacer clic */ background-color: #e64a19;
} }
/* Estilo para el botón naranja oscuro al hacer clic */
.button-orange:active {
background-color: #bf360c;
}
.avisoMsg {
width: 100%;
text-align: center;
margin: auto;
font-size: 3rem;
}
.parpadea {
animation-name: parpadeo;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: parpadeo;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
.parent {
height: 744px;
display: grid;
grid-template-columns: min-content min-content;
grid-template-rows: auto 328px 55px auto;
grid-column-gap: 4px;
}
.div1 {
grid-area: 1 / 1 / 2 / 3;
}
.div2 {
grid-area: 2 / 1 / 5 / 2;
width: 648px;
height: 648px;
border: 4px solid #2c5364;
border-radius: 10px;
}
.div3 {
grid-area: 2 / 2 / 3 / 3;
width: 328px;
height: 328px;
border: 4px solid #2c5364;
border-radius: 10px;
}
.div4 {
grid-area: 3 / 2 / 4 / 3;
display: flex;
padding: 0.2rem;
}
.div5 {
grid-area: 4 / 2 / 5 / 3;
border: 4px solid #2c5364;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 0.4rem;
overflow-y: hidden;
}
#mapa { #mapa {
width: 640px; width: 640px;
height: 640px; height: 640px;
background-color: #2c5364; background-color: #2c5364;
} }
#minimapa { #minimapa {
width: 320px; width: 320px;
height: 320px; height: 320px;
flex-shrink: 0; flex-shrink: 0;
background-color: #2c5364; background-color: #2c5364;
} }
#logchat {
#chat { width: 100%;
font-family: 'ITC Machine Std Bold', sans-serif;
resize: none;
width: 320px;
height: 100%; height: 100%;
background-color: transparent; padding: 0.1rem;
color: antiquewhite; padding-right: 0.4rem;
} font-family: 'roboto', sans-serif;
font-size: small;
.basic-input{ font-weight: bold;
font-family: 'ITC Machine Std Bold', sans-serif;
padding: 0.4rem;
font-size: larger;
border-radius: 0.4rem; border-radius: 0.4rem;
background-color: #2c5364; background-color: transparent;
overflow-y: auto;
}
#logchat p {
margin: 0;
}
#chatinput {
font-family: 'roboto', sans-serif;
padding: 0.4rem;
font-weight: bold;
border-radius: 0 0 0.4rem 0.4rem;
background-color: transparent;
color: wheat; color: wheat;
outline: none; outline: none;
}
@-moz-keyframes parpadeo {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes parpadeo {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes parpadeo {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
} }

34
src/batalla/batalla.gateway.ts
View File

@ -1,19 +1,41 @@
import { OnGatewayConnection, OnGatewayDisconnect, WebSocketGateway } from '@nestjs/websockets'; import {
OnGatewayConnection,
OnGatewayDisconnect,
SubscribeMessage,
WebSocketGateway,
} from '@nestjs/websockets';
import { BatallaService } from './batalla.service'; import { BatallaService } from './batalla.service';
import { Socket } from 'socket.io'; import { Socket } from 'socket.io';
import Barco from 'src/battleship/barco';
@WebSocketGateway({ namespace: 'batalla' }) @WebSocketGateway({ namespace: 'batalla' })
export class BatallaGateway implements OnGatewayConnection, OnGatewayDisconnect { export class BatallaGateway
implements OnGatewayConnection, OnGatewayDisconnect
{
constructor(private readonly batallaService: BatallaService) {} constructor(private readonly batallaService: BatallaService) {}
handleConnection(client: Socket) { handleConnection(client: Socket) {
const {userId,gameId}=client.handshake.auth const { userId, gameId } = client.handshake.auth;
if (this.batallaService.existePartidaUsuario(gameId,userId)){
client.emit('OnChangeState',this.batallaService.getSnapshotJugador(gameId,userId));
}else{
client.disconnect();
}
}
handleDisconnect(client: Socket) {}
@SubscribeMessage('sendFlota')
handleMsg(client: Socket, barcos:Barco[]) {
const { userId, gameId } = client.handshake.auth;
console.log(barcos);
console.log(barcos[0] instanceof Barco);
const snapshotJugador = this.batallaService.getSnapshotJugador(gameId,userId);
snapshotJugador.prepararFlota(barcos);
} }
handleDisconnect(client: Socket) {
}
} }

2
src/batalla/batalla.module.ts
View File

@ -1,8 +1,10 @@
import { Module } from '@nestjs/common'; import { Module } from '@nestjs/common';
import { BatallaService } from './batalla.service'; import { BatallaService } from './batalla.service';
import { BatallaGateway } from './batalla.gateway'; import { BatallaGateway } from './batalla.gateway';
import { SharedModule } from 'src/shared/shared.module';
@Module({ @Module({
imports:[SharedModule],
providers: [BatallaGateway, BatallaService], providers: [BatallaGateway, BatallaService],
}) })
export class BatallaModule {} export class BatallaModule {}

20
src/batalla/batalla.service.ts
View File

@ -1,4 +1,22 @@
import { Injectable } from '@nestjs/common'; import { Injectable } from '@nestjs/common';
import { PartidasService } from 'src/shared/partidas.service';
import { UsuariosService } from 'src/shared/usuarios.service';
@Injectable() @Injectable()
export class BatallaService {} export class BatallaService {
constructor(
private readonly partidasService: PartidasService,
) {}
existePartidaUsuario(uuidPartida:string,uuidJugador:string){
return this.partidasService.existePartida(uuidPartida,uuidJugador);
}
getSnapshotJugador(uuidPartida:string,uuidJugador:string){
return this.partidasService.getSnapshotJugador(uuidPartida,uuidJugador);
}
}

13
src/battleship/barco.ts
View File

@ -13,7 +13,8 @@ export default class Barco {
public longitud: number, public longitud: number,
public orientacion: string, public orientacion: string,
public impactos: number = 0, public impactos: number = 0,
public destruido = false, public destruido: boolean = false,
public tipoNave: string = '',
) {} ) {}
recibirImpacto() { recibirImpacto() {
@ -26,4 +27,14 @@ export default class Barco {
haSidoDestruido(): boolean { haSidoDestruido(): boolean {
return this.destruido; return this.destruido;
} }
toJSON() {
return {
x: this.x,
y: this.y,
longitud: this.longitud,
orientacion: this.orientacion,
tipoNave: this.tipoNave,
};
}
} }

48
src/battleship/battleship.ts
View File

@ -1,3 +1,4 @@
import Barco from './barco';
import Jugador from './jugador'; import Jugador from './jugador';
export default class BattleshipGame { export default class BattleshipGame {
@ -6,52 +7,11 @@ export default class BattleshipGame{
turnoActual: Jugador | null; turnoActual: Jugador | null;
constructor( constructor() {
public idPartida: string,
) {
this.turnoActual = null; this.turnoActual = null;
} this.jugadorA=new Jugador();
this.jugadorB=new Jugador();
setJugadorA(jugador:Jugador){
this.jugadorA=jugador;
}
setJugadorB(jugador:Jugador){
this.jugadorB=jugador;
}
iniciaPartida() {
this.turnoActual=this.jugadorA; this.turnoActual=this.jugadorA;
// Iniciar el primer turno
this.realizarTurno();
} }
realizarTurno() {
// Realizar las acciones correspondientes al turno actual
// Por ejemplo, mostrar el mapa del turno actual, solicitar un disparo, etc.
// Implementa esta parte según sea necesario
// Luego, alternar el turno al otro jugador
this.turnoActual =
this.turnoActual === this.jugadorA ? this.jugadorB : this.jugadorA;
// Verificar si se ha alcanzado el final del juego
if (this.haFinalizado()) {
this.finalizaPartida();
} else {
// Si no ha finalizado, continuar con el próximo turno
this.realizarTurno();
}
}
haFinalizado(): boolean {
// Aquí debes implementar la lógica para verificar si el juego ha finalizado
// Por ejemplo, si todos los barcos de uno de los jugadores han sido destruidos
// Devuelve true si el juego ha finalizado, de lo contrario, devuelve false
// Implementa esta parte según sea necesario
return false;
}
finalizaPartida() {
// Aquí debes implementar la lógica para finalizar el juego
// Por ejemplo, mostrar el resultado (quién ganó, etc.)
// Implementa esta parte según sea necesario
}
} }

78
src/battleship/jugador.ts
View File

@ -5,35 +5,72 @@ export default class Jugador {
public mapaFlota: Mapa = new Mapa(); public mapaFlota: Mapa = new Mapa();
public mapaDeAtaques: Mapa = new Mapa(); public mapaDeAtaques: Mapa = new Mapa();
public jugadorPreparado: boolean = false; public estado: string = 'ENPREPARACION';
public barcos: Barco[] = [ public barcos: Barco[] = [
new Barco(1, 0, 0, BarcoTipo.PORTAAVIONES, 'VERTICAL'), new Barco(
new Barco(2, 1, 0, BarcoTipo.ACORAZADO, 'VERTICAL'), 1,
new Barco(3, 2, 0, BarcoTipo.ACORAZADO, 'VERTICAL'), 0,
new Barco(4, 3, 0, BarcoTipo.ACORAZADO, 'VERTICAL'), 0,
new Barco(5, 4, 0, BarcoTipo.DESTRUCTOR, 'VERTICAL'), BarcoTipo.PORTAAVIONES,
new Barco(6, 5, 0, BarcoTipo.DESTRUCTOR, 'VERTICAL'), 'VERTICAL',
new Barco(7, 6, 0, BarcoTipo.DESTRUCTOR, 'VERTICAL'), 0,
new Barco(8, 7, 0, BarcoTipo.FRAGATA, 'VERTICAL'), false,
new Barco(9, 8, 0, BarcoTipo.FRAGATA, 'VERTICAL'), 'PORTAAVIONES',
),
new Barco(2, 1, 0, BarcoTipo.ACORAZADO, 'VERTICAL', 0, false, 'ACORAZADO'),
new Barco(3, 2, 0, BarcoTipo.ACORAZADO, 'VERTICAL', 0, false, 'ACORAZADO'),
new Barco(4, 3, 0, BarcoTipo.ACORAZADO, 'VERTICAL', 0, false, 'ACORAZADO'),
new Barco(
5,
4,
0,
BarcoTipo.DESTRUCTOR,
'VERTICAL',
0,
false,
'DESTRUCTOR',
),
new Barco(
6,
5,
0,
BarcoTipo.DESTRUCTOR,
'VERTICAL',
0,
false,
'DESTRUCTOR',
),
new Barco(
7,
6,
0,
BarcoTipo.DESTRUCTOR,
'VERTICAL',
0,
false,
'DESTRUCTOR',
),
new Barco(8, 7, 0, BarcoTipo.FRAGATA, 'VERTICAL', 0, false, 'FRAGATA'),
new Barco(9, 8, 0, BarcoTipo.FRAGATA, 'VERTICAL', 0, false, 'FRAGATA'),
]; ];
constructor(public nickname: string) {} constructor() {
this.mapaFlota.setBarcos(this.barcos);
}
prepararFlota(barcos: Barco[]) { prepararFlota(barcos: Barco[]) {
this.barcos = barcos; this.barcos = barcos;
this.mapaFlota.setBarcos(this.barcos); this.mapaFlota.setBarcos(this.barcos);
this.jugadorPreparado = true;
}
setBarcos(barcos: Barco[]) {
this.mapaFlota.setBarcos(barcos);
} }
realizarDisparo(x: number, y: number, rival: Jugador): boolean { realizarDisparo(x: number, y: number, rival: Jugador): boolean {
const acierto = rival.mapaFlota.verificaDisparo(x, y); const acierto = rival.mapaFlota.verificaDisparo(x, y);
this.mapaDeAtaques.marcaDisparo(x,y,acierto ? EstadoCelda.Golpe : EstadoCelda.Agua); this.mapaDeAtaques.marcaDisparo(
x,
y,
acierto ? EstadoCelda.Golpe : EstadoCelda.Agua,
);
return acierto; return acierto;
} }
@ -46,4 +83,11 @@ export default class Jugador {
return true; return true;
} }
toJSON() {
return {
mapaFlota: this.mapaFlota,
mapaDeAtaques: this.mapaDeAtaques,
estado: this.estado,
};
}
} }

10
src/battleship/mapa.ts
View File

@ -5,10 +5,14 @@ export enum EstadoCelda {
Agua = -1, Agua = -1,
Golpe = -2, Golpe = -2,
} }
export default class Mapa { export default class Mapa {
celdas: number[][] = []; celdas: number[][] = [];
barcosMapa: Map<number, Barco> = new Map<number, Barco>(); barcosMapa: Map<number, Barco> = new Map<number, Barco>();
get barcos() {
return Array.from(this.barcosMapa.values());
}
constructor() { constructor() {
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
this.celdas[i] = []; this.celdas[i] = [];
@ -18,6 +22,10 @@ export default class Mapa {
} }
} }
toJSON() {
return { celdas: this.celdas, barcos: this.barcos };
}
setBarcos(barcos: Barco | Barco[]) { setBarcos(barcos: Barco | Barco[]) {
const barcosArray = Array.isArray(barcos) ? barcos : [barcos]; const barcosArray = Array.isArray(barcos) ? barcos : [barcos];
for (const barco of barcosArray) { for (const barco of barcosArray) {

8
src/sala-chat/sala-chat.gateway.ts
View File

@ -27,7 +27,7 @@ export class SalaChatGateway
client.emit('onConnectRoom', { client.emit('onConnectRoom', {
usuarios: this.salaChatService.listaUsuarios, usuarios: this.salaChatService.listaUsuarios,
partidas: this.salaChatService.partidasAbiertas, partidas: this.salaChatService.partidasAbiertas,
partidasEnCurso: '', partidasEnCurso: this.salaChatService.getPartidasEnCurso(userId),
}); });
client.broadcast client.broadcast
.to('chat_general') .to('chat_general')
@ -88,8 +88,8 @@ export class SalaChatGateway
handleJoinPartida(client: Socket, uuidPartida: string) { handleJoinPartida(client: Socket, uuidPartida: string) {
const userId = client.handshake.auth.userId; const userId = client.handshake.auth.userId;
const partida = this.salaChatService.unirsePartida(userId, uuidPartida); const partida = this.salaChatService.unirsePartida(userId, uuidPartida);
client.broadcast.to('chat_general').emit('onJoinPartida', partida);
return partida;
}
client.broadcast.to('chat_general').emit('onJoinPartida', partida.uuid);
return partida.uuid;
}
} }

16
src/sala-chat/sala-chat.service.ts
View File

@ -17,25 +17,27 @@ export class SalaChatService {
return this.partidasService.partidasAbiertas; return this.partidasService.partidasAbiertas;
} }
getPartidasEnCurso getPartidasEnCurso(uuid: string) {
return this.partidasService.partidasCerradadas.filter((partida) => {
return partida.uuidJugadorA === uuid || partida.uuidJugadorB === uuid;
});
}
getUsuarioUUID(uuid: string) { getUsuarioUUID(uuid: string) {
return this.usuariosService.getUsuarioByUUID(uuid); return this.usuariosService.getUsuarioByUUID(uuid);
} }
conectaUsuarioUUID(uuid: string, socketId: string) { conectaUsuarioUUID(uuid: string, socketId: string) {
const user = this.usuariosService.getUsuarioByUUID(uuid); const user = this.usuariosService.getUsuarioByUUID(uuid);
if (user) { if (user) {
user.socketId = socketId; user.socketId = socketId;
user.conectado = true; user.conectado = true;
return { return user;
uuid: user.uuid,
nickname: user.nickname,
conectado: user.conectado,
};
} else { } else {
return undefined; return undefined;
} }
} }
desconectaUsuarioUUID(uuid: string) { desconectaUsuarioUUID(uuid: string) {
const user = this.usuariosService.getUsuarioByUUID(uuid); const user = this.usuariosService.getUsuarioByUUID(uuid);
if (user) { if (user) {
@ -54,9 +56,11 @@ export class SalaChatService {
const partida = this.partidasService.creaPartida(uuidJugadorCreador); const partida = this.partidasService.creaPartida(uuidJugadorCreador);
return partida; return partida;
} }
unirsePartida(uuidJugadorB: string, uuidPartida: string) { unirsePartida(uuidJugadorB: string, uuidPartida: string) {
return this.partidasService.unirsePartida(uuidJugadorB, uuidPartida); return this.partidasService.unirsePartida(uuidJugadorB, uuidPartida);
} }
eliminarPartida(uuidJugador: string, uuidPartida: string) { eliminarPartida(uuidJugador: string, uuidPartida: string) {
return this.partidasService.eliminarPartida(uuidJugador, uuidPartida); return this.partidasService.eliminarPartida(uuidJugador, uuidPartida);
} }

41
src/shared/partidas.service.ts
View File

@ -1,16 +1,29 @@
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { Injectable } from '@nestjs/common'; import { Injectable } from '@nestjs/common';
import { UsuariosService } from './usuarios.service'; import { UsuariosService } from './usuarios.service';
import BattleshipGame from 'src/battleship/battleship';
export class Partida { export class Partida {
constructor( constructor(
public uuid: string, public uuid: string,
public uuidJugadorA: string, public uuidJugadorA: string,
public nickJugadorA: string = '', public nickJugadorA: string = null,
public uuidJugadorB: string = null, public uuidJugadorB: string = null,
public nickJugadorB: string = null, public nickJugadorB: string = null,
public abierta: boolean = true, public abierta: boolean = true,
public batalla: BattleshipGame = null,
) {} ) {}
toJson() {
return {
uuid: this.uuid,
uuidJugadorA: this.uuidJugadorA,
nickJugadorA: this.nickJugadorA,
uuidJugadorB: this.uuidJugadorB,
nickJugadorB: this.nickJugadorB,
abierta: this.abierta,
};
}
} }
@Injectable() @Injectable()
@ -18,19 +31,16 @@ export class PartidasService {
private _partidas: Map<string, Partida> = new Map<string, Partida>(); private _partidas: Map<string, Partida> = new Map<string, Partida>();
constructor(private readonly usuariosService: UsuariosService) {} constructor(private readonly usuariosService: UsuariosService) {}
get partidasAbiertas(): Partida[] { get partidasAbiertas(): Partida[] {
return Array.from(this._partidas.values()).filter( return Array.from(this._partidas.values()).filter(
(partida) => partida.abierta, (partida) => partida.abierta,
); );
} }
get partidasCerradadas(): Partida[] { get partidasCerradadas(): Partida[] {
return Array.from(this._partidas.values()).filter( return Array.from(this._partidas.values()).filter(
(partida) => !partida.abierta, (partida) => !partida.abierta,
); );
} }
creaPartida(uuidJugadorA: string) { creaPartida(uuidJugadorA: string) {
const uuid = uuidv4(); const uuid = uuidv4();
const nickJugadorA = const nickJugadorA =
@ -39,16 +49,16 @@ export class PartidasService {
this._partidas.set(uuid, partida); this._partidas.set(uuid, partida);
return partida; return partida;
} }
unirsePartida(uuidJugadorB: string, uuidPartida: string) { unirsePartida(uuidJugadorB: string, uuidPartida: string) {
const partida = this._partidas.get(uuidPartida); const partida = this._partidas.get(uuidPartida);
const nickJugadorB = this.usuariosService.usuarios.get(uuidJugadorB)?.nickname; const nickJugadorB =
this.usuariosService.usuarios.get(uuidJugadorB)?.nickname;
partida.uuidJugadorB = uuidJugadorB; partida.uuidJugadorB = uuidJugadorB;
partida.nickJugadorB = nickJugadorB; partida.nickJugadorB = nickJugadorB;
partida.abierta = false; partida.abierta = false;
partida.batalla = new BattleshipGame();
return partida; return partida;
} }
eliminarPartida(uuidJugador: string, uuidPartida: string) { eliminarPartida(uuidJugador: string, uuidPartida: string) {
if (!this._partidas.has(uuidPartida)) { if (!this._partidas.has(uuidPartida)) {
return null; return null;
@ -64,4 +74,21 @@ export class PartidasService {
return uuidPartida; return uuidPartida;
} }
existePartida(uuidPartida: string, uuidJugador: string): boolean {
if (!this._partidas.has(uuidPartida)) {
return false;
}
const partida = this._partidas.get(uuidPartida);
return (partida.uuidJugadorA === uuidJugador || partida.uuidJugadorB === uuidJugador)
}
getSnapshotJugador(uuidPartida: string, uuidJugador: string){
if (this.existePartida(uuidPartida,uuidJugador)){
const partida=this._partidas.get(uuidPartida);
return partida.uuidJugadorA === uuidJugador ? partida.batalla.jugadorA : partida.batalla.jugadorB;
}
return null;
}
} }