+function animateSquareToSquare(moved_pieces, completeFn) {
+ let pieces = [];
+ for (const {source, destination, piece} of moved_pieces) {
+ // get information about the source and destination squares
+ let srcSquareEl = document.getElementById(SQUARE_ELS_IDS[source]);
+ let srcSquarePosition = offset(srcSquareEl);
+ let destSquareEl = document.getElementById(SQUARE_ELS_IDS[destination]);
+ let destSquarePosition = offset(destSquareEl);
+
+ // create the animated piece and absolutely position it
+ // over the source square
+ let animatedPieceId = createId();
+ document.body.append(buildPiece(piece, true, animatedPieceId));
+ let animatedPieceEl = document.getElementById(animatedPieceId);
+ animatedPieceEl.style.display = null;
+ animatedPieceEl.style.position = 'absolute';
+ animatedPieceEl.style.top = srcSquarePosition.top + 'px';
+ animatedPieceEl.style.left = srcSquarePosition.left + 'px';
+
+ // remove original piece(s) from source square
+ // TODO: multiple pieces should never really happen, but it will if we are moving
+ // while another animation still isn't done
+ srcSquareEl.querySelectorAll('.' + CSS.piece).forEach((piece) => piece.remove());
+
+ // on complete
+ let complete = function() {
+ // add the "real" piece to the destination square
+ destSquareEl.append(buildPiece(piece));
+
+ // remove the animated piece
+ animatedPieceEl.remove();
+
+ // run complete function
+ if (typeof completeFn === 'function') {
+ completeFn();
+ }
+ };