Javascript prompt vs custom prompt. (chessboardjs promotion)

Question

backstory: In chessboardjs you load the board with callback functions for specific events. Chess mechanic that gives me problem is the promotion. I need to hold my callback, prompt a user for a piece he wants to promote to, check if it is a valid move and return('snapback') or execute the move.

Stupid solution: If I prompt with classic

promoPiece = prompt();

everything works, but it looks kinda ugly.

Failed solution: But when I try to create a promise that attaches a callback to my overlay element, to get user click on specific piece I fail(i need to make function async to use promises). I try to get the piece as

async function onDrop(args)
{
  ..code..
  promoPiece = await promoPrompt();
  ..code..
  if(invalid())
  {return 'snapback'}
}

and the promotion mechanic works, but the return snapback statement does not work because now the promise is returned instead of a string and it is not accepted with the chessboardjs...(I assumed, I did not dig into source)

Question: 1)How does prompt differ from my solution? 2)How does it work? 3)How can i create a custom promotion handler for a synchronous callback? 4)Can i use promoPrompt.then(myResolve) syntax without making onDrop() async?

Answer 1

1. It is synchronous
2. Natively (i.e. the code is part of the browser and exposed as an API via the prompt function)
3. You can't (unless it is just a wrapper around prompt but then you get the native look and feel that you dislike)
4. Well, yes, but the value will won't be available until that future so you can't return it to the calling function

If you want a custom UI here, then the calling function needs to be able to handle it asynchronously.