How to resolve correctly my promise (React)

Question

When I click some "ficha" the promise is resolved correctly but when I click some other element in the DOM my event doesn't resolve. What I want is that when I click anything other than a token, the promise should end.

How can I resolve this?

The code:

import React from "react";
import { CardMovUser } from "../components/Cards/CardMovement";

const CardMovementContainer = ({
  movement,
  index,
  selectedCard,
  waitingForEvent,
  onCardClick,
  onEventComplete,
  isMyTurn
}) => {

  const handleClick = () => {
    if (!isMyTurn) return; 

    console.log("Clicked card", index);
    onCardClick(index);

    // Solo iniciar el evento de espera si `waitingForEvent` no está activo.
    if (!waitingForEvent) {
      waitForEvent("click", "[data-ficha-id]").then(() => {
        console.log("Ficha clicked OAAAAAAA");
        onEventComplete();
      });
    }
  };

  const waitForEvent = (eventType, selector) => {
    return new Promise((resolve) => {
      const handler = (event) => {
        console.log("Evento detectado en:", event.target); 
        const fichaElement = event.target.closest(selector);  selector
  
        if (fichaElement) {
          console.log("Ficha seleccionada: ", fichaElement); 
          document.removeEventListener(eventType, handler); 
          console.log("Evento removido");
          resolve();
        } 
      };
  
      console.log(`Añadiendo listener para ${eventType} en elementos que coincidan con ${selector}`);
      document.addEventListener(eventType, handler);
    });
  };

  return (
    <CardMovUser
      img_url={movement.movimiento.img_url}
      movetype={movement.movimiento.movement}
      handleClick={handleClick}
      clicked={selectedCard === index}
    />
  );
};

export default CardMovementContainer;

I'm trying to add an else statement, but when I click the card that triggers the event and the promise, this automatically ends the promise when it detects that I clicked something that was not a "ficha".

Answer 1

I want that when I click anything other than a token, the promise ends

Then don't wait for the first event on a target that matches a specific specific selector, just wait for the first click event across-the-board and then decide whether it matched your target or not.

const handleClick = async () => {
  …
  const event = await waitForFirstEvent("click");
  if (event.target.closest("[data-ficha-id]")) {
    console.log("Ficha clicked OAAAAAAA");
  } else {
    console.log("Something else clicked");
  }
  onEventComplete();
};

const waitForFirstEvent = (eventType) => {
  return new Promise(resolve => {
    document.addEventListener(eventType, resolve, { once: true });
  });
};