This is the simpler thing to animate. All we need to do is to split Spider.dealMore():
Spider.prototype.dealMore = function ()
{ if (this.REMAINDER.length < 10) return;
for (const COL of GAME.COLUMNS)
{ if (COL.isEmpty ())
{ alert ("You cannot deal when\nthere are empty columns");
return;
} }
GAME.animData = {nDealt:0};
GAME.uiPaused = true;
dealMore2 ();
};
function dealMore2 ()
{ var ad = GAME.animData;
if (ad.nDealt < 10)
{ var card = GAME.game.REMAINDER.pop ();
card.reveal ();
GAME.COLUMNS [ad.nDealt].addCard (card);
ad.nDealt++;
GAME.game.draw ();
setTimeout (dealMore2, 250);//quarter second
}
else
{ recordDealInHistory ();
GAME.game.draw ();
GAME.uiPaused = false;
}
};
Notice that in the new function this has to be replaced by Game.game because the function is not not a method of Spider.
A very similar thing could be done for the initial deal but I think it is not necessary.