Funciona el resalte y las coordenadas

src/app/crear-pedido-dialog/crear-pedido-dialog.component.html

@@ -3,11 +3,11 @@
 <div class="seleccion">
   <div class="puntos">
     <div class="punto-recogida">
-      <div>Punto de recogida</div>
+      <div>Punto de recogida: Casilla ({{ puntoDeRecogida?.row }}, {{ puntoDeRecogida?.col }})</div>
       <img *ngIf="puntoDeRecogida" [src]="getImagePath(puntoDeRecogida)" />
     </div>
     <div class="punto-entrega">
-      <div>Punto de entrega</div>
+      <div>Punto de entrega: Casilla ({{ puntoDeEntrega?.row }}, {{ puntoDeEntrega?.col }})</div>
       <img *ngIf="puntoDeEntrega" [src]="getImagePath(puntoDeEntrega)" />
     </div>
   </div>

src/app/crear-pedido-dialog/crear-pedido-dialog.component.ts

@@ -6,24 +6,26 @@ import { Component } from '@angular/core';
   styleUrls: ['./crear-pedido-dialog.component.css']
 })
 export class CrearPedidoDialogComponent {
-  puntoDeRecogida: string | null = null;
-  puntoDeEntrega: string | null = null;
-  highlightedBlock: string | null = null; // Nuevo estado para el bloque resaltado
+  puntoDeRecogida: {id: string, row: number, col: number} | null = null;
+puntoDeEntrega: {id: string, row: number, col: number} | null = null;
 
-  onBlockSelected(blockId: string): void {
-    if (!this.puntoDeRecogida) {
-      this.puntoDeRecogida = blockId;
-      this.highlightedBlock = blockId; // Resaltar el bloque seleccionado como punto de recogida
-    } else if (!this.puntoDeEntrega && this.puntoDeRecogida !== blockId) {
-      this.puntoDeEntrega = blockId;
-      // No es necesario resaltar el punto de entrega ya que se confirmará el pedido
-    }
+onBlockSelected(event: {id: string, row: number, col: number}): void {
+  if (!this.puntoDeRecogida) {
+    this.puntoDeRecogida = event;
+    // Actualiza los estilos de resaltado aquí si es necesario
+  } else if (!this.puntoDeEntrega && (this.puntoDeRecogida.row !== event.row || this.puntoDeRecogida.col !== event.col)) {
+    this.puntoDeEntrega = event;
+    // Actualiza los estilos de resaltado aquí si es necesario
   }
+}
 
-  getImagePath(id: string): string {
-    // Esta función debe devolver la ruta correcta para tus imágenes basadas en el ID
-    return `assets/${id}.png`;
-  }
+// Actualiza getImagePath para trabajar con las coordenadas
+getImagePath(block: {id: string, row: number, col: number}): string {
+  // Esta función debe devolver la ruta correcta para tus imágenes basadas en el ID
+  return `assets/${block.id}.png`;
+}
+
+  highlightedBlock: string | null = null; // Nuevo estado para el bloque resaltado
 
   resetSelection(): void {
     this.puntoDeRecogida = null;
@@ -39,7 +41,7 @@ export class CrearPedidoDialogComponent {
       this.resetSelection(); // Resetear selección tras confirmar el pedido
     }
   }
-  
+  /*
   highlightBlock(blockId: string): void {
     if (!this.puntoDeRecogida || (this.puntoDeRecogida && blockId !== this.puntoDeRecogida)) {
       this.highlightedBlock = blockId;
@@ -51,4 +53,5 @@ export class CrearPedidoDialogComponent {
       this.highlightedBlock = null;
     }
   }
+  */
 }

src/app/mapa/mapa.component.html

 <div class="map-container">
   <div *ngFor="let row of mapMatrix; let rowIndex = index" class="map-row">
     <div *ngFor="let blockId of row; let colIndex = index" class="map-block"
-         (click)="onBlockClick(blockId)"
-         (mouseover)="onBlockMouseOver(blockId)"
-         (mouseleave)="onBlockMouseLeave(blockId)"
-         [class.selected-pickup]="selectedPickupId === blockId"
-         [class.selected-delivery]="selectedDeliveryId === blockId">
-      <img [src]="'assets/' + getBlockImagePath(blockId)" [alt]="'Bloque ' + blockId">
-    </div>
+     (click)="onBlockClick(blockId, rowIndex, colIndex)"
+     (mouseover)="onBlockMouseOver(blockId)"
+     (mouseleave)="onBlockMouseLeave(blockId)"
+     [class.selected-pickup]="selectedPickupId === blockId"
+     [class.selected-delivery]="selectedDeliveryId === blockId">
+  <img [src]="'assets/' + getBlockImagePath(blockId)" [alt]="'Bloque ' + blockId">
+</div>
   </div>
 </div>

src/app/mapa/mapa.component.ts

@@ -8,7 +8,7 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core';
   styleUrls: ['./mapa.component.css']
 })
 export class MapaComponent implements OnInit {
-  @Output() blockSelected = new EventEmitter<string>(); // Emisor de eventos para la selección de un bloque
+  @Output() blockSelected = new EventEmitter<{id: string, row: number, col: number}>(); 
 
   mapMatrix: string[][] = [];
   mapStr: string = "0202000105030705000200041109060110031000000200080101100110000106010701";
@@ -31,16 +31,6 @@ export class MapaComponent implements OnInit {
   selectedPickupId: string | null = null;
   selectedDeliveryId: string | null = null;
 
-  // Añade métodos para manejar el evento click
-  selectPickup(blockId: string): void {
-    this.selectedPickupId = blockId;
-    this.blockSelected.emit(blockId);
-  }
-
-  selectDelivery(blockId: string): void {
-    this.selectedDeliveryId = blockId;
-    this.blockSelected.emit(blockId);
-  }
   onBlockMouseOver(blockId: string): void {
     // Esta función será llamada cuando el mouse pase por encima de un bloque
     this.blockHovered.emit(blockId);
@@ -51,15 +41,9 @@ export class MapaComponent implements OnInit {
     this.blockUnhovered.emit(blockId);
   }
 
-  onBlockClick(blockId: string): void {
-    // Esta función será llamada cuando se haga clic en un bloque
-    if (!this.selectedPickupId) {
-      this.selectedPickupId = blockId;
-      this.selectedDeliveryId = null; // Resetea la selección de entrega si es que se hace clic en otro bloque para recogida
-    } else if (!this.selectedDeliveryId && this.selectedPickupId !== blockId) {
-      this.selectedDeliveryId = blockId;
-    }
-    this.blockSelected.emit(blockId);
+  onBlockClick(blockId: string, row: number, col: number): void {
+    // Emitir también la fila y la columna
+    this.blockSelected.emit({id: blockId, row, col});
   }
 }