First disclaimer: I am still extremely new to Typescript/javascript/front-end development
Background: I have a set of images (which represent a hand of cards). When it is the AI's turn to play a card, I am trying to show a simulation of "thinking" instead of immediately playing the card. My simulation is to iterate through the hand of cards and "select" each one (by "select", I mean move the image slightly to the left and then back to the right).
I am using Visual Studio Code and I am debugging in Chrome. My current code is below. The premise is that an API call is made (which is really where the AI logic is performed). Then the presentation iterates through the hand of cards and for each one it waits 1/4 second, shifts the card to the left, waits another 1/4 second, and shifts the card back to the right. After all cards have been "selected", then the actual card is played. I currently have everything in callback functions to keep it synchronous, but I'm not sure that I even need to do that.
// Call in to the API, which will perform the AI logic
// The API will return a slot that was played, which contains the card placed into that slot
opponentTurn(callback)
{
this.boardService.opponentTurn()
.subscribe(
cardPlayed =>
{
// Set the card played
let cardData = [];
cardData = JSON.parse(cardPlayed.toString());
// To add a slight hint of "thinking", let's "select" (slightly move the card to the left) each card down, up, and back down to the card that the API selected
this.selectCard(function(_thisagain) {
// Done
// Now simulate the move
_thisagain.dragService.simulateDragDrop(cardData);
});
callback(this);
}
);
}
// Call this to "select" a card; used by the AI "thinking" simulation
selectCard(callback)
{
for (var i = 0; i < this.players[1].cardHand.length; i++)
{
let imgObj = document.getElementById(this.players[1].name + i);
if (imgObj != null)
{
this.moveCard(imgObj, '400px', function(_thisagain) {
_thisagain.moveCard(imgObj, '350px', function() {
// Done
});
});
}
}
callback(this);
}
moveCard(imgObj, position, callback)
{
this.wait(250, function() {
imgObj.style.right = position;
});
callback(this);
}
wait(ms, callback)
{
var start = new Date().getTime();
var end = start;
while(end < start + ms)
{
end = new Date().getTime();
}
callback(this);
}
So the struggle I am having is that the code works, but only when I put a breakpoint on it. For example, if I put a breakpoint on the "_thisagain.moveCard(imgObj, '350px', function() {" line and then debug it, I can see each card shift to the left and back to the right as I would expect every time I 'Continue'. If I remove the breakpoint, the cards don't shift at all (yet I still get the wait before the card is played on the board).
Still being new to Typescript/javascript, I'm not really sure what is going on. It seems that when I have the breakpoint set, a redraw occurs to show the card shift. Without the breakpoint, it seems that no redraw is occurring. I'm not sure how to correct that, though, thus why I am here.
