Cheaper createId().

[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 78be27c3b3141f00ade445a226b0849a68deed0d..477d778d7562ba81e6726159df84ae4d7548a777 100644 (file)
--- a/www/js/chessboard-0.3.0.js
+++ b/www/js/chessboard-0.3.0.js
@@ -243,8 +243,7 @@ var widget = {};
 // Stateful
 //------------------------------------------------------------------------------
 
-var ANIMATION_HAPPENING = false,
-  BOARD_BORDER_SIZE = 2,
+var BOARD_BORDER_SIZE = 2,
   CURRENT_ORIENTATION = 'white',
   CURRENT_POSITION = {},
   SQUARE_SIZE,
@@ -260,12 +259,9 @@ var ANIMATION_HAPPENING = false,
 // JS Util Functions
 //------------------------------------------------------------------------------
 
-// http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
+let id_counter = 0;
 function createId() {
-  return 'xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx'.replace(/x/g, function(c) {
-    var r = Math.random() * 16 | 0;
-    return r.toString(16);
-  });
+  return 'chesspiece-id-' + (id_counter++);
 }
 
 function deepCopy(thing) {
@@ -768,32 +764,38 @@ 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;
+    });
   });
 }
 
 // execute an array of animations
 function doAnimations(a, oldPos, newPos) {
-  ANIMATION_HAPPENING = true;
-
   var numFinished = 0;
   function onFinish(e) {
     if (e && e.target) {
@@ -806,7 +808,6 @@ function doAnimations(a, oldPos, newPos) {
     if (numFinished !== a.length) return;
 
     drawPositionInstant();
-    ANIMATION_HAPPENING = false;
 
     // run their onMoveEnd function
     if (cfg.hasOwnProperty('onMoveEnd') === true &&
@@ -816,11 +817,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 +833,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 +847,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);
+    }
   });
 }
 
@@ -863,55 +876,26 @@ function squareDistance(s1, s2) {
   return yDelta;
 }
 
-// returns an array of closest squares from square
-function createRadius(square) {
-  var squares = [];
-
-  // calculate distance of all squares
-  for (var i = 0; i < 8; i++) {
-    for (var j = 0; j < 8; j++) {
-      var s = COLUMNS[i] + (j + 1);
-
-      // skip the square we're starting from
-      if (square === s) continue;
-
-      squares.push({
-        square: s,
-        distance: squareDistance(square, s)
-      });
-    }
-  }
-
-  // sort by distance
-  squares.sort(function(a, b) {
-    return a.distance - b.distance;
-  });
-
-  // just return the square code
-  var squares2 = [];
-  for (var i = 0; i < squares.length; i++) {
-    squares2.push(squares[i].square);
-  }
-
-  return squares2;
-}
-
 // returns the square of the closest instance of piece
 // returns false if no instance of piece is found in position
 function findClosestPiece(position, piece, square) {
-  // create array of closest squares from square
-  var closestSquares = createRadius(square);
-
-  // search through the position in order of distance for the piece
-  for (var i = 0; i < closestSquares.length; i++) {
-    var s = closestSquares[i];
+  let best_square = false;
+  let best_dist = 1e9;
+  for (var i = 0; i < COLUMNS.length; i++) {
+    for (var j = 1; j <= 8; j++) {
+      let other_square = COLUMNS[i] + j;
 
-    if (position.hasOwnProperty(s) === true && position[s] === piece) {
-      return s;
+      if (position[other_square] === piece && square != other_square) {
+        let dist = squareDistance(square, other_square);
+        if (dist < best_dist) {
+          best_square = other_square;
+          best_dist = dist;
+        }
+      }
     }
   }
 
-  return false;
+  return best_square;
 }
 
 // calculate an array of animations that need to happen in order to get