Batch fade-in/fade-out, for ~5 ms less FCP.

diff --git a/www/js/chessboard-0.3.0.js b/www/js/chessboard-0.3.0.js
index 78be27c3b3141f00ade445a226b0849a68deed0d..cbd46f4f4f064f0ac67620b7bdd93c4842635af7 100644 (file)
--- a/www/js/chessboard-0.3.0.js
+++ b/www/js/chessboard-0.3.0.js
@@ -768,25 +768,33 @@ function animateSparePieceToSquare(piece, dest, completeFn) {
   //$(animatedPieceEl).animate(destOffset, opts);
 }
 
-function fadeIn(piece, onFinish) {
-  piece.style.opacity = 0;
-  piece.style.display = null;
-  piece.addEventListener('transitionend', onFinish, {once: true});
+function fadeIn(pieces, onFinish) {
+  pieces.forEach((piece) => {
+    piece.style.opacity = 0;
+    piece.style.display = null;
+    piece.addEventListener('transitionend', onFinish, {once: true});
+  });
   requestAnimationFrame(() => {
-    piece.style.transitionProperty = 'opacity';
-    piece.style.transitionDuration = cfg.appearSpeed + 'ms';
-    piece.style.opacity = 1;
+    pieces.forEach((piece) => {
+      piece.style.transitionProperty = 'opacity';
+      piece.style.transitionDuration = cfg.appearSpeed + 'ms';
+      piece.style.opacity = 1;
+    });
   });
 }
 
-function fadeOut(piece, onFinish) {
-  piece.style.opacity = 1;
-  piece.style.display = null;
-  piece.addEventListener('transitionend', onFinish, {once: true});
+function fadeOut(pieces, onFinish) {
+  pieces.forEach((piece) => {
+    piece.style.opacity = 1;
+    piece.style.display = null;
+    piece.addEventListener('transitionend', onFinish, {once: true});
+  });
   requestAnimationFrame(() => {
-    piece.style.transitionProperty = 'opacity';
-    piece.style.transitionDuration = cfg.trashSpeed + 'ms';
-    piece.style.opacity = 0;
+    pieces.forEach((piece) => {
+      piece.style.transitionProperty = 'opacity';
+      piece.style.transitionDuration = cfg.trashSpeed + 'ms';
+      piece.style.opacity = 0;
+    });
   });
 }
 
@@ -816,11 +824,14 @@ function doAnimations(a, oldPos, newPos) {
   }
 
   requestAnimationFrame(() => {  // Firefox workaround.
+    let fadeout_pieces = [];
+    let fadein_pieces = [];
+
     for (var i = 0; i < a.length; i++) {
       // clear a piece
       if (a[i].type === 'clear') {
         document.getElementById(SQUARE_ELS_IDS[a[i].square]).querySelectorAll('.' + CSS.piece).forEach(
-          (piece) => fadeOut(piece, onFinish)
+          (piece) => fadeout_pieces.push(piece)
         );
       }
 
@@ -829,7 +840,7 @@ function doAnimations(a, oldPos, newPos) {
         let square = document.getElementById(SQUARE_ELS_IDS[a[i].square]);
         square.append(buildPiece(a[i].piece, true));
         let piece = square.querySelector('.' + CSS.piece);
-        fadeIn(piece, onFinish);
+        fadein_pieces.push(piece);
       }
 
       // add a piece from a spare piece
@@ -843,6 +854,15 @@ function doAnimations(a, oldPos, newPos) {
           onFinish);
       }
     }
+
+    // TODO: Batch moves as well, not just fade in/out.
+    // (We batch them because requestAnimationFrame seemingly costs real time.)
+    if (fadeout_pieces.length > 0) {
+      fadeOut(fadeout_pieces, onFinish);
+    }
+    if (fadein_pieces.length > 0) {
+      fadeIn(fadein_pieces, onFinish);
+    }
   });
 }