From 53f07fa067c5616b90015e070ca1bda09be70f4e Mon Sep 17 00:00:00 2001
From: "Steinar H. Gunderson" <sgunderson@bigfoot.com>
Date: Sun, 25 Dec 2022 21:19:32 +0100
Subject: [PATCH] Batch fade-in/fade-out, for ~5 ms less FCP.

---
 www/js/chessboard-0.3.0.js | 52 ++++++++++++++++++++++++++------------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/www/js/chessboard-0.3.0.js b/www/js/chessboard-0.3.0.js
index 78be27c..cbd46f4 100644
--- 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);
+    }
   });
 }
 
-- 
2.39.2