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

[remoteglot] / www / js / chessboard-0.3.0.js

diff --git a/www/js/chessboard-0.3.0.js b/www/js/chessboard-0.3.0.js
index 2ad6f44c5b9215bc88b4a92b59d9e5b9604262ef..cbd46f4f4f064f0ac67620b7bdd93c4842635af7 100644 (file)
--- a/www/js/chessboard-0.3.0.js
+++ b/www/js/chessboard-0.3.0.js
@@ -641,23 +641,20 @@ function buildPieceImgSrc(piece) {
  * @param {!string=} id
  */
 function buildPiece(piece, hidden, id) {
-  var html = '<img src="' + buildPieceImgSrc(piece) + '" ';
+  let img = document.createElement('img');
+  img.src = buildPieceImgSrc(piece);
   if (id && typeof id === 'string') {
-    html += 'id="' + id + '" ';
+    img.setAttribute('id', id);
   }
-  html += 'alt="" ' +
-  'class="' + CSS.piece + '" ' +
-  'data-piece="' + piece + '" ' +
-  'style="width: ' + SQUARE_SIZE + 'px;' +
-  'height: ' + SQUARE_SIZE + 'px;';
+  img.setAttribute('alt', '');
+  img.classList.add(CSS.piece);
+  img.setAttribute('data-piece', piece);
+  img.style.width = SQUARE_SIZE + 'px';
+  img.style.height = SQUARE_SIZE + 'px';
   if (hidden === true) {
-    html += 'display:none;';
+    img.style.display = 'none';
   }
-  html += '" />';
-
-  let elem = document.createElement('template');
-  elem.innerHTML = html;
-  return elem.content;
+  return img;
 }
 
 function buildSparePieces(color) {
@@ -726,7 +723,7 @@ function animateSquareToSquare(src, dest, piece, completeFn) {
   // animate the piece to the destination square
   animatedPieceEl.addEventListener('transitionend', complete, {once: true});
   requestAnimationFrame(() => {
-    animatedPieceEl.style.transitionProperty = 'top left';
+    animatedPieceEl.style.transitionProperty = 'top, left';
     animatedPieceEl.style.transitionDuration = cfg.moveSpeed + 'ms';
     animatedPieceEl.style.top = destSquarePosition.top + 'px';
     animatedPieceEl.style.left = destSquarePosition.left + 'px';
@@ -768,28 +765,36 @@ function animateSparePieceToSquare(piece, dest, completeFn) {
     duration: cfg.moveSpeed,
     complete: complete
   };
-  $(animatedPieceEl).animate(destOffset, opts);
+  //$(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;
+    });
   });
 }
 
@@ -818,33 +823,47 @@ function doAnimations(a, oldPos, newPos) {
     }
   }
 
-  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)
-      );
-    }
+  requestAnimationFrame(() => {  // Firefox workaround.
+    let fadeout_pieces = [];
+    let fadein_pieces = [];
 
-    // add a piece (no spare pieces)
-    if (a[i].type === 'add' && cfg.sparePieces !== true) {
-      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);
-    }
+    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_pieces.push(piece)
+        );
+      }
+
+      // add a piece (no spare pieces)
+      if (a[i].type === 'add' && cfg.sparePieces !== true) {
+        let square = document.getElementById(SQUARE_ELS_IDS[a[i].square]);
+        square.append(buildPiece(a[i].piece, true));
+        let piece = square.querySelector('.' + CSS.piece);
+        fadein_pieces.push(piece);
+      }
+
+      // add a piece from a spare piece
+      if (a[i].type === 'add' && cfg.sparePieces === true) {
+        animateSparePieceToSquare(a[i].piece, a[i].square, onFinish);
+      }
 
-    // add a piece from a spare piece
-    if (a[i].type === 'add' && cfg.sparePieces === true) {
-      animateSparePieceToSquare(a[i].piece, a[i].square, onFinish);
+      // move a piece
+      if (a[i].type === 'move') {
+        animateSquareToSquare(a[i].source, a[i].destination, a[i].piece,
+          onFinish);
+      }
     }
 
-    // move a piece
-    if (a[i].type === 'move') {
-      animateSquareToSquare(a[i].source, a[i].destination, a[i].piece,
-        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);
+    }
+  });
 }
 
 // returns the distance between two squares
@@ -1118,7 +1137,7 @@ function snapbackDraggedPiece() {
   // animate the piece to the target square
   draggedPieceEl.addEventListener('transitionend', complete, {once: true});
   requestAnimationFrame(() => {
-    draggedPieceEl.style.transitionProperty = 'top left';
+    draggedPieceEl.style.transitionProperty = 'top, left';
     draggedPieceEl.style.transitionDuration = cfg.snapbackSpeed + 'ms';
     draggedPieceEl.style.top = sourceSquarePosition.top + 'px';
     draggedPieceEl.style.left = sourceSquarePosition.left + 'px';
@@ -1141,7 +1160,7 @@ function trashDraggedPiece() {
 
   // hide the dragged piece
   // FIXME: support this for non-jquery
-  $(draggedPieceEl).fadeOut(cfg.trashSpeed);
+  //$(draggedPieceEl).fadeOut(cfg.trashSpeed);
 
   // set state
   DRAGGING_A_PIECE = false;
@@ -1176,7 +1195,7 @@ function dropDraggedPieceOnSquare(square) {
   // snap the piece to the target square
   draggedPieceEl.addEventListener('transitionend', complete, {once: true});
   requestAnimationFrame(() => {
-    draggedPieceEl.style.transitionProperty = 'top left';
+    draggedPieceEl.style.transitionProperty = 'top, left';
     draggedPieceEl.style.transitionDuration = cfg.snapSpeed + 'ms';
     draggedPieceEl.style.top = targetSquarePosition.top + 'px';
     draggedPieceEl.style.left = targetSquarePosition.left + 'px';
@@ -1546,7 +1565,6 @@ function touchstartSquare(e) {
     return;
   }
 
-  e = e.originalEvent;
   beginDraggingPiece(square, CURRENT_POSITION[square],
     e.changedTouches[0].pageX, e.changedTouches[0].pageY);
 }
@@ -1574,7 +1592,6 @@ function touchstartSparePiece(e) {
 
   var piece = e.target.getAttribute('data-piece');
 
-  e = e.originalEvent;
   beginDraggingPiece('spare', piece,
     e.changedTouches[0].pageX, e.changedTouches[0].pageY);
 }
@@ -1593,8 +1610,8 @@ function touchmoveWindow(e) {
   // prevent screen from scrolling
   e.preventDefault();
 
-  updateDraggedPiece(e.originalEvent.changedTouches[0].pageX,
-    e.originalEvent.changedTouches[0].pageY);
+  updateDraggedPiece(e.changedTouches[0].pageX,
+    e.changedTouches[0].pageY);
 }
 
 function mouseupWindow(e) {
@@ -1612,8 +1629,8 @@ function touchendWindow(e) {
   if (DRAGGING_A_PIECE !== true) return;
 
   // get the location
-  var location = isXYOnSquare(e.originalEvent.changedTouches[0].pageX,
-    e.originalEvent.changedTouches[0].pageY);
+  var location = isXYOnSquare(e.changedTouches[0].pageX,
+    e.changedTouches[0].pageY);
 
   stopDraggedPiece(location);
 }