Añadido un id único a cada celda

src/app/mapa.service.ts

@@ -12,7 +12,7 @@ import { Injectable } from '@angular/core';
  * basadas en identificadores de bloques utilizados en un mapa visual.
  */
 export class MapaService {
-
+  private mapMatrix: { id: string, idUnico: number }[][] = [];
   private idAMapaImagen: { [key: string]: string } = {};   // Mapa de IDs a rutas de imágenes.
 
   constructor() {
@@ -61,14 +61,31 @@ export class MapaService {
  * @param cols El número de columnas que debe tener la matriz del mapa.
  * @return Una matriz de strings donde cada elemento representa un bloque del mapa.
  */
-  public creaMapaMatriz(mapStr: string, rows: number, cols: number): string[][] {
+  public creaMapaMatriz(mapStr: string, rows: number, cols: number): {id: string, idUnico: number}[][] {
     let blockIds = mapStr.match(/.{1,2}/g) || [];
-    let mapMatrix: string[][] = [];
-
+    let mapMatrix: {id: string, idUnico: number}[][] = [];
+    let idUnico = 0;  // Inicializa el contador de ID único
+  
     for (let i = 0; i < blockIds.length; i += cols) {
-      mapMatrix.push(blockIds.slice(i, i + cols));
+      let row = blockIds.slice(i, i + cols).map(id => ({
+        id: id,
+        idUnico: idUnico++  // Asigna un ID único a cada bloque
+      }));
+      mapMatrix.push(row);
     }
-
+  
     return mapMatrix;
   }
+
+    // Método para obtener la celda por su id único
+    public getCeldaIdUnico(idUnico: number): { id: string, idUnico: number } | undefined {
+      for (let row of this.mapMatrix) {
+        const celdaEncontrada = row.find(cell => cell.idUnico === idUnico);
+        if (celdaEncontrada) {
+          return celdaEncontrada;
+        }
+      }
+      return undefined; // Retorna undefined si no encuentra la celda
+    }
+  
 }

src/app/mapa/mapa.component.html

@@ -2,13 +2,13 @@
   <!-- Contenedor principal del mapa que itera sobre cada fila del mapa -->
   <div *ngFor="let row of mapMatrix; let rowIndex = index" class="map-row">
     <!-- Itera sobre cada bloque dentro de la fila del mapa, escucha el evento de click y aplica la clase si el bloque seleccionado es recogida o entrega-->
-    <div *ngFor="let blockId of row; let colIndex = index" class="map-block"
-         (click)="enCeldaClickeada(blockId, rowIndex, colIndex)" 
-         [class.selected-pickup]="SeleccionadoIdRecogida === blockId"  
-         [class.selected-delivery]="SeleccionadoIdEntrega === blockId"> 
+    <div *ngFor="let celda of row; let colIndex = index" class="map-block"
+         (click)="enCeldaClickeada(celda, rowIndex, colIndex)" 
+         [class.selected-pickup]="SeleccionadoIdRecogida === celda.id"  
+         [class.selected-delivery]="SeleccionadoIdEntrega === celda.id"> 
          
       <!-- Muestra la imagen del bloque, obteniendo la ruta a través del servicio -->
-      <img [src]="'assets/' + getRutaIdDeCelda(blockId)" [alt]="'Bloque ' + blockId">
+      <img [src]="'assets/' + getRutaIdDeCelda(celda.id)" [alt]="'Bloque ' + celda.id">
     </div>
   </div>
 </div>

src/app/mapa/mapa.component.ts

@@ -17,9 +17,9 @@ import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
  */
 export class MapaComponent implements OnInit {
   @Input() interactivo: boolean = true;
-  @Output() celdaSeleccionada = new EventEmitter<{ id: string, row: number, col: number }>();
+  @Output() celdaSeleccionada = new EventEmitter<{ id: string, idUnico: number, row: number, col: number }>();
   @Output() celdaInvalidaClickeada = new EventEmitter<void>();
-  mapMatrix: string[][] = [];
+  mapMatrix: {id: string, idUnico: number}[][] = [];
   mapStr: string = "0202000105030705000200041109060110031000000200080101100110000106010701"; // Cadena de texto que representa las casillas del mapa
   rows: number = 7;
   cols: number = 5;
@@ -49,11 +49,11 @@ export class MapaComponent implements OnInit {
     let conexionesValidas = 0;
 
     if (celdaId === '01') {
-      if (col > 0 && !this.sinConexionDerecha.includes(this.mapMatrix[row][col - 1])) conexionesValidas++; //A su izquierda
-      if (col < this.cols - 1 && !this.sinConexionIzquierda.includes(this.mapMatrix[row][col + 1])) conexionesValidas++; //A su derecha
+      if (col > 0 && !this.sinConexionDerecha.includes(this.mapMatrix[row][col - 1].id)) conexionesValidas++; //A su izquierda
+      if (col < this.cols - 1 && !this.sinConexionIzquierda.includes(this.mapMatrix[row][col + 1].id)) conexionesValidas++; //A su derecha
     } else if (celdaId === '02') {
-      if (row > 0 && !this.sinConexionAbajo.includes(this.mapMatrix[row - 1][col])) conexionesValidas++; //Arriba
-      if (row < this.rows - 1 && !this.sinConexionArriba.includes(this.mapMatrix[row + 1][col])) conexionesValidas++; //Abajo
+      if (row > 0 && !this.sinConexionAbajo.includes(this.mapMatrix[row - 1][col].id)) conexionesValidas++; //Arriba
+      if (row < this.rows - 1 && !this.sinConexionArriba.includes(this.mapMatrix[row + 1][col].id)) conexionesValidas++; //Abajo
     }
 
     return conexionesValidas === 1;
@@ -92,12 +92,12 @@ export class MapaComponent implements OnInit {
  * @param row La fila en la matriz del mapa donde está el bloque.
  * @param col La columna en la matriz del mapa donde está el bloque.
  */
-  enCeldaClickeada(celdaId: string, row: number, col: number): void {
+  enCeldaClickeada(celda: { id: string, idUnico: number }, row: number, col: number): void {
     if(this.interactivo){
-    if (this.esCeldaValida(celdaId,row,col)) {
+    if (this.esCeldaValida(celda.id,row,col)) {
 
       // Emitir también la fila y la columna
-      this.celdaSeleccionada.emit({ id: celdaId, row, col });
+      this.celdaSeleccionada.emit({ id: celda.id, idUnico: celda.idUnico, row, col });
     } else {
       this.celdaInvalidaClickeada.emit();
       alert('Esta casilla no es válida para selección.');