Handle streaming PGNs, like from Lichess (although this might break non-streaming...

[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 b58c589fb4394d4349c6f844faeb38108c8b853c..24aa3da618d25cf3a9d27456aa3f09d53e2c825a 100644 (file)
--- a/www/js/chessboard-0.3.0.js
+++ b/www/js/chessboard-0.3.0.js
@@ -550,57 +550,6 @@ function findSquarePosition(square) {
   };
 }
 
-function animateSquareToSquare(move_pieces, complete) {
-  for (const [piece, destination] of move_pieces) {
-    // Move it to the end of the stack, which changes the implicit z-index
-    // so that it will go on top of any pieces it's replacing.
-    piece.remove();
-    boardEl.appendChild(piece);
-
-    // animate the piece to the destination square
-    piece.addEventListener('transitionend', complete, {once: true});
-  }
-  requestAnimationFrame(() => {
-    for (const [piece, destination] of move_pieces) {
-      let destSquarePosition = findSquarePosition(destination);
-      piece.style.transitionProperty = 'top, left';
-      piece.style.transitionDuration = cfg.moveSpeed + 'ms';
-      piece.style.top = destSquarePosition.top;
-      piece.style.left = destSquarePosition.left;
-   }
-  });
-}
-
-function fadeIn(pieces, onFinish) {
-  pieces.forEach((piece) => {
-    piece.style.opacity = 0;
-    piece.style.display = null;
-    piece.addEventListener('transitionend', onFinish, {once: true});
-  });
-  requestAnimationFrame(() => {
-    pieces.forEach((piece) => {
-      piece.style.transitionProperty = 'opacity';
-      piece.style.transitionDuration = cfg.appearSpeed + 'ms';
-      piece.style.opacity = 1;
-    });
-  });
-}
-
-function fadeOut(pieces, onFinish) {
-  pieces.forEach((piece) => {
-    piece.style.opacity = 1;
-    piece.style.display = null;
-    piece.addEventListener('transitionend', onFinish, {once: true});
-  });
-  requestAnimationFrame(() => {
-    pieces.forEach((piece) => {
-      piece.style.transitionProperty = 'opacity';
-      piece.style.transitionDuration = cfg.trashSpeed + 'ms';
-      piece.style.opacity = 0;
-    });
-  });
-}
-
 // execute an array of animations
 function doAnimations(a, oldPos, newPos) {
   let fadeout_pieces = [];
@@ -658,39 +607,53 @@ function doAnimations(a, oldPos, newPos) {
   }
 
   var numFinished = 0;
-  function onFinish(e) {
-    if (e && e.target) {
-      e.target.transitionProperty = null;
-      e.target.transitionDuration = null;
-    }
-
-    numFinished++;
-
-    // exit if all the animations aren't finished
-    if (numFinished !== a.length) return;
-
-    for (let piece of removed_pieces) {
-      piece.remove();
-    }
+  function onFinish(e, opt_force) {
+    if (++numFinished === a.length) {
+      for (let piece of removed_pieces) {
+        piece.remove();
+      }
 
-    // run their onMoveEnd function
-    if (cfg.hasOwnProperty('onMoveEnd') &&
-      typeof cfg.onMoveEnd === 'function') {
-      cfg.onMoveEnd(deepCopy(oldPos), deepCopy(newPos));
+      // run their onMoveEnd function
+      if (cfg.hasOwnProperty('onMoveEnd') &&
+        typeof cfg.onMoveEnd === 'function') {
+        cfg.onMoveEnd(deepCopy(oldPos), deepCopy(newPos));
+      }
     }
   }
 
-  requestAnimationFrame(() => {  // Firefox workaround.
-    if (fadeout_pieces.length > 0) {
-      fadeOut(fadeout_pieces, onFinish);
-    }
-    if (fadein_pieces.length > 0) {
-      fadeIn(fadein_pieces, onFinish);
-    }
-    if (move_pieces.length > 0) {
-      animateSquareToSquare(move_pieces, onFinish);
-    }
+  fadein_pieces.forEach((piece) => {
+    piece.style.display = null;
+    piece.style.opacity = 1;
+    piece.animate(
+      [ { opacity: 0 }, { opacity: 1 } ],
+      { duration: cfg.appearSpeed }
+    ).addEventListener('finish', onFinish);
+  });
+  fadeout_pieces.forEach((piece) => {
+    piece.style.display = null;
+    piece.style.opacity = 0;
+    piece.animate(
+      [ { opacity: 1 }, { opacity: 0 } ],
+      { duration: cfg.trashSpeed }
+    ).addEventListener('finish', onFinish);
   });
+  for (const [piece, destination] of move_pieces) {
+    // Move it to the end of the stack, which changes the implicit z-index
+    // so that it will go on top of any pieces it's replacing.
+    piece.remove();
+    boardEl.appendChild(piece);
+
+    let destSquarePosition = findSquarePosition(destination);
+    piece.animate(
+      [
+        { top: piece.style.top, left: piece.style.left },
+        { top: destSquarePosition.top, left: destSquarePosition.left }
+      ],
+      { duration: cfg.moveSpeed }
+    ).addEventListener('finish', onFinish);
+    piece.style.top = destSquarePosition.top;
+    piece.style.left = destSquarePosition.left;
+  }
 }
 
 // returns the distance between two squares
@@ -893,13 +856,15 @@ function snapbackDraggedPiece() {
   var sourceSquarePosition = findSquarePosition(DRAGGED_PIECE_SOURCE);
 
   // animate the piece to the target square
-  DRAGGED_PIECE.addEventListener('transitionend', complete, {once: true});
-  requestAnimationFrame(() => {
-    DRAGGED_PIECE.style.transitionProperty = 'top, left';
-    DRAGGED_PIECE.style.transitionDuration = cfg.snapbackSpeed + 'ms';
-    DRAGGED_PIECE.style.top = sourceSquarePosition.top;
-    DRAGGED_PIECE.style.left = sourceSquarePosition.left;
-  });
+  DRAGGED_PIECE.animate(
+    [
+      { top: DRAGGED_PIECE.style.top, left: DRAGGED_PIECE.style.left },
+      { top: sourceSquarePosition.top, left: sourceSquarePosition.left }
+    ],
+    { duration: cfg.snapbackSpeed }
+  ).addEventListener('finish', complete);
+  DRAGGED_PIECE.style.top = sourceSquarePosition.top;
+  DRAGGED_PIECE.style.left = sourceSquarePosition.left;
 
   // set state
   DRAGGING_A_PIECE = false;
@@ -944,13 +909,15 @@ function dropDraggedPieceOnSquare(square) {
   };
 
   // snap the piece to the target square
-  DRAGGED_PIECE.addEventListener('transitionend', complete, {once: true});
-  requestAnimationFrame(() => {
-    DRAGGED_PIECE.style.transitionProperty = 'top, left';
-    DRAGGED_PIECE.style.transitionDuration = cfg.snapSpeed + 'ms';
-    DRAGGED_PIECE.style.top = targetSquarePosition.top;
-    DRAGGED_PIECE.style.left = targetSquarePosition.left;
-  });
+  DRAGGED_PIECE.animate(
+    [
+      { top: DRAGGED_PIECE.style.top, left: DRAGGED_PIECE.style.left },
+      { top: targetSquarePosition.top, left: targetSquarePosition.left }
+    ],
+    { duration: cfg.snapSpeed }
+  ).addEventListener('finish', complete);
+  DRAGGED_PIECE.style.top = targetSquarePosition.top;
+  DRAGGED_PIECE.style.left = targetSquarePosition.left;
 }
 
 function beginDraggingPiece(source, piece, x, y) {
@@ -967,8 +934,6 @@ function beginDraggingPiece(source, piece, x, y) {
   DRAGGED_PIECE = PIECE_ON_SQUARE[source];
   DRAGGED_PIECE_SOURCE = source;
   DRAGGED_PIECE_LOCATION = source;
-  DRAGGED_PIECE.style.transitionProperty = null;
-  DRAGGED_PIECE.style.transitionDuration = null;
 
   // Move it to the end of the stack, which changes the implicit z-index
   // so that it will go on top of any pieces it's replacing.
@@ -1258,7 +1223,7 @@ function mousedownSquare(e) {
   }
 
   // do nothing if we're not draggable
-  if (cfg.draggable) return;
+  if (!cfg.draggable) return;
 
   beginDraggingPiece(square, CURRENT_POSITION[square], e.pageX, e.pageY);
 }
@@ -1270,7 +1235,7 @@ function touchstartSquare(e) {
   }
 
   // do nothing if we're not draggable
-  if (cfg.draggable) return;
+  if (!cfg.draggable) return;
 
   var square = target.getAttribute('data-square');
 
@@ -1313,10 +1278,6 @@ function touchendWindow(e) {
   // do nothing if we are not dragging a piece
   if (!DRAGGING_A_PIECE) return;
 
-  // get the location
-  var location = isXYOnSquare(e.changedTouches[0].pageX,
-    e.changedTouches[0].pageY);
-
   stopDraggedPiece(findSquareFromEvent(e.changedTouches[0].pageX,
     e.changedTouches[0].pageY));
 }