Refactorizaciones

public/js_game/barco.js

@@ -6,7 +6,8 @@ export const BarcoTipo = Object.freeze({
 });
 
 class Barco {
-  constructor(x, y, longitud, orientacion, barcoImg, tipoNave) {
+  constructor(id, x, y, longitud, orientacion, barcoImg, tipoNave) {
+    this.id=id;
     this.barcoImg = barcoImg;
     this.tipoNave = tipoNave;
     this.xIni = this.x = x;
@@ -59,5 +60,19 @@ class Barco {
         : ctx.fillRect(this.x * 64, this.y * 64, 64 * this.longitud, 64);
     }
   }
+
+  toJSON() {
+    return {
+      id:this.id,
+      x:this.x, 
+      y:this.y, 
+      longitud:this.longitud, 
+      orientacion:this.orientacion,
+      tipoNave: this.tipoNave
+    };
+  }
+
+
+
 }
 export default Barco;

public/js_game/battleship.js

@@ -1,4 +1,4 @@
-import { TableroEditor, TableroVisor } from './tablero.js';
+import { TableroEditor, TableroAtaque ,TableroVisor } from './tablero.js';
 const barcosImg = new Image();
 barcosImg.src = '/assets/barcos.png';
 
@@ -105,12 +105,13 @@ function iniciaJuego() {
   let tablero = null;
 
   const OnChangeState = (snapshotJugador) => {
+    console.log(snapshotJugador);
     switch (snapshotJugador.estado) {
       case 'ENPREPARACION':
         ENPREPARACION(snapshotJugador);
         break;
-      case 'ENCURSO':
+      case 'ENESPERA':
-        ENCURSO(snapshotJugador);
+        ENESPERA(snapshotJugador);
         break;
     }
   };
@@ -132,8 +133,7 @@ function iniciaJuego() {
 
   const ENPREPARACION = (snapshotJugador) => {
     muestraBoton('Fijar Flota',()=>{
-      console.log(JSON.stringify(tablero.mapaFlota.barcos));
+      socket.emit('setFlota', tablero.mapaFlota.barcos,handlers.OnChangeState);
-      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, [
@@ -142,12 +142,14 @@ function iniciaJuego() {
     ]);
   };
 
-
+  const ENESPERA = (snapshotJugador) => {
-
+    muestraAviso('Espera')
-
+    addMsgChat('Espera mientras el rival acaba de colocar sus tropas');
-
+    tablero = new TableroVisor(canvasMapa, canvasMiniMapa, sprites, [
-
+      snapshotJugador.mapaFlota,
-
+      snapshotJugador.mapaDeAtaques,
+    ]);
+  };
 
   function addMsgChat(msg) {
     const divChat = document.querySelector('#logchat');

public/js_game/mapa.js

@@ -43,6 +43,7 @@ class MapaVisor extends MapaBase {
     for (const barco of barcosArray) {
       this.barcos.push(
         new Barco(
+          barco.id,
           barco.x,
           barco.y,
           barco.longitud,
@@ -130,7 +131,7 @@ class MapaEditor extends MapaVisor {
     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.celdas[fila][columna] = barco.id;
     }
     this.barcos.push(barco);
   }

public/js_game/tablero.js

@@ -50,4 +50,4 @@ class TableroAtaque extends TableroBase{
 
 
 
-export {TableroBase,TableroEditor,TableroVisor}
+export {TableroBase,TableroEditor,TableroVisor,TableroAtaque}

public/stylegame.css

@@ -129,8 +129,7 @@ body {
 #logchat {
   width: 100%;
   height: 100%;
-  padding: 0.1rem;
+  padding: 0.4rem;
-  padding-right: 0.4rem;
   font-family: 'roboto', sans-serif;
   font-size: small;
   font-weight: bold;

src/batalla/batalla.gateway.ts

@@ -16,26 +16,23 @@ export class BatallaGateway
 
   handleConnection(client: Socket) {
     const { userId, gameId } = client.handshake.auth;
-    if (this.batallaService.existePartidaUsuario(gameId,userId)){
+    if (this.batallaService.existePartidaUsuario(gameId, userId)) {
-      client.emit('OnChangeState',this.batallaService.getSnapshotJugador(gameId,userId));
+      client.emit(
-    }else{
+        'OnChangeState',
+        this.batallaService.getSnapshotJugador(gameId, userId),
+      );
+    } else {
       client.disconnect();
     }
   }
 
   handleDisconnect(client: Socket) {}
 
-  @SubscribeMessage('sendFlota')
+  @SubscribeMessage('setFlota')
-  handleMsg(client: Socket, barcos:Barco[]) {
+  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);
+    return snapshotJugador;
   }
-
+}
-
-
-
-
-}

src/battleship/barco.ts

@@ -30,6 +30,7 @@ export default class Barco {
 
   toJSON() {
     return {
+      id:this.id,
       x: this.x,
       y: this.y,
       longitud: this.longitud,

src/battleship/battleship.ts

@@ -4,14 +4,17 @@ import Jugador from './jugador';
 export default class BattleshipGame {
   public jugadorA: Jugador;
   public jugadorB: Jugador;
+  private _estado: string;
 
-  turnoActual: Jugador | null;
+  get estado(){return this._estado}
-
+  set estado(estado:string){
+    this._estado=estado;
+  }
   constructor() {
-    this.turnoActual = null;
     this.jugadorA=new Jugador();
     this.jugadorB=new Jugador();    
-    this.turnoActual=this.jugadorA;
+    this.estado='ENPREPARACION';
   }
 
+  
 }

src/battleship/jugador.ts

@@ -59,9 +59,24 @@ export default class Jugador {
     this.mapaFlota.setBarcos(this.barcos);
   }
 
-  prepararFlota(barcos: Barco[]) {
+  prepararFlota(barcosJSON: Barco[]) {
-    this.barcos = barcos;
+    this.barcos = [];
+    barcosJSON.forEach((barco, index) => {
+      this.barcos.push(
+        new Barco(
+          barco.id,
+          barco.x,
+          barco.y,
+          barco.longitud,
+          barco.orientacion,
+          0,
+          false,
+          barco.tipoNave,
+        ),
+      );
+    });
     this.mapaFlota.setBarcos(this.barcos);
+    this.cambiaEstado('ENESPERA');
   }
 
   realizarDisparo(x: number, y: number, rival: Jugador): boolean {
@@ -83,6 +98,10 @@ export default class Jugador {
     return true;
   }
 
+  cambiaEstado(estado: string) {
+    this.estado = estado;
+  }
+
   toJSON() {
     return {
       mapaFlota: this.mapaFlota,

src/battleship/mapa.ts

@@ -14,6 +14,14 @@ export default class Mapa {
   }
 
   constructor() {
+    this.inicializaCeldas();
+  }
+
+  toJSON() {
+    return { celdas: this.celdas, barcos: this.barcos };
+  }
+
+  inicializaCeldas() {
     for (let i = 0; i < 10; i++) {
       this.celdas[i] = [];
       for (let j = 0; j < 10; j++) {
@@ -22,11 +30,8 @@ export default class Mapa {
     }
   }
 
-  toJSON() {
-    return { celdas: this.celdas, barcos: this.barcos };
-  }
-
   setBarcos(barcos: Barco | Barco[]) {
+    this.inicializaCeldas();
     const barcosArray = Array.isArray(barcos) ? barcos : [barcos];
     for (const barco of barcosArray) {
       const incFila = barco.orientacion === 'VERTICAL' ? 1 : 0;